/*
 * Page header.
 *
 * The band at the top of an inside page, in a light and a dark treatment. Both
 * wash left to right, because the copy sits on the left and needs the dense end
 * of the ramp behind it.
 *
 * The band is sized by a minimum rather than by padding alone: a header with no
 * deck would otherwise come out visibly shorter than one with a deck, and the
 * two read as the same band in the comps.
 */

.page-header {
	position: relative;
	display: grid;
	align-content: center;

	/*
	 * The floor is the height of the shortest band. Without it a header
	 * carrying a deck and one without would come out visibly different heights.
	 * The extra 5rem above the original floor gives photography room to read.
	 */

	min-height: 13.625rem;
	padding-block: clamp(1.25rem, 2.85vw, 2.25rem);

	/* Trims the wedge and any photography to the band. */
	overflow: hidden;

	.breadcrumbs {
		margin-bottom: 0.5rem;
	}
}

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

.page-header__media {
	position: absolute;
	inset: 0;
	z-index: 0;

	/* Holds the wash's multiply against the photograph rather than letting it
		   blend on through to the page behind. */

	isolation: isolate;
}

.page-header__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-header__title {
	/*
		 * In em, so the limit is tied to the heading's own size rather than to a
		 * pixel count that stops being right as the clamp scales it. Short titles
		 * are untouched; it exists for the long ones, chiefly press releases,
		 * whose headlines otherwise run the full width of the band as a single
		 * line nobody can track back from. text-wrap: balance below then evens
		 * out the lines it causes.
		 */

	max-inline-size: 20em;
	margin: 0;
	font-size: clamp(1.5rem, 0.9rem + 1.78vw, 2.5rem);
	text-wrap: balance;
}

.page-header__deck {
	/*
		 * Measured in em so the line length is tied to the deck's own size rather
		 * than drifting as the clamp scales it. The comp sets one line here, and
		 * this is just wide enough to hold it.
		 */

	max-width: 34em;
	margin: 0.625rem 0 0;
	font-size: clamp(0.75rem, 0.46rem + 0.46vw, 0.875rem);
	line-height: 1.5;
}

/*
	 * The brand corner. Shallower than the 45-degree one the site header drops
	 * below itself, because at this size a square wedge reads as a slab rather
	 * than as the same mark.
	 */

.page-header__wedge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	width: clamp(2.75rem, 7vw, 4.75rem);
	aspect-ratio: 4 / 3;
	background: var(--sk-green);
	clip-path: polygon(100% 0, 100% 100%, 0 0);
	pointer-events: none;
}

/*
	 * Colour and wash are set separately so that a browser which cannot parse
	 * the gradient drops back to the flat colour instead of to no background at
	 * all, which on the dark band would leave white copy on white.
	 */

.page-header--light {
	background-color: var(--sk-gray-warm);
	background-image: var(--sk-page-header-light);
	color: var(--sk-gray-copy);
}

.page-header--light .page-header__title {
	color: var(--sk-black);
}

.page-header--dark {
	--sk-crumb: color-mix(in srgb, var(--sk-white) 65%, transparent);
	--sk-crumb-current: var(--sk-support);
	--sk-crumb-divider: color-mix(in srgb, var(--sk-white) 35%, transparent);

	background-color: var(--sk-black);
	background-image: var(--sk-page-header-dark);
	color: color-mix(in srgb, var(--sk-white) 82%, transparent);
}

.page-header--dark .page-header__title {
	color: var(--sk-white);
}

/*
	 * With a photograph the wash is multiplied over it rather than laid on top
	 * opaquely, so the picture survives at the open end of the ramp while the
	 * heading still has a near-solid dark behind it.
	 */

.page-header--has-image .page-header__media::after {
	position: absolute;
	inset: 0;
	background-image: var(--sk-page-header-dark);
	opacity: 0.92;
	mix-blend-mode: multiply;
	content: "";
}