/* ---------------------------------------------------------------
   Eigen aanvullingen op de gescopete conceptstylesheet.
   Alles staat onder .lr-concept, net als concept.css zelf.
   --------------------------------------------------------------- */

/* De carrousels draaien in het concept op JavaScript uit de appbundel.
   Hier is het horizontale scroll met snap (zie concept-slider.js), dus het
   venster moet scrollen in plaats van verbergen - zonder zichtbare balk. */
/* Het carrouselvenster is scrollbaar op grond van de markup zelf, niet pas
   nadat concept-slider.js zijn klasse heeft gezet. Zo werkt vegen op mobiel en
   scrollen met een trackpad ook als dat script niet draait; de pijlknoppen en
   het slepen met de muis blijven wel van het script afhankelijk. */
.lr-concept [aria-roledescription="carousel"] .overflow-hidden {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.lr-concept [aria-roledescription="carousel"] .overflow-hidden::-webkit-scrollbar {
	display: none;
}

.lr-concept .lr-slider-venster {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	overscroll-behavior-x: contain;
}

.lr-concept .lr-slider-venster::-webkit-scrollbar {
	display: none;
}

.lr-concept .lr-slider-venster.is-slepen {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

/* Het spoor krijgt van Tailwind een negatieve marge links; binnen een
   scrollend venster zou dat de eerste dia half afsnijden. */
.lr-concept .lr-slider-venster > * {
	margin-left: 0;
}

/* De pagina staat in een block-thema waarvan de <main> geen eigen marge
   heeft; het concept rekent op een blok dat direct tegen de header aan
   begint. WordPress geeft elk kind van .wp-site-blocks 1.5rem mee. */
.lr-concept {
	margin-top: 0;
}

/* WordPress zet vanuit theme.json `color` op h1 t/m h6 (specificiteit 0,0,1).
   Die regel loopt ook het conceptblok in. De eigen kleurklassen van het concept
   (.lr-concept .text-foreground, 0,2,0) winnen daar wel van, maar een kop
   zonder kleurklasse pakt anders stilletjes de themakleur in plaats van te
   erven van de sectie eromheen. Tailwind doet dit al voor <a>; voor koppen
   ontbreekt het. Specificiteit hier is 0,1,1 - genoeg tegen WordPress, te
   weinig om de conceptklassen in de weg te zitten. */
.lr-concept :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* ---------------------------------------------------------------
   Tellerblokken compacter op een telefoon (01-09-2026).
   Op het bureaublad blijft alles zoals het ontwerp het bedoelt.
   --------------------------------------------------------------- */
@media (max-width: 639.98px) {
	/* het cijfer: 3,75rem is op een smal scherm onnodig fors */
	.lr-concept [data-lr-teller] {
		font-size: 2.75rem;
		line-height: 1.1;
	}

	/* het vlak eromheen: py-10 (2,5rem) terug naar 1,5rem */
	.lr-concept div:has(> div > [data-lr-teller]) {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}

	/* tussen cijfer en label: gap-3 terug naar 0,5rem */
	.lr-concept div:has(> [data-lr-teller]) {
		gap: 0.5rem;
	}

	/* tussen de twee blokken: gap-12 (3rem) terug naar 1rem */
	.lr-concept div:has(> div > div > [data-lr-teller]) {
		gap: 1rem;
	}

	/* het label breekt door de brede letterspatie snel over drie regels */
	.lr-concept [data-lr-teller] + p {
		letter-spacing: 0.24em;
	}
}


/* FAQ-accordeon. De hoogte-animaties van Radix rekenen met
   --radix-accordion-content-height, en die zet alleen React. Zonder die
   waarde klapt een geopend paneel meteen naar nul, dus laten we de animatie
   hier weg en groeit het paneel gewoon mee met zijn inhoud. */
.lr-concept [role="region"][data-state="open"] {
	animation: none;
	height: auto;
}


/* Fotostrook op smalle schermen. De strook heeft een vaste hoogte (55vh, vanaf
   640px 70vh) en elke foto zijn natuurlijke breedte; een liggende foto wordt
   daarmee op een telefoon ruim 740px breed en viel half buiten beeld. Nu is een
   dia nooit breder dan 88% van het scherm en vult de foto dat vlak (cover), met
   links en rechts een stukje van de buren. Op desktop is 88vw ruimer dan elke
   foto, dus daar verandert niets. De slider centreert deze dia's, net als de
   carrousel in het concept. */
.lr-concept [aria-roledescription=slide].basis-auto {
	max-width: 88vw;
}

.lr-concept [aria-roledescription=slide].basis-auto > img {
	max-width: 100%;
	object-fit: cover;
}

/* Vorige/volgende-knoppen: bij hover wordt de achtergrond crème en zette het
   concept de pijl op --accent-foreground (#fefbf7), waardoor die wegviel.
   Zelfde soort fout als eerder bij de reviewfilters. */
.lr-concept [aria-roledescription=carousel] button:hover {
	color: var(--foreground);
}