/**
 * Frontend AI disclosure badge.
 *
 * A soft pill that sits on the image without fighting it: rounded, slightly
 * translucent, with the icon and text on one baseline. Three looks are
 * available — glass (default), solid (maximum contrast) and outline.
 *
 * The markup uses custom elements (euail-wrap, euail-badge, euail-icon,
 * euail-text, euail-sr) rather than span or div. A div would close the
 * surrounding <p> of a content image, and no theme or page-builder rule
 * accidentally styles a tag nobody else uses. Custom elements come with no
 * browser default styling, so the wrapper and the pill set their display
 * here; icon and text are flex items and get their box from the pill.
 */

.euail-ai-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%; 
	line-height: 0;
	vertical-align: middle;
}

.euail-ai-wrap img {
	max-width: 100%;
	height: auto;
}

/* --- Pill --------------------------------------------------------------- */

.euail-ai-badge {
	--euail-radius: 999px;

	/* Everything inside the pill is em-based, so the font size is the single
	   knob for how big the badge is. The script overrides it per image with a
	   percentage of that image's rendered width — this value is the fallback
	   for the moment before it runs, and for when it cannot run at all. */
	--euail-size: clamp(0.62rem, 0.56rem + 0.2vw, 0.74rem);

	/* In em, so the distance to the edge shrinks with the badge instead of
	   leaving a small pill floating in a large margin. */
	--euail-inset: 0.62em;

	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 0.42em;
	max-width: calc(100% - 1.2em);
	box-sizing: border-box;
	padding: 0.38em 0.78em 0.4em;
	border-radius: var(--euail-radius);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--euail-size);
	font-weight: 600;
	font-style: normal;
	line-height: 1.25;
	letter-spacing: 0.005em;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	pointer-events: none;
}

.euail-ai-badge__text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.euail-ai-badge__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.05em;
	height: 1.05em;
	margin-inline-start: -0.1em;
}

.euail-ai-badge__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* --- Look: glass (default) ---------------------------------------------- */

.euail-badge--glass {
	border: 1px solid rgba(255, 255, 255, 0.32);
	background: rgba(22, 24, 38, 0.55);
	color: #fff;
	box-shadow:
		0 2px 12px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
}

/* Browsers without backdrop-filter get a more opaque pill so the text stays
   readable on light images. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.euail-badge--glass {
		background: rgba(22, 24, 38, 0.82);
	}
}

/* --- Look: solid (high contrast, for strict disclosure) ------------------ */

.euail-badge--solid {
	border: 2px solid #111;
	background: #fff200;
	color: #111;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
	font-weight: 700;
}

/* --- Look: outline ------------------------------------------------------ */

.euail-badge--outline {
	border: 1px solid rgba(17, 17, 17, 0.75);
	background: rgba(255, 255, 255, 0.9);
	color: #111;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* --- Position -----------------------------------------------------------
 *
 * A full 3 x 3 grid. The middle row and column matter for images that get
 * cropped in the layout — a cover-fitted or square-cropped thumbnail loses its
 * corners first, and with them a corner badge, while the middle of the picture
 * always survives.
 *
 * Centring is done with auto margins against opposite offsets, not with
 * transform: the entry animation below animates transform, and a translate()
 * used for centring would be wiped the moment that animation reaches its end
 * state — dropping the badge back into the corner.
 */

.euail-pos-top-left {
	top: var(--euail-inset);
	left: var(--euail-inset);
}

.euail-pos-top-center {
	top: var(--euail-inset);
	right: var(--euail-inset);
	left: var(--euail-inset);
	width: fit-content;
	margin-right: auto;
	margin-left: auto;
}

.euail-pos-top-right {
	top: var(--euail-inset);
	right: var(--euail-inset);
}

.euail-pos-center-left {
	top: var(--euail-inset);
	bottom: var(--euail-inset);
	left: var(--euail-inset);
	height: fit-content;
	margin-top: auto;
	margin-bottom: auto;
}

.euail-pos-center {
	top: var(--euail-inset);
	right: var(--euail-inset);
	bottom: var(--euail-inset);
	left: var(--euail-inset);
	width: fit-content;
	height: fit-content;
	margin: auto;
}

.euail-pos-center-right {
	top: var(--euail-inset);
	right: var(--euail-inset);
	bottom: var(--euail-inset);
	height: fit-content;
	margin-top: auto;
	margin-bottom: auto;
}

.euail-pos-bottom-left {
	bottom: var(--euail-inset);
	left: var(--euail-inset);
}

.euail-pos-bottom-center {
	right: var(--euail-inset);
	bottom: var(--euail-inset);
	left: var(--euail-inset);
	width: fit-content;
	margin-right: auto;
	margin-left: auto;
}

.euail-pos-bottom-right {
	bottom: var(--euail-inset);
	right: var(--euail-inset);
}

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.euail-ai-badge {
		animation: euail-badge-in 0.35s cubic-bezier(0.2, 0.8, 0.3, 1) both;
	}

	@keyframes euail-badge-in {
		from {
			opacity: 0;
			transform: translateY(0.25rem);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* --- CSS background images ----------------------------------------------
 *
 * A builder that paints a picture as a CSS background gives us no image
 * element to wrap, so the badge is placed inside the element carrying the
 * background. The script adds this class and, only where the host is still
 * statically positioned, the positioning context the badge needs.
 */

.euail-ai-bg--relative {
	position: relative;
}

/* --- Accessibility ------------------------------------------------------ */

.euail-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (forced-colors: active) {
	.euail-ai-badge {
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
		text-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 480px) {
	.euail-ai-badge {
		--euail-inset: 0.4rem;

		padding: 0.34em 0.7em 0.36em;
	}
}