/**
 * Variant CSS: hero--wide-photo-top-statement-below
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: "show first, then state" - the INVERSE of
 *   hero--headline-top-photo-band-bottom.
 *   MEDIA - ONE large LANDSCAPE photo at the TOP, full content width, cropped to
 *           a clean 16/9 (NOT a 21/9 letterbox band). It is a real <img> so the
 *           recipe pipeline can swap its src per industry. It sits on the page
 *           surface (theme --background), rounded, not an overlay/cover.
 *   COPY  - BELOW the photo, a CENTERED statement on the SAME page surface:
 *           kicker + very large display H1 + a short deck + the single primary
 *           CTA. Because the copy lives on --background (never over the photo),
 *           it uses --text-primary / --text-secondary / --accent - NOT --on-dark.
 *   Mobile - photo keeps its aspect, copy stays centered, CTA goes full-width.
 *
 * Distinct from hero--headline-top-photo-band-bottom by: reversed order (photo
 * leads, copy answers), a 16/9 image (not a 21/9 cinematic band), the CTA living
 * in the centered statement on the theme bg (not anchored ON the photo edge), and
 * an "alignwide" framing rather than full-bleed band.
 *
 * AA strategy: ALL copy sits on --background and uses theme-audited
 * --text-primary / --text-secondary / --accent, so contrast is the theme's
 * responsibility, never hardcoded. The CTA is a SOLID filled button using the
 * theme-audited --cta-bg-primary / --cta-text-primary pair (self-contained AA,
 * independent of the photo). No bg-token is ever used as a foreground (KI-020).
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--wide-photo-top-statement-below
 * 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 up at glass
 * skyscrapers (downtown financial district, blue-grey premium architecture).
 * Verified subject from existing library alt-text. Strong landscape that crops
 * cleanly to 16/9 and suits portfolio / architecture / studio / hospitality.
 * Pool alternatives (all landscape): photo-1497366754035-f200968a6e72 (raw
 * interior), photo-1517248135467-4c7edcad34c4 (warm restaurant interior),
 * photo-1600585154340-be6161a56a0c (bright designed interior),
 * photo-1521017432531-fbd92d768814 (guests at a shared table).
 */

/* === Section shell ========================================================
   Generous editorial block padding top and bottom (the copy closes the section,
   so it needs breathing room below). The inner zones own their own gutters, so
   neutralize the default section padding-inline. */
body.aibt-universal .universal-hero--wide-photo-top-statement-below {
	position: relative;
	background: var(--background, #fff);
	color: var(--text-primary, #111);
	overflow: hidden;
	padding-block: calc(clamp(var(--space-xl), 9vh, var(--space-3xl)) clamp(var(--space-2xl), 11vh, var(--space-3xl)) * var(--density, 1)) !important;
	padding-inline: 0 !important;
}

/* === The leading photo ====================================================
   Full content width, centered. This is the "show" half - it opens the hero. */
body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__media {
	width: 100%;
	max-width: var(--max-wide, 1280px);
	margin-inline: auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
	/* Space before the statement answers below the photo. */
	margin-bottom: clamp(var(--space-xl), 6vh, var(--space-2xl));
}

body.aibt-universal .universal-hero--wide-photo-top-statement-below .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 photo "lands" as the section opens. */
	animation: aiss-hero-photo-rise var(--duration-slow, 900ms) var(--ease-expressive, ease) both;
}

body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__photo img {
	display: block;
	width: 100%;
	/* The signature crop: a clean 16/9 landscape (NOT a 21/9 letterbox band). */
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* === The centered statement ===============================================
   The "then state" half - kicker + H1 + deck + CTA, all centered on the page
   surface. A8/A9: every centered child gets margin-inline:auto so it cannot
   left-shift inside the constrained full-width section. */
body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__statement {
	width: 100%;
	max-width: var(--max-content, 50rem);
	margin-inline: auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Kicker - centered accent label above the headline. */
body.aibt-universal .universal-hero--wide-photo-top-statement-below .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 auto var(--space-md) auto !important;
	line-height: 1;
}

/* 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--wide-photo-top-statement-below h1.universal-hero__headline,
body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary, #111) !important;
	margin: 0 auto var(--space-md) auto !important;
	max-width: 18ch;
	text-wrap: balance;
}

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

body.aibt-universal .universal-hero--wide-photo-top-statement-below .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 auto !important;
	max-width: 52ch;
}

/* === ONE primary CTA - centered under the deck ============================
   Solid fill = self-contained AA regardless of theme. */
body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__actions {
	margin: clamp(var(--space-lg), 4vh, var(--space-xl)) auto 0 auto;
	justify-content: center;
}

body.aibt-universal .universal-hero--wide-photo-top-statement-below .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;
	box-shadow: var(--decor-shadow-elevated, none);
	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--wide-photo-top-statement-below .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--wide-photo-top-statement-below .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--wide-photo-top-statement-below {
		padding-block: calc(clamp(var(--space-lg), 7vh, var(--space-2xl)) clamp(var(--space-xl), 8vh, var(--space-2xl)) * var(--density, 1)) !important;
	}

	body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__media {
		margin-bottom: clamp(var(--space-lg), 5vh, var(--space-xl));
	}

	body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__headline {
		font-size: clamp(2.25rem, 7vw, 3.5rem) !important;
		max-width: 20ch;
	}
}

/* === Mobile ===============================================================
   Photo keeps a comfortable crop, copy stays centered, CTA goes full-width. */
@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__headline {
		font-size: clamp(2rem, 9vw, 2.75rem) !important;
		letter-spacing: -0.02em !important;
	}

	body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__deck {
		font-size: var(--text-base) !important;
	}

	/* Slightly taller crop so the subject stays generous on phones (still landscape-ish). */
	body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__photo img {
		aspect-ratio: 4 / 3;
	}

	/* CTA full-width below the deck. */
	body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__actions {
		width: 100%;
	}

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

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

@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--wide-photo-top-statement-below .universal-hero__photo {
		animation: none;
	}

	body.aibt-universal .universal-hero--wide-photo-top-statement-below .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--wide-photo-top-statement-below .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper - block editor doesn't run reveal JS; keep the photo
   visible in the locked editor canvas. ==================================== */
.editor-styles-wrapper .universal-hero--wide-photo-top-statement-below .universal-hero__photo {
	animation: none;
}