/* ────────────────────────────────────────────────────────────
   03-hero.css — hero banner family
   Class chains:
     .section-hero                         — shared base
     .section-hero.landing-hero            — landing pages (always dark gradient)

   The landing hero gradient is unconditional — no is-style-bg-*
   class is needed or used. The dark horizontal fade is the only
   treatment; block style options in the sidebar are inert on
   this component.
   ──────────────────────────────────────────────────────────── */

/* ── Shared family base (.section-hero) ───────────────────── */
.section-hero {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
	isolation: isolate;
	padding: var(--spacing-xl) var(--spacing-md);
	min-height: 250px;
}

/* Default overlay — light vertical wash (for non-landing-hero uses) */
.section-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(
		180deg,
		var(--color-overlay-light) 0%,
		var(--color-overlay-light-fade) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* Neutralize any accidental is-style-bg-* background-color so it
   doesn't paint over the hero image. */
.section-hero.is-style-bg-light,
.section-hero.is-style-bg-medium,
.section-hero.is-style-bg-dark {
	background-color: transparent;
}

/* ── Inner content wrapper ────────────────────────────────── */
/* Lifted above the ::before overlay. */
.section-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--spacing-sm);
	min-height: inherit;
}

/* ── Hero family — always-dark horizontal fade ────────────── */
/* Shared by landing-hero and home-hero: heavy black on the left
   under copy, ramping to transparent so the photo subject breathes.
   No is-style-bg-* dependency — this is the only treatment. */
.section-hero.landing-hero::before,
.section-hero.home-hero::before {
	background-image: linear-gradient(
		90deg,
		rgb(0 0 0 / 95%) 3%,
		rgb(0 0 0 / 88%) 22%,
		var(--color-overlay-dark-fade) 42%,
		transparent 55%
	);
}

/* ── Landing Hero — typography ────────────────────────────── */
/* Text is always white — no is-style-bg-* dependency. */
.landing-hero h1,
.landing-hero h2 {
	font-family: var(--font-primary);
	font-size: var(--text-display-xl);
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	max-width: 18ch;
	margin: 0;
}

.landing-hero p {
	font-family: var(--font-body);
	font-size: var(--text-body-xl);
	line-height: var(--line-height-loose);
	color: var(--color-white);
	max-width: 43ch;
	margin: 0;
}

/* ── Button group ─────────────────────────────────────────── */
.landing-hero .wp-block-buttons {
	gap: var(--spacing-md);
	margin-top: var(--spacing-lg);
	flex-wrap: wrap;
}

/* ── Home Hero ───────────────────────────────── */
.home-hero {
	min-height: 55vh;
}

/* ── Home Hero — typography ───────────────────────────────── */
/* Default color is white (for "Stronger Families" line). The
   accent span gets --color-blue-primary for the teal first line. */
.home-hero h1 {
	font-family: var(--font-primary);
	font-size: var(--text-display-xl);
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	max-width: 16ch;
	margin: 0 0 var(--spacing-xs) 0;
}

.home-hero .home-hero__accent {
	color: var(--color-blue-primary);
}

.home-hero p {
	font-family: var(--font-body);
	font-size: var(--text-body-xl);
	line-height: var(--line-height-loose);
	color: var(--color-white);
	max-width: 42ch;
	margin: 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
	.gb-text-hhero04,
	.landing-hero p {
		display: none;
	}

	.section-hero {
		padding: var(--spacing-2xl) var(--spacing-sm);
		min-height: 320px;
	}

	/* Landing/home hero: compact on mobile. min-height (not
	   max-height) so a long heading can still grow the box instead
	   of overflowing past it and being clipped invisible by the
	   parent's overflow: hidden. Specificity (0,2,0) beats the
	   .section-hero rule above regardless of source order. */
	.section-hero.landing-hero,
	.section-hero.home-hero {
		min-height: 230px;
	}

	/* Pin text to the bottom of the hero on mobile. */
	.section-hero__inner {
		justify-content: flex-end;
	}

	/* Swap to a bottom-up dark wash: dark at the bottom where
	   the text sits, fading to transparent at the top. */
	.section-hero.landing-hero::before,
	.section-hero.home-hero::before {
		background-image: linear-gradient(
			0deg,
			rgb(0 0 0 / 90%) 0%,
			rgb(0 0 0 / 60%) 40%,
			transparent 70%
		);
	}
}