/**
 * Variant CSS: hero--headline-top-photo-band-bottom
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: editorial "statement then visual proof" rhythm.
 *   TOP  - kicker + very large display H1 + a short deck sit on the page
 *          --background with generous editorial whitespace (text only, no photo).
 *   BAND - ONE full-width cinematic WIDE PHOTO BAND below the statement, cropped
 *          to a letterbox ~21:9. Real <img> so the recipe pipeline can swap its
 *          src per industry (a CSS background can't be overridden).
 *   CTA  - the single primary action rides the TOP EDGE of the band, straddling
 *          the seam between the text zone and the photo, as the focal action.
 *   Mobile - statement stacks, band keeps a taller crop, the CTA drops to a
 *            full-width button that sits ABOVE the band (no fragile overlap).
 *
 * Distinct from hero--stacked-statement-wide-photo by: the letterbox BAND crop
 * (21:9 vs 16:7), the CTA anchored ON the band edge (not in the text block), and
 * the band reaching the section's bottom edge for a clean cinematic close.
 *
 * AA strategy: 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
 * regardless of which photo pixels sit behind it (no reliance on the band). A
 * soft scrim on the band is for depth only (allowed rgba ON the photo). Top text
 * sits on --background and uses --text-primary / --text-secondary / --accent
 * (all theme-audited), so contrast is the theme's responsibility, never hardcoded.
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--headline-top-photo-band-bottom
 * because the theme loads ALL variant CSS globally (role-level selectors leak).
 * Only @media / @keyframes are left unscoped.
 *
 * @package AI_Base_Theme
 * @since 2026-05-29 (Path B Variants Library)
 *
 * Default photo: photo-1486406146926-c627a92ad1ab - looking up at glass
 * skyscrapers (downtown financial district, blue-grey premium architecture).
 * Verified subject by reading the JPEG 2026-05-29. Cinematic landscape that
 * crops cleanly to a 21:9 letterbox and suits architecture / real-estate /
 * construction. Alternative (interior): photo-1497366216548-37526070297c.
 */

/* === Section shell ========================================================
   Neutralize the default section padding-inline (the inner blocks own their
   gutters) but keep a generous editorial top. NO bottom padding: the band
   reaches the section's bottom edge for a clean cinematic close. */
body.aibt-universal .universal-hero--headline-top-photo-band-bottom {
	position: relative;
	background: var(--background, #fff);
	color: var(--text-primary, #111);
	overflow: hidden;
	padding-block: clamp(var(--space-2xl), 12vh, var(--space-3xl)) 0 !important;
	padding-inline: 0 !important;
}

/* === The typographic opener =============================================== */
body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__statement {
	width: 100%;
	max-width: var(--max-wide, 1280px);
	margin-inline: auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Breathing room before the band drops in. */
	margin-bottom: clamp(var(--space-xl), 7vh, var(--space-2xl));
}

/* Kicker - small accent rule before the label (editorial signature). */
body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__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(--accent, currentColor) !important;
	margin: 0 0 var(--space-md) 0 !important;
	padding-left: calc(var(--space-lg) + var(--space-2xs));
	position: relative;
	line-height: 1;
}

body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--space-lg);
	height: 2px;
	background: var(--accent, currentColor);
	transform: translateY(-50%);
}

/* Headline - very large display. font-size/line-height/tracking come from the
   block inline style.typography; this only sets family + colour + width. */
body.aibt-universal .universal-hero--headline-top-photo-band-bottom h1.universal-hero__headline,
body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary, #111) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 16ch;
	text-wrap: balance;
}

body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent, currentColor));
	font-weight: inherit;
}

body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-normal) !important;
	color: var(--text-secondary, #555) !important;
	margin: 0 !important;
	max-width: 54ch;
}

/* === The cinematic photo band =============================================
   Full content width, relative so the CTA can ride its top edge. */
body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__band {
	position: relative;
	width: 100%;
	max-width: var(--max-wide, 1280px);
	margin-inline: auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
}

body.aibt-universal .universal-hero--headline-top-photo-band-bottom .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 band "lands" under the opener. */
	animation: aiss-hero-band-rise var(--duration-slow, 900ms) var(--ease-expressive, ease) both;
}

body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__photo img {
	display: block;
	width: 100%;
	/* Cinematic letterbox - the signature of this variant. */
	aspect-ratio: 21 / 9;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* Soft bottom-left scrim on the band - adds depth so the overlapping CTA lifts
   cleanly off the photo. Hardcoded rgba is allowed ONLY here (a scrim ON the
   photo, not a theme surface). */
body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(105deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.10) 34%, rgba(0, 0, 0, 0) 64%);
	pointer-events: none;
}

/* === ONE primary CTA - rides the TOP EDGE of the band =====================
   Absolutely positioned at the band's top-left, pulled up so it straddles the
   seam between the text zone and the photo. Solid fill = self-contained AA. */
body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__actions {
	position: absolute;
	top: 0;
	left: clamp(var(--space-md), 5vw, var(--space-xl));
	transform: translateY(-50%);
	margin: 0;
	z-index: 2;
}

body.aibt-universal .universal-hero--headline-top-photo-band-bottom .wp-block-button.universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-base);
	letter-spacing: var(--tracking-wide);
	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(--text-primary, #111));
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	/* Lift the button off the photo so the seam reads as intentional. */
	box-shadow: var(--decor-shadow-elevated, 0 14px 40px rgba(0, 0, 0, 0.28));
	transition: background var(--duration-fast, 240ms) var(--ease-snappy, ease),
		border-color var(--duration-fast, 240ms) var(--ease-snappy, ease),
		transform var(--duration-fast, 240ms) var(--ease-snappy, ease);
}

body.aibt-universal .universal-hero--headline-top-photo-band-bottom .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--headline-top-photo-band-bottom .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--headline-top-photo-band-bottom {
		padding-block: clamp(var(--space-xl), 8vh, var(--space-2xl)) 0 !important;
	}

	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__statement {
		margin-bottom: clamp(var(--space-lg), 5vh, var(--space-xl));
	}

	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__headline {
		font-size: clamp(2.4rem, 8vw, 3.75rem) !important;
		max-width: 18ch;
	}

	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__photo img {
		/* Comfortable wider-than-tall crop on tablet (still cinematic). */
		aspect-ratio: 16 / 9;
	}
}

/* === Mobile ===============================================================
   Drop the fragile overlap: the CTA becomes a full-width button that sits in
   normal flow ABOVE the band, and the band keeps a taller crop. */
@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__headline {
		font-size: clamp(2.1rem, 10vw, 3rem) !important;
		letter-spacing: -0.02em !important;
	}

	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__deck {
		font-size: var(--text-base) !important;
	}

	/* CTA returns to static flow, full-width, just above the band. */
	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__actions {
		position: static;
		transform: none;
		left: auto;
		width: 100%;
		padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
		margin-bottom: var(--space-md);
	}

	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__actions .wp-block-button,
	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

	/* No overlap means no need for the scrim to carry the button; keep it light. */
	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__photo img {
		/* Taller crop so the subject stays generous on phones. */
		aspect-ratio: 4 / 5;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .universal-hero__photo {
		animation: none;
	}

	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--headline-top-photo-band-bottom .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper - block editor doesn't run reveal JS; absolute CTA also
   needs a sane fallback so it isn't clipped in the locked editor canvas. ==== */
.editor-styles-wrapper .universal-hero--headline-top-photo-band-bottom .universal-hero__photo {
	animation: none;
}