/* ===========================================================================
 * Blok: reviews "in één woord"
 *
 * Per review één groot woord, opgebouwd uit bolletjes (masker met de
 * celmaat van het raster), naast de quote. blocks/reviews.js zet:
 * - .is-actief op het blok: de reviews liggen op elkaar (één grid-cel, dus
 *   de hoogte van de langste) en alleen .review.is-actief is zichtbaar;
 * - --cel, --cel-x en --cel-y: celmaat en verschuiving zodat de bolletjes
 *   precies op het raster van de site vallen;
 * - --voortgang op de actieve tab (vanzelf wisselen).
 * Zonder JS staan alle reviews onder elkaar en zijn de tabs verborgen.
 * ========================================================================= */

.blok-reviews {
	--reviews-rand: var(--gutter);
	color: var(--c-wit);
}

@media (min-width: 900px) {
	.blok-reviews {
		--reviews-rand: calc(var(--gutter) + 3.125rem);
	}
}

/* Tint per review: het woord fel, de rest blijft wit. */
.blok-reviews [data-tint="cyaan"] { --tint: var(--c-pd-cyaan); }
.blok-reviews [data-tint="oranje"] { --tint: var(--c-pd-oranje); }
.blok-reviews [data-tint="roze"] { --tint: var(--c-pd-roze); }
.blok-reviews [data-tint="ijsblauw"] { --tint: var(--c-pd-ijsblauw); }

.reviews__raam {
	padding-inline: var(--reviews-rand);
}

/* --- Kop ------------------------------------------------------------------- */
.reviews__kopgroep {
	display: grid;
	gap: var(--ruimte-5) var(--ruimte-8);
	align-items: end;
	margin-bottom: var(--ruimte-8);
}

@media (min-width: 900px) {
	.reviews__kopgroep {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

.reviews__kop {
	max-width: 14ch;
	margin: 0;
	font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5rem);
	line-height: 1.04;
	letter-spacing: -0.035em;
}

.reviews__intro {
	max-width: 30rem;
	margin-bottom: var(--ruimte-5);
	color: rgba(255, 255, 255, 0.72);
}

.reviews__kop-zij > :last-child {
	margin-bottom: 0;
}

/* --- Review ---------------------------------------------------------------- */
.reviews__panelen {
	display: grid;
	gap: var(--ruimte-8);
}

.review {
	display: grid;
	gap: var(--ruimte-6) clamp(3rem, 6vw, 7rem);
	align-items: start;
	margin: 0;
}

@media (min-width: 900px) {
	.review {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

/* Het woord: zo groot als in de kolom past (--tekens uit de template). */
.review__woord {
	container-type: inline-size;
	margin: 0;
	line-height: 1;
	/* Zachte gloed in de eigen kleur. Op de ouder, zodat hij na het masker
	   komt: op het woord zelf werd de gloed mee in bolletjes geknipt en zag
	   je een vaag kader. */
	filter: drop-shadow(0 0 0.12em color-mix(in srgb, var(--tint, var(--c-wit)) 35%, transparent));
}

.review__woord-tekst {
	display: block;
	font-family: var(--font-kop);
	font-weight: var(--fw-kop);
	font-size: clamp(3.5rem, calc(100cqi / (var(--tekens, 6) * 0.62)), 17rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--tint, var(--c-wit));
	/* Bolletjes: elke cel van het raster een rondje van 84% van de cel. */
	-webkit-mask-image: radial-gradient(circle closest-side, #000 84%, transparent 90%);
	mask-image: radial-gradient(circle closest-side, #000 84%, transparent 90%);
	-webkit-mask-size: var(--cel, 6px) var(--cel, 6px);
	mask-size: var(--cel, 6px) var(--cel, 6px);
	-webkit-mask-position: var(--cel-x, 0) var(--cel-y, 0);
	mask-position: var(--cel-x, 0) var(--cel-y, 0);
}

.review__quote {
	margin: 0 0 var(--ruimte-6);
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.92);
}

.review__quote p {
	margin-bottom: 0.6em;
}

.review__wie {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ruimte-3);
	font-size: var(--fs-klein);
}

/* Logo boven de quote, wit gemaakt (transparante PNG of SVG), zoals in het
   blok Logo's. */
.review__logo {
	display: block;
	width: auto;
	max-width: 10rem;
	height: 2.75rem;
	margin-bottom: var(--ruimte-7);
	object-fit: contain;
	object-position: left center;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.review__foto {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
}

.review__naam strong,
.review__functie {
	display: block;
}

.review__naam strong {
	font-weight: 400;
}

.review__functie {
	color: rgba(255, 255, 255, 0.55);
}

.review__case {
	margin-top: var(--ruimte-6);
}

/* --- Met JS: op elkaar, één tegelijk ---------------------------------------- */
.blok-reviews.is-actief .reviews__panelen {
	gap: 0;
}

.blok-reviews.is-actief .review {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.35s var(--ease-uit), visibility 0s linear 0.35s;
}

.blok-reviews.is-actief .review.is-actief {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s var(--ease-uit) 0.1s, visibility 0s;
}

.blok-reviews.is-actief .review__body {
	transition: translate 0.6s var(--ease-uit);
}

.blok-reviews.is-actief .review:not(.is-actief) .review__body {
	translate: 0 1rem;
}

/* --- Tabs: de klantlogo's ---------------------------------------------------- */
.reviews__tabs {
	display: flex;
	gap: var(--ruimte-2);
	margin-top: var(--ruimte-8);
	/* Ruimte onder de tabs voor de voortgang. */
	padding-bottom: var(--ruimte-4);
	overflow-x: auto;
	scrollbar-width: none;
}

.reviews__tabs[hidden] {
	display: none;
}

.reviews__tabs::-webkit-scrollbar {
	display: none;
}

.reviews__tab {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 8.5rem;
	height: 4rem;
	padding: 0 var(--ruimte-5);
	color: var(--c-wit);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-m);
	cursor: pointer;
	transition: background var(--duur) var(--ease-uit), border-color var(--duur) var(--ease-uit);
}

.reviews__tab-logo {
	width: auto;
	max-width: 6.5rem;
	height: 1.5rem;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.4;
	transition: opacity var(--duur) var(--ease-uit);
}

.reviews__tab-naam {
	font-size: var(--fs-klein);
	opacity: 0.55;
	transition: opacity var(--duur) var(--ease-uit);
}

.reviews__tab:hover .reviews__tab-logo,
.reviews__tab:hover .reviews__tab-naam {
	opacity: 0.75;
}

.reviews__tab[aria-selected="true"] {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.22);
}

.reviews__tab[aria-selected="true"] .reviews__tab-logo,
.reviews__tab[aria-selected="true"] .reviews__tab-naam {
	opacity: 1;
}

.reviews__tab:focus-visible {
	outline: 2px solid var(--c-pd-cyaan);
	outline-offset: 3px;
}

/* Voortgang (vanzelf wisselen): een rij cellen in de tint van de review,
   gecentreerd onder de tab. */
.reviews__tab-balk {
	position: absolute;
	left: 50%;
	top: calc(100% + var(--ruimte-2));
	width: 60%;
	translate: -50% 0;
	height: 3px;
	background: radial-gradient(circle closest-side, var(--tint) 80%, transparent 95%) 0 0 / 6px 3px repeat-x;
	-webkit-mask-image: linear-gradient(90deg, #000 var(--voortgang, 0%), transparent var(--voortgang, 0%));
	mask-image: linear-gradient(90deg, #000 var(--voortgang, 0%), transparent var(--voortgang, 0%));
	opacity: 0;
}

.reviews__tab[aria-selected="true"] .reviews__tab-balk {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.blok-reviews.is-actief .review,
	.blok-reviews.is-actief .review.is-actief,
	.blok-reviews.is-actief .review__body {
		transition: none;
	}
}