/**
 * EU AI Labeling — front-end styles.
 *
 * Heavily namespaced (euail-*), no element selectors, no !important cascades
 * beyond what is needed to survive hostile themes. Positioning is driven by
 * CSS custom properties set inline per label (--euail-icon-size, etc.).
 */

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

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

/* The badge itself. */
.euail-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
	color: var(--euail-color, #000);
	font-size: var(--euail-text-size, 13px);
	font-family: inherit;
	font-weight: 600;
	vertical-align: middle;
}

.euail-badge__icon {
	height: var(--euail-icon-size, 36px);
	width: auto;
	flex: 0 0 auto;
	display: block;
}

.euail-badge__text {
	white-space: nowrap;
}

.euail-badge__link {
	text-decoration: none;
	color: inherit;
}

/* Overlay positioning (badge sits on the image). */
.euail-wrap--tl > .euail-badge,
.euail-wrap--tr > .euail-badge,
.euail-wrap--bl > .euail-badge,
.euail-wrap--br > .euail-badge,
.euail-wrap--tl > .euail-badge__link,
.euail-wrap--tr > .euail-badge__link,
.euail-wrap--bl > .euail-badge__link,
.euail-wrap--br > .euail-badge__link {
	position: absolute;
	z-index: 2147483000;
	padding: 5px 8px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
	backdrop-filter: saturate(140%) blur(2px);
	-webkit-backdrop-filter: saturate(140%) blur(2px);
	max-width: calc(100% - 12px);
	box-sizing: border-box;
}

.euail-wrap--tl > .euail-badge,
.euail-wrap--tl > .euail-badge__link { top: 6px; left: 6px; }

.euail-wrap--tr > .euail-badge,
.euail-wrap--tr > .euail-badge__link { top: 6px; right: 6px; }

.euail-wrap--bl > .euail-badge,
.euail-wrap--bl > .euail-badge__link { bottom: 6px; left: 6px; }

.euail-wrap--br > .euail-badge,
.euail-wrap--br > .euail-badge__link { bottom: 6px; right: 6px; }

/*
 * Enforce the configured icon/text colour with !important so a theme that sets
 * a text colour on its media containers (common: white) cannot turn our
 * currentColor-based icons invisible. Only the bundled EU-style recreations use
 * currentColor; the official EU icons carry their own baked colours and are
 * unaffected.
 */
.euail-wrap .euail-badge,
.euail-wrap .euail-badge__icon,
.euail-wrap .euail-badge__text,
.euail-wrap .euail-badge__link {
	color: var(--euail-color, #000) !important;
}

/* Below-image placement. */
.euail-wrap--below {
	line-height: normal;
}

.euail-wrap--below > img {
	display: block;
}

.euail-wrap--below > .euail-badge,
.euail-wrap--below > .euail-badge__link {
	display: inline-flex;
	margin-top: 6px;
}

.euail-wrap--below > .euail-badge__link > .euail-badge {
	margin-top: 0;
}

/*
 * Theme-agnostic positioning.
 *
 * CSS alone cannot overlay the badge correctly on every theme, because themes
 * position images in wildly different ways (in-flow, absolute-fill inside a
 * padding-ratio container, transforms, …). The corner rules above are a
 * best-effort fallback; the bundled front.js then measures each image's real
 * rendered box and pins the badge to the chosen corner precisely — on any
 * theme or page builder. The `.euail-js-pinned` class is added by that script
 * once it has positioned a badge, so we can drop the CSS fallback offsets and
 * avoid a double offset.
 */
.euail-badge.euail-js-pinned,
.euail-badge__link.euail-js-pinned {
	inset: auto;
}

/* Respect reduced-motion / print. */
@media print {
	.euail-badge { color: #000 !important; }
}