/* ---------------------------------------------------------------------------
 * Blok: Partners-slider.
 * Gecentreerde kop met intro, daaronder drie witte partnerkaarten (452x405,
 * radius 20) met logo, dunne deellijn, paarse naam en korte tekst, in het
 * gedeelde slider-systeem: blauwe ronde pijlen op de flanken en bolletjes
 * onder de kaarten. Maten uit het Figma-ontwerp (1920/390).
 * ------------------------------------------------------------------------- */

.blok-partners-slider {
	/* De Figma-container begint bij de kop en eindigt onder de bolletjes;
	   de ruimte naar aangrenzende blokken zit in die blokken. */
	background: var(--c-grijs-1);
}

/* Kop en intro */

.blok-partners-slider__kop {
	max-width: 1160px;
	margin-inline: auto;
	text-align: center;
}

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

.blok-partners-slider__intro {
	margin: 0;
	color: var(--c-grijs-4);
}

/* --------------------------------------------------------------------------
 * Spoor met kaarten
 * ------------------------------------------------------------------------ */

.blok-partners-slider__slider {
	margin-top: 37px;
}

.blok-partners-slider__spoor {
	--slider-gap: 22px;

	/* Lucht rondom binnen het scrollvlak zodat de kaartschaduwen (25px blur)
	   niet worden afgeknipt; de negatieve marges heffen de ruimte weer op. */
	padding: 30px;
	margin: -30px;
	scroll-padding-inline: 30px;
}

/* In de enhanced slider regelt de viewport de schaduwruimte; de padding-truc
 * hierboven is alleen voor de no-JS terugval en verstoort de verticale maat. */
.blok-partners-slider__spoor.is-enhanced {
	padding: 0;
	margin: 0;
	scroll-padding-inline: 0;
}

.blok-partners-slider__kaart {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 calc((100% - 2 * 22px) / 3); /* drie kaarten naast elkaar met 22px tussenruimte */
	padding: 0 58px 47px; /* tekstbreedte 336 binnen de kaart van 452 */
	background: var(--c-wit);
	border-radius: 20px; /* hoekradius van de partnerkaart uit het ontwerp */
	box-shadow: 5px 5px 25px 0 rgb(0 0 0 / 5%); /* zachte kaartschaduw uit het ontwerp */
	text-align: center;
	text-decoration: none;
	color: inherit;
}

a.blok-partners-slider__kaart {
	transition: transform var(--dur-kort) var(--ease-out), box-shadow var(--dur-kort) var(--ease-out);
}

a.blok-partners-slider__kaart:hover {
	transform: translateY(-3px);
	box-shadow: 5px 8px 25px 0 rgb(0 0 0 / 8%);
}

/* Logo gecentreerd in de zone boven de deellijn (lijn op 189px van de top). */

.blok-partners-slider__logozone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 188px;
}

.blok-partners-slider__logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 150px;
}

.blok-partners-slider__lijn {
	width: 331px;
	max-width: 100%;
	height: 1px;
	background: color-mix(in srgb, var(--c-grijs-3) 25%, transparent); /* deellijn: grijs-3 op 25% */
}

.blok-partners-slider__naam {
	margin: 38px 0 0;
	font-size: 26px;
	line-height: 32px;
	font-weight: 700;
	color: var(--c-paars);
}

.blok-partners-slider__tekst {
	display: block;
	margin: 21px 0 0;
	color: var(--c-grijs-4);
}

/* --------------------------------------------------------------------------
 * Pijlen en bolletjes
 * ------------------------------------------------------------------------ */

.blok-partners-slider__pijl {
	position: absolute;
	top: 202px; /* verticale midden van de kaarten (405px hoog) */
	transform: translateY(-50%);
	z-index: 1;
}

.blok-partners-slider__pijl--vorige {
	left: -18px; /* pijl steekt 18px buiten de contentrand, zoals in de andere sliders */
}

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

.blok-partners-slider__pijl svg {
	width: 8px;
	height: 14px;
}

.blok-partners-slider .slider-bolletjes {
	margin-top: 37px;
}

/* --------------------------------------------------------------------------
 * Tablet: vaste kaartbreedte, het spoor schuift
 * ------------------------------------------------------------------------ */

@media (max-width: 1199px) {
	.blok-partners-slider__kaart {
		flex-basis: 452px;
	}
}

/* --------------------------------------------------------------------------
 * Mobiel (ontwerp 390): kaarten 320 breed, spoor van rand tot rand, geen pijlen
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.blok-partners-slider__titel {
		max-width: 250px; /* breekt de kop in twee regels, zoals in het ontwerp */
		margin-inline: auto;
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 10px;
	}

	.blok-partners-slider__slider {
		margin-top: 24px;
		margin-inline: calc(-1 * var(--gutter));
	}

	/* Zie logo_slider.css: .is-enhanced zet de padding op 0 met specificiteit
	 * 0,2,0, dus de gutter voor de eerste kaart moet die klasse meenemen. */
	.blok-partners-slider__spoor,
	.blok-partners-slider__spoor.is-enhanced {
		--slider-gap: 18px;

		padding-inline: var(--gutter);
		margin-inline: 0;
		scroll-padding-inline: var(--gutter);
	}

	.blok-partners-slider__kaart {
		flex-basis: 320px;
		padding: 0 30px 33px; /* tekstbreedte 259 binnen de kaart van 320 */
	}

	.blok-partners-slider__logozone {
		height: 168px;
	}

	.blok-partners-slider__logo {
		transform: scale(0.875); /* logo's staan op mobiel op 87,5% van hun desktopmaat */
	}

	.blok-partners-slider__lijn {
		width: 259px;
	}

	.blok-partners-slider__naam {
		margin-top: 32px;
		font-size: 24px;
		line-height: 29px;
	}

	.blok-partners-slider__tekst {
		margin-top: 23px;
	}

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

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