/*
 * gm/page-header — the header for an interior page.
 *
 * Figma: Page header - hero, Property 1=Desktop (719:7646) and Mobile
 * (719:7648); Page header - compact, Desktop (719:8148) and Mobile (719:8150).
 *
 * The two are one header with and without a photograph. Everything they share
 * is set once here; the variants only carry the ground, the padding and the
 * colours that follow from the ground.
 *
 * The top paddings, 192 over a photo and 264 on the flat ground, already
 * include the 72 fixed header. They are not off-scale mistakes and must not be
 * snapped or offset again in code.
 */

.gm-page-header {
	position: relative;
	/* Sits flush under the header (overrides the flow block-gap). */
	margin-block-start: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	/* The copy sits at the foot of the band. */
	justify-content: flex-end;
	overflow: hidden;
	padding-inline: var(--gm-grid-margin);
	background-color: var(--wp--preset--color--blue-1);
}

.gm-page-header__content {
	/* Lifts the copy above the absolutely-placed photo and scrim. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--32);
}

/* The design sets the two heading lines 8 apart. */
.gm-page-header__heading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.gm-page-header__heading-sans,
.gm-page-header__heading-serif {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--xxl);
}

.gm-page-header__heading-sans {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.gm-page-header__heading-serif {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}

.gm-page-header__intro {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	line-height: 1.3;
}

/*
 * Hero: the statement over a full-bleed photograph.
 */
.gm-page-header--hero {
	/*
	 * Fills the viewport within the shared band, the same as gm/hero, rather
	 * than sitting at the design's flat 850. Both are full-bleed photo headers
	 * and they were behaving differently: on a 900-tall screen this one stopped
	 * 50px short and the next section peeked in under it. The band is clamped
	 * (see --gm-section-vh) so it cannot get silly on a very tall or very short
	 * screen. The Figma frame is 850 because a Figma frame has to be some
	 * height; the hero's frame is 850 too and it has always used the band.
	 */
	min-block-size: var(--gm-section-vh);
	padding-block: var(--wp--preset--spacing--192) var(--wp--preset--spacing--96);
}

/* Position, size, crop and scroll drift come from .gm-parallax. */
.gm-page-header__img--empty {
	background-color: var(--wp--preset--color--blue-2);
}

/*
 * Two layers, as the design has them: a flat 20% black over the whole photo and
 * a gradient that deepens towards the foot where the copy sits.
 */
.gm-page-header__scrim {
	position: absolute;
	inset: 0;
	background-color: var(--wp--custom--color--black-20);
	background-image: var(--wp--preset--gradient--header-scrim);
}

/* White here, not Blue 5: the design lifts this line clear of the serif. */
.gm-page-header--hero .gm-page-header__heading-sans,
.gm-page-header--hero .gm-page-header__intro {
	color: var(--wp--custom--color--white);
}

.gm-page-header--hero .gm-page-header__heading-serif {
	color: var(--wp--preset--color--white);
}

/* Six columns, as the design sets it. */
.gm-page-header--hero .gm-page-header__intro {
	max-inline-size: 42rem;
}

/*
 * Compact: the same header with no photograph. On the flat ground the pairing
 * steps down a tone, Blue 5 over Blue 4, because there is no scrim to lift the
 * first line off.
 */
.gm-page-header--compact {
	/*
	 * 264 in the design, which is the 192 of clear space plus the 72 header
	 * standing over it. Written as the sum rather than as a flat 264 so it is
	 * obvious the header is already accounted for and nobody adds it twice.
	 */
	padding-block: calc(var(--wp--preset--spacing--192) + var(--gm-header-h, 72px)) var(--wp--preset--spacing--96);
}

.gm-page-header--compact .gm-page-header__heading-sans,
.gm-page-header--compact .gm-page-header__intro {
	color: var(--wp--preset--color--white);
}

.gm-page-header--compact .gm-page-header__heading-serif {
	color: var(--wp--preset--color--blue-4);
}

.gm-page-header--compact .gm-page-header__intro {
	max-inline-size: 47.5rem;
}

@media (max-width: 900px) {

	/*
	 * One of the few places the type really does change on mobile: both heading
	 * lines drop 55 to 33. The sub-line stays at 18 and runs full width.
	 */
	.gm-page-header__heading-sans,
	.gm-page-header__heading-serif {
		font-size: var(--wp--preset--font-size--xl);
	}

	.gm-page-header__heading-sans {
		line-height: 1.05;
		letter-spacing: -0.03em;
	}

	.gm-page-header__heading-serif {
		line-height: 1.1;
		letter-spacing: -0.04em;
	}

	.gm-page-header--hero {
		padding-block-end: var(--wp--preset--spacing--64);
	}

	.gm-page-header--compact {
		padding-block-end: var(--wp--preset--spacing--64);
	}

	.gm-page-header--hero .gm-page-header__intro,
	.gm-page-header--compact .gm-page-header__intro {
		max-inline-size: none;
	}
}