/**
 * Variant CSS: about--side-sticky-narrative-photos
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: a LEFT heading rail (kicker + display headline + short lead) that
 *   feels "sticky" - it pins while the RIGHT narrative column scrolls past it.
 *   The narrative is a flowing essay (lead + 2 body paragraphs + 2 sub-point
 *   blocks) with TWO photos inset INTO the text (a wide 16:9 establishing shot
 *   high up, a 4:3 detail lower down). Reads like a spread-out company story -
 *   distinct from the side-by-side `story-photo-split` / `dual-image-story`.
 *
 * Semantic tokens only (--background, --text-primary, --text-secondary,
 * --accent, --font-display/body, --text-*, --space-*, --tracking-*,
 * --leading-*, --decor-*, --divider-*). Theme-portable: photo grade comes from
 * the theme `img { filter: var(--photo-filter) }` rule, not re-applied here.
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-about--side-sticky-narrative-photos
 * because the theme enqueues ALL variant CSS globally.
 *
 * @package AI_Base_Theme
 * @since 2026-06-06 (Path B Variants Library)
 */

/* === Section shell ======================================================== */
body.aibt-universal .universal-about--side-sticky-narrative-photos {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.08));
}

/* === Grid - rail + narrative ==============================================
   The columns block supplies the 38/62 split + the editorial column gap (block
   inline blockGap). align-items:flex-start is essential: it lets the rail's
   sticky child travel the full height of the taller narrative track. */
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__grid {
	align-items: flex-start;
	margin: 0;
}

body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__rail,
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__narrative {
	margin: 0;
	min-width: 0;
}

/* === LEFT rail - the sticky heading column ================================
   The column itself is the scroll track; its inner group is what sticks. A top
   offset clears any fixed header and gives the pinned block air. */
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__rail-inner {
	position: -webkit-sticky;
	position: sticky;
	top: var(--sticky-top, 5rem);
	margin: 0;
}

/* Kicker - small uppercase label, --text-secondary per small-text contrast. */
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__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(--text-secondary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

/* Headline - display face, primary ink; size/line-height/weight from the block
   inline style.typography. */
body.aibt-universal .universal-about--side-sticky-narrative-photos h2.universal-about__headline,
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
	max-width: 15ch;
}

body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, 500);
}

/* Lead under the headline in the rail - quiet supporting line. */
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--text-secondary) !important;
	max-width: 34ch;
	margin: 0 !important;
}

/* === RIGHT narrative - flowing essay ===================================== */
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__narrative {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* Lead paragraph carries more presence than the supporting body lines. */
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__lead {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-primary) !important;
	max-width: 60ch;
	margin: 0 !important;
}

body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__para {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-secondary) !important;
	max-width: 60ch;
	margin: 0 !important;
}

/* === Inset photos - ratio-locked frames woven into the narrative =========
   Soft radius + elevated shadow. Both keep object-fit:cover so any source crop
   reads correctly. The detail shot is pulled in to read as an "inset", offset
   from the text edge so it feels embedded, not full-bleed. */
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__photo {
	margin: 0;
	border-radius: var(--decor-radius-photo, 8px);
	overflow: hidden;
	box-shadow: var(--decor-shadow-elevated, 0 14px 40px rgba(0, 0, 0, 0.12));
}

body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__photo--wide img {
	aspect-ratio: 16 / 9;
}

/* Detail shot: narrower + indented so it reads as an embedded inset. */
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__photo--inset {
	max-width: 72%;
	margin-left: clamp(1.5rem, 6vw, 5rem);
}

body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__photo--inset img {
	aspect-ratio: 4 / 3;
}

/* === Sub-point blocks - small titled accents in the narrative flow ========
   A short accent rule on the left marks them off from the running paragraphs
   without breaking the column rhythm. */
body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__point {
	padding-left: var(--space-md);
	border-left: 2px solid var(--accent);
	margin: 0;
}

body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__point-title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-xs, 0.5rem) 0 !important;
}

body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__point-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--text-secondary) !important;
	max-width: 56ch;
	margin: 0 !important;
}

/* === Tablet - keep the split, release nothing yet ========================= */
@media (max-width: 959px) {
	body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__headline {
		max-width: 18ch;
	}
}

/* === Mobile - stack: rail on top (static), narrative below ================
   The columns block stacks at <=781px (isStackedOnMobile default). Release the
   sticky pin so the rail does not float over the narrative, and let measures +
   the inset photo flow to full width. */
@media (max-width: 781px) {
	body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__rail-inner {
		position: static;
		top: auto;
	}

	body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__deck {
		max-width: none;
	}

	body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__lead,
	body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__para,
	body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__point-desc {
		max-width: none;
	}

	/* Inset photo goes full width on phones so it never reads as a stray crop. */
	body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__photo--inset {
		max-width: 100%;
		margin-left: 0;
	}
}

@media (max-width: 640px) {
	/* Drop uppercase kicker tracking on the smallest screens (A5/KI-003). */
	body.aibt-universal .universal-about--side-sticky-narrative-photos .universal-about__kicker {
		letter-spacing: 0 !important;
	}
}

/* === Editor wrapper - content stays visible in the block editor =========== */
.editor-styles-wrapper .universal-about--side-sticky-narrative-photos .universal-about__photo,
.editor-styles-wrapper .universal-about--side-sticky-narrative-photos .universal-about__rail-inner,
.editor-styles-wrapper .universal-about--side-sticky-narrative-photos .universal-about__narrative {
	opacity: 1 !important;
	transform: none !important;
}

/* Sticky positioning misbehaves inside the editor canvas - keep the rail static
   there so editing the heading is predictable. */
.editor-styles-wrapper .universal-about--side-sticky-narrative-photos .universal-about__rail-inner {
	position: static !important;
	top: auto !important;
}