/**
 * EU AI Label badge styles.
 *
 * Fixed, accessibility-first styling (no user customization):
 *  - Always visible on first exposure — no hover/focus/click reveal.
 *  - Opaque background so text contrast is guaranteed over ANY photo
 *    (#ffffff on #1d1d1b ≈ 16.8:1, well above WCAG 1.4.3 AA 4.5:1).
 *  - A light hairline border + drop shadow give the badge edge contrast
 *    against both light and dark images (WCAG 1.4.11 non-text contrast).
 *  - Font size fixed at 13px (≥ the 12px mobile-readability floor).
 *  - Pill shape, #1d1d1b fill, and uppercase label mirror the EU
 *    standardized AI labels; unlike the flat EU SVGs the opaque fill keeps
 *    it legible on any image, and the text stays localized via .mo.
 *  - Positioned bottom-left to stay clear of top-corner sale badges and
 *    mid-edge / bottom-center carousel controls.
 */

.eu-ai-label-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin: 0;
	line-height: 0;
}

.eu-ai-label-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Elementor Posts/Archive Posts ratio cards absolutely position the featured
   image inside .elementor-post__thumbnail. Without this compatibility layer,
   inserting our wrapper creates a zero-size positioning context: the image
   disappears and the badge is clipped against the card's top edge. Fill the
   existing ratio box so Elementor's own descendant image rules keep working
   unchanged, including fit-height and hover-zoom variants. */
.elementor-post__thumbnail > .eu-ai-label-wrap {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.eu-ai-label-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	max-width: calc(100% - 16px);
	padding: 4px 11px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	/* Fully-rounded pill to match the EU standardized labels. */
	border-radius: 999px;
	background: #1d1d1b;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	color: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	/* Uppercase mirrors the EU label wordmark; display-only, so the
	   underlying aria-label / .mo text stays sentence case for screen
	   readers and non-Latin scripts are unaffected. */
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	/* Allow wrapping so the disclosure text is never clipped or truncated. */
	white-space: normal;
	/* Always visible: no hover/focus reveal, no fade. */
	visibility: visible;
	opacity: 1;
	/* Purely informational overlay — never intercept clicks on the image. */
	pointer-events: none;
}

.eu-ai-label-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.42em;
	font-size: 1.05em;
	line-height: 1;
}

/* Elementor background images have no <img> node to provide a positioning
   context. JS adds this class only when Elementor left the wrapper static. */
.eu-ai-label-background-wrap--relative {
	position: relative;
}

/* Undisclosed-details variant: a compact "AI" circle rather than a text pill.
   Used when the editor discloses AI involvement but not what was changed.
   The two-class selector outranks the base .eu-ai-label-badge declarations. */
.eu-ai-label-badge.eu-ai-label--ai_undisclosed {
	justify-content: center;
	width: 34px;
	height: 34px;
	max-width: none;
	padding: 0;
	/* Perfect circle instead of the rounded pill. */
	border-radius: 50%;
	letter-spacing: 0.02em;
	/* Two glyphs never wrap; keep them centered on one line. */
	white-space: nowrap;
}

/* Position: bottom-left keeps clear of sale badges and carousel controls. */
.eu-ai-label-pos--bottom-left .eu-ai-label-badge {
	bottom: 8px;
	left: 8px;
}

.eu-ai-label-pos--bottom-right .eu-ai-label-badge {
	right: 8px;
	bottom: 8px;
}

.eu-ai-label-pos--top-left .eu-ai-label-badge {
	top: 8px;
	left: 8px;
}

.eu-ai-label-pos--top-right .eu-ai-label-badge {
	top: 8px;
	right: 8px;
}

/* Respect users who prefer higher contrast: drop the translucent border. */
@media (prefers-contrast: more) {
	.eu-ai-label-badge {
		border-color: #ffffff;
	}
}