/**
 * Meridian Sections — Page Hero
 *
 * Two comps, one band: a photograph with the copy at the bottom, and a small
 * yellow line over one large heading.
 *
 * - Figma 273:330 — the interior-page opener. The small line is a back link.
 * - Figma 232:26 — the case study opener. The small line is the post's own
 *   "Location · Market · Owner Type · Job Type", and the heading is set slightly
 *   looser on a narrower measure. Carried by .md-phero--case.
 *
 * The scrim is identical in both, which is what makes this one widget: the
 * three-stop overlay below was measured from 273:330 and 232:26 draws the same
 * rgba(0,0,0,.85 / .35 at 50% / .3) gradient.
 *
 * Full bleed, so no .md-container and no section padding — the photograph runs
 * edge to edge and, because this widget is registered in the theme's
 * meridian_hero_widgets() list, up underneath the transparent header.
 */

.md-phero {
	padding-block: 0;
}

.md-phero__media {
	position: relative;
	display: flex;
	/* 512px in the comp. A minimum, so a heading that wraps to three lines
	 * pushes the band taller rather than spilling out of it. */
	min-height: var(--md-phero-height, 32rem);
	overflow: hidden;
	background-color: var(--md-grey-100, #eceef1);
	/*
	 * The image and the scrim both sit at z-index -1 and would otherwise escape
	 * to the page's root stacking context, landing behind the section itself.
	 */
	isolation: isolate;
}

/*
 * Two classes, because Elementor ships `.elementor img` at (0,1,1) — it sets
 * height: auto, which would collapse a background image to its intrinsic ratio
 * and leave the band empty below it.
 */
.md-phero__media .md-phero__img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The comp's overlay: strongest at the bottom where the copy sits, and never
 * fully clear at the top — 0.3 rather than the default scrim's 0, so the whole
 * photograph is held back a little and the header reads over it too.
 *
 * Ink rather than the comp's pure black, which is the house scrim colour and a
 * ~4% difference in the darkest channel over a photograph. Both figures below
 * are the comp's own.
 */
.md-phero__media.md-scrim {
	--md-scrim-image: linear-gradient(
		to top,
		rgba(var(--md-ink-rgb, 10, 22, 40), 0.85) 0%,
		rgba(var(--md-ink-rgb, 10, 22, 40), 0.35) 50%,
		rgba(var(--md-ink-rgb, 10, 22, 40), 0.3) 100%
	);
}

.md-phero__media.md-scrim::after {
	z-index: -1;
}

/* --- Copy ---------------------------------------------------------------- */
/*
 * Bottom-aligned via margin-block-start: auto on the flex child, so the band's
 * min-height does the work and the copy stays pinned to the foot of it.
 */
.md-phero__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: var(--md-container-wide, 90rem); /* 1440px */
	margin-block-start: auto;
	margin-inline: auto;
	padding-inline: var(--md-container-gutter, 2rem); /* 48px from 768px up */
	padding-block-end: var(--md-space-xl, 3rem); /* 48px */
	color: var(--md-white, #fff);
}

/* --- Back link ----------------------------------------------------------- */
/*
 * Not .md-eyebrow: that primitive is the 13px eyebrow, and this is the 11px one
 * at 0.22em — the same values .md-shead__eyebrow uses. Reusing it would mean
 * overriding four of its eight properties, including its display, which is a
 * primitive bent out of shape rather than reused.
 */
.md-phero__back {
	display: inline-flex;
	align-items: center;
	/* 21.58px to the label in the comp: a 14px glyph box plus 8px. */
	gap: 0.5rem;
	margin: 0 0 var(--md-space-sm, 1rem); /* 16px to the heading */
	color: var(--md-yellow, #ecdd01);
	font-size: var(--md-text-micro, 0.6875rem); /* 11px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 16.5px */
	letter-spacing: 0.22em; /* 2.42px on 11px */
	text-transform: uppercase;
	text-decoration: none;
}

/*
 * The brand arrow-right, mirrored — the comp's own vectors are that same glyph
 * rotated, at an identical 1/12 stroke-to-box ratio. Mirroring rather than
 * shipping a near-duplicate arrow-left asset.
 */
.md-phero__back-icon {
	display: inline-flex;
	flex: none;
	width: 0.875rem; /* 14px */
	height: 0.875rem;
	transform: scaleX(-1);
	transition: transform var(--md-transition, 200ms ease);
}

.md-phero__back-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
}

/* Nudges back the way it points, mirroring the brand button's forward nudge. */
a.md-phero__back:hover .md-phero__back-icon,
a.md-phero__back:focus-visible .md-phero__back-icon {
	transform: scaleX(-1) translateX(-0.125rem);
}

a.md-phero__back:hover .md-phero__back-label,
a.md-phero__back:focus-visible .md-phero__back-label {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --- Filing line — Figma 232:26 ------------------------------------------ */
/*
 * Its own class rather than properties on .md-phero__back: this is a different
 * element in a different comp, not a back link with two values changed, so it
 * carries its own three metrics and needs no specificity contest with anything.
 *
 * 2px tracking on 11px and a 15px line box, against the back link's 2.42px and
 * 16.5px. Same 16px to the heading, same --md-yellow.
 */
.md-phero__meta {
	margin: 0 0 var(--md-space-sm, 1rem); /* 16px */
	color: var(--md-yellow, #ecdd01);
	font-size: var(--md-text-micro, 0.6875rem); /* 11px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.364; /* 15px on 11px */
	letter-spacing: 0.1818em; /* 2px on 11px */
	/*
	 * The uppercasing is presentation, not data — the values arrive from the CMS in
	 * their real casing, so a screen reader reads "New Mexico" rather than spelling
	 * out an initialism.
	 */
	text-transform: uppercase;
}

/* --- Heading ------------------------------------------------------------- */
/*
 * 48px at the comp's 1149 width, down to 32px at 375 and capped there — the
 * band is a fixed height, so an unbounded heading would eat it.
 */
.md-phero__title {
	max-width: 56rem; /* 896px — matches the hero banner's text column */
	margin: 0;
	color: var(--md-white, #fff);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	font-size: clamp(2rem, 1.52rem + 2.07vw, 3rem);
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.08; /* 51.84px on 48px */
}

/* --- Case study heading — Figma 232:26 ----------------------------------- */
/*
 * The same 48px at the same top end, set looser and narrower: 60/48 is 1.25 where
 * 273:330 is 51.84/48, and the measure is the comp's own 768px column rather than
 * the 896px the interior heroes use. Neither shows on a one-line heading, which is
 * how both comps happen to be drawn — they only diverge once a title wraps, which
 * a real case study title will.
 *
 * Plain declarations, not properties: no control writes either value, so there is
 * nothing for a var() indirection to protect against.
 */
.md-phero--case .md-phero__title {
	max-width: 48rem; /* 768px */
	line-height: 1.25; /* 60 / 48 */
}

/*
 * 64px under the copy against 273:330's 48px. Scoped to the wider viewports on
 * purpose — the stacked block below sets 24px at (0,1,0) and this selector is
 * (0,2,0), so an unscoped rule would beat it inside the media query and leave a
 * phone with 64px of dead band under the heading.
 */
@media (min-width: 48em) {
	.md-phero--case .md-phero__body {
		padding-block-end: var(--md-space-2xl, 4rem); /* 64px */
	}
}

/* --- Stacked ------------------------------------------------------------- */
/*
 * Height is deliberately not touched here. The widget's responsive control owns
 * --md-phero-height at all three breakpoints — 512 / 448 / 352 — and a query
 * restating it would either lose to that control or, if it read a second
 * property to win, make the control's mobile value do nothing.
 */
@media (max-width: 47.9375em) {
	.md-phero__body {
		padding-block-end: var(--md-space-md, 1.5rem); /* 24px */
	}
}

/* --- Intro paragraph — Figma 449:156 ------------------------------------- */
/*
 * A later addition to 273:330: a short paragraph under the heading, on a 576px
 * measure rather than the heading's 896px, with 20px between them.
 *
 * At the end of the file so it sits after the stacked block above and its single
 * class cannot be undercut by source order.
 */
.md-phero__intro {
	max-width: 36rem; /* 576px */
	color: var(--md-white, #fff);
	/* 16px, not the 15px drawn — the site's body-copy floor. See --md-text-small. */
	font-size: var(--md-text-small, 1rem); /* 16px */
	line-height: var(--md-leading-body, 1.625); /* 26px */
}

/* Only under a heading, so an intro-only hero has no orphaned gap above it. */
.md-phero__title + .md-phero__intro {
	margin-block-start: 1.25rem; /* 20px */
}

/* A rich editor, so the paragraphs inside are the editor's. */
.md-phero__intro > p {
	margin: 0;
}

.md-phero__intro > p + p {
	margin-block-start: 1.25rem;
}

/*
 * The comp's credentials line — "OSHA • MSHA Part 48 • EM 385-1-1 • Site-Specific
 * Training" — is the same paragraph set bold in light blue, after a break. Mapping
 * it to <strong> means an editor reaches it with the toolbar's bold button and no
 * custom class; the trade-off is that bolding a word mid-sentence also tints it,
 * which is why the control says to use bold for this and nothing else.
 *
 * Light blue rather than the brand blue the rest of the site emphasises with: on
 * this scrim brand blue is far too dark to read, and light blue is what the comp
 * draws.
 */
.md-phero__intro strong,
.md-phero__intro b {
	color: var(--md-light-blue, #8ac9ec);
	font-weight: var(--md-weight-bold, 700);
}

/* On a photograph a link needs an underline to read as one at all. */
.md-phero__intro a {
	color: var(--md-white, #fff);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --- Background video ---------------------------------------------------- */
/*
 * The video layer, the button and its glyph are .md-videobg, .md-motion and
 * .md-motion__glyph in sections.css, shared with the Hero Banner. Only where the
 * control sits is this band's own.
 *
 * Bottom right. The copy sits bottom left in both of this widget's comps, so that is
 * the one corner where the control cannot land on the heading, the filing line or the
 * intro paragraph.
 */
.md-phero__motion {
	inset-block-end: var(--md-space-md, 1.5rem);
	inset-inline-end: var(--md-space-md, 1.5rem);
}

/*
 * The copy is a positioned flex child and the control is its sibling, so without this
 * the button would sit under the scrim's ::after and be unclickable at the corner
 * where the scrim is at its densest.
 */
.md-phero__media > .md-motion {
	z-index: 2;
}