/* ==========================================================================
   sections.css — secties die op meerdere pagina's terugkomen:
   reviewrijen, onze aanpak en de FAQ-sectie.
   ========================================================================== */

/* ---------- Reviewrijen: één band (< 8 reviews) of twee banden tegen elkaar in ----------
   assets/js/reviewrijen.js vult elke band aan tot hij breder is dan het scherm en zet de looptijd
   (--band-duur) op een gelijk tempo. Zonder JS loopt de band op --marquee-duur (Thema opties). */
.reviewrijen { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); max-width: 100%; overflow: hidden; padding-block: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* Alleen horizontaal knippen: anders valt de onderrand van de kaarten soms weg (halve pixel). */
.reviewrij { min-width: 0; overflow: hidden; overflow: clip visible; }
.reviewrij__spoor { display: flex; width: max-content; animation: reviews-band var(--band-duur, var(--marquee-duur, 60s)) linear infinite; }
.reviewrij--terug .reviewrij__spoor { animation-direction: reverse; }
/* Elke kaart stopt na zijn eigen tekst (geen lege ruimte onder korte reviews). */
.reviewrij__set { display: flex; align-items: flex-start; }
.reviewrij__set > * { margin-right: 18px; }
.reviewrijen:hover .reviewrij__spoor, .reviewrijen:focus-within .reviewrij__spoor { animation-play-state: paused; }
@keyframes reviews-band { to { transform: translateX(-50%); } }

/* Tekst in de band max. 5 regels (al vanaf de eerste weergave, dus geen verspringing). */
.reviewrij .reviewkaart__tekst { position: relative; }
.reviewrij .reviewkaart__tekst p { margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* "Lees meer" (reviewrijen.js) rechtsonder op de 5e regel, met een witte fade ervoor. */
.reviewkaart__meer {
	position: absolute; right: 0; bottom: 0; padding-left: 2.4em; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 2em);
	color: color-mix(in srgb, var(--blue) 82%, var(--ink)); font-weight: 650; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px;
}
.reviewkaart__meer:hover { color: var(--ink); }

/* Ervaringen: kaart uitlichten na "Lees meer" (#review-naam). */
.reviewkaart.is-uitgelicht { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--blue-rgb), .18); transition: box-shadow .4s, border-color .4s; }

@media (prefers-reduced-motion: reduce) {
	.reviewrijen { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
	.reviewrij { overflow: visible; }
	.reviewrij__spoor { animation: none; }
	.reviewrij__set[aria-hidden] { display: none; }
}

/* ---------- Onze aanpak ---------- */
.stappen {
	--vul: 0;
	position: relative; display: grid; grid-template-columns: repeat(var(--aantal, 4), 1fr); gap: 20px;
	list-style: none; margin: 0; padding: 0;
}
.stappen__lijn { position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: var(--line); border-radius: 2px; }
.stappen__lijn span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blue), var(--lime)); transform-origin: left; transform: scaleX(var(--vul)); border-radius: 2px; }
.stap {
	position: relative; display: grid; gap: 10px; align-content: start;
	padding: 0 24px 28px 0;
}
.stap__nummer {
	position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 12px;
	border-radius: 22px; background: #fff; border: 2px solid var(--line);
	font-size: 1.15rem; font-weight: 800; color: var(--ink);
	transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
.stap.is-actief .stap__nummer { background: var(--blue); border-color: var(--blue); color: #fff; transform: rotate(-6deg); }
.stap:last-child.is-actief .stap__nummer { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.stap__titel { margin: 0; font-size: 1.3rem; }
.stap p { margin: 0; color: var(--muted); }
.aanpak__knop { display: flex; justify-content: center; margin-top: clamp(24px, 3.5vw, 44px); }
@media (max-width: 900px) {
	.stappen { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
	.stappen__lijn { left: 33px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
	.stappen__lijn span { transform-origin: top; transform: scaleY(var(--vul)); }
	.stap { grid-template-columns: 68px 1fr; column-gap: 20px; padding: 0 0 32px; }
	.stap__nummer { grid-row: span 2; margin: 0; }
}

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq__zijkant { position: sticky; top: 130px; display: grid; gap: 18px; justify-items: start; }
.faq__zijkant p { color: var(--muted); font-size: 1.1rem; margin: 0; }
@media (max-width: 900px) {
	.faq__grid { grid-template-columns: 1fr; }
	.faq__zijkant { position: static; }
}

/* ---------- Foto's & video's onder de reviews (template-parts/sections/mediagrid.php) ----------
   4 kolommen; staand = 2 rijen, breed = 2 kolommen; dense vult de gaten op.
   Rijhoogte = 3/4 van een kolombreedte (liggend 4:3), via containerbreedte (cqi). */
.mediagrid {
	--kol: 4; --gat: clamp(10px, 1.2vw, 16px);
	container-type: inline-size;
	display: grid; grid-template-columns: repeat(var(--kol), minmax(0, 1fr)); gap: var(--gat);
	grid-auto-flow: row dense; grid-auto-rows: clamp(120px, 17vw, 230px);
}
@supports (width: 1cqi) {
	.mediagrid { grid-auto-rows: calc((100cqi - (var(--kol) - 1) * var(--gat)) / var(--kol) * .75); }
}
.mediagrid__vak { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--soft); }
.mediagrid__vak--staand { grid-row: span 2; }
.mediagrid__vak--breed { grid-column: span 2; }
.mediagrid__vak img, .mediagrid__vak video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mediagrid__vak video { background: var(--ink); cursor: pointer; }
@media (hover: hover) { .mediagrid__vak:hover img { transform: scale(1.04); } }
.mediagrid__speel {
	position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 38px; height: 38px;
	border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); pointer-events: none;
	box-shadow: 0 6px 18px -6px rgba(var(--ink-rgb), .45); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mediagrid__speel .icoon { fill: currentColor; stroke: none; margin-left: 2px; }
.mediagrid__vak.is-speelt .mediagrid__speel { opacity: 0; transform: scale(.8); }
@media (max-width: 1000px) { .mediagrid { --kol: 3; } }
@media (max-width: 700px) { .mediagrid { --kol: 2; } }