/* ---------------------------------------------------------------------------
 * Blok: Vacatures-slider. Witte kop en intro op het donkerblauwe vlak; de
 * donkere vacaturekaarten lopen over de curve van donker terug naar licht
 * (zelfde ellips als branches_slider: 3999x499 op 1920, boldiepte 1.594vw).
 * Onder de bolletjes een paarse knop naar het vacature-overzicht.
 * De kaart zelf (.vacature-kaart) staat in vacature-archief.css, want het
 * archief gebruikt dezelfde partial.
 * ------------------------------------------------------------------------- */

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

/* Donker vlak bovenin; de onderrand blijft via de vaste bottom-maat aan de
 * kaarten gekoppeld (crest op 241px onder de kaarttop, uit het ontwerp),
 * hoe lang de intro ook wordt. */
.blok-vacatures-slider__achtergrond {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 543px;
	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-vacatures-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-vacatures-slider__kop {
	position: relative;
	max-width: 1160px;
	margin-inline: auto;
	text-align: center;
	color: var(--c-wit);
}

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

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

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

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

/* Slider */

.blok-vacatures-slider__slider {
	margin-top: 62px;
}

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

/* Ruimte rondom zodat de hover-schaduw van de kaarten niet door het spoor
 * wordt afgesneden. */
.blok-vacatures-slider__track {
	--slider-gap: 23px;

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

/* Kaartmaat binnen het spoor: drie kaarten in beeld op desktop. */
.blok-vacatures-slider__track .vacature-kaart {
	width: calc((100% - 46px) / 3);
}

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

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

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

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

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

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

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

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

/* Alles-knop onder de bolletjes, gecentreerd op het lichte vlak. */

.blok-vacatures-slider__alles {
	position: relative;
	margin-top: 44px;
	text-align: center;
}

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

/* Mobiel (geen mobiel ontwerp voor dit blok: maten in lijn met de andere
 * sliderblokken). */
@media (max-width: 767px) {
	.blok-vacatures-slider {
		padding: 30px 0 30px;
	}

	.blok-vacatures-slider__achtergrond {
		bottom: 406px;
	}

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

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

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

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

	.blok-vacatures-slider__track .vacature-kaart {
		width: 320px;
	}

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

	.blok-vacatures-slider .slider-bolletjes {
		margin-top: 30px;
	}

	.blok-vacatures-slider__alles {
		margin-top: 30px;
	}
}