/**
 * Vlotweg — reviewcomponent
 *
 * Bewust GEEN nabootsing van de Google-Maps-kaart. Dit is Vlotweg-typografie op een lichte
 * ondergrond, met een dunne lijn in plaats van een schaduw, kleine radius, en de messingkleur
 * van de site (#CD9C48) voor de sterren. De bron staat er als gewone tekst bij, niet als badge.
 *
 * Geen carrousel: vijf reviews passen gewoon op een pagina, en een carrousel verbergt er vier.
 */

.vw-revblok {
	--vwr-inkt:  #12211F;
	--vwr-zacht: #55655F;
	--vwr-lijn:  #DBE4DD;
	--vwr-vel:   #FFFFFF;
	--vwr-mess:  #CD9C48;

	margin: 2.5rem 0;
	color: var(--vwr-inkt);
}

.vw-revblok__kop {
	font-size: 1.25rem;
	line-height: 1.25;
	margin: 0 0 1.1rem;
}

.vw-revblok__lijst {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
	.vw-revblok--rij .vw-revblok__lijst { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 68rem) {
	.vw-revblok--rij .vw-revblok__lijst:has(.vw-rev:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
}

.vw-rev {
	margin: 0;
	padding: 1.25rem 1.35rem 1.15rem;
	background: var(--vwr-vel);
	border: 1px solid var(--vwr-lijn);
	border-radius: .25rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.vw-rev__kop {
	display: flex;
	align-items: center;
	gap: .55rem;
	flex-wrap: wrap;
}

.vw-rev__sterren { display: inline-flex; gap: 1px; }
.vw-rev__sterren svg {
	width: .95rem;
	height: .95rem;
	fill: var(--vwr-mess);
	display: block;
}

.vw-rev__bron {
	font-size: .8rem;
	color: var(--vwr-zacht);
	letter-spacing: .01em;
}

.vw-rev__tekst { margin: 0; }
.vw-rev__tekst p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
}
.vw-rev__tekst p::before { content: "\201C"; }
.vw-rev__tekst p::after  { content: "\201D"; }

.vw-rev__naam {
	font-size: .9rem;
	font-weight: 600;
	color: var(--vwr-zacht);
	margin-top: auto;
}

/* Compacte variant: één quote naast een formulier of onder een resultaat. */
.vw-rev--compact { padding: 1rem 1.15rem; gap: .55rem; }
.vw-rev--compact .vw-rev__tekst p { font-size: .95rem; }

.vw-revblok--enkel { margin: 1.75rem 0; }
.vw-revblok--enkel .vw-revblok__lijst { max-width: 34rem; }

/* ------------------------------------------------------------------------------------------
 * Bronvermelding onder het blok (sinds 1.1.0)
 *
 * Eén regel, geen knop. De link gaat naar het Google-bedrijfsprofiel dat de eigenaar heeft
 * aangeleverd. Hij bewijst niets uit zichzelf — hij laat de bezoeker het zélf nakijken, en dat
 * is precies het verschil tussen "dit staat er" en "dit klopt".
 *
 * Kleur: #7A5A1E in plaats van de messingkleur #CD9C48. Op wit haalt #CD9C48 maar 2,49:1;
 * #7A5A1E haalt 6,35:1 en voldoet ruim aan AA.
 * ------------------------------------------------------------------------------------------ */

.vw-revblok__bron {
	margin: 1rem 0 0;
	font-size: .875rem;
	line-height: 1.5;
}

.vw-revblok__bron a {
	color: #7A5A1E;
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

.vw-revblok__bron a:hover,
.vw-revblok__bron a:focus-visible {
	color: var(--vwr-inkt);
}

.vw-revblok__bron a:focus-visible {
	outline: 2px solid #7A5A1E;
	outline-offset: 2px;
	border-radius: 2px;
}

.vw-revblok__extern {
	display: inline-block;
	margin-left: .25em;
	font-size: .9em;
	text-decoration: none;
}

/* Eigen sr-only, zodat het component niet afhangt van een themaklasse. */
.vw-revblok .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}