/* =============================================================================
 * SEVA GLOBAL — HOMEPAGE HERO
 * Full-width cultural image → headline, description and buttons on the
 * image → the three stats in a row below it.
 * Markup: template-parts/home/hero.php + template-parts/home/stats.php.
 *
 * Hand-authored, NOT Tailwind-compiled: edits here take effect without a
 * build step. Loaded on the front page only, after main.css and before
 * seva-custom.css (see inc/enqueue.php).
 * ============================================================================= */

.sg-hero {
	/* Brand navy tint over the photo so the white text stays readable. */
	--hero-tint:   21 39 71;                  /* --color-navy-deep #152747 */
	--hero-text:   #FFFFFF;
	--hero-text-2: rgb(255 255 255 / 0.92);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: rgb(var(--hero-tint));     /* shows while the image loads / if none is set */
	color: var(--hero-text);
}

/* -----------------------------------------------------------------------------
 * 1. Full-width image + tint
 * -------------------------------------------------------------------------- */
.sg-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.sg-hero__media img,
.sg-hero__media .sg-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Darker on the left behind the text, lighter on the right so the photo reads. */
.sg-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgb(var(--hero-tint) / 0.88) 0%,
		rgb(var(--hero-tint) / 0.66) 50%,
		rgb(var(--hero-tint) / 0.3) 100%);
}

/* -----------------------------------------------------------------------------
 * 2. Headline, description and buttons on the image
 * -------------------------------------------------------------------------- */
.sg-hero__inner {
	display: flex;
	align-items: center;
	min-height: 540px;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.sg-hero__content {
	max-width: 58rem;
}

/* Headline + description sized up from the theme's .sg-h1 / .sg-lead
   (42.7px / 29.3px on desktop). Desktop and phone sizes: Breakpoints below. */
.sg-hero .sg-hero__heading {
	margin: 0;
	color: var(--hero-text);
	font-size: 2.875rem;       /* 46px */
	line-height: 1.2;
	text-wrap: balance;
}

.sg-hero .sg-hero__lead {
	max-width: 46rem;
	margin: 1.5rem 0 0;
	color: var(--hero-text-2);
	font-size: 1.875rem;       /* 30px */
	line-height: 1.45;
	text-wrap: pretty;
}

.sg-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

/* Keep the button focus ring visible on the dark image. */
.sg-hero__ctas .sg-btn:focus-visible {
	outline-color: var(--hero-text);
}

/* -----------------------------------------------------------------------------
 * 3. Stats — three across, below the hero
 * -------------------------------------------------------------------------- */
.sg-hero-stats {
	padding: 3rem 0;
	background: #FFFFFF;
}

.sg-hero-stats__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 64rem;
	margin: 0 auto;
	text-align: center;
}

/* Thin divider between the three figures. */
.sg-hero-stats__item {
	padding: 0.25rem 1rem;
	border-left: 1px solid var(--color-border, #E4E7ED);
}

.sg-hero-stats__item:first-child {
	border-left: 0;
}

.sg-hero-stats__item dd {
	margin: 0;
}

/* Same terracotta as the original stats row. */
.sg-hero-stats__value {
	display: block;
	color: #C46A4A;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.sg-hero-stats__label {
	display: block;
	margin-top: 0.375rem;
	color: rgb(var(--sg-muted, 107 117 133));
	font-size: 1.25rem;
	line-height: 1.4;
}

/* -----------------------------------------------------------------------------
 * Breakpoints
 * -------------------------------------------------------------------------- */

/* Desktop: taller image. */
@media (min-width: 1024px) {
	.sg-hero__inner {
		min-height: 620px;
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	.sg-hero .sg-hero__heading {
		font-size: 3.25rem;    /* 52px (was 42.7px) */
	}
	.sg-hero .sg-hero__lead {
		font-size: 2rem;       /* 32px (was 29.3px) */
	}
	.sg-hero-stats {
		padding: 3.5rem 0;
	}
	.sg-hero-stats__value {
		font-size: 2.75rem;
	}
}

/* Phones: even tint (text covers most of the image), tighter spacing. */
@media (max-width: 639px) {
	.sg-hero__media::after {
		background: rgb(var(--hero-tint) / 0.72);
	}
	.sg-hero__inner {
		min-height: 0;
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.sg-hero .sg-hero__heading {
		font-size: 2rem;       /* 32px (was 28px) */
	}
	.sg-hero .sg-hero__lead {
		margin-top: 1.25rem;
		font-size: 1.25rem;    /* 20px (was 18px) */
		line-height: 1.55;
	}
	.sg-hero-stats {
		padding: 2rem 0;
	}
	.sg-hero-stats__item {
		padding: 0.25rem 0.5rem;
	}
	.sg-hero-stats__value {
		font-size: 1.75rem;
	}
	.sg-hero-stats__label {
		font-size: 0.9375rem;
	}
}



/* Phones: stats stacked vertically, one per row. */
@media (max-width: 639px) {
	.sg-hero-stats__list {
		grid-template-columns: 1fr;
		max-width: 20rem;
	}
	.sg-hero-stats__item {
		padding: 1rem 0;
		border-left: 0;
		border-top: 1px solid var(--color-border, #E4E7ED);
	}
	.sg-hero-stats__item:first-child {
		border-top: 0;
	}
}