/*
 * Groomzo v2 — Reviews-pagina (richting 3, 4 sep: moderne horizontale
 * reviewcarousel i.p.v. statisch grid). Centrale hero (proof boven H1),
 * witte reviewzaal, carousel met peek/pijlen/progress, compacte pine CTA.
 * Kit-checklist: h1/h2/h3-fonts+kleuren, button-props ÉN linkkleuren
 * (`.elementor-kit-4 a` zet browserblauw, specificiteit 0,1,1) → scoped
 * + !important. Trustpilot-groen (#00b67a) alléén als bron-signaal.
 */

body.gzv-reviews .ast-container {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

main.gzv-reviews {
	width: 100%;
	background: var(--gz-paper);
}

.gzv-reviews *,
.gzv-reviews *::before,
.gzv-reviews *::after {
	box-sizing: border-box;
}

/* ---------- Hero: centraal, proof boven de titel ---------- */

.gzv-rvw-hero {
	/* Zelfde paper-grain als home-hero: fractalNoise 2%, tile 240px. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.02'/%3E%3C/svg%3E");
	background-color: var(--gz-paper);
	border-bottom: 0.5px solid var(--gz-line-soft);
	padding-block: 52px 56px;
	text-align: center;
}

.gzv-rvw-hero-inner {
	max-width: 780px;
}

.gzv-rvw-proof {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.gzv-rvw-proof-sterren {
	display: block;
	width: 158px;
	height: 31px;
}

.gzv-rvw-proof-regel {
	margin: 0 !important;
	font: 400 16px/1.5 var(--gz-sans);
	color: var(--gz-body);
}

.gzv-rvw-proof-regel b {
	color: var(--gz-ink);
	font-weight: 700;
}

.gzv-rvw-tp-link {
	font: 500 13.5px/1.5 var(--gz-sans);
	color: var(--gz-pine) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-thickness: 0.5px;
}

.gzv-rvw-tp-link:hover,
.gzv-rvw-tp-link:focus-visible {
	color: var(--gz-pine-deep) !important;
}

.gzv-rvw-titel {
	margin: 14px 0 14px !important;
	font-family: var(--gz-disp) !important;
	font-weight: 590 !important;
	font-size: clamp(30px, 3.8vw, 46px) !important;
	line-height: 1.12 !important;
	letter-spacing: -0.012em !important;
	color: var(--gz-ink) !important;
}

.gzv-rvw-lead {
	margin: 0 auto !important;
	max-width: 52ch;
	font: 400 16.5px/1.65 var(--gz-sans);
	color: var(--gz-body);
}

/* ---------- Reviewzaal: koprij + carousel ---------- */

.gzv-rvw-car-sec {
	background: #FFFFFF;
	padding-block: 56px 60px;
}

/* Carousel-container ~6% breder dan het 1280-basisraster. */
.gzv-rvw-car-inner {
	max-width: 1360px;
}

.gzv-rvw-koprij {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}

/* Vertaalnotitie (alléén EN-site): reviews zijn NL-origineel, getrouw
   vertaald — eerlijkheidslabel i.p.v. stil vertonen. */
.gzv-rvw-vert {
	margin: -14px 0 20px;
	font-size: 0.82rem;
	color: var(--gz-muted);
}

.gzv-rvw-sec-titel {
	margin: 0 !important;
	font-family: var(--gz-disp) !important;
	font-weight: 590 !important;
	font-size: clamp(24px, 3vw, 34px) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	color: var(--gz-ink) !important;
}

/* Pijlen: rustige ivoren cirkels met hairline; zonder JS weg (hidden attr
   blijft staan tot het script scrollbaarheid heeft vastgesteld). */
.gzv-rvw-nav {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
	padding-bottom: 4px;
}

.gzv-rvw-pijl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	background: #FFFFFF !important;
	border: 0.5px solid var(--gz-line) !important;
	border-radius: 50% !important;
	color: var(--gz-pine) !important;
	font: inherit !important;
	line-height: 1 !important;
	box-shadow: 0 1px 3px rgba(23, 33, 27, .07) !important;
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background .16s ease, opacity .16s ease;
}

.gzv-rvw-pijl:hover:not(:disabled) {
	background: var(--gz-pine) !important;
	border-color: var(--gz-pine) !important;
	color: var(--gz-ivory) !important;
}

.gzv-rvw-pijl:focus-visible {
	outline: 3px solid var(--gz-amber) !important;
	outline-offset: 2px !important;
}

.gzv-rvw-pijl:disabled {
	opacity: .35;
	cursor: default;
}

/* ---------- Carousel: swipe/snap, peek per breakpoint ---------- */

.gzv-rvw-carousel {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 4px; /* ruimte voor subtiele hover-lift */
}

.gzv-rvw-carousel::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.gzv-rvw-carousel {
		scroll-behavior: smooth;
	}
}

.gzv-rvw-track {
	display: flex;
	gap: 20px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.gzv-rvw-slide {
	flex: 0 0 calc((100% - 22px) / 1.1); /* mobiel: ~1,1 card zichtbaar */
	scroll-snap-align: start;
	display: flex;
}

/* ---------- Card: één consistente taal (geen featured/badges) ---------- */

.gzv-rvw-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 288px;
	background: var(--gz-card);
	border: 0.5px solid var(--gz-line-soft);
	border-radius: var(--gz-r-md);
	padding: 28px 28px 24px;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
	.gzv-rvw-card:hover {
		transform: translateY(-2px);
		border-color: var(--gz-line-hover);
		box-shadow: 0 8px 22px rgba(23, 33, 27, .05);
	}
}

.gzv-rvw-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

/* Klein rond quote-element: moss-soft cirkel met Fraunces-aanhalingsteken. */
.gzv-rvw-q {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--gz-moss-soft);
	font-family: var(--gz-disp) !important;
	font-weight: 600 !important;
	font-size: 19px;
	line-height: 1;
	color: var(--gz-moss);
	padding-top: 5px;
}

/* Officiële Trustpilot-sterrenstrips (zelfgehost, 512×96 bron). */
.gzv-rvw-tp-sterren {
	display: block;
	width: 91px;
	height: 17px;
	flex: 0 0 auto;
}

.gzv-rvw-card-titel {
	margin: 0 0 8px !important;
	font-family: var(--gz-sans) !important;
	font-weight: 600 !important;
	font-size: 16.5px !important;
	line-height: 1.35 !important;
	color: var(--gz-ink) !important;
}

.gzv-rvw-tekst {
	margin: 0 0 18px !important;
	font-family: var(--gz-sans) !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: var(--gz-body) !important;
}

.gzv-rvw-voet {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	gap: 4px 12px;
	padding-top: 14px;
	border-top: 0.5px solid var(--gz-line-soft);
}

.gzv-rvw-naam {
	font: 600 14px/1.4 var(--gz-sans);
	color: var(--gz-ink);
}

/* Kit-val: .elementor-kit-4 a zet óók linkkleur (specificiteit 0,1,1 >
   0,1,0) → kleuren kit-proof, nooit browserblauw. */
.gzv-rvw-bron {
	font: 500 13px/1.4 var(--gz-sans);
	color: var(--gz-muted) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-thickness: 0.5px;
}

.gzv-rvw-bron:hover,
.gzv-rvw-bron:focus-visible {
	color: var(--gz-pine) !important;
}

.gzv-rvw-datum {
	margin-left: auto;
	font: 400 13px/1.4 var(--gz-sans);
	color: var(--gz-muted);
}

/* ---------- CTA: compacte pine band ---------- */

.gzv-rvw-cta {
	background: var(--gz-pine);
	color: var(--gz-ivory);
	padding-block: 40px 48px;
	text-align: center;
}

.gzv-rvw-cta h2 {
	margin: 0 0 22px !important;
	font-family: var(--gz-disp) !important;
	font-weight: 590 !important;
	font-size: clamp(24px, 2.6vw, 32px) !important;
	line-height: 1.18 !important;
	color: var(--gz-ivory) !important;
}

.gzv-rvw-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 15px 30px !important;
	background: var(--gz-ivory) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: var(--gz-sans) !important;
	font-weight: 700 !important;
	font-size: 14.5px !important;
	line-height: 1 !important;
	color: var(--gz-pine) !important;
	box-shadow: none !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: color .16s ease, outline-color .16s ease;
}

.gzv-rvw-knop:hover {
	color: var(--gz-pine-deep) !important;
	outline: 2px solid var(--gz-amber);
	outline-offset: 3px;
}

.gzv-rvw-knop:focus-visible {
	outline: 3px solid var(--gz-amber) !important;
	outline-offset: 3px !important;
}

/* ---------- Responsive: peek-maten ---------- */

/* Tablet: ~2,2 cards zichtbaar. */
@media (min-width: 640px) {
	.gzv-rvw-slide {
		flex-basis: calc((100% - 44px) / 2.2);
	}
}

/* Desktop: ~3 volle cards + 0,3–0,5 peek. */
@media (min-width: 1024px) {
	.gzv-rvw-hero {
		padding-block: 68px 76px;
	}

	.gzv-rvw-car-sec {
		padding-block: 72px 80px;
	}

	.gzv-rvw-slide {
		flex-basis: calc((100% - 60px) / 3.4);
	}

	.gzv-rvw-card {
		padding: 30px 30px 26px;
	}
}

@media (max-width: 639px) {
	.gzv-rvw-hero {
		padding-block: 42px 46px;
	}

	.gzv-rvw-car-sec {
		padding-block: 46px 52px;
	}

	.gzv-rvw-koprij {
		margin-bottom: 22px;
	}

	.gzv-rvw-card {
		min-height: 264px;
		padding: 24px 22px 20px;
	}

	.gzv-rvw-cta {
		padding-block: 36px 40px;
	}
}