/* AmerikaNu — PLP / overzichtpagina (fase-4 Task 16). Maten 1:1 uit
   design/website-compleet/PLP Definitief.dc.html (desktop 1440 + mobiel 390, incl. scenario B en
   het mobiele filter-sheet) + SPEC-plp.md + beslissingen/PLP - beslissingen.md. Conditioneel
   enqueued op is_singular('overzicht') (functions.php) — geen sitewide gewicht. Breakpoint 900px,
   consistent met reis.css. */

.amerikanu-overzicht {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 28px 8px;
}
.amerikanu-overzicht > .amerikanu-hero {
	margin-top: 24px;
}

/* -- trust-regel / intro / H2 ------------------------------------------------------------------ */
.amerikanu-overzicht .amerikanu-trustregel {
	margin-top: 14px;
}
.amerikanu-overzicht__intro {
	margin: 24px 0 0;
	max-width: 820px;
}
/* Intro-clamp (David-besluit 2026-07-13, gate-4-batch punt 2): op 14"/1512px kostte de volle
   intro ~6 regels boven de vouw — clamp op 3 regels + "Lees meer"-toggle (overzicht.js, zelfde
   data-leesmeer-contract als reis.js). -webkit-line-clamp i.p.v. de max-height+fade van
   .amerikanu-beschrijving__inhoud (reis.css): hier is het één <p> zonder sub-elementen, en de
   ellipsis van line-clamp maakt de afkap zichtbaar zonder extra ::after-gradient. Zonder JS
   (progressive enhancement) blijft de tekst geclampt maar volledig in de DOM (SEO); de knop doet
   dan niets — acceptabele degradatie, de volledige tekst is voor crawlers/lezers met JS bereikbaar. */
.amerikanu-overzicht__intro-tekst {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--body);
	text-wrap: pretty;
}
.amerikanu-overzicht__intro-tekst.is-open {
	display: block;
	-webkit-line-clamp: none;
	overflow: visible;
}
/* Zelfde toggle-stijl als .amerikanu-beschrijving__toggle (reis.css) — bewust herhaald i.p.v.
   gedeeld: reis.css en overzicht.css worden nooit samen enqueued. */
.amerikanu-overzicht__intro-toggle:hover,
.amerikanu-overzicht__intro-toggle:focus-visible {
	background: none;
	color: var(--navy);
}
.amerikanu-overzicht__intro-toggle {
	margin-top: 10px;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: underline;
	text-decoration-color: var(--magenta);
	text-underline-offset: 4px;
	padding: 0;
}
.amerikanu-overzicht__h2 {
	margin: 44px 0 0;
	/* Gate-4-feedback-fix (punt 3): zonder deze twee regels viel de H2 terug op de generieke
	   h2-basisstijl (28px/700) — het frame (PLP Definitief.dc.html, regel "Onze rondreizen door
	   West-Amerika") specificeert inline 32px/800 voor déze kop. */
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.015em;
}

/* -- filterpaneel (keuzekaarten + filterbalk, geïntegreerd) ------------------------------------- */
.amerikanu-filterpaneel {
	margin-top: 20px;
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	/* Gate-4-feedback-fix (punt 3): SPEC-plp.md §5 en het frame noemen expliciet "radius 24" voor
	   déze witte kaart — een eigen maat, niet --radius-card (20px, dat is de reiskaart-maat). Geen
	   nieuwe token toegevoegd: dezelfde eenmalige-waarde-conventie als elders in dit bestand
	   (bv. de 10px/18px hierboven). */
	border-radius: 24px;
	padding: 22px;
}
.amerikanu-filterpaneel__scheiding {
	height: 1px;
	background: var(--rand-lijn);
	margin: 18px 0;
}

/* -- keuzekaarten -------------------------------------------------------------------------------- */
.amerikanu-keuzekaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}
.amerikanu-keuzekaart {
	position: relative;
	display: block;
	width: 100%;
	background: var(--card);
	border: 1px solid var(--rand-navy, var(--rand-kaart));
	border-radius: var(--radius-klein);
	overflow: hidden;
	text-decoration: none;
	color: var(--navy);
	font-family: var(--font);
	cursor: pointer;
	padding: 0;
	transition: box-shadow var(--motion), transform var(--motion);
}
.amerikanu-keuzekaart:hover,
.amerikanu-keuzekaart:focus-visible,
.amerikanu-keuzekaart:focus {
	/* Hover-bugfix (David-melding 2026-08-07): zonder expliciete color/background hier wint
	   Kadence's globale button:hover-regel (global.min.css) — die is qua specificiteit (element +
	   pseudo-klasse) sterker dan onze ongehoverde basisregel (alleen een klasse) en verft kaarten
	   zónder eigen href (data-optie-kaarten renderen dan als <button>, keuzekaarten.php) blauw met
	   witte tekst, als was het een gekleurde CTA-knop. Kaarten mét href (<a>) ontsnapten alleen aan
	   het background-deel (Kadence's a:hover zet enkel color) — vandaar dat "Met de camper" (wél een
	   href) optisch geen blauw vlak toonde terwijl "Met de auto" (nog geen eigen href) dat wel deed.
	   Frame (PLP Definitief.dc.html, regel 95) specificeert voor déze kaart uitsluitend
	   box-shadow+transform op hover — geen achtergrond-/kleurwissel — dus onderstaande twee regels
	   zijn geen ontwerpkeuze maar een 1:1-herbevestiging van het frame, gelijk voor alle kaarten. */
	background: var(--card);
	color: var(--navy);
	box-shadow: 0 12px 28px -12px rgba(30, 46, 90, 0.28);
	transform: translateY(-2px);
}
.amerikanu-keuzekaart__beeld {
	display: block;
	height: 104px;
	background: var(--beeld-placeholder);
}
.amerikanu-keuzekaart__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.amerikanu-keuzekaart__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
}
.amerikanu-keuzekaart__tekst {
	display: flex;
	flex-direction: column;
	text-align: left;
}
.amerikanu-keuzekaart__label {
	font-size: 14px;
	font-weight: 700;
}
.amerikanu-keuzekaart__aantal {
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
}
.amerikanu-keuzekaart__mark {
	font-size: 15px;
	color: var(--muted);
	flex: none;
}
.amerikanu-keuzekaart.is-actief {
	box-shadow: 0 0 0 2px var(--magenta) inset;
}
.amerikanu-keuzekaart.is-actief .amerikanu-keuzekaart__mark::before {
	content: '\2713';
}
/* R3 (David 2026-08-17): filterkaart voor een land zonder eigen pagina — filtert in plaats van te
   navigeren, dus een <button>. Kadence-knopreset + een gestippelde rand, zodat het zichtbaar een
   ander soort kaart is dan de linkkaarten ernaast (die springen naar een andere pagina). */
button.amerikanu-keuzekaart--filter {
	padding: 0 !important;
	font: inherit;
	color: inherit;
	text-align: left;
	background: var(--card) !important;
	border-style: dashed;
	cursor: pointer;
}
.amerikanu-keuzekaart--filter .amerikanu-keuzekaart__mark {
	font-weight: 800;
}
.amerikanu-keuzekaart--filter.is-actief {
	border-style: solid;
}
.amerikanu-keuzekaart--filter.is-actief .amerikanu-keuzekaart__mark {
	font-size: 0;
}

/* PLP-fixbatch-2A punt 2 (David-correctie): géén harde cap op de regio-combi-kaartenrij
   (type-hub-scope, bv. "Rondreis Amerika auto" met 16 regio's) — in plaats daarvan op desktop
   hetzelfde horizontaal-scrollende patroon als de bestaande mobiele keuzekaartenrij hieronder
   (@media max-width: 899px), zodat alle regio's bereikbaar blijven i.p.v. een afgekapte set.
   Alleen op desktop-breedte: onder 900px geldt toch al de mobiele scroll-regel op de kale
   .amerikanu-keuzekaarten-klasse. */
@media (min-width: 900px) {
	.amerikanu-keuzekaarten--scroll {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: 6px;
	}
	.amerikanu-keuzekaarten--scroll .amerikanu-keuzekaart {
		flex: none;
		width: 200px;
		scroll-snap-align: start;
	}
}

/* -- filterbalk (desktop) ------------------------------------------------------------------------ */
.amerikanu-filterbalk {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.amerikanu-filterbalk-mobiel {
	display: none;
}
.amerikanu-filterbalk__dropdown {
	position: relative;
}
.amerikanu-filterbalk__trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1.5px solid var(--rand-knop);
	background: var(--card);
	color: var(--navy);
	border-radius: var(--radius-pill);
	padding: 9px 18px;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
/* Hover-bugfix (David-melding 2026-08-07, zelfde rootcause als .amerikanu-filterbalk__optie
   hierboven): de trigger-pil is ook een <button> en kreeg zonder deze pin Kadence's globale
   button:hover-kleuren (donkerblauw vlak, bijna-wit label). Frame (PLP Definitief.dc.html, regel
   110/121/137) definieert geen aparte hover-stijl voor deze knop — dus hier expliciet vastzetten
   op de basisstaat i.p.v. een nieuw hover-effect verzinnen. */
.amerikanu-filterbalk__trigger:hover,
.amerikanu-filterbalk__trigger:focus-visible,
.amerikanu-filterbalk__trigger:focus {
	background: var(--card);
	color: var(--navy);
}
.amerikanu-filterbalk__chevron {
	font-size: 10px;
	color: var(--muted);
}
.amerikanu-filterbalk__dropdown.is-gezet .amerikanu-filterbalk__trigger {
	box-shadow: 0 0 0 2px var(--magenta);
}
.amerikanu-filterbalk__paneel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 60;
	min-width: 230px;
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: var(--radius-klein);
	box-shadow: 0 18px 44px -14px rgba(30, 46, 90, 0.32);
	padding: 6px;
	display: flex;
	flex-direction: column;
}
.amerikanu-filterbalk__paneel[hidden] {
	display: none;
}
.amerikanu-filterbalk__paneel--rechts {
	left: auto;
	right: 0;
}
.amerikanu-filterbalk__optie {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: none;
	background: none;
	border-radius: 10px;
	font-family: var(--font);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}
.amerikanu-filterbalk__optie:hover,
.amerikanu-filterbalk__optie:focus-visible,
.amerikanu-filterbalk__optie:focus {
	/* Hover-bugfix (David-melding 2026-08-07): zelfde rootcause als .amerikanu-keuzekaart hierboven
	   — Kadence's globale button:hover/a:hover-regels (global.min.css) zijn qua specificiteit
	   (element + pseudo-klasse) sterker dan onze ongehoverde basisregel (alleen een klasse), en
	   zetten de tekst zonder deze expliciete override naar een lichte/witte knopkleur op een licht
	   hover-vlak — onleesbaar. Frame (PLP Definitief.dc.html, regel 116/128/143) specificeert op
	   hover uitsluitend het achtergrond-vlak, tekstkleur blijft #1E2E5A (navy) — vandaar de
	   expliciete color hieronder. */
	background: rgba(30, 46, 90, 0.06);
	color: var(--navy);
}
.amerikanu-filterbalk__optie.is-actief {
	color: var(--magenta);
}
/* Regio-wissel (blok 3.1, PLP-doorloop 2026-08-12): de huidige regio rendert als <span> (geen href
   — je kunt niet naar de pagina wisselen waar je al bent), dus geen knop-cursor voorwenden. */
span.amerikanu-filterbalk__optie.is-actief,
span.amerikanu-filterbalk-mobiel__chip.is-actief {
	cursor: default;
}
.amerikanu-filterbalk__optie.is-actief:hover,
.amerikanu-filterbalk__optie.is-actief:focus-visible,
.amerikanu-filterbalk__optie.is-actief:focus {
	color: var(--magenta);
}
.amerikanu-filterbalk__scheiding {
	width: 1px;
	height: 24px;
	background: var(--rand-lijn);
}
.amerikanu-filterbalk__teller {
	font-size: 14px;
	font-weight: 800;
}
.amerikanu-filterbalk__wis {
	border: none;
	background: none;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	color: var(--body);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	padding: 0;
}
/* Hover-bugfix (David-melding 2026-08-07): zelfde Kadence-button:hover-lek, dezelfde pin-aanpak
   als .amerikanu-filterbalk__trigger hierboven — frame geeft ook hier geen aparte hover-stijl. */
.amerikanu-filterbalk__wis:hover,
.amerikanu-filterbalk__wis:focus-visible,
.amerikanu-filterbalk__wis:focus {
	color: var(--body);
	background: none;
}
.amerikanu-filterbalk__wis[hidden] {
	display: none;
}
.amerikanu-filterbalk__dropdown--sorteer {
	margin-left: auto;
}

/* Body-scroll-lock (PLP-doorloop 2026-08-12, blok 2.3) terwijl de mobiele filter-sheet open is —
   niet media-gated: de trigger die deze klasse zet (data-sheet-open) is toch alleen zichtbaar/
   bereikbaar onder de 900px-grens hieronder, dus dit heeft in de praktijk geen effect op desktop. */
body.is-sheet-open {
	overflow: hidden;
}

/* -- filterbalk (mobiel: sticky cluster + bottom-sheet) ------------------------------------------ */
@media (max-width: 899px) {
	.amerikanu-filterbalk {
		display: none;
	}
	.amerikanu-filterbalk-mobiel {
		display: block;
		position: sticky;
		/* Gecontroleerd op hetzelfde patroon als reis.css se .amerikanu-sticky__navm (David 14-09):
		   niet gewijzigd. amerikanu_submenu_context() kan het navy submenu hier ook laten
		   wegvallen, maar de sticky-container van deze balk is haar eigen kleine wrapper
		   (.amerikanu-filterpaneel, circa 91px) in plaats van main.wrap over de hele paginahoogte
		   zoals bij de tabbalk op de PDP. Daardoor blijft deze balk maar een paar tientallen
		   pixels "vast" staan en is de lege 56px-strook in de praktijk niet het aanhoudende,
		   zichtbare probleem dat op de PDP speelde. Zie rapport 14-09 voor het bewijs. */
		top: 56px;
		z-index: 30;
		background: var(--bg);
		margin: 0 -14px;
		padding: 10px 14px;
	}
	.amerikanu-filterbalk-mobiel__rij {
		display: flex;
		align-items: center;
		gap: 10px;
		background: var(--card);
		border: 1px solid var(--rand-kaart);
		border-radius: var(--radius-pill);
		padding: 6px 8px;
		box-shadow: 0 6px 18px -8px rgba(30, 46, 90, 0.2);
	}
	.amerikanu-filterbalk-mobiel__filters {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		background: var(--navy);
		color: #fff;
		border: none;
		border-radius: var(--radius-pill);
		padding: 8px 16px;
		font-family: var(--font);
		font-size: 12.5px;
		font-weight: 700;
		cursor: pointer;
	}
	/* Hover-bugfix (David-melding 2026-08-07): zelfde Kadence-button:hover-lek als hierboven —
	   zonder pin verschuift het navy vlak naar Kadence's blauwtint i.p.v. hetzelfde navy te blijven. */
	.amerikanu-filterbalk-mobiel__filters:hover,
	.amerikanu-filterbalk-mobiel__filters:focus-visible,
	.amerikanu-filterbalk-mobiel__filters:focus {
		background: var(--navy);
		color: #fff;
	}
	.amerikanu-filterbalk-mobiel__teller {
		font-size: 12px;
		font-weight: 600;
		color: var(--muted);
	}
	.amerikanu-filterbalk-mobiel__sorteer {
		margin-left: auto;
		background: none;
		border: 1px solid var(--rand-knop);
		color: var(--navy);
		border-radius: var(--radius-pill);
		padding: 7px 13px;
		font-family: var(--font);
		font-size: 12px;
		font-weight: 600;
		cursor: pointer;
	}
	/* Hover-bugfix (David-melding 2026-08-07): zelfde pin-aanpak als de desktoptrigger. */
	.amerikanu-filterbalk-mobiel__sorteer:hover,
	.amerikanu-filterbalk-mobiel__sorteer:focus-visible,
	.amerikanu-filterbalk-mobiel__sorteer:focus {
		background: none;
		color: var(--navy);
	}
	/* Scrim/backdrop (PLP-doorloop 2026-08-12, blok 2.3): dimt de pagina achter de geopende sheet,
	   klik erop sluit 'm (overzicht.js). Navy-getint i.p.v. kaal zwart — zelfde tint als het
	   design-frame (PLP Definitief.dc.html, "Mobiel · filter-sheet"), dat een gedimd hero-beeld
	   toont via exact deze rgba(30,46,90,0.55)-overlay. */
	.amerikanu-filterbalk-mobiel__scrim {
		position: fixed;
		inset: 0;
		z-index: 998;
		background: rgba(30, 46, 90, 0.55);
	}
	.amerikanu-filterbalk-mobiel__scrim[hidden] {
		display: none;
	}

	/* Bottom-sheet (PLP-doorloop 2026-08-12, blok 2.3, SPEC-plp.md "in productie een bottom-sheet
	   zoals frame 3"): position:fixed aan de viewport-onderkant i.p.v. het vroegere prototype-
	   dropdown-paneel (position:absolute onder de filterknoppen-rij) — vaste positie, afgeronde
	   bovenhoeken (24px, 1:1 uit het frame), drag-handle-streepje, eigen scroll zodra de inhoud de
	   viewporthoogte nadert. z-index ruim boven #masthead (chrome.css, 80 !important) en de mobiele
	   sticky adviesbalk (70) — al is die laatste sowieso verborgen zolang de sheet open is
	   (body.is-sheet-open hieronder, blok 2.1). */
	.amerikanu-filterbalk-mobiel__sheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		max-height: min(80vh, 640px);
		overflow-y: auto;
		background: var(--card);
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -8px 32px -8px rgba(30, 46, 90, 0.35);
		padding: 6px 18px 18px;
		display: flex;
		flex-direction: column;
		gap: 14px;
	}
	.amerikanu-filterbalk-mobiel__sheet[hidden] {
		display: none;
	}
	.amerikanu-filterbalk-mobiel__sheet-handle {
		display: grid;
		place-items: center;
		padding: 4px 0 0;
		flex: none;
	}
	.amerikanu-filterbalk-mobiel__sheet-handle span {
		width: 38px;
		height: 4px;
		border-radius: var(--radius-pill);
		background: var(--rand-knop);
	}
	.amerikanu-filterbalk-mobiel__sheet-kop {
		position: sticky;
		top: 0;
		background: var(--card);
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 17px;
		font-weight: 800;
		padding-top: 4px;
	}
	.amerikanu-filterbalk-mobiel__sheet-kop button {
		border: none;
		background: none;
		font-size: 16px;
		color: var(--muted);
		cursor: pointer;
		padding: 2px 6px;
	}
	/* Hover-bugfix (David-melding 2026-08-07): zelfde pin-aanpak. */
	.amerikanu-filterbalk-mobiel__sheet-kop button:hover,
	.amerikanu-filterbalk-mobiel__sheet-kop button:focus-visible,
	.amerikanu-filterbalk-mobiel__sheet-kop button:focus {
		background: none;
		color: var(--muted);
	}
	.amerikanu-filterbalk-mobiel__groep {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.amerikanu-filterbalk-mobiel__label {
		font-size: 10.5px;
		font-weight: 800;
		letter-spacing: 0.08em;
		color: var(--muted);
	}
	.amerikanu-filterbalk-mobiel__chips {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	.amerikanu-filterbalk-mobiel__chip {
		position: relative;
		border: 1.5px solid var(--rand-knop);
		background: var(--card);
		color: var(--navy);
		border-radius: var(--radius-pill);
		padding: 8px 15px;
		font-family: var(--font);
		font-size: 12.5px;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
	}
	/* Hover-bugfix (David-melding 2026-08-07): zelfde rootcause als .amerikanu-filterbalk__optie
	   hierboven — chips zonder eigen href renderen als <button> en zonder deze expliciete override
	   wint Kadence's globale button:hover (global.min.css), wat het label onleesbaar wit-op-donker
	   maakt. Deze regel ontbrak hier zelfs volledig (bug 1 trof dus zowel desktop als mobiel). */
	.amerikanu-filterbalk-mobiel__chip:hover,
	.amerikanu-filterbalk-mobiel__chip:focus-visible,
	.amerikanu-filterbalk-mobiel__chip:focus {
		background: var(--card);
		color: var(--navy);
	}
	.amerikanu-filterbalk-mobiel__chip.is-actief {
		box-shadow: 0 0 0 2px var(--magenta);
	}
	.amerikanu-filterbalk-mobiel__acties {
		display: flex;
		align-items: center;
		gap: 14px;
		border-top: 1px solid var(--rand-lijn);
		padding-top: 13px;
	}
	.amerikanu-filterbalk-mobiel__wis {
		border: none;
		background: none;
		font-family: var(--font);
		font-size: 13px;
		font-weight: 600;
		color: var(--body);
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
		flex: none;
		padding: 0;
	}
	/* Hover-bugfix (David-melding 2026-08-07): zelfde pin-aanpak als de desktop-wis-knop. */
	.amerikanu-filterbalk-mobiel__wis:hover,
	.amerikanu-filterbalk-mobiel__wis:focus-visible,
	.amerikanu-filterbalk-mobiel__wis:focus {
		color: var(--body);
		background: none;
	}
	.amerikanu-filterbalk-mobiel__toon {
		flex: 1;
		border: none;
		font-family: var(--font);
		font-size: 14px;
		cursor: pointer;
	}

	/* .amerikanu-filterbalk-mobiel is zelf (position:sticky + z-index:30) een eigen stacking-context
	   — de hoge z-index op de scrim/sheet hieronder wint daardoor alléén intern, niet naar buiten
	   toe tegen #masthead (chrome.css, z-index:80 !important, dezelfde stapel-rootcause als daar
	   gedocumenteerd). Zolang de sheet open is, tilt dit de héle context erboven zodat scrim/sheet
	   nooit ergens achter de header kunnen wegduiken. */
	body.is-sheet-open .amerikanu-filterbalk-mobiel {
		z-index: 1000;
	}

	/* Keuzekaarten schuiven op mobiel om naar een horizontaal scrollende rij. */
	.amerikanu-filterpaneel {
		margin: 12px -14px 0;
		padding: 10px 14px;
		border-radius: 0;
		border: none;
		border-bottom: 1px solid var(--rand-lijn);
	}
	.amerikanu-keuzekaarten {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		padding-bottom: 4px;
	}
	.amerikanu-keuzekaart {
		flex: none;
		width: 124px;
	}
	.amerikanu-keuzekaart__beeld {
		height: 56px;
	}
	.amerikanu-keuzekaart__label {
		font-size: 11.5px;
	}
	.amerikanu-filterpaneel__scheiding {
		display: none;
	}
}

/* -- grid ----------------------------------------------------------------------------------------- */
.amerikanu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 24px;
}
.amerikanu-grid__kaart {
	display: contents;
}
.amerikanu-grid__kaart[hidden] {
	display: none;
}
/* componenten.css se .amerikanu-adviesstrook{display:flex;...} is een auteurregel zonder
   [hidden]-uitzondering — zonder deze override zou het [hidden]-attribuut (overzicht.js se
   ≤4-zichtbare-herevaluatie) genegeerd worden. */
.amerikanu-grid > .amerikanu-adviesstrook[hidden] {
	display: none;
}
.amerikanu-grid__leeg {
	grid-column: 1 / -1;
	padding: 56px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}
.amerikanu-grid__leeg[hidden] {
	display: none;
}
.amerikanu-grid__leeg-titel {
	font-size: 20px;
	font-weight: 800;
}
.amerikanu-grid__leeg-tekst {
	margin: 0;
	font-size: 14px;
	color: var(--body);
}
.amerikanu-grid__leeg-advies {
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: underline;
	text-decoration-color: var(--magenta);
	text-underline-offset: 3px;
}

@media (max-width: 899px) {
	.amerikanu-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.amerikanu-grid__kaart {
		display: block;
		/* Grid-blowout-fix (gate-4-feedback punt 2, "kaarten lopen uit beeld"): grid-items krijgen
		   van CSS Grid een impliciete min-width:auto, die de min-content-breedte van alle
		   afstammelingen meetelt — inclusief .amerikanu-reiskaart__route (white-space:nowrap,
		   componenten.css), waarvan de onafgebroken routetekst breder kan zijn dan de 1fr-kolom.
		   Zonder deze reset rekt de kolom zelf uit tot die min-content-breedte (hier gemeten:
		   633px in een 390px-viewport) — de kaart wordt dan niet begrensd door de grid-track, dus
		   .amerikanu-reiskaart__body se min-width:0 (--liggend-regel verderop) komt nooit in
		   werking en text-overflow:ellipsis heeft geen vaste breedte om tegenaan te knippen. De
		   pagina zelf scrollt niet mee (er zit geen overflow-container tussen), dus dit toonde zich
		   niet als een scrollWidth-afwijking — wél als kaarten waarvan het rechterdeel (prijs,
		   pijl-rondje, een deel van titel/route) buiten het zichtbare kolomvlak viel. */
		min-width: 0;
	}
}

/* -- adviesblok-onderregel (regio-tekstvariant hergebruikt het bestaande component ongewijzigd) -- */
.amerikanu-overzicht > .amerikanu-adviesblok {
	margin-top: 56px;
}
.amerikanu-overzicht > .amerikanu-reviews,
.amerikanu-overzicht > .amerikanu-carrousel {
	margin-top: 64px;
}
/* Zusterkaarten "Wat je verder wilt weten" (PLP-fixbatch-3 punt 5, David-bugmelding 2026-08-07):
   nieuw op de PLP — zelfde sectie-marge als de plek-hub se eigen .amerikanu-plek > .amerikanu-
   zusterkaarten-regel (plek.css). */
.amerikanu-overzicht > .amerikanu-zusterkaarten {
	margin-top: 56px;
}

/* -- ontdek-kaartjes ------------------------------------------------------------------------------ */
.amerikanu-ontdek-kaart {
	flex: none;
	width: 224px;
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: var(--radius-klein);
	overflow: hidden;
	text-decoration: none;
	color: var(--navy);
}
.amerikanu-ontdek-kaart:hover,
.amerikanu-ontdek-kaart:focus-visible {
	color: var(--navy);
}
.amerikanu-ontdek-kaart__beeld {
	display: block;
	height: 130px;
	background: var(--beeld-placeholder);
}
.amerikanu-ontdek-kaart__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.amerikanu-ontdek-kaart__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
}
.amerikanu-ontdek-kaart__label {
	font-size: 14px;
	font-weight: 700;
}
.amerikanu-ontdek-kaart__pijl {
	font-size: 14px;
	color: var(--muted);
}
@media (max-width: 899px) {
	.amerikanu-ontdek-kaart {
		width: 140px;
	}
	.amerikanu-ontdek-kaart__beeld {
		height: 84px;
	}
}

/* -- info-secties ------------------------------------------------------------------------------------
   Verplaatst naar componenten.css (fase-4 Task 17): infosecties.php is expliciet een gedeeld
   component (Task-16-docblock, "plek.php (Task 17) roept hier straks dezelfde part aan") — de CSS
   hoorde dus niet exclusief bij de PLP thuis. componenten.css laadt al sitewide vóór dit bestand
   (functions.php se dependency-array), dus de verplaatsing is gedragsneutraal voor de PLP. */

/* -- USP-blok ----------------------------------------------------------------------------------------
   Verplaatst naar componenten.css (fase-4 Task 21): usp-blok.php se eigen docblock (Task 16) noemt
   dit component al expliciet "ook bedoeld voor hergebruik door de latere homepage-taak" — de
   homepage (front-page.php, buiten deze conditionele stylesheet) roept het nu ook aan, dus de CSS
   hoort niet exclusief bij de PLP thuis. Zelfde verplaatsingspatroon als de info-secties hierboven
   (Task 17-docblock). */

/* -- video-sectie ------------------------------------------------------------------------------------ */
.amerikanu-overzicht__video {
	margin-top: 56px;
}
.amerikanu-overzicht__video video {
	width: 100%;
	border-radius: var(--radius-card);
	display: block;
}

@media (max-width: 899px) {
	.amerikanu-overzicht {
		padding: 0 14px 8px;
	}
	.amerikanu-overzicht__h2 {
		/* Gate-4-feedback-fix (punt 3): mobiel-frame (PLP Definitief.dc.html, "Mobiel · 390") zet
		   voor déze kop expliciet margin-top 18px + font-size 21px — kleiner dan de 32px
		   desktop-maat, dit was tot dusver niet overgenomen (alleen de margin-top stond hier, en
		   dan nog op de verkeerde 24px-waarde). */
		margin-top: 18px;
		font-size: 21px;
	}
}

/* R3-besluit (David 2026-08-14): de mobiele sticky onderbalk van de PLP is verwijderd — op
   productie staat rechtsonder de contactwidget van het bureau, die hetzelfde aanbood (zie de
   toelichting in single-overzicht.php). Geen resterende body-padding-reserve nodig; de PDP houdt
   zijn eigen onderbalk (reis.css, .amerikanu-sticky__ctam) omdat die een reisvoorstel aanvraagt. */

/* -- excursie-grid (overzicht met inhoud=excursies, QA-doorloop P1.3) -----------------------------
   Vier kolommen: de excursiekaart is staand (3:4) en valt in de 3-koloms reizen-maat te groot uit. */
.amerikanu-excursiegrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 24px;
}

@media (max-width: 1199px) {
	.amerikanu-excursiegrid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 899px) {
	.amerikanu-excursiegrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}