/*
 * 27 — REVIEWS (Sectie — Reviews, synced pattern, op elke pagina)
 * Lichte band (oppervlaktekleur) met gecentreerde inhoud: kicker, groot limoen
 * aanhalingsteken, citaat en bron. Query Loop op het tabblad "Reviews" als
 * swipe-carrousel: de lijst is een horizontale scroll-snap-track, reviews.js
 * (vv-site-core) voegt pijlen en bolletjes toe (← bolletjes →) en draait
 * automatisch door. Zonder JS blijft swipen werken.
 */

/* Band tegen band: na de antraciet FAQ-band (dienstpagina's) geen papier ertussen,
   en de limoen footer-CTA sluit direct aan als de reviews het laatste blok zijn. */
.mi-vragen + .mi-reviews {
	margin-top: 0 !important;
}

body:has(.entry-content > .mi-reviews:last-child) .mi-cta,
body:has(.entry-content > .mi-reviews:last-child) footer {
	margin-top: 0 !important; /* ook de 24px die WordPress tussen main en footer zet */
}

body:has(.entry-content > .mi-reviews:last-child) main {
	margin-bottom: 0 !important;
}

/* Leesbreedte in het midden van de contentlijn. */
.mi-reviews .mi-reviews-binnen {
	max-width: 960px;
	margin-inline: auto;
	text-align: center;
}

.mi-reviews .mi-reviews-binnen .mi-kicker {
	margin: 0 0 18px;
}

.mi-reviews .mi-reviews-binnen .mi-reviews-lijst {
	margin: 0;
}

.mi-reviews .wp-block-post-template {
	display: flex;
	gap: 48px; /* ruimte zodat overhangende letters van de volgende slide buiten beeld blijven */
	overflow: hidden; /* op laptop/desktop enkel via pijlen, bolletjes en autoplay; nooit verticaal scrollen */
	scroll-behavior: smooth;
	scrollbar-width: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Swipen alleen op aanraakschermen (gsm, tablet). */
@media (pointer: coarse) {
	.mi-reviews .wp-block-post-template {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
	}
}

.mi-reviews .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

.mi-reviews .wp-block-post {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	align-self: flex-start;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Citaat: het aanhalingsteken komt uit CSS, Kenneth typt het niet. */
.mi-reviews .mi-citaat {
	margin: 0;
	line-height: 1.28;
}

.mi-reviews .mi-citaat::before {
	content: "\201C";
	display: block;
	height: 2.6rem;
	margin: 0 auto 8px;
	font-size: 6rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.mi-reviews .mi-review-bron {
	margin: 28px 0 0;
	font-size: 0.71875rem;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
}

/* Bediening (door reviews.js toegevoegd): pijlen en bolletjes. */
.mi-reviews-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 44px;
}

.mi-reviews-pijl {
	appearance: none;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent);
	color: var(--wp--preset--color--contrast);
	width: 44px;
	height: 44px;
	font: inherit;
	font-size: 1.1875rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mi-reviews-pijl:hover,
.mi-reviews-pijl:focus-visible {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--primary);
}

.mi-reviews-dots {
	display: flex;
	gap: 10px;
}

.mi-reviews-dot {
	appearance: none;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.mi-reviews-dot.is-actief {
	background: var(--wp--preset--color--primary);
	transform: scale(1.35);
}