/**
 * Variant CSS: hero--photo-band-between-type
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: a typographic SANDWICH - the type-photo-type rhythm is the signature.
 *   TOP    - kicker + very large CENTERED display H1 on the page surface
 *            (theme --background), like a magazine spread opener.
 *   MIDDLE - ONE full-content-width LANDSCAPE photo band cropped to a wide 2:1,
 *            slotted BETWEEN the typography. It interrupts the statement mid-
 *            sentence instead of opening or closing the section. Real <img> so
 *            the recipe pipeline can swap its src per industry.
 *   BOTTOM - the deck + the single primary CTA, centered BELOW the photo, on the
 *            same page surface. The copy "resumes" after the visual beat.
 *   Mobile - sandwich order is kept, the band takes a taller crop, the CTA
 *            becomes a full-width button.
 *
 * Distinct from hero--headline-top-photo-band-bottom by: ALL copy there sits
 * ABOVE the photo and the 21:9 band CLOSES the section with the CTA riding the
 * band edge - here the 2:1 band sits in the MIDDLE with copy on both sides and
 * the CTA on the theme surface. Distinct from hero--wide-photo-top-statement-
 * below by: the photo there LEADS the section - here the type leads and the
 * photo is the middle beat of the sandwich.
 *
 * AA strategy: ALL copy sits on --background and uses theme-audited
 * --text-primary / --text-secondary / --accent - NOT --on-dark (the text never
 * overlaps the photo). The CTA is a SOLID --accent fill and therefore its text
 * is --on-accent (NEVER --on-dark - invisible on light accents like lime /
 * butter / peach). No bg-token is ever used as a foreground (KI-020).
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--photo-band-between-type
 * 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-1497366754035-f200968a6e72 - spacious modern office
 * interior with a soft lounge zone in warm light (verified subject from the
 * existing library pool notes). Wide landscape that crops cleanly to a 2:1 band
 * and suits interiors / studios / offices / premium services. Pool alternatives
 * (all landscape): photo-1486406146926-c627a92ad1ab (glass skyscrapers),
 * photo-1521017432531-fbd92d768814 (guests at a shared table),
 * photo-1517248135467-4c7edcad34c4 (warm restaurant interior),
 * photo-1600585154340-be6161a56a0c (bright designed interior).
 */

/* === Section shell ========================================================
   Generous editorial padding top AND bottom (type opens and closes the
   sandwich, so both edges need breathing room). The inner zones own their own
   gutters, so neutralize the default section padding-inline. */
body.aibt-universal .universal-hero--photo-band-between-type {
	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), 10vh, var(--space-3xl)) * var(--density, 1)) !important;
	padding-inline: 0 !important;
}

/* === TOP slice - kicker + big centered H1 =================================
   A8/A9: every centered child gets horizontal AUTO margins so it cannot
   left-shift inside the constrained full-width section. */
body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__opener {
	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: center;
	text-align: center;
	/* The pause before the photo interrupts the statement. */
	margin-bottom: clamp(var(--space-lg), 6vh, var(--space-2xl));
}

/* Kicker - centered accent label with short rules on BOTH sides (the centered
   counterpart of the editorial left-rule kicker used by sibling variants). */
body.aibt-universal .universal-hero--photo-band-between-type .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;
}

body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__kicker::before,
body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__kicker::after {
	content: "";
	display: inline-block;
	width: var(--space-lg);
	height: 2px;
	background: var(--accent, currentColor);
	vertical-align: middle;
}

body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__kicker::before {
	margin-right: var(--space-xs);
}

body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__kicker::after {
	margin-left: var(--space-xs);
}

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

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

/* === MIDDLE slice - the 2:1 photo band ====================================
   Full content width. No scrim: the copy never overlaps the photo, so the
   image stays clean and the theme owns every text surface. */
body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__band {
	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--photo-band-between-type .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 "slots into" the sandwich. */
	animation: aiss-hero-band-slot-in var(--duration-slow, 900ms) var(--ease-expressive, ease) both;
}

body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__photo img {
	display: block;
	width: 100%;
	/* The signature crop: a wide 2:1 band (mirrors the block's inline style;
	   media queries below override it with !important). */
	aspect-ratio: 2 / 1;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* === BOTTOM slice - deck + single primary CTA =============================
   The copy resumes after the visual beat, centered on the page surface. */
body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__closing {
	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;
	/* The pause after the photo, before the copy resumes. */
	margin-top: clamp(var(--space-lg), 5vh, var(--space-xl));
}

body.aibt-universal .universal-hero--photo-band-between-type .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;
}

body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__actions {
	margin: clamp(var(--space-lg), 4vh, var(--space-xl)) auto 0 auto;
	justify-content: center;
}

/* Solid --accent fill => the label MUST be --on-accent (theme-audited pair,
   QC-theme-token-parity guarantees both tokens in every theme). NEVER
   --on-dark here - it goes invisible on light accents. */
body.aibt-universal .universal-hero--photo-band-between-type .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(--on-accent, #fff);
	background: var(--accent, var(--cta-bg-primary, #111));
	border: var(--decor-border-width, 1px) solid var(--accent, var(--cta-bg-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--photo-band-between-type .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--photo-band-between-type .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--photo-band-between-type {
		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--photo-band-between-type .universal-hero__opener {
		margin-bottom: clamp(var(--space-md), 4vh, var(--space-lg));
	}

	body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__headline {
		font-size: clamp(2.3rem, 7vw, 3.5rem) !important;
		max-width: 22ch;
	}

	/* Slightly taller crop than 2:1 so the subject keeps presence
	   (!important beats the block's inline aspect-ratio:2/1). */
	body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__photo img {
		aspect-ratio: 16 / 9 !important;
	}
}

/* === Mobile ===============================================================
   Sandwich order is kept; the band gets a taller crop and the CTA goes
   full-width. No horizontal overflow at 375px: every zone is width:100% with
   box-border padding, copy widths are in ch with auto margins. */
@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

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

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

	/* Taller crop so the band still reads as a real photo on phones
	   (!important beats the block's inline aspect-ratio:2/1). */
	body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__photo img {
		aspect-ratio: 4 / 3 !important;
	}

	/* CTA full-width below the deck. */
	body.aibt-universal .universal-hero--photo-band-between-type .universal-hero__actions {
		width: 100%;
	}

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

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

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

	body.aibt-universal .universal-hero--photo-band-between-type .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--photo-band-between-type .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--photo-band-between-type .universal-hero__photo {
	animation: none;
}