/* ---------------------------------------------------------------------------
 * Blok: Branches-slider. Witte kop en intro op het donkerblauwe vlak; de
 * kaarten lopen over de curve van donker terug naar de lichte achtergrond
 * (ellips uit het ontwerp: 3999x499 op 1920, boldiepte 1.594vw).
 * ------------------------------------------------------------------------- */

.blok-branches-slider {
	position: relative;
	padding: 91px 0 44px;
}

/* Donker vlak bovenin; de onderrand blijft via de vaste bottom-maat aan de
 * kaarten gekoppeld (crest op fotohoogte), hoe lang de intro ook wordt. */
.blok-branches-slider__achtergrond {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 422px;
	background: var(--c-donkerblauw);
	pointer-events: none;
}

/* Curve terug naar licht: dezelfde ellips als elders, uit het donkere vlak
 * gesneden zodat de lichte achtergrond in het midden omhoog bolt. */
.blok-branches-slider__achtergrond::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 1.594vw; /* zichtbare boogdiepte: 30.6px op 1920 */
	background: var(--c-donkerblauw);
	-webkit-mask-image: radial-gradient(104.14vw 13vw at 50% 13vw, transparent 99.6%, #000 100%);
	mask-image: radial-gradient(104.14vw 13vw at 50% 13vw, transparent 99.6%, #000 100%);
}

/* Kop en intro */

.blok-branches-slider__kop {
	position: relative;
	max-width: 1160px;
	margin-inline: auto;
	text-align: center;
	color: var(--c-wit);
}

.blok-branches-slider__titel {
	margin: 0 0 15px;
	font-size: 36px; /* sectiekop uit het ontwerp: 36/44 */
	line-height: 44px;
	color: var(--c-wit);
}

.blok-branches-slider__intro {
	margin: 0;
}

/* WYSIWYG-alinea's binnen de intro: geen extra marges, witregel tussen alinea's. */
.blok-branches-slider__intro p {
	margin: 0;
}

.blok-branches-slider__intro p + p {
	margin-top: 26px;
}

/* Slider */

.blok-branches-slider__slider {
	margin-top: 56px;
}

.blok-branches-slider__zone {
	position: relative;
}

/* Ruimte rondom zodat de kaartschaduw niet door het spoor wordt afgesneden. */
.blok-branches-slider__track {
	--slider-gap: 23px;

	padding: 20px;
	margin: -20px;
	scroll-padding-inline: 20px;
}

/* Kaart */

.blok-branches-slider__kaart {
	display: flex;
	flex-direction: column;
	width: calc((100% - 46px) / 3);
	border-radius: var(--radius-sectie);
	overflow: hidden;
	background: var(--c-wit);
	box-shadow: 5px 5px 12.5px rgb(0 0 0 / 5%);
	color: var(--c-donkerblauw);
	text-decoration: none;
}

/* Foto bovenin met lichte schaduw vanaf de bovenrand (verloop uit Figma). */
.blok-branches-slider__media {
	position: relative;
	display: block;
	aspect-ratio: 451 / 220;
	overflow: hidden;
}

.blok-branches-slider__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blok-branches-slider__media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(to bottom, rgb(0 0 0 / 65%), rgb(102 102 102 / 0%));
}

/* Blauwe vink-decoratie linksboven, afgesneden door de fotorand. */
.blok-branches-slider__vink {
	position: absolute;
	top: -40.9%;
	left: 7.28%;
	width: 50.96%;
	z-index: 1;
	color: var(--c-blauw);
}

.blok-branches-slider__vink svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Kaartinhoud */

.blok-branches-slider__inhoud {
	display: block;
	padding: 44px 45px 50px;
}

.blok-branches-slider__kaart-titel {
	margin: 0;
	font-size: 24px;
	line-height: 1.22;
	font-weight: 700;
	color: var(--c-paars);
}

.blok-branches-slider__tekst {
	display: block;
	margin-top: 19px;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-donkerblauw);
}

/* WYSIWYG-alinea's op de kaart: geen extra marges door wpautop. */
.blok-branches-slider__tekst p {
	margin: 0;
}

.blok-branches-slider__tekst p + p {
	margin-top: 26px;
}

/* Pijlen: op de buitenranden, verticaal gecentreerd op de kaarten. */

.blok-branches-slider__pijl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
}

.blok-branches-slider__pijl--vorige {
	left: -18px;
}

.blok-branches-slider__pijl--volgende {
	right: -18px;
}

/* Bolletjes op het lichte vlak: donkerblauw, actief blauw. */

.blok-branches-slider .slider-bolletjes {
	position: relative;
	margin-top: 34px;
}

.blok-branches-slider .slider-bolletje {
	background: var(--c-donkerblauw);
}

.blok-branches-slider .slider-bolletje.is-actief {
	background: var(--c-blauw);
}

/* Tablet: twee kaarten in beeld. */
@media (max-width: 1199px) and (min-width: 768px) {
	.blok-branches-slider__kaart {
		width: calc((100% - 23px) / 2);
	}
}

/* Mobiel */
@media (max-width: 767px) {
	.blok-branches-slider {
		padding: 30px 0 9px;
	}

	.blok-branches-slider__achtergrond {
		bottom: 117px;
	}

	.blok-branches-slider__titel {
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 10px;
	}

	.blok-branches-slider__slider {
		margin-top: 34px;
	}

	/* Spoor loopt door tot de schermrand; eerste kaart start op de gutter. */
	.blok-branches-slider__track {
		--slider-gap: 17px;

		padding: 20px var(--gutter);
		margin: -20px calc(-1 * var(--gutter));
		scroll-padding-inline: var(--gutter);
	}

	.blok-branches-slider__kaart {
		width: 321px;
		border-radius: 18px;
	}

	.blok-branches-slider__inhoud {
		padding: 31px 32px 34px;
	}

	.blok-branches-slider__kaart-titel {
		font-size: 18px;
	}

	.blok-branches-slider__tekst {
		margin-top: 13.5px;
		font-size: 14px;
		line-height: 24px;
	}

	.blok-branches-slider__pijl {
		display: none;
	}

	.blok-branches-slider .slider-bolletjes {
		margin-top: 34px;
	}

	/* In het mobiele ontwerp zijn de bolletjes licht in plaats van donker. */
	.blok-branches-slider .slider-bolletje {
		background: var(--c-grijs-3);
	}

	.blok-branches-slider .slider-bolletje.is-actief {
		background: var(--c-blauw);
	}
}

/* Premium hover: lift via .kaart-hover, schaduw verdiept, foto zoomt. */
.blok-branches-slider__kaart.kaart-hover:hover {
	box-shadow: 5px 8px 20px rgb(0 0 0 / 9%);
}

@media (prefers-reduced-motion: no-preference) {
	.blok-branches-slider__foto {
		transition: scale 700ms var(--ease-out);
	}

	.blok-branches-slider__kaart:hover .blok-branches-slider__foto {
		scale: 1.05;
	}
}

/* Mobiel loopt de rij door tot de rechterrand van het scherm, zodat de volgende
 * kaart meegluurt. Dat regelt app.css sitebreed op .slider-viewport; hier stond
 * dezelfde regel nog een keer, ongescoped, en blok-CSS laadt na app.css. Daarmee
 * overschreef dit bestand de uitzonderingen daar. Niet opnieuw toevoegen. */