/*
	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.
*/
/* 80px between the media and content columns, wider than .grid-2's own
   shared default (32px, layout.css) — no mobile-specific value needed the
   way other .grid-2 uses in this theme have: .pinned-content__media is
   display: none below 48em (further down this file), so there's no
   visible gap to size differently there regardless of what this says. */
.flex-section--pinned-content .grid-2 {
	gap: var(--space-10);
}

.pinned-content__media {
	position: relative;
	/* Also covered now by the theme's own .grid-2 > *, .grid-3 > *
	   { min-width: 0 } (layout.css) — kept explicit here anyway, since
	   this is the exact failure this rule exists to prevent and this
	   block's own history (ported from Zook Pharma) is worth a second,
	   belt-and-suspenders line: a grid item's own default min-width is
	   auto, not 0 — it refuses to shrink below its content's intrinsic
	   min-content size. Confirmed live there: an image with an unusually
	   large intrinsic size 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 the header's own real
	   measured height. */
	top: calc(var(--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, ported from Zook Pharma: a test image 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, ported from Zook Pharma: the
		container's outer box was correctly sized, but the initially-active
		image inside it still rendered at its own oversized intrinsic
		dimensions, 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);
}

/* Section Spacing field (pinned-content.php) — Small/Large/Extra Large
   override the base 96px gap above. 'default' (96px) needs no modifier
   class at all, since it's already what the base rule says; these three
   are the only values that ever add one. 160px/256px aren't on the
   --space-* scale (nearest are --space-11's 96px and --space-12's
   128px), so they're literal values here, same "block-specific
   dimension" treatment other one-off sizes in this theme get. */
.pinned-content__content--small {
	gap: var(--space-8); /* 48px */
}

.pinned-content__content--large {
	gap: 10rem; /* 160px */
}

.pinned-content__content--xlarge {
	gap: 16rem; /* 256px */
}

/*
	--space-11 (96px) between rows by default, 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.

	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) is enforced in JS instead
	(pinned-content.js's own minimum-dwell timer, not scroll distance), so
	rows stay at their natural height and every gap is the same
	--space-3/--space-11 the CSS actually says, everywhere — a forced
	minimum row height would otherwise leave a visible, inconsistent tail
	of empty space past whatever a row's own content actually needed,
	varying row to row since content length does.
*/
.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;
}

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

/* 32px between the Text and the Button specifically, not every pair in
   the row — .pinned-content__row's own flex gap (above) already puts
   12px between every child, so this adds 20px more on top, netting 32px
   total. Scoped to .prose + .pinned-content__row-button (not a blanket
   rule on the button) so a row with no Text — button straight after the
   Header — isn't affected. */
.prose + .pinned-content__row-button {
	margin-block-start: 1.25rem; /* 20px, nets 32px against the 12px gap */
}

@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;
	}

	/*
		60px between rows at mobile, regardless of the editor's own Section
		Spacing choice (default 96px, or the Small/Large/Extra Large
		modifiers above) — on a narrow phone screen, even Small's 48px runs
		a bit tight; Large/XL's 160px/256px would read as an excessive,
		disconnected gap between rows at this width. 60px isn't on the
		--space-* scale (nearest are --space-8's 48px and --space-9's
		64px), so it's a literal value here, same "one-off, scoped value"
		treatment other mobile-only overrides in this theme use (e.g.
		Section Header's own fixed 60px, layout.css). Same specificity as
		.pinned-content__content and its three modifier classes (one class
		each) — this rule winning is purely a source-order effect of
		sitting last in the file, the same mechanism the modifier classes
		themselves already rely on to beat the base rule above them.
	*/
	.pinned-content__content {
		gap: 3.75rem; /* 60px */
	}
}