/**
 * Variant CSS: video--fullwidth-cover-cta
 * Layer 2 — Path B video role (2026-05-29).
 * Full-width cover poster with a dark scrim; centred play button + headline + CTA
 * overlaid. Text always reads on the dark scrim → uses --text-on-dark (never
 * --bg-main as foreground). Pure-CSS play triangle, no autoplay / no JS.
 * Every selector scoped to .universal-video--fullwidth-cover-cta (no global leak).
 */

body.aibt-universal .universal-video--fullwidth-cover-cta {
	background: var(--background-dark);
	color: var(--text-on-dark);
	padding-inline: 0 !important;
	padding-block: 0 !important;
}

/* Stage = positioning context for poster + overlay. */
body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__stage {
	position: relative;
	width: 100%;
	min-height: clamp(420px, 70vh, 720px);
	overflow: hidden;
	display: flex;
}

/* Poster fills the stage; sits behind the overlay. */
body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__poster-img {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	width: 100%;
	height: 100%;
	z-index: 0;
}

body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__poster-img img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto !important;
	object-fit: cover;
	filter: var(--photo-filter, none);
}

/* Dark scrim so overlaid white text is always legible on any poster.
   Two stacked layers: a vertical gradient for cinematic depth + a radial pool
   weighted toward the vertical centre, where the headline/CTA sit. The radial
   pool guarantees the text bed stays dark even if the poster is bright exactly
   behind the copy (a plain top-to-bottom gradient would not). Fixed rgba — this
   sits on a PHOTO, not a theme surface. */
body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 78% at 50% 52%, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.34) 45%, rgba(0, 0, 0, 0.60) 100%);
	z-index: 1;
	pointer-events: none;
}

/* Overlay content centred over the poster. */
body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__overlay {
	position: relative;
	z-index: 2;
	margin-inline: auto !important;
	width: 100%;
	padding-block: var(--space-3xl);
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
	text-align: center;
	align-self: center;
}

body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__overlay .has-text-align-center {
	margin-inline: auto !important;
}

/* Circular play button, centred above the headline.
   Fill stays --accent for theme coherence, but the EDGE guarantee is
   theme-independent: a crisp white inner ring keeps the disc visible on dark
   or mid photos, while the outer dark halo keeps a light accent (e.g. lime)
   from dissolving into a bright poster. These rgba layers sit on a PHOTO, not
   a theme surface — fixed values are the correct text-on-photo pattern. */
body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__play {
	position: relative !important;
	width: clamp(72px, 8vw, 100px);
	height: clamp(72px, 8vw, 100px);
	border-radius: 50%;
	background: var(--accent);
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.55),
		0 0 0 4px rgba(0, 0, 0, 0.16),
		0 12px 36px rgba(0, 0, 0, 0.45);
	margin: 0 auto var(--space-lg) auto !important;
	transition: transform var(--duration-fast) var(--ease-default, ease);
}

/* Play triangle drawn purely in CSS (clip-path), centred in the circle. */
body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	width: 32%;
	height: 36%;
	background: var(--cta-text-primary, var(--text-on-dark, #FFFFFF));
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__play:hover {
	transform: scale(1.08);
}

body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--text-on-dark) !important;
	opacity: 0.82;
	margin: 0 auto var(--space-sm) auto !important;
}

body.aibt-universal .universal-video--fullwidth-cover-cta h2.universal-video__headline,
body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__headline {
	font-family: var(--font-display) !important;
	color: var(--text-on-dark) !important;
	margin: 0 auto var(--space-md) auto !important;
	max-width: 18ch;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__headline em {
	color: var(--accent) !important;
	font-style: italic;
}

body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__body {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-on-dark) !important;
	opacity: 0.9;
	margin: 0 auto var(--space-lg) auto !important;
	max-width: 52ch;
}

body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__cta a {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	background: var(--cta-bg-primary, var(--accent)) !important;
	color: var(--cta-text-primary) !important;
	border: 1px solid var(--cta-border-primary, var(--cta-bg-primary, var(--accent))) !important;
	padding: var(--space-sm) var(--space-lg) !important;
	transition: background var(--duration-fast) ease;
}

body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__cta a:hover {
	background: var(--accent-hover, var(--accent)) !important;
}

/* Keyboard focus ring (a11y): white ring on the dark overlay guarantees a
   visible focus on any poster (an accent outline could dissolve on a bright frame). */
body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__cta a:focus-visible {
	outline: 2px solid var(--text-on-dark, #FFFFFF);
	outline-offset: 2px;
	border-radius: inherit;
}

@media (max-width: 781px) {
	body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__stage {
		min-height: clamp(380px, 78vh, 560px);
	}
	body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__headline {
		max-width: 100%;
	}
}

/* Tighten the wide kicker tracking on small screens so it never wraps awkwardly. */
@media (max-width: 640px) {
	body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__kicker {
		letter-spacing: var(--tracking-wider) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__play,
	body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__cta a {
		transition: none;
	}
	body.aibt-universal .universal-video--fullwidth-cover-cta .universal-video__play:hover {
		transform: none;
	}
}