/* Testimonials Block - frontend styling
 * Scoped under .wb-testi so nothing leaks into the rest of the site.
 * Self-contained: no framework or icon font required.
 */

.wb-testi {
	--wb-testi-blue: var(--color-primary-600, #2f86eb);
	--wb-testi-accent: var(--wb-accent, var(--color-primary-600, #2f86eb));
	--wb-testi-navy: var(--color-primary-950, #0f2a4a);
	--wb-testi-ink: #46586f;
	--wb-testi-star: var(--color-warning, #f5a524);
	--wb-testi-cols: 3;
	padding: clamp(2rem, 5vw, 5rem) 0;
}

/* wb-testi-inner: de ENE gedeelde grid-container voor zowel de kop als de
 * kaartengrid eronder (zie view.php: class="wb-testi-inner grid-container").
 * Beide zitten in dezelfde instantie van deze class, zodat ze per definitie
 * dezelfde linkerrand delen op elke breedte - een los "padding-left: 35px"
 * op een niet-gecontainerde .wb-testi-head (zoals een vorige versie deed)
 * lag toevallig op sommige breedtes goed, maar liep op andere uiteen omdat
 * .grid-container zichzelf met "margin:auto" centreert i.p.v. tegen de
 * viewportrand te blijven plakken. */
.wb-testi-inner {
	/* Breedte, centrering en basisgutter komen van de template's eigen
	 * .grid-container-class op hetzelfde element - dat garandeert exacte
	 * uitlijning met de rest van de pagina op elk breakpoint, ook als de
	 * template die waarden ooit aanpast. */
}

.wb-testi-head {
	max-width: 720px;
	margin: 0 0 clamp(1.8rem, 4vw, 3rem);
	/* Links uitgelijnd, niet gecentreerd: dezelfde kantlijn-conventie die de
	 * rest van het template hanteert voor sectiekoppen (zie uspblock's
	 * .wb-usp-head, dat op dezelfde manier binnen zijn eigen
	 * .wb-usp-inner.grid-container zit) - een sectiekop volgt altijd de
	 * linker kantlijn van de pagina in plaats van in het midden te zweven.
	 * text-align hier expliciet op left gezet (niet enkel de oude
	 * text-align:center weggehaald) zodat dit nooit per ongeluk een
	 * center-regel van hogerop kan overerven.
	 *
	 * padding-left telt op BOVEN de gutter die .grid-container (op de
	 * .wb-testi-inner-ouder) al geeft - samen exact dezelfde extra
	 * inspringing als .section-content elders op de site aan een sectiekop
	 * geeft. Geen padding-right: de kop hoeft alleen aan de linkerkant met
	 * de kantlijn mee te lopen. */
	text-align: left;
	padding-left: 35px;
}
@media (max-width: 1023px) {
	.wb-testi-head {
		padding-left: 15px;
	}
}

.wb-testi-intro {
	color: var(--wb-testi-blue);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 0.7rem;
}

/* Geen eigen titelopmaak meer (v1.0.9). De titel is een kale <h1> en wordt
 * volledig door het template opgemaakt (css/basics.css voor grootte en
 * gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
 * blok er exact hetzelfde uit als een kop uit elke andere module of uit de
 * editor - de eerdere .wb-testi-title/-line1/-line2 gaven dit blok een eigen
 * lettergrootte en kleurenpaar, en dat is precies het verschil dat we niet
 * meer willen. Wil je de kopopmaak wijzigen, doe dat in het template. */

.wb-testi-lead {
	color: var(--wb-testi-ink);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.7;
	margin: 0;
}

.wb-testi-lead p { margin: 0 0 0.6em; }
.wb-testi-lead p:last-child { margin-bottom: 0; }

/* ---- Rij met kaarten (v1.1.0) ------------------------------------------
 * Altijd EEN rij. Het ingestelde aantal kolommen bepaalt nu hoeveel kaarten
 * er naast elkaar passen; zijn er meer beoordelingen, dan komen die niet
 * op een tweede rij maar staan ze rechts buiten beeld en scrol je er
 * horizontaal naartoe.
 *
 * grid-auto-flow:column zet elke kaart in een nieuwe kolom van dezelfde
 * breedte, en die breedte is precies "containerbreedte gedeeld door het
 * aantal zichtbare kaarten" - inclusief de tussenruimte, zodat de laatste
 * zichtbare kaart exact op de rechterkantlijn eindigt en een volgende kaart
 * er net buiten valt.
 *
 * Breedte, centrering en kantlijn komen van de gedeelde .wb-testi-inner
 * hierboven (zie diens toelichting) - dit element draagt zelf niet de
 * .grid-container-class. */
.wb-testi-grid {
	--wb-testi-gap: clamp(1rem, 2.4vw, 1.75rem);
	--wb-testi-visible: var(--wb-testi-cols, 3);

	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--wb-testi-visible) - 1) * var(--wb-testi-gap))
		/ var(--wb-testi-visible)
	);
	gap: var(--wb-testi-gap);

	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;

	/* Ruimte binnen de scroller voor de slagschaduw van de kaarten (die zou
	 * anders door overflow worden afgeknipt) en voor de scrollbalk eronder.
	 * De negatieve margin haalt de extra hoogte er visueel weer af, zodat de
	 * afstand tot het volgende blok gelijk blijft aan voorheen. */
	padding: 10px 0 34px;
	margin-bottom: -20px;

	scrollbar-width: thin;
	scrollbar-color: rgba(15, 42, 74, 0.28) rgba(15, 42, 74, 0.06);
}

.wb-testi-grid > .wb-testi-card {
	scroll-snap-align: start;
}

/* Zichtbare, slanke scrollbalk: bij een rij die doorloopt is dat de enige
 * aanwijzing dat er meer kaarten zijn, dus die verstoppen we niet. */
.wb-testi-grid::-webkit-scrollbar        { height: 8px; }
.wb-testi-grid::-webkit-scrollbar-track  { background: rgba(15, 42, 74, 0.06); border-radius: 999px; }
.wb-testi-grid::-webkit-scrollbar-thumb  { background: rgba(15, 42, 74, 0.28); border-radius: 999px; }
.wb-testi-grid::-webkit-scrollbar-thumb:hover { background: rgba(15, 42, 74, 0.45); }

/* De scroller is toetsenbordbereikbaar (view.php zet tabindex="0" zodra er
 * meer dan een kaart is), dus moet de focus ook zichtbaar zijn. */
.wb-testi-grid:focus-visible {
	outline: 2px solid var(--wb-testi-accent);
	outline-offset: 4px;
}

/* ---- Slepen met de muis (v1.1.1) ---------------------------------------
 * .is-scrollable staat erop zodra er meer kaarten zijn dan er passen (door
 * het scriptje in view.php gezet, ook bij het wijzigen van de venstermaat);
 * .is-dragging staat erop zolang de bezoeker de rij vasthoudt.
 *
 * Tijdens het slepen moeten drie dingen uit, anders werkt het niet of
 * schokkerig: tekstselectie (anders selecteer je de citaten in plaats van te
 * schuiven), scroll-snap (dat zou de rij tijdens het slepen terugtrekken) en
 * het gladde scrollen (dat animeert elke tussenstap van de sleepbeweging). */
.wb-testi-grid.is-scrollable { cursor: grab; }

.wb-testi-grid.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

/* De kaarten zelf mogen tijdens het slepen ook niets selecteren of als
 * afbeelding/tekst weggesleept worden. */
.wb-testi-grid.is-dragging * {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.wb-testi-grid.is-scrollable img { -webkit-user-drag: none; user-drag: none; }

/* Tablet: hooguit 2 kaarten naast elkaar. Mobiel: 1 kaart, met een randje van
 * de volgende in beeld - dat laat meteen zien dat er verder gescrold kan
 * worden. */
@media (max-width: 900px) {
	.wb-testi-grid { --wb-testi-visible: 2; }
}
@media (max-width: 600px) {
	.wb-testi-grid {
		--wb-testi-visible: 1;
		grid-auto-columns: 86%;
	}
}

/* ---- Card -------------------------------------------------------------- */
.wb-testi-card {
	margin: 0;
	background: #eef4ff;
	border: 1px solid rgba(15, 42, 74, 0.08);
	border-radius: 16px;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 6px 18px rgba(15, 42, 74, 0.06);
	/* reveal-on-scroll start state */
	opacity: 0;
	transform: translateY(24px);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, box-shadow 0.2s ease;
}

/* Stagger the cards slightly as the block reveals */
.wb-testi-card:nth-child(2) { transition-delay: 80ms; }
.wb-testi-card:nth-child(3) { transition-delay: 160ms; }
.wb-testi-card:nth-child(4) { transition-delay: 240ms; }
.wb-testi-card:nth-child(5) { transition-delay: 320ms; }
.wb-testi-card:nth-child(6) { transition-delay: 400ms; }

.wb-testi.is-visible .wb-testi-card {
	opacity: 1;
	transform: translateY(0);
}

.wb-testi-card:hover {
	box-shadow: 0 14px 32px rgba(15, 42, 74, 0.12);
}

/* ---- Stars ------------------------------------------------------------- */
.wb-testi-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--wb-testi-star);
}

/* ---- Quote ------------------------------------------------------------- */
.wb-testi-quote {
	margin: 0;
	color: var(--wb-testi-ink);
	font-size: 1.02rem;
	line-height: 1.7;
	flex: 1 1 auto;
}

.wb-testi-quote p { margin: 0 0 0.75em; }
.wb-testi-quote p:last-child { margin-bottom: 0; }

/* ---- Footer ------------------------------------------------------------ */
.wb-testi-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.wb-testi-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	display: block;
}

.wb-testi-avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wb-testi-blue);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}

.wb-testi-person {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wb-testi-author {
	color: var(--wb-testi-navy);
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.3;
}

.wb-testi-meta {
	color: var(--wb-testi-ink);
	font-size: 0.82rem;
	line-height: 1.3;
	opacity: 0.85;
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wb-testi-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	/* Ook het gladde scrollen uitzetten: dat is beweging die de gebruiker
	 * niet heeft gevraagd. */
	.wb-testi-grid {
		scroll-behavior: auto;
		scroll-snap-type: none;
	}
}

/* Breedte/centrering/kantlijn komen nu van de template's eigen .grid-
 * container-class op hetzelfde element (view.php: class="wb-testi-grid
 * grid-container") - zie de toelichting daar. Wordt dit blok ooit buiten dit
 * template gebruikt, dan ontbreekt .grid-container's CSS en valt de breedte
 * terug op 100%; voeg dan zelf een .grid-container-regel toe in de omgeving
 * waar dit blok draait, in plaats van hier weer een eigen kopie bij te
 * houden. */