/* Graviteit — Stage-carousel. Vlakke blokken in de tekstkleur op de achtergrondkleur, zoals
   de rest van de site: geen randen, geen kaders. Er staan er twee naast elkaar, want een
   quote van een paar zinnen wil je kunnen lezen, niet scannen. Op een telefoon één.

   Kleuren, letters en afmetingen komen allemaal uit Elementor en landen hier als variabele.
   Dit blad regelt enkel de indeling, want dat kan een control niet. */

.gsq {
	--gsq-naast: 2;
	--gsq-gap: 24px;
	--gsq-radius: 0px;
	--gsq-kaart-bg: transparent;
	--gsq-quote-color: inherit;
	--gsq-naam-color: inherit;
	--gsq-richting-color: inherit;
	--gsq-link-color: inherit;
	--gsq-pijl-color: inherit;
	--gsq-pijl-bg: transparent;
	--gsq-pijl-bg-hover: var(--gsq-pijl-color);
	--gsq-pijl-color-hover: var(--gsq-pijl-bg);
	--gsq-pijl-vlak: 40px;
	--gsq-pijl-radius: 0px;
	--gsq-foto: 48px;
	--gsq-foto-radius: 50%;

	display: block;
	color: inherit;
}

/* Titel en pijlen op één regel. De pijlen bedienen de rij eronder, dus ze staan er
   meteen naast in plaats van er los onder. */
.gsq__hoofd {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 12px;
	margin-bottom: 28px;
}
.gsq__kop { margin: 0; }

/* Het spoor scrollt zelf, zodat het ook zonder JavaScript werkt: swipen op een telefoon
   en het scrollwiel op een muis met horizontale as doen het dan nog altijd. */
.gsq__spoor {
	display: flex;
	gap: var(--gsq-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Ruimte voor de focusring, anders valt die tegen de rand van het spoor weg. */
	margin: -4px;
	padding: 4px;
}
.gsq__spoor::-webkit-scrollbar { display: none; }
.gsq__spoor:focus-visible { outline: 2px solid var(--gsq-pijl-bg); outline-offset: 4px; }

.gsq__kaart {
	flex: 0 0 calc(
		(100% - (var(--gsq-naast) - 1) * var(--gsq-gap)) / var(--gsq-naast)
	);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	background: var(--gsq-kaart-bg);
	border: 0;
	border-radius: var(--gsq-radius);
	padding: 48px;
}

/* De quote duwt de rest naar beneden, zodat de namen op één lijn staan, ook als de ene
   uitspraak twee keer zo lang is als de andere. */
.gsq__quote {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	color: var(--gsq-quote-color);
}
.gsq__quote p { margin: 0 0 .75em; }
.gsq__quote p:last-child { margin-bottom: 0; }

.gsq__voet { display: flex; align-items: center; gap: 14px; }

.gsq .gsq__foto {
	flex: 0 0 auto;
	width: var(--gsq-foto);
	height: var(--gsq-foto);
	border-radius: var(--gsq-foto-radius, 50%);
	object-fit: cover;
	display: block;
}

.gsq .gsq__ster {
	flex: 0 0 auto;
	display: block;
	width: var(--gsq-foto);
	height: var(--gsq-foto);
	background-color: var(--gft-ster-kleur, currentColor);
	-webkit-mask: var(--gft-ster-bron) center / contain no-repeat;
	mask: var(--gft-ster-bron) center / contain no-repeat;
}

/* De naam draagt de kaart, de richting is de toelichting eronder. Vandaar dat de richting
   kleiner staat en wat rustiger van kleur: anders leest die als de belangrijkste regel,
   want het is de langste. */
.gsq__wie { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gsq__naam { color: var(--gsq-naam-color); line-height: 1.3; }
.gsq__richting { color: var(--gsq-richting-color); opacity: .6; line-height: 1.35; }

/* De knop is dezelfde als elders op de site (.gft-ab--a13). Die rekent op display:inline
   voor de band achter de tekst, dus staat hij in een eigen blokje: als los kind van de
   kaart zou de flexbox hem tot blok maken en verdwijnt dat effect. */
.gsq__actie { display: block; }
.gsq .gsq__link { color: var(--gsq-link-color); }

/* Zonder JavaScript doen de pijlen niets, dus dan blijven ze verborgen. */
.gsq__nav { display: none; gap: 8px; flex: 0 0 auto; }
.gsq--js .gsq__nav { display: flex; }
.gsq--past .gsq__nav { display: none; }

.gsq__knop {
	width: var(--gsq-pijl-vlak);
	height: var(--gsq-pijl-vlak);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: var(--gsq-pijl-bg);
	color: var(--gsq-pijl-color);
	border: 0;
	border-radius: var(--gsq-pijl-radius);
	padding: 0;
	margin: 0;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: background-color .18s ease, opacity .18s ease;
}
/* Alle standen zelf vastleggen, en alleen met de twee kleuren van het palet. Laat je dit
   aan de browser over, dan verschijnt bij het aanklikken zijn eigen paarse focusring en
   een accentkleur die met de rest van de pagina vloekt. Bij hover en klik draaien de twee
   kleuren gewoon om: dat blijft altijd binnen de huisstijl, welk palet er ook geldt. */
.gsq .gsq__knop:hover:not([disabled]),
.gsq .gsq__knop:focus-visible:not([disabled]),
.gsq .gsq__knop:active:not([disabled]) {
	background-color: var(--gsq-pijl-bg-hover);
	color: var(--gsq-pijl-color-hover);
	box-shadow: inset 0 0 0 1px var(--gsq-pijl-bg);
}
.gsq .gsq__knop:focus { outline: none; }
.gsq .gsq__knop:focus-visible { outline: none; }
.gsq .gsq__knop[disabled] { opacity: .35; cursor: default; background-color: var(--gsq-pijl-bg); }

.gsq--sleept .gsq__spoor { scroll-behavior: auto; scroll-snap-type: none; cursor: grabbing; }

.gsq__leeg { opacity: .6; font-style: italic; }

@media (max-width: 767px) {
	.gsq { --gsq-naast: 1; --gsq-gap: 16px; }
	.gsq__kaart { padding: 28px 24px; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.gsq__spoor { scroll-behavior: auto; }
	.gsq__knop { transition: none; }
}

/* Is er nergens een quote ingevuld, dan toont de widget niets. De sectie eromheen zou
   dan een lege gekleurde balk worden, dus die verdwijnt mee. */
.gsq-sectie:not(:has(.gsq)) { display: none; }