/**
 * Variant CSS: hero--panoramic-strip-headline-over
 * Layer 2 — Variants Library (Path B Recipes architecture).
 *
 * Concept: an ULTRA-WIDE panoramic photo strip (21:9 letterbox) is the hook, with
 *   the large display H1 OVERLAID on the strip — centered, light text on a gradient
 *   scrim baked into the strip so it is always legible regardless of which photo the
 *   recipe pipeline swaps in. Reading order on the page surface:
 *     KICKER  — small accent label, centered, on --background (text only).
 *     STRIP   — relative box: real <img> panorama (recipe can override src) + a CSS
 *               gradient scrim (transparent → near-black) + the absolutely centered
 *               H1 riding on top in --on-dark (KI-020: on-dark is correct HERE only,
 *               the H1 sits on a dark photo scrim).
 *     DECK+CTA— below the strip, back on the page --background, in theme-audited
 *               --text-secondary / CTA tokens (NOT on-dark — they sit on the theme bg).
 *   Mobile — relax the 21:9 to ~16:9 so the H1 fits and stays readable; CTA goes
 *            full-width; no overflow.
 *
 * Distinct from hero--headline-top-photo-band-bottom: THERE the H1 is above the band
 * on the page surface and the CTA is glued to the band's edge (no headline overlay).
 * HERE the HEADLINE rides the panorama (light-on-scrim) and the CTA sits BELOW on the
 * theme bg. The overlaid-headline-on-panorama is the signature.
 *
 * AA strategy: the overlaid H1 is light text on a baked dark scrim (gradient hardcoded
 * rgba/color-mix ON the photo is allowed). The CTA is a SOLID filled button using the
 * theme-audited --cta-bg-primary / --cta-text-primary pair, so it clears AA on its own
 * fill. Kicker/deck sit on --background and use --accent / --text-secondary (all
 * theme-audited), so contrast is the theme's responsibility, never hardcoded.
 *
 * Centering rule (A8/A9): every centered child of the full-width constrained section
 * keeps horizontal margin:auto (margin-inline:auto) so it never sticks to the left edge.
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--panoramic-strip-headline-over
 * because the theme loads ALL variant CSS globally (role-level selectors leak).
 * Only @media / @keyframes are left unscoped.
 *
 * @package AI_Base_Theme
 * @since 2026-06-11 (Path B Variants Library)
 *
 * Default photo: photo-1486406146926-c627a92ad1ab — looking across glass skyscrapers
 * (downtown skyline, blue-grey premium architecture). Cinematic landscape that crops
 * cleanly to a 21:9 panoramic strip and suits architecture / real-estate / premium.
 * Pool alternatives: photo-1469474968028-56623f02e42e (mountain lake),
 * photo-1481833761820-0509d3217039 (open road), photo-1517248135467-4c7edcad34c4
 * (restaurant interior wide), photo-1600585154340-be6161a56a0c (modern home exterior).
 */

/* === Section shell ========================================================
   Editorial vertical rhythm on the page surface; inner blocks own their gutters,
   so neutralize the section padding-inline and set it on the children instead. */
body.aibt-universal .universal-hero--panoramic-strip-headline-over {
	position: relative;
	background: var(--background, #fff);
	color: var(--text-primary, #111);
	overflow: hidden;
	padding-block: calc(clamp(var(--space-7, 48px), 9vh, var(--space-9, 96px)) clamp(var(--space-7, 48px), 9vh, var(--space-9, 96px)) * var(--density, 1)) !important;
	padding-inline: 0 !important;
	border-bottom: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.08));
}

/* === Kicker — page surface, centered ====================================== */
body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__kicker {
	display: block;
	width: 100%;
	max-width: var(--max-wide, 1280px);
	margin: 0 auto var(--space-5, 24px) auto !important;
	padding-inline: clamp(var(--space-4, 16px), 5vw, var(--space-7, 48px));
	font-family: var(--font-body) !important;
	font-size: var(--text-xs, 12px) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.2em) !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	color: var(--accent, currentColor) !important;
}

/* === The panoramic strip ==================================================
   Full content width, relative so the H1 can ride over the photo. */
body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__strip {
	position: relative;
	width: 100%;
	max-width: var(--max-wide, 1280px);
	margin-inline: auto;
	padding-inline: clamp(var(--space-4, 16px), 5vw, var(--space-7, 48px));
}

/* The photo itself — recipe pipeline overrides the first <img src>. */
body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__photo {
	position: relative;
	margin: 0;
	width: 100%;
	border-radius: var(--decor-radius-photo, var(--decor-radius, 0));
	overflow: hidden;
	box-shadow: var(--decor-shadow, none);
	/* Subtle reveal so the strip "lands". */
	animation: aiss-hero-strip-rise var(--duration-slow, 500ms) var(--ease-expressive, ease) both;
}

body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__photo img {
	display: block;
	width: 100%;
	/* Ultra-wide panoramic letterbox — the signature of this variant. */
	aspect-ratio: 21 / 9;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* Scrim baked INTO the strip so the overlaid light H1 is always legible. Hardcoded
   rgba/color-mix is allowed ONLY here (a scrim ON the photo, not a theme surface).
   Darkest at the centre band where the headline rides. */
body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		linear-gradient(180deg,
			transparent 0%,
			color-mix(in srgb, #000 55%, transparent) 52%,
			color-mix(in srgb, #000 50%, transparent) 100%);
	pointer-events: none;
}

/* === The overlaid headline — rides the panorama, light on the scrim =======
   Absolutely centred over the strip. --on-dark is correct HERE (sits on the dark
   photo scrim, not a theme surface). */
body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__headline {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-inline: clamp(var(--space-5, 24px), 7vw, var(--space-9, 96px));
	font-family: var(--font-display) !important;
	color: var(--on-dark, #fff) !important;
	max-width: 100%;
	text-align: center;
	text-wrap: balance;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__headline em {
	font-style: italic;
	color: color-mix(in srgb, var(--accent) 70%, #fff);
	font-weight: inherit;
}

/* === Below the strip — deck + CTA on the page surface ===================== */
body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__deck {
	width: 100%;
	max-width: 56ch;
	margin: clamp(var(--space-6, 32px), 5vh, var(--space-7, 48px)) auto 0 auto !important;
	padding-inline: clamp(var(--space-4, 16px), 5vw, var(--space-7, 48px));
	font-family: var(--font-body) !important;
	font-size: var(--text-lg, 20px) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--text-secondary, #555) !important;
	text-align: center;
}

/* The ONE primary CTA — centred below the deck, solid fill = self-contained AA. */
body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__actions {
	margin: clamp(var(--space-5, 24px), 4vh, var(--space-6, 32px)) auto 0 auto;
	padding-inline: clamp(var(--space-4, 16px), 5vw, var(--space-7, 48px));
}

body.aibt-universal .universal-hero--panoramic-strip-headline-over .wp-block-button.universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base, 16px);
	letter-spacing: var(--tracking-wide, 0.02em);
	padding: 1.15rem 2.6rem;
	color: var(--cta-text-primary, #fff);
	background: var(--cta-bg-primary, var(--text-primary, #111));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--cta-bg-primary, var(--text-primary, #111)));
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	box-shadow: var(--decor-shadow-elevated, none);
	transition:
		background var(--duration-fast, 150ms) var(--ease-standard, ease),
		border-color var(--duration-fast, 150ms) var(--ease-standard, ease),
		transform var(--duration-fast, 150ms) var(--ease-standard, ease);
}

body.aibt-universal .universal-hero--panoramic-strip-headline-over .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent, currentColor));
	border-color: var(--accent-hover, var(--accent, currentColor));
	color: var(--on-accent, #fff);
	transform: translateY(-2px);
}

body.aibt-universal .universal-hero--panoramic-strip-headline-over .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent, currentColor);
	outline-offset: var(--focus-offset, 4px);
}

/* === Tablet =============================================================== */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--panoramic-strip-headline-over {
		padding-block: calc(clamp(var(--space-6, 32px), 7vh, var(--space-8, 64px)) clamp(var(--space-6, 32px), 7vh, var(--space-8, 64px)) * var(--density, 1)) !important;
	}

	body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__headline {
		font-size: clamp(2.2rem, 7.5vw, 3.75rem) !important;
	}

	body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__photo img {
		/* Slightly taller crop on tablet so the H1 has room. */
		aspect-ratio: 16 / 9;
	}
}

/* === Mobile ===============================================================
   Relax the 21:9 to ~16:9 so the H1 fits and stays readable; CTA full-width. */
@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__kicker {
		letter-spacing: 0.08em !important;
	}

	body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__headline {
		font-size: clamp(1.9rem, 8.5vw, 2.75rem) !important;
		letter-spacing: -0.02em !important;
		padding-inline: var(--space-4, 16px);
	}

	body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__photo img {
		/* ~16:9 keeps the overlaid headline legible without a too-tall strip. */
		aspect-ratio: 16 / 9;
	}

	body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__deck {
		font-size: var(--text-base, 16px) !important;
	}

	/* CTA full-width on phones. */
	body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__actions {
		width: 100%;
	}

	body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__actions .wp-block-button,
	body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* === Motion =============================================================== */
@keyframes aiss-hero-strip-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--panoramic-strip-headline-over .universal-hero__photo {
		animation: none;
	}

	body.aibt-universal .universal-hero--panoramic-strip-headline-over .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--panoramic-strip-headline-over .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper — block editor doesn't run the reveal animation; keep the
   strip visible so it isn't stuck at opacity:0 in the locked editor canvas. ==== */
.editor-styles-wrapper .universal-hero--panoramic-strip-headline-over .universal-hero__photo {
	animation: none;
}