/* =====================================================================
   components/page-hero.css — inner-page photographic hero
   (template-parts/global/page-hero.php).
   ===================================================================== */

.page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 42.8125rem;
	/* 685px */
	padding-block: 5rem 4rem;
	overflow: hidden;
	background-color: var(--black-bar);
}

/* Shows through only until the hero image paints. */
.page-hero {
	background-color: #080A0C;
}

/* Full-bleed at natural scale — same construction as the homepage hero. */
.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Light insurance only — see the note on .hero-section__scrim. */
.page-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg,
			rgba(6, 8, 10, .42) 0%,
			rgba(6, 8, 10, .3) 24%,
			rgba(6, 8, 10, .1) 36%,
			rgba(6, 8, 10, 0) 44%);
}

.page-hero__inner {
	position: relative;
	z-index: 2;
}

/*
 * Copy measure. Each page's design sets its own: About uses ~688px, which is what
 * breaks its title after "trusted", while Contact needs ~832px to keep its
 * headline on one line. Pages override --page-hero-measure.
 */
.page-hero {
	--page-hero-measure: 43rem;
}

.page-hero__content {
	max-width: var(--page-hero-measure);
}

/* -- Breadcrumb -- */
/* 27px, not 40: the gap from the trail's baseline to the headline's cap measures
   67–70.5px in all four hero exports, against 93px at the old value. */
.page-hero__breadcrumb {
	margin-bottom: 1.4375rem;
}

.page-hero__breadcrumb .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem;
	padding: 0;
	list-style: none;
	background: transparent;
}

/* 15px: the trail's lowercase x-height measures 7.0px in every export, against
   8.0px at the 17px this used to be. */
.page-hero__breadcrumb .breadcrumb__item {
	display: inline-flex;
	align-items: center;
	font-size: .9375rem;
	color: #fff;
}

.page-hero__breadcrumb .breadcrumb__link {
	color: #fff;
}

.page-hero__breadcrumb .breadcrumb__link:hover,
.page-hero__breadcrumb .breadcrumb__link:focus-visible {
	color: var(--accent-gold);
}

.page-hero__breadcrumb .breadcrumb__separator {
	color: rgba(255, 255, 255, .55);
}

/* -- Copy -- */
.page-hero__eyebrow {
	display: block;
	margin-bottom: .875rem;
	color: var(--primary-color);
}

.page-hero__title {
	margin-bottom: 1.75rem;
	font-size: clamp(1.875rem, 1.33rem + 2.34vw, 3.375rem);
	/* 54px — inner pages set a smaller headline than the homepage hero */
	line-height: 1.14;
	color: #fff;
}

.page-hero__accent {
	color: var(--primary-color);
}

/*
 * 20px on a 34px baseline, not 17/34. The lowercase x-height measures 9.0px in
 * all five hero exports against 7.5px at 17px, and the size is what sets the
 * wrap: at 17px this paragraph fits "…with honest advice on the" on its first
 * line where every design breaks it after "honest". The line pitch is unchanged,
 * so no band height moves.
 */
.page-hero__text {
	max-width: 36rem;
	margin-bottom: 2.5rem;
	font-size: clamp(1.0625rem, 0.99rem + 0.29vw, 1.25rem);
	line-height: 1.7;
	color: #D2E1F7;
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1.125rem;
}