/**
 * Meridian Sections — Hero Banner
 */

/* The hero is always full bleed — no container, no radius, no section
 * padding — so the image runs edge to edge and, on hero pages, up underneath
 * the transparent header. */
.md-hero__media {
	position: relative;
	display: flex;
	overflow: hidden;
	background-color: var(--md-grey-100, #eceef1);
	isolation: isolate;
}

.md-hero__media--standard {
	aspect-ratio: 16 / 9;
}

.md-hero__media--tall {
	aspect-ratio: 4 / 3;
}

/* Screen height. min-height rather than height so a long headline or a stacked
 * button row can still push the hero taller instead of overflowing it.
 * svh (the viewport with mobile browser chrome showing) keeps it from jumping
 * as the address bar collapses; the vh line above is the fallback. */
.md-hero__media--viewport {
	min-height: 90vh;
	min-height: 90svh;
}

/*
 * The image layer. Two classes because Elementor ships `.elementor img` at (0,1,1),
 * which would otherwise reclaim the height.
 *
 * The video is the same layer and used to share this rule; it is .md-videobg in
 * sections.css now, shared with the Page Hero. A <video> needs no help beating
 * `.elementor img`, so one class is enough there.
 */
.md-hero .md-hero__media > img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Background video --------------------------------------------------- */
/*
 * The button, its glyph and the video layer are .md-motion / .md-motion__glyph /
 * .md-videobg in sections.css, shared with the Page Hero. Only where the control
 * sits is this comp's: bottom right, opposite the copy, which sits bottom left —
 * the one corner where it cannot land on the headline or the button.
 */
.md-hero__motion {
	inset-block-end: var(--md-space-md, 1.5rem);
	inset-inline-end: var(--md-space-md, 1.5rem);
}

/* The scrim (.md-scrim, from the theme) sits above the image but below text. */
.md-hero__media.md-scrim::after {
	z-index: -1;
}

/* --- Text block ----------------------------------------------------------
 * Figma 1:1365 / 1:1367. The image is full bleed but the copy is not: it caps
 * at 1440px with a 48px inline inset and 80px beneath, and sits at the bottom
 * of the frame. Spacing between the three blocks is set with margins rather
 * than a single flex gap because the comp uses different steps — 24px above
 * the paragraph, 40px above the button.
 * -------------------------------------------------------------------- */
.md-hero__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	max-width: var(--md-container-wide, 90rem); /* 1440px */
	margin-inline: auto;
	padding-inline: var(--md-container-gutter, 2rem); /* 48px from 768px up */
	padding-block-end: var(--md-space-3xl, 5rem); /* 80px */
	color: var(--md-white, #fff);
}

.md-hero__body--bottom-left {
	margin-block-start: auto;
}

.md-hero__body--middle-left {
	margin-block: auto;
}

.md-hero__body--center {
	align-items: center;
	margin: auto;
	text-align: center;
}

.md-hero__eyebrow {
	color: var(--md-light-blue, #8ac9ec);
}

.md-hero__eyebrow + * {
	margin-block-start: var(--md-space-sm, 1rem);
}

.md-hero__headline {
	margin: 0;
	max-width: 56rem; /* 896px — the comp's text column */
	color: var(--md-white, #fff);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	/*
	 * 36px at 375 up to the comp's 64px at 1440 — the mobile end comes from Figma
	 * 120:7, the top end from 1:1365. Re-anchored rather than overridden in a media
	 * query so the ramp stays continuous and there is no jump at a breakpoint; the
	 * slope was solved to land on 64px at 1440 exactly, so desktop is untouched.
	 */
	font-size: clamp(2.25rem, 1.634rem + 2.629vw, 4rem);
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.08; /* 69.12 / 64 */
	letter-spacing: 0;
	text-wrap: balance;
}

/* The comp's supporting copy is a lead paragraph, not a small caption. */
.md-hero__caption {
	margin: 0;
	margin-block-start: var(--md-space-md, 1.5rem); /* 24px */
	max-width: 37.75rem; /* 604px */
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--md-text-body, 1.125rem); /* 18px */
	line-height: var(--md-leading-body, 1.625); /* 29.25px */
}

.md-hero__actions {
	margin-block-start: 2.5rem; /* 40px */
	--md-gap: var(--md-space-sm, 1rem);
}

/*
 * The primary button needs no hero-specific styling: Figma 2:1678 is exactly
 * .md-btn--primary.md-btn--on-dark — a 56px blue disc, a 22px arrow, and a
 * white label 72px from the leading edge (56px disc + 16px gap). The widget
 * passes on_dark for it, so the label is white from the outset and the disc
 * only expands to fill the pill on hover.
 */
.md-hero__actions .md-btn--primary:hover::before,
.md-hero__actions .md-btn--primary:focus-visible::before {
	background-color: var(--md-blue-dark, #005893);
}

/* --- Stacked ------------------------------------------------------------- */
/*
 * The comp's 80px beneath the copy is drawn at 1440. On a phone that is a lot of
 * empty image below the headline, so it comes down to 48px — the same step the
 * inline gutter uses, which keeps the inset square in the corner.
 *
 * 47.9375em is the breakpoint the rest of the plugin's content uses; the mobile
 * *header* sits at 61.9375em, which is a different question.
 *
 * At the end of the file on purpose. A media query adds no specificity, so these
 * single-class rules only beat the base ones by coming after them — placed above
 * .md-hero__headline the leading override was silently discarded and the mobile
 * headline kept the desktop 1.08.
 */
@media (max-width: 47.9375em) {
	.md-hero__body {
		padding-block-end: var(--md-space-xl, 3rem); /* 48px */
	}

	/*
	 * Figma 120:7. The leading has to be stated here: 42/36 is 1.167, and the
	 * desktop 1.08 would give 38.9px on a 36px headline. A unitless line-height
	 * scales with the font size but cannot change ratio, so the two ends need two
	 * values.
	 */
	.md-hero__headline {
		line-height: 1.167; /* 42 / 36 */
	}

	/* 16/25.6 on a phone, against the 18/29.25 lead paragraph at desktop. The
	 * phone step-down stops at the 16px body-copy floor rather than the 15px drawn. */
	.md-hero__caption {
		font-size: var(--md-text-small, 1rem); /* 16px */
		line-height: 1.6; /* 25.6 / 16 */
	}
}