/*
	Pinned Content — image column pins (position: sticky) while the content
	column scrolls normally past it in the same .grid-2 row.

	No .grid--center and no align-items override anywhere here — this is
	LOAD-BEARING, not a style choice. .grid-2's own default align-items:
	stretch is what makes .pinned-content__media stretch to match
	.pinned-content__content's full height (naturally much taller, being
	many stacked rows), which is what gives the sticky inner column real
	room to travel — pin, then release once the outer wrapper's own bottom
	edge (the last content row) passes under it. Add align-items: center
	here (the way Callout's own grid-2 grid--center does) and the media
	column collapses to its own short natural height instead, breaking the
	entire mechanism silently.
*/
.pinned-content__media {
	position: relative;
	/* A grid item's own default min-width is auto, not 0 — it refuses to
	   shrink below its content's intrinsic min-content size, the same
	   overflow class already documented and fixed the same way in
	   assets/css/carousel.css's own .splide__track. Confirmed live: an
	   image with an unusually large intrinsic size (a placeholder SVG
	   with no width/height of its own) forced this whole column — and
	   .pinned-content__media-inner's own width: 100% along with it — out
	   to 3000px instead of its actual 1fr grid-2 share. */
	min-width: 0;
}

.pinned-content__media-inner {
	position: sticky;
	/* --space-5 (24px): a breathing-room buffer so the pinned image doesn't
	   sit flush against the fixed header. This is the no-JS approximation
	   only — pinned-content.js overrides it with an inline style once it
	   runs, using this same 24px buffer plus whichever fixed chrome is
	   actually on the page (the header, and a .section-menu too if
	   present — see that file's own comment). */
	top: calc(var(--site-header-height) + var(--space-5));
	/* Explicit width, not just left to size itself — with no
	   grid-template-columns set, this element's own single implicit
	   column sizes to fit its content by default, but its own children
	   (.pinned-content__image) are width: 100% of THAT column — an
	   undefined-size-referencing-undefined-size loop that let the column
	   collapse to whichever image's raw intrinsic size happened to load
	   first (confirmed live: a test SVG with no explicit width rendered
	   this box at 3000px). An explicit width here breaks the loop for this
	   element's OWN outer box.
	*/
	width: 100%;
	height: var(--pinned-content-media-height);
	display: grid;
	/*
		The SAME loop one level deeper: fixing this element's own outer box
		above doesn't fix its own IMPLICIT grid track, which every stacked
		.pinned-content__image (grid-area: 1 / 1) shares — with no
		grid-template-columns/-rows, that track still sizes to fit its
		content by default, and each image's own width/height: 100% refers
		right back to it. Confirmed live: the container's outer box was
		correctly 636x448, but the initially-active image inside it still
		rendered at 3000x3000, clipped by overflow:hidden below down to a
		near-invisible sliver rather than filling the visible box — nothing
		wrong with .is-active or its opacity, the image itself was just
		badly oversized inside it. minmax(0, 1fr) ties the track to this
		element's own already-fixed size instead of its content.
	*/
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/*
	Every pinned image occupies the SAME grid cell (grid-area: 1 / 1) — the
	identical stacking technique .hero__media/.hero__content already use in
	blocks/hero/hero.css — so swapping which one has .is-active crossfades
	between two already-overlapping images for free, rather than needing a
	position/transform animation. assets/js/pinned-content.js toggles the
	class; this only reacts to it.
*/
.pinned-content__image {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 0;
	transition: opacity var(--transition-slow);

	& img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.pinned-content__image.is-active {
	opacity: 1;
	z-index: 1;
}

.pinned-content__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-11);
}

/*
	--space-11 (96px) between rows, not one of the smaller gaps used
	elsewhere — each row here needs enough visual separation to read as its
	own distinct "chapter" as the pinned image behind it changes, more like
	the gap between whole flex sections (--section-padding) than between
	cards in a grid.
*/

/*
	The Gap field (blank/Small/Large/Extra Large, pinned-content.php) — an
	editor-facing pacing control on top of the fixed 96px default above.
	More gap means more scroll distance — and so more reading time — before
	the next row's image swaps in, the point of the field: a short row
	should still give someone room to read before moving on.

	Small and Large land on the existing --space-N scale (one step down/up
	from the 96px default); Extra Large doesn't — the scale tops out at
	--space-12 (128px), and doubling the default (192px) was a clearer,
	more memorable relationship than the next scale step up would have
	been, so it's a deliberate one-off rather than forcing scale alignment
	that doesn't exist.
*/
.pinned-content--gap-small .pinned-content__content {
	gap: var(--space-9); /* 64px */
}

.pinned-content--gap-large .pinned-content__content {
	gap: var(--space-12); /* 128px */
}

.pinned-content--gap-extra-large .pinned-content__content {
	gap: 12rem; /* 192px */
}

/*
	No min-height and no justify-content here on purpose — a row is exactly
	as tall as its own content, nothing more. Pacing (not letting a short
	row's image swap out too quickly) used to be enforced here with a
	forced minimum height, but that meant the leftover space past whatever
	a row's own content actually needed showed up as a visible tail after
	it — and since content length varies row to row, that tail varied too,
	which is what made the gaps between sections look inconsistent rather
	than deliberate. Pacing is enforced in JS instead now
	(pinned-content.js's own minimum-dwell timer, not scroll distance), so
	rows can go back to their natural height and every gap is the same
	--space-3/--space-11 the CSS actually says, everywhere.
*/
.pinned-content__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pinned-content__row-header {
	margin: 0;
}

/*
	Mobile-only inline image — a SEPARATE element from .pinned-content__image
	above, not the same image reflowed. See this block's own PHP docblock
	for why: position: sticky needs one continuous DOM subtree spanning the
	whole content column to have room to pin/release, so the stacked desktop
	images can't just reflow into per-row placement on mobile. Hidden on
	desktop; the @media block below is what actually shows it.
*/
.pinned-content__row-image {
	display: none;
}

/* display: flex, not just margin: 0 — room for an optional second
   (outline) button next to the first. */
.pinned-content__row-button {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0;
}

@media (max-width: 47.99em) {
	/* The entire sticky image column — mobile shows each row's own image
	   inline instead (.pinned-content__row-image, above). */
	.pinned-content__media {
		display: none;
	}

	.pinned-content__row-image {
		display: block;
	}
}