/*
 * Cover-block video patterns. Two jobs:
 *   1. reduced-motion fallback (bpd-two/hero-fullbleed, bpd-two/growth-in-action-grid,
 *      bpd-two/media-banner). CSS only, no viewScript — once a real
 *      <video> element is wired into a pattern's Cover block, this hides it and keeps the poster
 *      background-image visible under prefers-reduced-motion.
 *   2. stretch the Cover's shrink-wrapped inner-container so bpd-two/hero-video-controls anchors
 *      to the frame's bottom-right (bpd-case-study-hero-media, bpd-growth-card-video; the
 *      bpd-video-band-frame entry was dropped 2026-08-20 when video-band's Cover became a YouTube
 *      core/embed — see below).
 */

/* Core's .wp-block-cover centers .wp-block-cover__inner-container (shrink-wrapped to its content
   height) via flex, and that inner-container is position:relative (needed for it to stack above
   the absolutely-positioned background image/overlay). bpd-two/hero-video-controls is
   position:absolute + bottom/right, so without this it anchors to the small centered inner-container
   instead of the full-height cover, landing mid-band instead of pinned to the true bottom-right.
   Same fix bpd-two/hero-fullbleed carries in homepage.css and media-banner in archive-insights.css.
   .bpd-video-band-frame is the Who We Are philanthropy Cover's frame (literal markup in
   tests/archive/build-who-we-are.php): the video-band *pattern* itself swapped its Cover for a YouTube
   core/embed on 2026-08-20, but that cover still carries the class, so the selector stays. Its
   inner-container is empty (no hero-video-controls), which makes this rule inert there — kept for
   parity with the pattern's prior build, not function. */
.bpd-video-band-frame .wp-block-cover__inner-container,
.bpd-case-study-hero-media .wp-block-cover__inner-container,
.bpd-growth-card-video .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
}

/* Stretching the inner-container is not enough on its own: it stretches to the Cover's *content*
   box, so the Cover's own padding is added to the controls' offset — 52px on the homepage hero,
   64px on the case-study hero — and the buttons never reach the 20px the design measures from the
   frame edge. Where the stretch was missing altogether they anchored to the shrink-wrapped centred
   container instead and floated mid-video (329px above the case-study frame's floor, and below the
   frame entirely at 390px).

   Taking the container out of flow across the padding box fixes both at once, and is what
   bpd-two/media-banner — the one frame that already measured correctly — has been doing all along.
   Scoped to Covers that actually carry the controls, so no other Cover's layout changes. Their
   heights come from minHeight or an aspect-ratio, never from this container's content. */
.wp-block-cover:has(.bpd-hero-video-controls) > .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* .bpd-growth-card-video: shared by growth-in-action-grid's two homepage video cards AND the
   case-study Creative Showcase's cell 4 (single-case-study.html, AdventHealth_HumanSpirit.mp4 —
   same silent clip, showMute:false for both). homepage.css carries its own copy of the two rules
   above/below for the front page specifically; this file's copy is what reaches the case-study
   page, since homepage.css is gated to is_front_page() and this one isn't (wp_enqueue_block_style
   on core/cover loads wherever a Cover block appears). Narrow columns like these need the button
   right-offset switched from the page-gutter default (sized for full-bleed heroes) to the bottom
   offset, or it reads as a big empty margin pushing the buttons off the card's right edge. */
.bpd-growth-card-video .bpd-hero-video-controls {
	right: var(--wp--preset--spacing--500);
}

/* Optional card link on a Cover-based media card (bpd-two/growth-in-action-grid's video cards):
   core/cover has no link attribute, so the link is a paragraph inside the inner-container whose
   anchor is stretched over the whole frame. It precedes .bpd-hero-video-controls in the DOM and
   both are positioned, so the play/pause button stacks above and stays clickable. The paragraph's
   text is the card heading, visually clipped but left in the accessibility tree as the link name. */
/* bpd-two/growth-in-action-grid card links: drop the underline from the heading link. Same call,
   same rationale as homepage.css's insights-card rule — theme.json's elements.link underlines every
   link sitewide, which is right for a link sitting inline in body copy and wrong for a whole card
   heading whose media above it is a second link to the same place. WCAG 1.4.1 still holds: these
   aren't links embedded in a run of text, and the global :hover / :focus-visible treatments apply
   unchanged. The image and overlay anchors wrap no text, so they need nothing.

   This rule reaches cards rendered from the pattern file (.bpd-growth-card, added 2026-09-03). It
   does NOT reach the homepage's copy of this section, which is baked block markup in the page and
   carries no such class — see PROGRESS.md 2026-09-03. */
.bpd-growth-card h3 a {
	text-decoration: none;
}

/* The inner-container is the anchor's containing block but shrink-wraps to 0 height (its only
   other child, the controls block, is absolutely positioned), so a bare inset:0 anchor measures
   786x0. Stretching the inner-container over the frame is scoped with :has() to covers that
   actually carry an overlay link, so link-less cards keep the existing 0-height behaviour the
   controls' offsets were tuned against. */
.wp-block-cover__inner-container:has(> .bpd-card-link-overlay) {
	position: absolute;
	inset: 0;
}

.bpd-card-link-overlay {
	margin: 0;
}

.bpd-card-link-overlay a {
	position: absolute;
	inset: 0;
	overflow: hidden;
	text-indent: -200vw;
	white-space: nowrap;
}

/* Sits beside the desktop offset it corrects: the block's own (0,1,0) mobile rule loses to this
   selector's (0,2,0). */
@media (max-width: 781px) {
	.bpd-growth-card-video .bpd-hero-video-controls {
		right: var(--wp--preset--spacing--300);
	}
}

/* case-study-hero's media frame: Figma node 5799:1311 is 1440x810, i.e. full-bleed 16/9, which is
   also the source clip's native ratio (1280x720) — so it fills edge to edge with no crop at the
   design width. core/cover has no aspect-ratio attribute, so the ratio is set here, and core's
   430px min-height floor has to be cleared or it wins below ~765px wide.
   This rule lives in media-cover.css rather than single-case-study.css on purpose: single-*.css is
   page-gated and excluded from add_editor_style, so the editor canvas would show core's 430px
   default instead of the real frame (CLAUDE.md rule 7). wp_enqueue_block_style('core/cover') is
   loaded into the canvas by core, so this reaches both surfaces. */
.bpd-case-study-hero-media {
	min-height: 710px;
	aspect-ratio: auto;
}

/* The header video is a landscape clip and the frame was 710px tall at EVERY width, so on a phone a
   16:9 source was cover-cropped into a 0.55:1 window and lost most of its frame — the animation on
   Show Love and the header on Advent Health (issues #244, #257). Figma's mobile frame is 281px.
   The height had to move here from the block's own minHeight attribute to be expressible per
   breakpoint at all: core renders minHeight as an inline style, which no stylesheet can override
   without !important, and it also makes core emit aspect-ratio:unset — which is what was cancelling
   the 16/9 rule this replaced. */
@media (max-width: 781px) {
	.bpd-case-study-hero-media {
		min-height: 281px;
	}
}

/* The two homepage growth cards are videos where their row-mates are images, and the images carry
   core/image's own aspectRatio (819/500). The Cover had a fixed 500px height instead, so it stayed
   500 tall as the column narrowed and the box turned portrait — 0.69:1 at 375, cover-cropping a
   16:9 clip to a slice (issue #243). Same move as the hero above: the height leaves the block's
   minHeight attribute so the ratio is expressible here at all. */
.bpd-growth-card-video {
	min-height: 0;
	aspect-ratio: 819 / 500;
}

/* The mobile header band is 281px, and the logos and headlines were sized for the taller frame it
   replaced, so they now fill it edge to edge. 75% of their current size (issue #300). Scaled rather
   than restyled because neither is reachable from a stylesheet: each logo carries its own inline
   width, set per post, and the headlines carry a font-size preset, which core prints !important.
   The play/pause control keeps its own size. */
@media (max-width: 781px) {
	.bpd-case-study-hero-media .wp-block-cover__inner-container
		> *:not(.bpd-hero-video-controls):not(.wp-block-spacer) {
		scale: 0.75;
	}
}

/* Case Study Content Cell — Video (bpd-two/case-study-content-cell-video): same core-defaults
   fight as the hero above — .bpd-case-study-photo--content-large's aspect-ratio (single-case-
   study.css, 1244/810) loses to core's 430px Cover min-height floor below ~765px wide, so a Cover
   using this class needs the same min-height:0 reset. Harmless on the class's other (much more
   common) use — a plain wp:group wrapping a wp:image in case-study-content-container.php — since
   groups have no default min-height to begin with. Lives here, not single-case-study.css, for the
   same editor-canvas-visibility reason as the rule above (single-*.css is excluded from
   add_editor_style; this file rides wp_enqueue_block_style('core/cover'), which core does load
   into the canvas). */
.bpd-case-study-photo--content-large {
	min-height: 0;
}

/* Insights media-banner's video Cover (patterns/media-banner.php, "The No Normal Show" podcast
   band): the pattern carries no minHeight attribute, so the box should size off the video's own
   real intrinsic aspect ratio — whatever that is for whatever file lands in this slot — rather
   than a number typed into CSS that only matches today's asset and goes stale the moment the video
   is swapped. Core makes .wp-block-cover__video-background position:absolute + width/height:100%,
   which is what forces it to fill (and distort into) whatever box size the Cover already has; nothing
   is then left in normal flow to size the Cover itself, so clearing core's 430px min-height floor
   alone collapses the box to the inner-container's own content height (~32px, confirmed empty here).
   Fix: put the video back in normal flow (undoing core's position:absolute/height:100%) so
   width:100% + height:auto + aspect-ratio:auto lets the browser size it from the video's own real
   dimensions — same mechanism a plain <img> uses. The dim overlay and hero-video-controls layer,
   which core normally lays out in-flow alongside/after the video, are pulled out of flow instead
   (absolute + inset:0) so they still track the video's real footprint once the video — not
   the inner-container — is what determines the Cover's height. */
.bpd-media-banner-video {
	min-height: 0;
   padding: 0;
}

.bpd-media-banner-video video.wp-block-cover__video-background {
	position: static;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
}

.bpd-media-banner-video .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
}

/* The hero overlay centres its headline by shrink-wrapping it, which only reads as centred while
   the text fits one line. Once it wraps the block fills the frame and the lines sit left against a
   ragged right edge (issue #256). Centring the lines themselves is a no-op at desktop. */
.bpd-case-study-hero-media .wp-block-cover__inner-container :is(h1, h2, h3) {
	text-align: center;
}

/* challanges we solve breacrumb fix */
.bpd-problem-hero__breadcrumb {
	text-transform: capitalize;
}

/* core centres the Cover's inner-container, so the breadcrumb rode up and down with however much
   copy each hero carried (16px to 111px from the top across the six child pages). Stretching the
   container to the full frame lets the breadcrumb anchor to the top while the rest stays centred. */
.wp-block-cover:has(> .wp-block-cover__inner-container > .bpd-problem-hero__breadcrumb)
	> .wp-block-cover__inner-container {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wp-block-cover > .wp-block-cover__inner-container > .bpd-problem-hero__breadcrumb {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

@media (prefers-reduced-motion: reduce) {
	.bpd-hero-fullbleed video,
	.bpd-growth-card-video video,
	.bpd-media-banner-video video {
		display: none;
	}
}

/* Problem hero (Challenges we solve child pages), matched by its breadcrumb like the rules above.
   The height leaves the block's minHeight attribute so it can differ per breakpoint: the mobile
   frame is 635px to hold the copy density these pages now carry, with the CTA 32px off the bottom
   and the headline at Heading LG rather than the fluid Display LG it inherits (issue #292). */
.wp-block-cover:has(> .wp-block-cover__inner-container > .bpd-problem-hero__breadcrumb) {
	min-height: 560px;
}

/* Display LG as the block's own preset class would have set it — the class itself is gone from the
   markup because core prints preset font sizes with !important, which no per-breakpoint rule can
   beat and the theme does not allow. */
.wp-block-cover:has(> .wp-block-cover__inner-container > .bpd-problem-hero__breadcrumb) h1 {
	font-size: var(--wp--preset--font-size--display-lg);
}

@media (max-width: 781px) {
	.wp-block-cover:has(> .wp-block-cover__inner-container > .bpd-problem-hero__breadcrumb) {
		min-height: 635px;
		padding-bottom: var(--wp--preset--spacing--800);
	}

	.wp-block-cover:has(> .wp-block-cover__inner-container > .bpd-problem-hero__breadcrumb) h1 {
		font-size: var(--wp--preset--font-size--heading-lg);
		line-height: 1.3;
	}
}