/* Hero components: .hero (homepage + template-parts/components/page-hero.php)
   and .dark-hero (template-parts/components/dark-hero.php). Loaded on every page. */

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	background: var(--color-navy-950);
	color: var(--color-white);
	overflow: hidden;
}
.hero__grid {
	display: grid;
	grid-template-columns: minmax(360px, 660px) 1fr;
	align-items: stretch;
	min-height: 640px;
}
.hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 1.75rem;
	padding-block: var(--space-2xl);
	padding-right: var(--space-lg);
	padding-left: clamp(var(--space-md), calc((100vw - var(--container-width)) / 2 + var(--space-md)), 4rem);
}
.hero__heading {
	color: var(--color-white);
	font-size: clamp(2.4rem, 4.4vw, 60px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: 700;
	text-wrap: balance;
}
.hero__subheading {
	color: var(--color-gray-300);
	font-size: 19px;
	line-height: 1.65;
	max-width: 48ch;
}
.hero__ctas { display: flex; gap: 1rem; flex-wrap: nowrap; margin-top: 0.5rem; align-self: flex-start; justify-content: flex-start; }
.hero__ctas .btn { white-space: nowrap; font-size: 1rem; padding: 0 2.25rem; min-height: 58px; }

.hero__media { position: relative; overflow: hidden; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; transition: transform 0.6s ease; }
/* Blend the photo into the navy text column and settle its bottom edge. */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, var(--color-navy-950) 0%, rgba(15,24,71,0) 38%),
		linear-gradient(0deg, rgba(15,24,71,0.55) 0%, rgba(15,24,71,0) 30%);
}

@media (max-width: 960px) {
	.hero__grid { grid-template-columns: 1fr; min-height: 0; }
	.hero__content { padding-inline: var(--space-md); }
	.hero__media { min-height: 320px; }
	.hero__media::after { background: linear-gradient(180deg, var(--color-navy-950) 0%, rgba(15,24,71,0) 35%); }
}

@media (max-width: 420px) {
	.hero__ctas { flex-wrap: wrap; }
}

@media (max-width: 640px) {
	.hero__media { display: flex; flex-direction: column; }
}

/* Shared dark-hero component (Contact + Careers) */
.dark-hero {
	position: relative;
	background-color: var(--color-navy-950);
	background-size: cover;
	background-position: center right;
	overflow: hidden;
	color: var(--color-white);
}
.dark-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15,24,71,0.97) 0%, rgba(15,24,71,0.88) 50%, rgba(15,24,71,0.4) 80%, rgba(15,24,71,0.1) 100%);
	z-index: 1;
}
.dark-hero__grid {
	position: relative;
	z-index: 2;
	max-width: 1280px;
	margin-inline: auto;
	padding: var(--space-3xl) var(--space-xl);
	min-height: 520px;
	display: flex;
	align-items: center;
}
.dark-hero__content {
	max-width: 580px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.dark-hero__badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: rgba(78,202,212,0.12);
	border: 1px solid rgba(78,202,212,0.35);
	color: var(--color-accent);
	border-radius: 999px;
	padding: 0.35rem 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: var(--space-sm);
}
.dark-hero__content h1 {
	color: var(--color-white);
	font-size: clamp(2.2rem, 4.2vw, 3.2rem);
	line-height: 1.18;
	font-weight: 800;
	margin: 0 0 var(--space-sm);
}
.dark-hero__content > p {
	color: rgba(255,255,255,0.75);
	font-size: 1.1rem;
	line-height: 1.65;
	margin: 0;
	max-width: 44ch;
}
.dark-hero__ctas {
	display: flex;
	gap: 0.85rem;
	flex-wrap: wrap;
	margin-top: var(--space-lg);
}
@media (max-width: 640px) {
	.dark-hero__grid { padding: var(--space-2xl) var(--space-md); min-height: 0; }
}