/**
 * Hero Banner — Figma section 02 (node 1092:19002)
 *
 * 1920x950, padding 0 240. Background paint stack, bottom-most first:
 *   1. video (poster 50ee8156…, source 21a7757e…), scaleMode FILL
 *   2. solid rgba(0, 0, 0, 0.5)
 * Never collapse that stack to a flat colour — the last paint alone would
 * report the hero as solid #000000, which is wrong.
 *
 * Measured bands inside the 950px frame:
 *   0-137    site header (overlaid, rendered by header.php)
 *   769-944  form bar, an additional ~45% black over the base overlay
 *   944-950  6px #01963A bottom rule
 */

.hero-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 950px;
	border-bottom: 6px solid var(--primary-green);
	overflow: hidden;
}

/* --- paint stack -------------------------------------------------- */
.hero-banner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-banner__video,
.hero-banner__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The video paints over the poster once it starts. */
.hero-banner__video {
	z-index: 1;
}

.hero-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgb(0 0 0 / calc(var(--hero-overlay-opacity, 0.5) * 100%));
}

/* --- heading ------------------------------------------------------ */
.hero-banner__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: var(--header-height);
	/* The design leaves only ~7px between the last heading line and the form
	 * bar; the bar itself is what creates the visual breathing room. */
	padding-bottom: 7px;
}

.hero-banner__heading {
	max-width: 1200px;
	margin: 0;
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--fs-84);
	font-weight: 800;
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

/* The Figma heading is a single text node with character-level overrides:
 * three 84px lines, one 36px line, then a final 84px line with green accents.
 * The editor marks the small line up with this class.
 *
 * It has to be a block, not an inline-block: an inline-block cannot shrink the
 * line box below the h1's own 84px strut, so the 36px line was occupying 84px
 * and pushing itself and the final line ~30px below the design. As a block it
 * gets the measured 56px band (Figma line boxes 619-675) and the cap lands 4px
 * in. The stored heading therefore carries NO <br> either side of this span. */
/* The generic `h1 span { color: green }` accent rule must not catch this one —
 * it is a size override for a whole line, not an accent word. */
.hero-banner__heading .hero-banner__heading-sm {
	color: inherit;
	display: block;
	font-size: var(--fs-36);
	font-weight: 700;
	line-height: 46px;
	padding-bottom: 10px;
}

/* Belt and braces: if an editor re-adds a line break around the small line,
 * drop it rather than letting it open an empty 84px line box. */
.hero-banner__heading-sm + br {
	display: none;
}

/* --- form bar ----------------------------------------------------- */
.hero-banner__form-bar {
	position: relative;
	z-index: 2;
	background-color: rgb(0 0 0 / 45%);
}

/* Measured bar: 769-944 = 175px. Heading cap 812-834, fields 867-912, 32px
 * clear underneath (Gravity Forms contributes ~13px of that on its own).
 *
 * 40/40 at the developer's instruction. Previously 45/27, itself up from the
 * measured 42/18 — so the bar has been off the drawn height by design for a
 * while; this evens the two sides. */
.hero-banner__form-inner {
	padding-block: 40px 40px;
}

.hero-banner__form-heading {
	margin-bottom: var(--space-20);
	color: var(--white);
	font-family: var(--font-heading);
	font-size: var(--fs-36);
	font-weight: 700;
	line-height: var(--lh-tight);
	text-transform: uppercase;
}

/* --- responsive --------------------------------------------------- */
@media (max-width: 1199px) {

	.hero-banner {
		min-height: 780px;
	}
}

@media (max-width: 991px) {

	.hero-banner {
		min-height: 640px;
	}

	.hero-banner__inner {
		padding-bottom: var(--space-30);
	}

	.hero-banner__form-inner {
		padding-block: var(--space-30);
	}

	.hero-banner__form-heading {
		margin-bottom: var(--space-20);
	}
}

@media (max-width: 767px) {

	.hero-banner {
		min-height: 560px;
		border-bottom-width: 4px;
	}

	/* The desktop heading is 84px on --lh-tight, where cap-to-cap leading is
	 * right for a display line. Stacked at 32 it is not: the caps of a
	 * three-line title collide, and the first line's ascender is clipped by the
	 * header sitting directly on top of it. A little leading, and enough room
	 * under the header for the line box to clear it. */
	.hero-banner__heading {
		max-width: none;
		line-height: 1.15;
	}

	/* 46px is a fixed line box sized against the 36px desktop sub-line. At the
	 * 24px this floors to, it left 46px rows next to the heading's 32 — three
	 * of them at 375 — which read as a second title rather than a sub-line.
	 * Proportional here, so it stays subordinate at every width. */
	.hero-banner__heading .hero-banner__heading-sm {
		line-height: 1.3;
		padding-bottom: 6px;
	}

	.hero-banner__inner {
		/* 45 at the developer's instruction, up from the 25 that first cleared
		 * the header. */
		padding-top: calc(var(--header-height) + 45px);
	}
}

/* Respect reduced-motion: hide the video so the poster frame beneath it shows. */
@media (prefers-reduced-motion: reduce) {

	.hero-banner__video {
		display: none;
	}
}