/* =========================================================
   Zenboks Reviews
   De opmaak van de kaarten zelf (.review-card, .review-quote,
   .review-avatar-placeholder enz.) staat al in style.css.
   Hier alleen wat WordPress normaal per blok zelf genereert,
   plus de stijl die eerst in een <style>-blok op /reviews/ stond.
   ========================================================= */

/* Kort blok: knoppen onder elkaar en gecentreerd */
.zb-reviews .wp-block-buttons.is-vertical {
	flex-direction: column;
	align-items: center;
}

@media (min-width: 782px) {
	.zb-reviews .reviews-grid {
		flex-wrap: nowrap;
	}
}

/* ---------- Reviewspagina ---------- */

/* Ronde foto's */
.zb-review-rij .review-page-image {
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	width: 100%;
	aspect-ratio: 1;
}

.zb-review-rij .review-page-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* Schuingedrukte omschrijving onder de naam */
.zb-review-rij .review-author-role {
	font-size: 14px;
	line-height: 1.5;
	color: #3A241B;
	font-style: italic;
	margin-bottom: 28px;
	margin-top: 16px;
}

/* Ruimte boven en onder elke review */
.section.zb-review-rij {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* Afsluiter: smalle kolom zoals voorheen */
.zb-reviews-cta > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 760px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.zb-reviews-cta .wp-block-buttons.is-content-justification-center {
	justify-content: center;
}

@media (min-width: 782px) {
	.zb-review-rij .wp-block-columns {
		flex-wrap: nowrap;
	}
}

@media (max-width: 1199px) {
	.section.zb-review-rij {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

@media (max-width: 767px) {
	.zb-review-rij .wp-block-columns {
		flex-direction: column !important;
	}

	.zb-review-rij .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	.section.zb-review-rij {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.zb-review-rij .wp-block-column h3 {
		font-size: 20px;
	}
}

/* ---------- Slider (bij meer reviews dan "Kaarten naast elkaar") ---------- */

.zb-reviews .zb-reviews-slider {
	--zbr-gap: 16px;
	--zbr-zicht: var(--zbr-per, 4);
	display: grid;
	grid-template-columns: 1fr auto auto auto 1fr;
	grid-template-areas:
		"track track track track track"
		". vorige stipjes volgende .";
	align-items: center;
	column-gap: 10px;
	width: 100%;
	max-width: 1200px;
	position: relative;
}

.zb-reviews-slider__venster {
	grid-area: track;
	min-width: 0;
	margin: -12px -4px 0;
}

.zb-reviews .zb-reviews-slider .reviews-grid.wp-block-columns {
	flex-wrap: nowrap !important;
	gap: var(--zbr-gap) !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 12px 4px 32px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.zb-reviews .zb-reviews-slider .reviews-grid::-webkit-scrollbar {
	display: none;
}

.zb-reviews .zb-reviews-slider .reviews-grid > .wp-block-column {
	flex: 0 0 calc((100% - (var(--zbr-zicht) - 1) * var(--zbr-gap)) / var(--zbr-zicht)) !important;
	min-width: 0;
	scroll-snap-align: start;
}

.zb-reviews-slider .reviews-grid:focus-visible {
	outline: 2px solid var(--color-accent, #C8651E);
	outline-offset: 2px;
	border-radius: 20px;
}

/* Pijltjes */
.zb-reviews-slider__pijl {
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1.5px solid rgba(58, 36, 27, 0.18) !important;
	background: var(--color-white, #fff) !important;
	color: var(--color-heading, #3A241B) !important;
	box-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, 0.06));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

.zb-reviews-slider__pijl--vorige { grid-area: vorige; }
.zb-reviews-slider__pijl--volgende { grid-area: volgende; }

.zb-reviews-slider__pijl:hover:not([disabled]),
.zb-reviews-slider__pijl:focus-visible {
	background: var(--color-cta, #8C1D18) !important;
	border-color: var(--color-cta, #8C1D18) !important;
	color: #fff !important;
}

.zb-reviews-slider__pijl:focus-visible {
	outline: 2px solid var(--color-accent, #C8651E);
	outline-offset: 2px;
}

.zb-reviews-slider__pijl[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Stipjes */
.zb-reviews-slider__stipjes {
	grid-area: stipjes;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px;
}

.zb-reviews-slider__stip {
	width: 24px;
	height: 24px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.zb-reviews-slider__stip::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: rgba(58, 36, 27, 0.22);
	transition: width 0.25s, background-color 0.25s;
}

.zb-reviews-slider__stip[aria-current="true"]::before {
	width: 24px;
	background: var(--color-accent, #C8651E);
}

.zb-reviews-slider__stip:focus-visible {
	outline: 2px solid var(--color-accent, #C8651E);
	outline-offset: 1px;
	border-radius: 999px;
}

/* Tot het script geladen is: navigatie onzichtbaar, ruimte blijft gereserveerd */
.zb-reviews-slider:not(.is-klaar) .zb-reviews-slider__pijl,
.zb-reviews-slider:not(.is-klaar) .zb-reviews-slider__stipjes {
	visibility: hidden;
}

/* Alles past toch in beeld: geen navigatie nodig */
.zb-reviews-slider.is-statisch .zb-reviews-slider__pijl,
.zb-reviews-slider.is-statisch .zb-reviews-slider__stipjes {
	display: none;
}

/* Smalle schermen: pijltjes links en rechts van de stipjes.
   Brede schermen: pijltjes naast de kaarten, stipjes eronder. */
@media (min-width: 1320px) {
	.zb-reviews .zb-reviews-slider {
		grid-template-columns: 44px 1fr 44px;
		grid-template-areas:
			"vorige track volgende"
			". stipjes .";
		column-gap: 14px;
		width: calc(100% + 116px);
		max-width: calc(1200px + 116px);
		left: -58px;
	}

	.zb-reviews-slider__pijl {
		margin-top: -32px;
	}
}

/* Minder kaarten naast elkaar op kleinere schermen */
@media (max-width: 1199px) {
	.zb-reviews .zb-reviews-slider { --zbr-zicht: min(var(--zbr-per, 4), 3); }
}

@media (max-width: 899px) {
	.zb-reviews .zb-reviews-slider { --zbr-zicht: min(var(--zbr-per, 4), 2); }
}

/* Mobiel: één kaart, met een stukje van de volgende zichtbaar */
@media (max-width: 599px) {
	.zb-reviews .zb-reviews-slider { --zbr-zicht: 1.12; }
}

@media (prefers-reduced-motion: reduce) {
	.zb-reviews .zb-reviews-slider .reviews-grid { scroll-behavior: auto; }
	.zb-reviews-slider__stip::before { transition: none; }
}