/* ---------------------------------------------------------------------------
 * Blok: Klantenlogo-slider.
 * Gecentreerde kop met daaronder vijf witte logokaarten (265x255, radius 25)
 * in het gedeelde slider-systeem: paarse ronde pijlen op de flanken en
 * bolletjes onder de kaarten. Maten uit het Figma-ontwerp (1920/390).
 * ------------------------------------------------------------------------- */

.blok-logo-slider {
	/* De Figma-container heeft 11px boven de kop en eindigt direct onder de
	   bolletjes; de ruimte naar aangrenzende blokken zit in die blokken. */
	padding: 11px 0 0;
	background: var(--c-grijs-1);
}

.blok-logo-slider__titel {
	margin: 0 0 43px;
	font-size: 36px;
	line-height: 44px;
	text-align: center;
	color: var(--c-donkerblauw);
}

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

.blok-logo-slider__spoor {
	--slider-gap: 19px;

	/* 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;
}

.blok-logo-slider__kaart {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 calc((100% - 4 * 19px) / 5); /* vijf kaarten naast elkaar met 19px tussenruimte */
	height: 255px;
	background: var(--c-wit);
	border-radius: var(--radius-sectie);
	box-shadow: 5px 5px 25px 0 rgb(0 0 0 / 5%); /* zachte kaartschaduw uit het ontwerp */
}

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

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

.blok-logo-slider__logo {
	width: auto;
	height: auto;
	max-width: calc(100% - 30px);
	max-height: 200px;
}

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

.blok-logo-slider__pijl {
	position: absolute;
	top: 128px; /* verticale midden van de kaarten */
	transform: translateY(-50%);
	background: var(--c-paars); /* in dit blok zijn de pijlen paars, zie het ontwerp */
	z-index: 1;
}

.blok-logo-slider__pijl:hover {
	background: color-mix(in srgb, var(--c-paars) 85%, var(--c-wit));
}

.blok-logo-slider__pijl--vorige {
	left: -18px; /* pijl steekt 18px buiten de contentrand, 12px over de kaart */
}

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

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

.blok-logo-slider .slider-bolletjes {
	margin-top: 33px;
}

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

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

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

@media (max-width: 767px) {
	.blok-logo-slider {
		padding-top: 0;
	}

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

	.blok-logo-slider__slider {
		margin-inline: calc(-1 * var(--gutter));
	}

	.blok-logo-slider__spoor {
		padding-inline: var(--gutter);
		margin-inline: 0;
		scroll-padding-inline: var(--gutter);
	}

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

	.blok-logo-slider .slider-bolletjes {
		margin-top: 31px;
	}
}