/**
 * Variant CSS: hero--split-stats-photo-right
 * Layer 2 — Variants Library (Path B Recipes architecture).
 *
 * Concept: 50/50 vertical split.
 *   LEFT  — kicker + display H1 + deck, then a COMPACT horizontal row of three
 *           mini-stats (big figure + short label, separated by hairline rules),
 *           then ONE primary CTA. The stats live inside the text column so the
 *           proof sits in the pitch itself — not in a separate band.
 *   RIGHT — ONE large photo filling the entire right half edge-to-edge at full
 *           hero height (object-fit:cover). Real <img> so the recipe pipeline
 *           can swap src per industry.
 *   Mobile — photo stacks ABOVE the text; the stat row wraps to keep 0 overflow.
 *
 * Semantic tokens only (--ink, --accent, --background, --font-display, --font-body,
 * --space-*, --text-*, --tracking-*, --decor-*). KI-020: never --bg-main as
 * foreground; figures use --ink, the seam/accent use --accent.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-hero--split-stats-photo-right
 * because the theme loads ALL variant CSS globally.
 *
 * @package AI_Base_Theme
 * @since 2026-06-06 (Path B Variants Library)
 */

/* === Section shell ========================================================
   Neutralize the default `body.aibt-universal section` padding so the photo
   column can reach the viewport edge. The split owns all spacing. */
body.aibt-universal .universal-hero--split-stats-photo-right {
	position: relative;
	padding: 0 !important;
	background: var(--background);
	overflow: hidden;
	border-bottom: 1px solid var(--divider-primary, color-mix(in srgb, var(--ink) 10%, transparent));
}

/* === 50/50 grid ===========================================================
   Replace the columns flex with a hard two-track grid so the seam is exact and
   the media column bleeds to the right edge. */
body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
	margin: 0;
	min-height: clamp(34rem, 86vh, 54rem);
	max-width: none;
}

/* wp:column wrappers — strip block defaults (flex-basis, padding, margins). */
body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__col {
	flex-basis: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0; /* allow long words to wrap inside the grid track */
}

/* === LEFT — text column =================================================== */
body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__col--text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: calc(clamp(var(--space-xl), 9vh, var(--space-2xl)) * var(--density, 1)) !important;
	padding-inline: clamp(var(--space-lg), 6vw, calc(var(--space-2xl) + 1rem)) clamp(var(--space-lg), 5vw, var(--space-2xl)) !important;
}

body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__panel {
	width: 100%;
	max-width: 36rem;
	margin: 0;
}

/* Thin accent rule above the kicker — a small editorial signature. */
body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__panel::before {
	content: '';
	display: block;
	width: var(--space-lg);
	height: 2px;
	background: var(--accent);
	margin-bottom: var(--space-md);
}

body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.18em) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-hero--split-stats-photo-right h1.universal-hero__headline,
body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 17ch;
	/* font-size + line-height inherited from block inline style.typography. */
}

body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, 600);
}

body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-secondary, color-mix(in srgb, var(--ink) 72%, transparent)) !important;
	max-width: 44ch;
	margin: 0 0 var(--space-lg) 0 !important;
}

/* === Inline mini-stats row ================================================
   Horizontal flex of three figure/label pairs with hairline dividers between.
   Each .universal-hero__stat is a small block; dividers via ::before on 2nd/3rd. */
body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__stats {
	gap: 0 !important;
	margin: 0 0 var(--space-lg) 0;
	align-items: stretch;
	flex-wrap: nowrap;
}

body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__stat {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 clamp(0.85rem, 2.4vw, 1.6rem);
	margin: 0;
}

body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__stat:first-child {
	padding-left: 0;
}

/* Hairline pipe between stats. */
body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__stat + .universal-hero__stat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 1px;
	background: color-mix(in srgb, var(--ink) 16%, transparent);
}

body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__statnum {
	font-family: var(--font-display) !important;
	font-size: clamp(1.75rem, 3.4vw, 2.4rem) !important;
	font-weight: 600 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.01em !important;
	color: var(--ink) !important;
	margin: 0 0 0.2rem 0 !important;
}

body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__statlabel {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: var(--tracking-wide, 0.04em) !important;
	color: var(--text-secondary, color-mix(in srgb, var(--ink) 66%, transparent)) !important;
	text-transform: none !important;
	margin: 0 !important;
}

/* === Primary CTA — solid, high-contrast =================================== */
body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__actions {
	margin: 0;
}

body.aibt-universal .universal-hero--split-stats-photo-right .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, 0.02em);
	padding: 1.1rem 2.5rem;
	color: var(--cta-text-primary, #fff);
	background: var(--cta-bg-primary, var(--ink));
	border: var(--decor-border-width, 1px) solid var(--cta-border-primary, var(--ink));
	border-radius: var(--decor-radius, 0);
	transition: background var(--duration-fast, 240ms) var(--ease-default, ease),
		color var(--duration-fast, 240ms) var(--ease-default, ease),
		border-color var(--duration-fast, 240ms) var(--ease-default, ease),
		transform var(--duration-fast, 240ms) var(--ease-default, ease);
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
}

body.aibt-universal .universal-hero--split-stats-photo-right .wp-block-button.universal-hero__cta .wp-block-button__link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent, #fff);
	transform: translateY(-2px);
}

body.aibt-universal .universal-hero--split-stats-photo-right .wp-block-button.universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: var(--focus-offset, 4px);
}

/* === RIGHT — media column ================================================= */
body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__col--media {
	position: relative;
	align-self: stretch;
}

/* Thin accent seam between text and photo — editorial detail. */
body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__col--media::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var(--accent);
	z-index: 2;
}

body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* === Tablet — keep split but ease the gutters ============================= */
@media (max-width: 959px) {
	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__grid {
		min-height: clamp(28rem, 70vh, 44rem);
	}

	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__col--text {
		padding-inline: clamp(var(--space-md), 5vw, var(--space-xl)) !important;
	}

	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__stat {
		padding: 0 clamp(0.6rem, 2vw, 1.1rem);
	}
}

/* === Mobile — photo stacks ABOVE the text, full-width ===================== */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__grid {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	/* Source order is text-then-media; reorder so the photo leads on mobile. */
	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__col--media {
		order: 0;
		width: 100%;
		position: relative;
		height: clamp(17rem, 50vh, 25rem);
	}

	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__col--text {
		order: 1;
		width: 100%;
		padding-block: calc(clamp(var(--space-xl), 9vh, var(--space-2xl)) * var(--density, 1)) !important;
		padding-inline: clamp(var(--space-md), 7vw, var(--space-xl)) !important;
	}

	/* Seam runs along the bottom edge of the stacked photo. */
	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__col--media::before {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: 4px;
	}

	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__panel {
		max-width: none;
	}

	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__headline {
		max-width: 20ch;
	}
}

/* === Small mobile — wrap the stat row so 3 figures never overflow 375px === */
@media (max-width: 540px) {
	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__stats {
		flex-wrap: wrap;
		row-gap: var(--space-md);
	}

	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__stat {
		flex: 1 1 40%;
		padding: 0 var(--space-md) 0 0;
	}

	/* On wrap, the pseudo-pipe would be misplaced; hide it and let spacing read. */
	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__stat + .universal-hero__stat::before {
		display: none;
	}
}

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

	body.aibt-universal .universal-hero--split-stats-photo-right .universal-hero__col--media {
		height: clamp(15rem, 46vh, 22rem);
	}

	body.aibt-universal .universal-hero--split-stats-photo-right .wp-block-button.universal-hero__cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* === Reduced motion ====================================================== */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--split-stats-photo-right .wp-block-button.universal-hero__cta .wp-block-button__link {
		transition: none;
	}

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