/**
 * Variant CSS: hero--split-type-row-photo-below
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: ASYMMETRIC EDITORIAL TYPE ROW + cinematic panorama below.
 *   KICKER - small accent label above the whole row (left-aligned).
 *   ROW    - a 2-column typographic spread on the page --background:
 *            LEFT (~58%) holds the large display H1; RIGHT (~38%) stacks the
 *            deck + ONE primary CTA and is pushed to the BOTTOM of the row
 *            (align-self: flex-end), so deck/CTA sit in the same baseline
 *            zone as the H1's last line - the magazine-spread signature.
 *   PHOTO  - ONE full-content-width 21:9 landscape panorama below the row
 *            closes the hero flush with the section's bottom edge. Real
 *            wp:image (recipe pipeline swaps the first <img src> per
 *            industry; a CSS background could not be overridden).
 *   Mobile - the row stacks (H1 first, then deck + CTA), the CTA becomes a
 *            full-width tap target and the panorama relaxes to 16:9.
 *            Columns keep min-width:0 so long Polish words never force a
 *            375px horizontal overflow.
 *
 * Distinct from hero--headline-top-photo-band-bottom: there a CENTERED
 * single-column statement (kicker - H1 - deck) sits above the band and the
 * CTA rides the photo's top edge; HERE the opener is an ASYMMETRIC 2-column
 * type ROW (H1 left / deck + CTA bottom-right) aligned LEFT, and the CTA
 * lives in the text column - never on the photo.
 *
 * AA strategy: all copy sits on --background and uses --text-primary /
 * --text-secondary / --accent (theme-audited), so contrast is the theme's
 * job, never hardcoded (KI-020: --bg-main is NEVER used as a foreground).
 * The CTA is a SOLID filled button on the audited --cta-bg-primary /
 * --cta-text-primary pair; on hover the surface becomes the accent, so the
 * label switches to --on-accent (never --on-dark - invisible on light
 * accents). The panorama carries NO text, so photo pixels never need to
 * clear any contrast ratio.
 *
 * Centering note (A8/A9): everything in this variant is LEFT-aligned (no
 * has-text-align-center, no text-align:center), so the "centered child of a
 * full-width constrained section needs margin-inline:auto" rule does not
 * apply - left alignment is the intended editorial look.
 *
 * Scope rule: EVERY selector starts with
 *   body.aibt-universal .universal-hero--split-type-row-photo-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-1521017432531-fbd92d768814 - guests around a communal
 * table in a spacious industrial-style cafe interior, daylight. Subject
 * verified in-repo (alt in hero--text-left-photo-collage-right.php + pool
 * note in hero--big-type-thin-photo-strip.css, 2026-06-11). A wide lifestyle
 * frame that crops cleanly to a 21:9 letterbox and stays distinct from the
 * reference band variant's skyscraper default.
 * Pool (all landscape, panorama-crop friendly):
 *   photo-1486406146926-c627a92ad1ab - glass skyscrapers from below (corporate)
 *   photo-1481833761820-0509d3217039 - warm bar interior at dusk, "RELAX" window
 *   photo-1517248135467-4c7edcad34c4 - elegant restaurant interior, set tables
 *   photo-1497366754035-f200968a6e72 - bright raw empty interior (minimal look)
 */

/* === Section shell ========================================================
   Neutralize the default section padding-inline (inner wrappers own their
   gutters) and keep a generous editorial top. NO bottom padding: the panorama
   closes the hero flush for a clean cinematic edge. The single structural
   width knob (~1180px) matches the wrapper block's constrained contentSize. */
body.aibt-universal .universal-hero--split-type-row-photo-below {
	--hero-split-max: 1180px;
	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;
}

/* === Opener: kicker + the asymmetric type row ============================= */
body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__opener {
	width: 100%;
	max-width: var(--hero-split-max, 1180px);
	margin-inline: auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
	/* Breathing room before the panorama drops in. */
	margin-bottom: clamp(var(--space-xl), 7vh, var(--space-2xl));
}

/* Kicker - small accent label with a leading rule (editorial signature),
   sitting above the WHOLE 2-column row. */
body.aibt-universal .universal-hero--split-type-row-photo-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 0 var(--space-lg) 0 !important;
	padding-left: calc(var(--space-lg) + var(--space-2xs));
	position: relative;
	line-height: 1;
}

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

/* === The type row =========================================================
   Core columns markup: ~58% headline column + ~38% aside column, nowrap at
   >=782px (core), stacked below. We only tune the gutter + guard min-width. */
body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__row {
	width: 100%;
	margin: 0;
	gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
}

/* Long Polish words must wrap inside their column, never push a 375px
   horizontal scrollbar (belt & suspenders over core's own min-width:0). */
body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__row > .wp-block-column {
	min-width: 0;
}

/* Headline - large display in the LEFT column. font-size / line-height /
   tracking come from the block inline style.typography; this sets family +
   colour + safe wrapping. No bottom margin: the H1's last line defines the
   row's shared bottom edge. */
body.aibt-universal .universal-hero--split-type-row-photo-below h1.universal-hero__headline,
body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary, #111) !important;
	margin: 0 !important;
	text-wrap: balance;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

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

/* Aside column - deck + CTA pushed to the row's BOTTOM edge so they share
   the H1's last-line zone (the variant's signature). A hairline column rule
   on the left reinforces the magazine-spread reading. */
body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__col--aside {
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-left: clamp(var(--space-md), 2.5vw, var(--space-lg));
	border-left: 1px solid var(--hairline, color-mix(in srgb, var(--ink, currentColor) 14%, transparent));
}

body.aibt-universal .universal-hero--split-type-row-photo-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 0 var(--space-lg) 0 !important;
	max-width: 38ch;
}

/* === ONE primary CTA - solid fill = self-contained AA ===================== */
body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__actions {
	margin: 0;
}

body.aibt-universal .universal-hero--split-type-row-photo-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(--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, 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);
}

/* Hover surface = accent, so the label MUST be --on-accent (never --on-dark:
   invisible on light accents like lime / butter / peach). */
body.aibt-universal .universal-hero--split-type-row-photo-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--split-type-row-photo-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);
}

/* === The cinematic panorama ==============================================
   Full content width below the row; aspect-ratio 21:9 + object-fit come from
   the block's inline style (canonical wp:image aspectRatio/scale attrs). */
body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__band {
	width: 100%;
	max-width: var(--hero-split-max, 1180px);
	margin-inline: auto;
	padding-inline: clamp(var(--space-md), 5vw, var(--space-xl));
}

body.aibt-universal .universal-hero--split-type-row-photo-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 panorama "lands" under the type row. */
	animation: aiss-hero-splitrow-rise var(--duration-slow, 900ms) var(--ease-expressive, ease) both;
}

body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	object-position: center;
}

/* === Tablet (the row stacks here via core columns CSS) ==================== */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--split-type-row-photo-below {
		padding-block: clamp(var(--space-xl), 8vh, var(--space-2xl)) 0 !important;
	}

	body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__opener {
		margin-bottom: clamp(var(--space-lg), 5vh, var(--space-xl));
	}

	body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__row {
		gap: var(--space-lg);
	}

	body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__headline {
		font-size: clamp(2.4rem, 8vw, 3.6rem) !important;
	}

	/* Stacked: swap the left column rule for a top rule above deck + CTA. */
	body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__col--aside {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--hairline, color-mix(in srgb, var(--ink, currentColor) 14%, transparent));
		padding-top: var(--space-md);
	}

	/* Panorama relaxes to 16:9 (inline 21/9 needs the !important override). */
	body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__photo img {
		aspect-ratio: 16 / 9 !important;
	}
}

/* === Mobile =============================================================== */
@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (KI-003). */
	body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__kicker {
		letter-spacing: 0 !important;
	}

	body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__headline {
		font-size: clamp(2.15rem, 9.5vw, 3rem) !important;
		letter-spacing: -0.02em !important;
	}

	body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__deck {
		font-size: var(--text-base) !important;
		max-width: 100%;
	}

	/* Full-width CTA for thumb reach. */
	body.aibt-universal .universal-hero--split-type-row-photo-below .universal-hero__actions {
		width: 100%;
	}

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

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

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

	body.aibt-universal .universal-hero--split-type-row-photo-below .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--split-type-row-photo-below .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
		transform: none;
	}
}

/* === Editor wrapper - the block editor doesn't run the reveal animation;
   pin the panorama visible so it isn't stuck transparent in the locked
   editor canvas. ========================================================== */
.editor-styles-wrapper .universal-hero--split-type-row-photo-below .universal-hero__photo {
	animation: none;
}