/*
 * Sub-page hero (spec §4.5 "Sub-page hero"). Section pt 64/80 is the header offset; inner py 64/96 (split) or
 * 80/112/144 (stacked). Plan fix 2: the inner top padding grows only as far as needed to clear the fixed header + 8px.
 */
.page-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-brand-dark);
	--section-pt: calc(var(--spacing) * 16);
	padding-top: var(--section-pt);
}
@media (min-width: 48rem) { .page-hero { --section-pt: calc(var(--spacing) * 20); } }
.page-hero__media { position: absolute; inset: 0; background-color: var(--color-brand-dark); }
.page-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
	scale: 2;
	transition: opacity var(--duration-image) var(--ease-default);
}
.js .page-hero__video:not(.is-visible) { opacity: 0; }
@media (min-width: 48rem) { .page-hero__video { scale: 1; } }
.page-hero__gradient { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--color-dark-80), var(--color-dark-60), var(--color-dark-40)); }
[dir="rtl"] .page-hero__gradient { background-image: linear-gradient(to left, var(--color-dark-80), var(--color-dark-60), var(--color-dark-40)); }

.page-hero__inner {
	position: relative;
	--inner-pt: calc(var(--spacing) * 16);
	--inner-pb: calc(var(--spacing) * 16);
	/* Clears the fixed header by 8px: enough to fix the covered stripe (Diensten/Info/Contact/Vacatures at 375 with the
	   notice bar) without moving heroes the live header never covered (Over at 375 sits exactly 8px clear). */
	padding-top: max(var(--inner-pt), calc(var(--header-h) + 0.5rem - var(--section-pt)));
	padding-bottom: var(--inner-pb);
}
@media (min-width: 48rem) { .page-hero__inner { --inner-pt: calc(var(--spacing) * 24); --inner-pb: calc(var(--spacing) * 24); } }
.page-hero--stacked .page-hero__inner { --inner-pt: calc(var(--spacing) * 20); --inner-pb: calc(var(--spacing) * 20); }
@media (min-width: 48rem) { .page-hero--stacked .page-hero__inner { --inner-pt: calc(var(--spacing) * 28); --inner-pb: calc(var(--spacing) * 28); } }
@media (min-width: 64rem) { .page-hero--stacked .page-hero__inner { --inner-pt: calc(var(--spacing) * 36); --inner-pb: calc(var(--spacing) * 36); } }

.page-hero__stripe { margin-bottom: calc(var(--spacing) * 6); }
.page-hero__title { font-weight: var(--font-weight-bold); color: var(--color-white); }
.page-hero__lead { color: var(--color-gray-300); }

/* split: 7/5 grid from 1024, gap 32, items-end */
.page-hero--split .page-hero__grid { display: grid; gap: calc(var(--spacing) * 8); align-items: end; }
@media (min-width: 64rem) {
	.page-hero--split .page-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.page-hero--split .page-hero__main { grid-column: span 7 / span 7; }
	.page-hero--split .page-hero__aside { grid-column: span 5 / span 5; }
}
.page-hero--split .page-hero__title { font-size: var(--text-4xl); line-height: var(--leading-display); }
.page-hero--split.page-hero--title-info .page-hero__title { font-size: var(--text-3xl); }
@media (min-width: 40rem) { .page-hero--split.page-hero--title-info .page-hero__title { font-size: var(--text-4xl); } }
@media (min-width: 48rem) { .page-hero--split .page-hero__title, .page-hero--split.page-hero--title-info .page-hero__title { font-size: var(--text-5xl); } }
@media (min-width: 64rem) { .page-hero--split .page-hero__title, .page-hero--split.page-hero--title-info .page-hero__title { font-size: var(--text-6xl); } }
.page-hero--split .page-hero__lead { font-size: var(--text-lg); line-height: var(--text-lg-lh); }
/* Info: lead is text-base below 640 (live `text-base sm:text-lg`). */
.page-hero--split.page-hero--title-info .page-hero__lead { font-size: var(--text-base); line-height: var(--text-base-lh); }
@media (min-width: 40rem) { .page-hero--split.page-hero--title-info .page-hero__lead { font-size: var(--text-lg); line-height: var(--text-lg-lh); } }

/* stacked (Over): one 672px column; H1 uses the text-* line-heights (no leading override) */
.page-hero--stacked .page-hero__grid { max-width: var(--container-2xl); }
.page-hero--stacked .page-hero__title { font-size: var(--text-3xl); line-height: var(--text-3xl-lh); margin-bottom: calc(var(--spacing) * 4); }
.page-hero--stacked .page-hero__lead { font-size: var(--text-base); line-height: var(--text-base-lh); }
@media (min-width: 40rem) {
	.page-hero--stacked .page-hero__title { font-size: var(--text-4xl); line-height: var(--text-4xl-lh); }
	.page-hero--stacked .page-hero__lead { font-size: var(--text-lg); line-height: var(--text-lg-lh); }
}
@media (min-width: 48rem) {
	.page-hero--stacked .page-hero__title { font-size: var(--text-5xl); line-height: var(--text-5xl-lh); margin-bottom: calc(var(--spacing) * 6); }
	.page-hero--stacked .page-hero__lead { font-size: var(--text-xl); line-height: var(--text-xl-lh); }
}
@media (min-width: 64rem) { .page-hero--stacked .page-hero__title { font-size: var(--text-6xl); line-height: var(--text-6xl-lh); } }