/**
 * Variant CSS: hero--side-rail-label-photo
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: a 3-track split hero whose signature is a thin, full-height SOLID
 * accent RAIL down the far-left edge, with a ROTATED (vertical) kicker label sat
 * ON the rail (writing-mode, baseline upward, in on-accent-safe ink). To the
 * right of the rail: a content column (H1 + deck + dual CTA). On the far right:
 * one photo at full hero height (object-fit:cover).
 *
 * Grid: [rail+label | content | photo]. The rail is a narrow, accent-filled
 * column — a bold vertical accent stripe — which is what distinguishes this from
 * vertical-side-label-split (a hairline + a floating kicker, NO filled rail) and
 * from accent-band-left-photo-right (whose ENTIRE left half is a band).
 *
 * Theme safety: text NEVER sits on the photo. The H1/deck/CTA copy stays on
 * --background; the rotated label sits on the accent rail so it uses
 * --on-accent / a white lift, NEVER a surface colour as foreground (KI-020). AA
 * in every theme. Hardcoded rgba is used ONLY for the photo scrim/shadow.
 *
 * Mobile (≤959 / ≤781px): the rail flattens to a short top accent bar and the
 * rotated label unrotates to a normal horizontal kicker; tracks stack
 * (label → H1 → deck → CTA → photo). 0 overflow at 375px.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-hero--side-rail-label-photo
 * because the theme loads ALL variant CSS globally (role-level = leak, fatal).
 *
 * @package AI_Base_Theme
 * @since 2026-06-06 (Path B hero role — side-rail label photo)
 */

/* === Section shell ========================================================
   overflow:clip contains the rail bleed + photo. Generous editorial padding. */
body.aibt-universal .universal-hero--side-rail-label-photo {
	position: relative;
	overflow: clip;
	background: var(--background);
	padding-block: calc(clamp(var(--space-xl), 9vh, var(--space-3xl)) * var(--density, 1)) !important;
	padding-inline: clamp(var(--space-md), 6vw, var(--space-2xl)) !important;
	box-sizing: border-box;
}

/* === Grid scaffold ========================================================
   Three tracks: accent rail (fixed-narrow), fluid content, photo. */
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__grid {
	position: relative;
	max-width: var(--max-ultra, 1400px);
	margin-inline: auto;
	display: grid;
	grid-template-columns: clamp(48px, 5vw, 78px) minmax(0, 1.08fr) minmax(0, 1fr);
	column-gap: clamp(var(--space-md), 3.2vw, var(--space-2xl));
	align-items: center;
}

/* === The accent RAIL (the signature) ======================================
   A narrow, full-height column FILLED with the brand accent, holding the rotated
   label. This solid stripe is the differentiator. */
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__rail {
	grid-column: 1 / 2;
	align-self: stretch;
	position: relative;
	min-height: clamp(360px, 52vh, 600px);
	background: var(--accent);
	border-radius: var(--decor-radius-pill, 999px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-md);
	box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* Rotated label sitting ON the accent rail — reads bottom-to-top. On-accent ink
   (white lift) NEVER a surface colour as foreground (KI-020). */
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__kicker {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	margin: 0 !important;
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 700 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--on-accent, #ffffff) !important;
	white-space: nowrap;
}

/* === Content column ======================================================= */
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__content {
	grid-column: 2 / 3;
	position: relative;
	z-index: 2;
	padding-block: calc(clamp(var(--space-md), 4vh, var(--space-xl)) * var(--density, 1));
}

body.aibt-universal .universal-hero--side-rail-label-photo h1.universal-hero__headline,
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__headline {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 16ch;
	text-wrap: balance;
	/* font-size + line-height inherited from the block inline style.typography */
}

body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__headline em {
	font-style: italic;
	color: var(--accent) !important;
	font-weight: inherit;
}

body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--ink) !important;
	opacity: 0.78;
	max-width: 42ch;
	margin: 0 0 var(--space-lg) 0 !important;
}

/* === CTAs: solid primary + ghost (AA on every theme) ====================== */
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__ctas {
	gap: var(--space-xs) var(--space-sm) !important;
	align-items: center;
}

body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta .wp-block-button__link {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	font-size: var(--text-base) !important;
	letter-spacing: var(--tracking-wide) !important;
	padding: 0.95rem 1.9rem !important;
	min-height: var(--target-min, 44px);
	display: inline-flex;
	align-items: center;
	border-radius: var(--decor-radius, 10px) !important;
	transition: background var(--duration-fast, 0.18s) var(--ease-default, ease),
		border-color var(--duration-fast, 0.18s) var(--ease-default, ease),
		color var(--duration-fast, 0.18s) var(--ease-default, ease),
		transform var(--duration-fast, 0.18s) var(--ease-default, ease);
}

/* Primary: solid token button, accent on hover. */
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta--primary .wp-block-button__link {
	color: var(--cta-text-primary, #ffffff) !important;
	background: var(--cta-bg-primary, var(--accent)) !important;
	border: 1px solid var(--cta-bg-primary, var(--accent)) !important;
}

body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta--primary .wp-block-button__link:hover {
	background: var(--accent-hover, var(--accent)) !important;
	border-color: var(--accent-hover, var(--accent)) !important;
	transform: translateY(-2px);
}

/* Ghost: hairline outline, fills with accent on hover. */
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta--ghost .wp-block-button__link {
	color: var(--ink) !important;
	background: transparent !important;
	border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent) !important;
}

body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta--ghost .wp-block-button__link:hover {
	border-color: var(--accent) !important;
	color: var(--accent) !important;
	transform: translateY(-2px);
}

/* Keyboard focus ring on both CTAs (a11y). */
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: var(--focus-offset, 2px);
	border-radius: inherit;
}

/* === Photo column ========================================================= */
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__media {
	grid-column: 3 / 4;
	align-self: stretch;
	position: relative;
}

body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__photo {
	margin: 0 !important;
	height: 100%;
	position: relative;
	border-radius: var(--decor-radius, 14px);
	overflow: hidden;
	box-shadow: 0 40px 80px -38px rgba(0, 0, 0, 0.45);
}

body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: clamp(360px, 52vh, 600px);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: inherit;
}

/* Subtle scrim along the photo's lower edge for depth. Photo-only → rgba OK. */
body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0.16) 100%);
	border-radius: inherit;
}

/* === Tablet (≤959px): drop to rail + (content over photo) ================== */
@media (max-width: 959px) {
	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__grid {
		grid-template-columns: clamp(44px, 6vw, 64px) minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: clamp(var(--space-sm), 4vw, var(--space-lg));
		row-gap: var(--space-lg);
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__rail {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
		min-height: 0;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__content {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__media {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__photo img {
		aspect-ratio: 16 / 10;
		min-height: clamp(280px, 40vh, 440px);
	}
}

/* === Mobile (≤781px): FLATTEN the rail to a top accent bar, unrotate label == */
@media (max-width: 781px) {
	body.aibt-universal .universal-hero--side-rail-label-photo {
		padding-block: calc(clamp(var(--space-lg), 8vh, var(--space-2xl)) * var(--density, 1)) !important;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__grid {
		display: flex;
		flex-direction: column;
		gap: clamp(var(--space-md), 6vw, var(--space-lg));
	}

	/* Rail becomes a short horizontal accent bar hugging the unrotated label. */
	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__rail {
		min-height: 0;
		align-self: flex-start;
		width: auto;
		padding: 0.5rem 1rem;
		border-radius: var(--decor-radius-pill, 999px);
		box-shadow: none;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__kicker {
		writing-mode: horizontal-tb;
		transform: none;
		white-space: normal;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__content {
		padding-block: 0;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__headline {
		font-size: clamp(2.4rem, 11vw, 3.8rem) !important;
		max-width: 18ch;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__media {
		width: 100%;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__photo img {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
}

/* === Smallest screens (≤640px): drop uppercase tracking (A5) + full CTAs ==== */
@media (max-width: 640px) {
	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__kicker {
		letter-spacing: 0.04em !important;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__ctas {
		width: 100%;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta {
		flex: 1 1 100%;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* === Reduced motion — kill the CTA hover lift for motion-sensitive users. === */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta .wp-block-button__link {
		transition: none;
	}

	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta--primary .wp-block-button__link:hover,
	body.aibt-universal .universal-hero--side-rail-label-photo .universal-hero__cta--ghost .wp-block-button__link:hover {
		transform: none;
	}
}