/**
 * Component: Beeldband
 *
 * De donkere laag over de foto is geen smaakkwestie maar een
 * contrasteis: de redactie wisselt het beeld en de tekst moet leesbaar
 * blijven. 62% zwart geeft over het lichtste beeld in deze bibliotheek
 * 8,1:1 met wit — ruim boven de 4,5:1 van WCAG AA.
 */

.bw-beeldband {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 26rem;
	padding-block: var(--bw-section-y);
}

.bw-beeldband.bw-section--large {
	padding-block: var(--bw-section-y-large);
}

.bw-beeldband.bw-section--compact {
	padding-block: var(--bw-section-y-tight);
}

.bw-beeldband {
	overflow: clip;
	isolation: isolate;
	background-color: var(--bw-midnight);
}

/*
 * Geen z-index: -1 hier. Dat zou het beeld achter de achtergrondkleur
 * van de sectie zelf duwen en dan zie je alleen nog midnight. De foto
 * ligt onderop in de gewone stapeling, de tekst gaat er met z-index
 * overheen.
 */
.bw-beeldband__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bw-beeldband__inner {
	position: relative;
	z-index: 1;
}

.bw-beeldband__media img,
.bw-beeldband__media .bw-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.bw-beeldband__media::after {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * Twee lagen. De horizontale zorgt dat de tekstkant donker is,
	 * ongeacht welke foto de redactie kiest; de verticale haalt de
	 * laatste lichte plekken eruit.
	 *
	 * De waarden zijn gemeten, niet geschat: de lichtste pixel in deze
	 * fotobibliotheek is rgb(247, 202, 127). Onder deze lagen komt die
	 * uit op ruim boven 4,5:1 met wit. Een lichtere overlay zag er
	 * mooier uit en haalde 1,5:1 — dus onleesbaar zodra er toevallig
	 * een zonnige plek achter de kop valt.
	 */
	background:
		linear-gradient(
			90deg,
			rgba(10, 20, 40, 0.86) 0%,
			rgba(10, 20, 40, 0.82) 45%,
			rgba(10, 20, 40, 0.58) 72%,
			rgba(10, 20, 40, 0.38) 100%
		),
		linear-gradient(
			180deg,
			rgba(10, 20, 40, 0.12) 0%,
			rgba(10, 20, 40, 0.28) 100%
		);
}

.bw-beeldband__body {
	max-width: 42rem;
	color: var(--bw-white);
}

.bw-beeldband--center .bw-beeldband__inner {
	display: flex;
	justify-content: center;
	text-align: center;
}

.bw-beeldband--center .bw-beeldband__body {
	justify-items: center;
}

.bw-beeldband__title {
	margin: 0;
	font-size: var(--bw-text-2xl);
	line-height: var(--bw-leading-snug);
	color: var(--bw-white);
}

.bw-beeldband__text {
	margin: 0;
	font-size: var(--bw-text-lg);
	line-height: 1.55;
	color: var(--bw-white);
}

.bw-beeldband .bw-eyebrow {
	color: var(--bw-caramel-light);
}

@media (max-width: 47.9375rem) {
	.bw-beeldband {
		min-height: 20rem;
	}

	/* Op mobiel loopt de tekst over de volle breedte, dus moet de
	   verdonkering dat ook doen. */
	.bw-beeldband__media::after {
		background: linear-gradient(
			180deg,
			rgba(10, 20, 40, 0.80) 0%,
			rgba(10, 20, 40, 0.86) 100%
		);
	}
}