/* templates/single-case-study.html — layout-only CSS for the sections unique to the Case Study single
   template. Reuses archive-case-study.css's .bpd-case-study-photo/.bpd-play-badge/.bpd-play-badge-lg/
   .bpd-roi-bar classes (enqueued alongside this file, see functions.php) rather than duplicating them.
   Gated to is_singular('post') && has_category('case-study') only.

   As established repeatedly in this project (PROGRESS.md — core/group has no attribute-backed support
   for dimensions.aspectRatio or flex-child sizing like flex-basis/min-width), every aspect-ratio and
   flex-sizing value below is a CSS modifier class, never a hand-authored inline style="" attribute —
   those are layout-derived proportions pulled from Figma measurements, not design tokens. These
   class names are the frozen contract at case-study handover (CASE_STUDY_PLAN.md Phase D): adding a
   class is free, renaming/deleting one after the client starts authoring needs a migration script.

   Phase A reconcile (2026-08-10): approach-grid + creative-showcase folded into the single
   case-study-content-container pattern (nodes 4299:58887 / 4299:59020); the old
   .bpd-approach-item--*, .bpd-case-study-photo--small, --showcase-* classes were deleted with them.
   Awards band (5505:43916) and the new Banner treatment (5172:37713) added below. */

/* Hero: full-bleed video media (Figma node 5799:1311, 1440x810 = 16/9). Only the radius reset lives
   here — the Cover's own sizing (min-height/aspect-ratio) and inner-container stretch are in
   media-cover.css instead, because this file is one of the page-gated sheets add_editor_style
   deliberately skips (functions.php), and without them the editor canvas falls back to core's
   430px min-height. media-cover.css rides wp_enqueue_block_style('core/cover'), which core does
   load into the canvas. */
.bpd-case-study-hero-media {
	overflow: hidden;
	border-radius: 0;
}

/* section-spacing.css's mobile-only alignfull floor padding (<=781px) exists so text-ish sections
   with no padding of their own don't run edge-to-edge on small viewports. It applies to the hero's
   outer wrapper too (needed there -- the title/meta text row sharing that wrapper still wants the
   inset), which pulls the video/image hero in from the edges along with it: full-bleed on desktop
   (no floor active above 781px) but padded on mobile. The hero should read the same at every size.
   Cancel the floor for the hero specifically with the same "escape a padded parent" negative-margin
   trick core itself generates for a block's own padding (see the .wp-container-core-group-is-layout-*
   > .alignfull rules Gutenberg emits) -- same token, so it's an exact, not approximate, cancellation. */
@media (max-width: 781px) {
	.bpd-case-study-hero-media {
		margin-left: calc(var(--wp--preset--spacing--400) * -1);
		margin-right: calc(var(--wp--preset--spacing--400) * -1);
	}
}

/* Hero text/meta row: content column flexes to fill, meta column stays a fixed reading-width sidebar
   (Figma: 240px). */
.bpd-case-study-hero-content {
	flex: 1 1 0;
	min-width: 320px;
}

.bpd-case-study-hero-meta {
	flex: 0 0 240px;
	max-width: 240px;
}

/* Stat grid: native Group "type":"grid" layout (block JSON, both hero + RWJF's results band),
   capped at 4 columns. WP's own grid support generates `minmax(0, 1fr)` tracks; the explicit `0`
   minimum lets a track get squeezed narrower than its own content's min-content width (e.g. a
   short "3.3x" stat's column shrinking to make room for a longer label two columns over) — with
   overflow left visible, the squeezed label's text pushes past its column edge into the
   column-gap instead of wrapping inside it. Overriding to plain `1fr` restores the standard grid
   auto-minimum (content-aware, per track) so every column keeps at least its own min-content
   width and text wraps inside its cell instead of bleeding into the gap. Unlike wp:post-template's
   own columnCount grid (which ships a built-in mobile collapse in core), a plain wp:group grid
   gets none, so this file adds the same 781px cutoff every other multi-column grid on the site
   collapses at. */
.bpd-case-study-hero-stats {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 781px) {
	.bpd-case-study-hero-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* A case study with no stats to report leaves the grid's cells in place with their heading/paragraph
   emptied out (issue #232, The Show Love Project): each empty cell is ~4px tall but the 36px row gap
   between them is not, so on mobile — one column, five rows — the emptied grid renders ~164px of blank
   space between the intro copy and the meta sidebar. Cells are client content in post_content, so this
   collapses them at render instead: a cell with no text in its heading or paragraph is dropped, and a
   grid with no surviving cells collapses to nothing along with its parent's block gap. Front-end only —
   this sheet is one of the page-gated ones add_editor_style skips (see the header comment), so emptied
   cells stay visible and editable in the editor. */
.bpd-case-study-hero-stats > .wp-block-group:not(:has(:where(h1, h2, h3, h4, h5, h6, p):not(:empty))) {
	display: none;
}

/* Case study headline. Display LG as the block's own preset class set it — that class is gone from
   the markup because core prints preset font sizes with !important, which no per-breakpoint rule
   can beat. Mobile drops to Heading MD at 135%: the headline is a full sentence and at the fluid
   Display LG it ran to six lines on a phone (issue #297). It stays an h1; only its size changes. */
.bpd-case-study-hero-content h1 {
	font-size: var(--wp--preset--font-size--display-lg);
}

@media (max-width: 781px) {
	.bpd-case-study-hero-content h1 {
		font-size: var(--wp--preset--font-size--heading-md);
		line-height: 1.35;
	}
}

/* Card grids stack on mobile, where the 40px desktop row gap reads as a hole between two full-width
   images. 20px between cards on mobile (issue #290); the desktop gap is unchanged. The columns rule
   covers a case study whose content was hand-built from plain Columns rows rather than the content
   container pattern — adjacent rows only, so the gap under the section heading is untouched. */
@media (max-width: 781px) {
	.bpd-content-grid {
		row-gap: var(--wp--preset--spacing--500);
	}

	/* The caption grid's cells are image + caption, and the caption already sits 40px under its own
	   image (16px row-gap plus its 24px margin). At the 20px the image-only grid above uses, a
	   caption ended up closer to the NEXT image than to the one it belongs to — read as too much
	   padding inside a cell and too little between them (issues #255, #306, #318). 48px puts the
	   separation back on the outside, matching the related-results grid. */
	.bpd-media-caption-grid {
		row-gap: var(--wp--preset--spacing--1200);
	}

	.has-surface-subtle-background-color > .wp-block-columns + .wp-block-columns {
		margin-top: var(--wp--preset--spacing--500);
	}
}

/* "More results like this" stacks to one column on mobile, where the 24px row gap sat only 8px
   above the 16px rhythm inside each card (image, title, excerpt) — so one card's copy ran into the
   next card's image (issue #307). 48px is a clear step away from that internal spacing. Desktop is
   untouched: three columns side by side never show a row gap. */
@media (max-width: 781px) {
	.wp-block-post-template.columns-3 {
		row-gap: var(--wp--preset--spacing--1200);
	}
}

/* Challenge band (Banner node 5172:37713): text column flexes, photo column matches (Figma:
   near-equal split, 596px/596px of the 1248px content row); photo is 596x460. */
.bpd-case-study-challenge-row > * {
	flex: 1 1 380px;
}

.bpd-case-study-challenge-photo {
	aspect-ratio: 596 / 460;
}

/* Content container grid (node 4299:58887): one full-width large cell (1244x810, ~16:9) then a
   2-up row (each cell 612x628) — the large cell and the wp:columns row each span the full grid row
   (flex-basis 100%), the 50/50 split inside the columns is core's own. */
.bpd-content-cell--large,
.bpd-content-grid > .wp-block-columns {
	flex: 1 1 100%;
}

.bpd-case-study-photo--content-large {
	aspect-ratio: 1244 / 810;
}

.bpd-case-study-photo--content-sm {
	aspect-ratio: 612 / 628;
}

/* Awards band (node 5505:43916): one repeatable award row following the band family's primary
   layout — text column left (flex-fills with a wrap floor), media slot right (Banner 4291:55460 is
   the canonical text-left/media-right band; the awards band's media being a logo rather than a
   photo is the exception this block is built to accommodate). Which side the logo sits on is plain
   DOM order — the editor's Move up/down controls swap it, no modifier class and no CSS involved, so
   the mirrored layout is visible in the canvas as well as on the frontend. Below 781px the row
   becomes a column and the logo moves to the top via order:-1 whichever side it was on to match the mobile component (5505:43891:
   logo 189x64 on top, 24px gap). That component also steps the headline down to 24px; the theme
   deliberately does not follow it — theme.json floors headers at 32px at every viewport
   (CLAUDE.md architecture rule 8), and every other h2 on the site renders 32px at mobile, so
   matching this one frame would make the awards band the site's only exception. The logo slot has no
   fixed dimensions at any viewport — the image renders at its natural size (max-width:100%,
   height:auto), so each case study supplies a logo already sized as it should appear. Multiple
   units stack with the 24px mobile card gap. */
.bpd-awards-item {
	align-items: center;
}

.bpd-awards-text {
	flex: 1 1 0;
	min-width: 280px;
}

.bpd-awards-logo {
	flex: 0 0 auto;
}

/* No fixed dimensions: the logo renders at its natural size, capped so it never outgrows the band. */
.bpd-awards-logo img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	.bpd-awards-item {
		gap: var(--wp--preset--spacing--600);
	}

	/* Column stacking keeps the logo on top whichever DOM order the editor chose — order works on
	   the cross axis here instead of fighting a row-reverse. */
	.bpd-awards-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.bpd-awards-logo {
		order: -1;
	}
}

/* Pull-quote: illustration stays fixed-size, text column fills the remaining row width. */
.bpd-pull-quote-text {
	flex: 1 1 0;
	min-width: 320px;
}

.bpd-pull-quote-illustration {
	flex: 0 0 auto;
}

/* Once the row wraps, the fixed 300px illustration sits at the flex line's start with the leftover
   width all on one side. Centring it in the column is what the design shows (issue #302). */
@media (max-width: 781px) {
	/* .wp-block-image.is-resized pins both margins to 0, so this has to match its specificity. */
	.wp-block-image.bpd-pull-quote-illustration {
		margin-inline: auto;
	}
}