/**
 * Variant CSS: hero--wide-photo-caption-ledger
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: an editorial "figure with a caption" hero.
 *   TOP    - kicker + large LEFT-aligned display H1 on the page --background
 *            (text only, generous whitespace, no photo).
 *   FIGURE - ONE wide landscape photo (16/9) presented as a magazine FIGURE.
 *            Real <img> so the recipe pipeline can swap its src per industry
 *            (a CSS background could not be overridden).
 *   LEDGER - the signature device: a slim CAPTION LEDGER STRIP attached flush
 *            under the photo, held between TWO HAIRLINES (border-block-start +
 *            border-block-end). The deck sits on the LEFT styled like a figure
 *            caption (smaller, --text-secondary) and the single primary CTA
 *            sits on the RIGHT of the same row.
 *   Mobile - the ledger stacks (caption first, then a full-width CTA) and the
 *            photo takes a taller 4/3 crop. No 375px overflow: the deck has
 *            min-width:0 and nothing carries a fixed width.
 *
 * Distinct from hero--headline-top-photo-band-bottom: there the photo is a
 * full-bleed cinematic ~21:9 BAND and the CTA rides ON the photo's top edge.
 * Distinct from hero--matted-wide-photo-under-copy: there the CTA stands WITH
 * the centered copy ABOVE a matted print. Here deck + CTA live TOGETHER in a
 * bordered caption row BELOW the photo - figure caption, not poster.
 *
 * AA strategy: all top text sits on --background and uses --text-primary /
 * --text-secondary / --accent (theme-audited; never --bg-main as foreground,
 * KI-020). The CTA is a SOLID accent-filled button: background --accent with
 * text --on-accent (NEVER --on-dark - invisible on bright accents such as
 * lime / butter / peach; QC-theme-token-parity guarantees --on-accent exists
 * in all 22 themes). Hairlines are a 14% ink mix, decoration only.
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--wide-photo-caption-ledger
 * 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 - wide photo caption ledger)
 *
 * Default photo: photo-1517248135467-4c7edcad34c4 - a warm, intimate restaurant
 * interior (subject verified from existing library alt-text). Landscape that
 * crops cleanly to 16/9 and suits gastronomy / hospitality / studios / premium
 * services. Pool alternatives (all landscape, subjects verified in-repo):
 * photo-1486406146926-c627a92ad1ab (glass skyscrapers, architecture),
 * photo-1551288049-bebda4e38f71 (team analyzing dashboards, business/tech),
 * photo-1600585154340-be6161a56a0c (bright designed interior),
 * photo-1497366754035-f200968a6e72 (raw interior / workspace).
 */

/* === Section shell ========================================================
   The section owns the horizontal gutters; the WP constrained layout
   (contentSize 1120px) centers the children. Generous editorial top, calmer
   bottom: the ledger strip is the closing line of the composition. */
body.aibt-universal .universal-hero--wide-photo-caption-ledger {
	position: relative;
	background: var(--background, #fff);
	color: var(--text-primary, #111);
	overflow: hidden;
	padding-block: calc(clamp(var(--space-2xl), 11vh, var(--space-3xl)) clamp(var(--space-xl), 8vh, var(--space-2xl)) * var(--density, 1)) !important;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl)) !important;
}

/* === Masthead - kicker + left-aligned display H1 ==========================
   Block itself is centered by the constrained layout (inline margins AUTO -
   never zero them, A8/A9 lesson); the TYPE inside is left-aligned. */
body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__masthead {
	width: 100%;
	max-width: 70rem;
	margin-block: 0 clamp(var(--space-lg), 5vh, var(--space-xl));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

/* Kicker - small accent rule before the label (editorial signature). */
body.aibt-universal .universal-hero--wide-photo-caption-ledger .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--wide-photo-caption-ledger .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 - large display. font-size / line-height / tracking come from the
   block inline style.typography; this only sets family + colour + measure. */
body.aibt-universal .universal-hero--wide-photo-caption-ledger h1.universal-hero__headline,
body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary, #111) !important;
	margin: 0 !important;
	max-width: 18ch;
	text-wrap: balance;
}

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

/* === The wide figure ======================================================
   16/9 landscape, square BOTTOM corners so the caption ledger reads as one
   attached device with the photo (radius only on top). Inline margins stay
   AUTO so the figure centers inside the constrained section. */
body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__photo {
	position: relative;
	width: 100%;
	max-width: 70rem;
	margin-block: 0 !important;
	margin-inline: auto !important;
	overflow: hidden;
	border-start-start-radius: var(--decor-radius-photo, var(--decor-radius, 0));
	border-start-end-radius: var(--decor-radius-photo, var(--decor-radius, 0));
	border-end-start-radius: 0;
	border-end-end-radius: 0;
	box-shadow: var(--decor-shadow, none);
	/* Figure + ledger rise together (same keyframes/timing = attached). */
	animation: aiss-hero-caption-ledger-rise var(--duration-slow, 900ms) var(--ease-expressive, ease) both;
}

body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__photo img {
	display: block;
	width: 100%;
	/* The wide editorial figure - the signature crop of this variant. */
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* === The caption ledger strip =============================================
   Slim row attached FLUSH under the photo, held between two hairlines.
   Deck (caption) left, CTA right. Wraps gracefully if the CTA is long. */
body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__ledger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm) clamp(var(--space-lg), 4vw, var(--space-2xl));
	width: 100%;
	max-width: 70rem;
	/* Flush attach: kill the constrained-layout block gap above the strip. */
	margin-block: 0 !important;
	margin-inline: auto !important;
	padding-block: calc(clamp(var(--space-sm), 2vw, var(--space-md)) * var(--density, 1));
	/* The two hairlines that make the strip read as a ledger row. */
	border-block-start: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
	border-block-end: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
	animation: aiss-hero-caption-ledger-rise var(--duration-slow, 900ms) var(--ease-expressive, ease) both;
}

/* Deck styled as a figure caption: smaller than a hero deck, quiet colour. */
body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__deck {
	flex: 1;
	min-width: 0;
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-normal) !important;
	color: var(--text-secondary, #555) !important;
	margin: 0 !important;
	max-width: 58ch;
	text-align: left;
}

/* === ONE primary CTA - the right cell of the ledger row ================== */
body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__actions {
	flex: none;
	margin: 0;
}

body.aibt-universal .universal-hero--wide-photo-caption-ledger .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: 0.95rem 2rem;
	/* Accent surface -> --on-accent text (NEVER --on-dark on accent). */
	color: var(--on-accent, #fff);
	background: var(--accent, var(--text-primary, #111));
	border: var(--decor-border-width, 1px) solid var(--accent, var(--text-primary, #111));
	border-radius: var(--decor-radius, 0);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	transition: background var(--duration-fast, 240ms) var(--ease-snappy, ease),
		border-color var(--duration-fast, 240ms) var(--ease-snappy, ease),
		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-caption-ledger .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-caption-ledger .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 (min-width: 641px) and (max-width: 959px) {
	body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__headline {
		font-size: clamp(2.3rem, 7vw, 3.5rem) !important;
		max-width: 20ch;
	}
}

/* === Mobile ===============================================================
   The ledger stacks: caption first, then a FULL-WIDTH CTA. The photo takes a
   taller 4/3 crop so the subject stays generous on phones. */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--wide-photo-caption-ledger {
		padding-block: calc(clamp(var(--space-xl), 8vh, var(--space-2xl)) clamp(var(--space-lg), 6vh, var(--space-xl)) * var(--density, 1)) !important;
	}

	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__kicker {
		letter-spacing: var(--tracking-wide) !important;
	}

	body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__headline {
		font-size: clamp(2.05rem, 9.5vw, 2.8rem) !important;
		letter-spacing: -0.02em !important;
		max-width: 100%;
	}

	body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__photo img {
		/* Taller crop so the figure does not become a thin sliver. */
		aspect-ratio: 4 / 3;
	}

	body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__ledger {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-sm);
	}

	/* Reset flex-basis 0 from desktop flex:1 - in a column with auto height
	   a 0-basis item would collapse; let the caption size from content. */
	body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__deck {
		flex: 0 0 auto;
		max-width: 100%;
	}

	/* CTA goes full-width for a comfortable tap target. */
	body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__actions {
		width: 100%;
	}

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

/* === Motion =============================================================== */
@keyframes aiss-hero-caption-ledger-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-caption-ledger .universal-hero__photo,
	body.aibt-universal .universal-hero--wide-photo-caption-ledger .universal-hero__ledger {
		animation: none;
	}

	body.aibt-universal .universal-hero--wide-photo-caption-ledger .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

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

/* === Editor wrapper - the block editor does not run the reveal, so the
   figure + ledger must render immediately in the locked editor canvas. ===== */
.editor-styles-wrapper .universal-hero--wide-photo-caption-ledger .universal-hero__photo,
.editor-styles-wrapper .universal-hero--wide-photo-caption-ledger .universal-hero__ledger {
	animation: none;
}