/* bpd-two/hero-media — full-bleed landing-page hero.
   Registered via wp_enqueue_block_style() (block.json's `style` key), so core auto-loads this
   into the editor canvas too (no add_editor_style() entry needed — see functions.php's comment on
   that mechanism) — the whole reason this block sidesteps who-we-are-hero.css's failure mode.

   Full-bleed fix: .bpd-hero-media__background is `position:absolute; inset:0;` with NO width/
   height declared. The confirmed bug in the hand-rolled `.bpd-hero`/`.bpd-hero-bg-video` version
   this block replaces was setting width:100%/height:100% *alongside* inset:0 — redundant, and in
   practice resolved against the padded ancestor's content box rather than its padding box, so the
   video rendered narrower by 2 × the gutter padding. Leaving the four zero insets to define the
   box alone (no width/height) matches how core/cover's own __video-background avoids the same
   trap, and is why Join Us/Contact Us's existing wp:cover heroes already render full-bleed despite
   carrying the same horizontal gutter padding on the positioning-context element. */

.bpd-hero-media {
	position: relative;
	/* z-index:0 pins a stacking context to this element — without it, position:relative alone
	   doesn't create one, and the background layer's z-index:-1 escapes to a much higher ancestor
	   and paints behind unrelated page content instead of just behind this hero's own text (the
	   exact bug found and fixed on who-we-are-hero.css/archive-insights.css same day). */
	z-index: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bpd-hero-media__background {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.bpd-hero-media__video,
.bpd-hero-media__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The fallback image sits under the video in the layer stack (painted first, so the video, when
   present, covers it) but stays in the DOM either way — reduced motion hides the video only. */
.bpd-hero-media__image {
	z-index: -1;
}

.bpd-hero-media__video {
	z-index: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.bpd-hero-media__video {
		display: none;
	}
}

.bpd-hero-media__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.bpd-hero-media__inner-container {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	padding: var( --wp--preset--spacing--2500 ) var( --wp--preset--spacing--gutter );
}

.bpd-hero-media__content {
	display: grid;
	gap: var( --wp--preset--spacing--600 );
	justify-items: center;
	max-width: 748px;
	text-align: center;
}

/* The body is rich text, so its paragraphs bring their own margins, which stack on top of the
   grid gap below rather than collapsing into it. */
.bpd-hero-media__body > * {
	margin-block: 0;
}

.bpd-hero-media__eyebrow {
	margin: 0;
	font-size: var( --wp--preset--font-size--body-md );
	color: var( --wp--preset--color--text-default );
}

.bpd-hero-media__heading {
	margin: 0;
	font-size: var( --wp--preset--font-size--display-lg );
	color: var( --wp--preset--color--text-default );
}

/* display-lg bottoms out at 38.8px on a phone while heading-lg is a flat 32px, so the page H1 read
   as bigger than the H2s below it. Stepping the hero heading down here keeps the stat figures that
   share the display-lg preset at their intended size. */
@media (max-width: 781px) {
	.bpd-hero-media__heading {
		font-size: var( --wp--preset--font-size--heading-lg );
	}
}

.bpd-hero-media__body {
	margin: 0;
	display: grid;
	gap: var( --wp--preset--spacing--400 );
	font-size: var( --wp--preset--font-size--body-md );
	color: var( --wp--preset--color--text-default );
}

.bpd-hero-media__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --wp--preset--spacing--300 );
	margin: 0;
}

/* Overlay tint sits behind the text (see .bpd-hero-media__overlay above) but the heading/body/CTA
   need to read against a dark wash whenever one is present — matching every existing wp:cover
   hero's convention of switching text color when overlayDim > 0. Applied by the block wrapper
   itself, not per-field, since the whole content column shares one background. */
.bpd-hero-media:has( .bpd-hero-media__overlay ) .bpd-hero-media__eyebrow,
.bpd-hero-media:has( .bpd-hero-media__overlay ) .bpd-hero-media__heading,
.bpd-hero-media:has( .bpd-hero-media__overlay ) .bpd-hero-media__body {
	color: var( --wp--preset--color--neutral-100 );
}

/* -------------------------------------------------------------------------------- editor-only */

.bpd-hero-media__editor-media-preview {
	margin-block-end: var( --wp--preset--spacing--200 );
}

.bpd-hero-media__editor-media-preview video,
.bpd-hero-media__editor-media-preview img {
	display: block;
	width: 100%;
	max-height: 120px;
	object-fit: cover;
	border-radius: var( --wp--custom--radius--sm );
}

.bpd-hero-media__editor-cta-row {
	display: grid;
	gap: var( --wp--preset--spacing--100 );
	padding-block: var( --wp--preset--spacing--200 );
	border-top: var( --wp--custom--border--sm ) solid var( --wp--preset--color--blue-300 );
}