/* =====================================================================
   Shared interior page hero (template-parts/page-hero.php)

   A dark navy banner reused across interior pages: optional background
   image with a dark overlay, an eyebrow, a bold white title, an optional
   subtitle and an optional breadcrumb in light gray. Consumes the global
   design tokens so it stays on-theme wherever it is used.
   ===================================================================== */

.page-hero {
	position: relative;
	background-color: var(--color-navy-deep);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Subtle warm glow so a flat-color hero never looks bare. */
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 140% at 12% -10%, rgba(232, 122, 47, 0.18), transparent 55%),
		radial-gradient(90% 120% at 100% 120%, rgba(245, 166, 35, 0.10), transparent 60%);
	pointer-events: none;
}

.page-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(3rem, 8vw, 6rem);
	max-width: 820px;
}

.page-hero__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-muted);
}

.page-hero__crumb {
	color: var(--color-light-gray);
	text-decoration: none;
	transition: color var(--duration-normal) var(--ease-default);
}

.page-hero__crumb:hover,
.page-hero__crumb:focus-visible {
	color: var(--color-orange);
}

.page-hero__crumb-sep {
	color: var(--color-muted);
}

.page-hero__crumb--current {
	color: var(--color-muted);
}

.page-hero__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-orange);
}

.page-hero__title {
	margin: 0;
	font-size: var(--text-4xl);
	line-height: 1.05;
	letter-spacing: var(--letter-tight);
	color: var(--color-white);
}

.page-hero__subtitle {
	margin: var(--space-4) 0 0;
	max-width: 60ch;
	font-size: var(--text-lg);
	line-height: 1.6;
	color: var(--color-light-gray);
}