/* AmerikaNu — gedeelde componenten (fase-4 Task 11): reiskaart, excursiekaart, carrousel-shell.
   Maten 1:1 uit design/website-compleet/Reiskaart.dc.html + SPEC-componenten.md §1 (reiskaart)
   en design/excursies-en-blog/README.md deel 1 + Excursiekaart.dc.html/Stadspagina Excursies.dc.html
   (excursiekaart + carrousel-kop/meer-tegel). Kaartzones op de reiskaart hebben vaste hoogtes zodat
   grid-rijen gelijk uitlijnen: beeld 222px, titel+route-zone 76px, USP-zone 78px, onderbalk boven
   een 1px lijn. */

/* -- reiskaart (hét definitieve product-tegelontwerp) ------------------------------------------- */
.amerikanu-reiskaart {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 480px;
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: var(--radius-card);
	overflow: hidden;
	text-decoration: none;
	color: var(--navy);
	transition: box-shadow var(--motion), transform var(--motion);
}
.amerikanu-reiskaart:hover,
.amerikanu-reiskaart:focus-visible {
	box-shadow: var(--schaduw-hover);
	transform: translateY(-3px);
	color: var(--navy);
}
.amerikanu-reiskaart:focus-visible {
	outline: 2px solid var(--magenta);
	outline-offset: 2px;
}

.amerikanu-reiskaart__beeld {
	position: relative;
	display: block;
	height: 222px;
	flex: none;
	background: var(--beeld-placeholder);
	overflow: hidden;
}
.amerikanu-reiskaart__beeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amerikanu-reiskaart__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--radius-pill);
	padding: 5px 13px;
	font-size: 12px;
	font-weight: 700;
	color: var(--navy);
}
.amerikanu-reiskaart__tip {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius-pill);
	padding: 4px 13px;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(30, 46, 90, 0.3);
}
.amerikanu-reiskaart__tip-portret {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
}

.amerikanu-reiskaart__body {
	padding: 16px 20px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.amerikanu-reiskaart__kop {
	height: 76px;
	overflow: hidden;
}
.amerikanu-reiskaart__titel {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 48px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.amerikanu-reiskaart__routerij {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}
.amerikanu-reiskaart__route {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.amerikanu-reiskaart__iconen {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: none;
	margin-left: auto;
}
.amerikanu-reiskaart__icoontegel {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--rand-knop);
	background: var(--card);
	border-radius: 8px;
	color: var(--navy);
}
.amerikanu-reiskaart__icoontegel--vervoer {
	border-color: rgba(30, 46, 90, 0.08);
	background: var(--beige);
}

.amerikanu-reiskaart__usps {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 78px;
	overflow: hidden;
}
.amerikanu-reiskaart__usp {
	display: flex;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--body);
	line-height: 1.35;
}
.amerikanu-reiskaart__vink {
	color: var(--magenta);
	font-weight: 800;
	flex: none;
}

.amerikanu-reiskaart__onderbalk {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	border-top: 1px solid var(--rand-lijn);
	margin-top: auto;
	padding-top: 12px;
}
.amerikanu-reiskaart__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.amerikanu-reiskaart__dagen {
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
}
.amerikanu-reiskaart__prijs {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 800;
}
.amerikanu-reiskaart__info {
	display: inline-grid;
	place-items: center;
	width: 15px;
	height: 15px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--muted);
	font-size: 10px;
	font-weight: 600;
	color: var(--muted);
	cursor: help;
}
.amerikanu-reiskaart__pijl {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1.5px solid var(--rand-knop);
	border-radius: var(--radius-pill);
	font-size: 15px;
	color: var(--navy);
	flex: none;
	transition: background var(--motion), color var(--motion);
}
.amerikanu-reiskaart:hover .amerikanu-reiskaart__pijl,
.amerikanu-reiskaart:focus-visible .amerikanu-reiskaart__pijl {
	background: var(--navy);
	color: #fff;
}

/* Liggende mobiel-variant (PLP/info): foto links, highlights + inclusie-iconen vervallen,
   pijl-rondje 28px (SPEC-componenten.md §1). De beeldkolom is een vaste flex-kolom (géén overlap
   met de tekstzone mogelijk); de tip-pill (bedoeld voor het 350+px brede staand-beeld) vervalt —
   op de 132px liggende foto zou de pill-tekst over het beeld heenlopen (gate-2-bevinding). De
   typering-badge verhuist liggend naar het witte tekstvlak (markup rendert 'm daar, reiskaart.php)
   als roze chip met navy tekst — gate-2-besluit: foto blijft schoon, wit-op-wit kan niet →
   --roze uit het token-systeem, past bij de magenta-accentfamilie van de staande badge-stijl.
   CSS-gedreven, zelfde markup (Task-24-dekkings-fix): grid.php geeft ELKE PLP-kaart de
   variant='liggend'-markup mee, ongeacht viewport — alléén déze @media-blok bepaalt of het
   liggend-layout ook zichtbaar wordt. Boven 899px blijft de kaart dus visueel staand: geen
   flex-direction:row, de badge valt terug op de basis-.amerikanu-reiskaart__badge (positie
   absolute, verankerd aan de nu position:relative .amerikanu-reiskaart-kaart zelf, dus ook al
   zit de badge-markup in het tekstvlak-DOM, hij tekent zich boven de foto — zelfde plek als de
   staand-variant). */
@media (max-width: 899px) {
	.amerikanu-reiskaart--liggend {
		flex-direction: row;
		height: auto;
		min-height: 132px;
	}
	.amerikanu-reiskaart--liggend .amerikanu-reiskaart__beeld {
		width: 132px;
		height: auto;
		flex: none;
	}
	.amerikanu-reiskaart--liggend .amerikanu-reiskaart__body {
		padding: 12px 14px;
		justify-content: center;
		gap: 8px;
		min-width: 0;
	}
	.amerikanu-reiskaart--liggend .amerikanu-reiskaart__kop {
		height: auto;
	}
	.amerikanu-reiskaart--liggend .amerikanu-reiskaart__usps,
	.amerikanu-reiskaart--liggend .amerikanu-reiskaart__iconen,
	.amerikanu-reiskaart--liggend .amerikanu-reiskaart__tip {
		display: none;
	}
	/* Typering-badge op het tekstvlak (liggend): geen absolute foto-overlay maar een chip in de
	   normale flow — de basis-.amerikanu-reiskaart__badge is position:absolute + wit, hier
	   resetten. Alleen mobiel: boven 899px moet dezelfde badge-markup terugvallen op de
	   position:absolute foto-overlay-stijl (zie kaart-brede position:relative hierboven). */
	.amerikanu-reiskaart__badge--tekstvlak {
		position: static;
		align-self: flex-start;
		background: var(--roze);
		color: var(--navy);
		padding: 4px 11px;
		font-size: 11px;
	}
	.amerikanu-reiskaart--liggend .amerikanu-reiskaart__onderbalk {
		border-top: none;
		margin-top: 8px;
		padding-top: 0;
	}
	.amerikanu-reiskaart--liggend .amerikanu-reiskaart__pijl {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}
}

/* -- excursiekaart (bewust anders: beeld-dominant, geen prijs-zwaartepunt, geen USP's) ----------- */
.amerikanu-excursiekaart {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: var(--navy);
	transition: transform var(--motion);
}
.amerikanu-excursiekaart:hover,
.amerikanu-excursiekaart:focus-visible {
	transform: translateY(-4px);
}
.amerikanu-excursiekaart:focus-visible {
	outline: 2px solid var(--magenta);
	outline-offset: 2px;
}
.amerikanu-excursiekaart__beeld {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	/* Designcheck-fix (punt 31, 2026-08-26): README/Excursiekaart.dc.html specificeren expliciet
	   18px voor het fotoblok, hier stond de gedeelde --radius-klein-token (14px) — bewust een
	   eigen waarde i.p.v. de var, zodat andere --radius-klein-gebruikers elders niet meeveranderen. */
	border-radius: 18px;
	overflow: hidden;
	background: var(--beeld-placeholder);
	box-shadow: 0 14px 30px -16px rgba(30, 46, 90, 0.32);
}
.amerikanu-excursiekaart__beeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.amerikanu-excursiekaart:hover .amerikanu-excursiekaart__beeld img {
	transform: scale(1.04);
}
.amerikanu-excursiekaart__beeld::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(19, 30, 61, 0.22) 0%, rgba(19, 30, 61, 0) 30%, rgba(19, 30, 61, 0) 58%, rgba(19, 30, 61, 0.5) 100%);
	pointer-events: none;
}
.amerikanu-excursiekaart__label {
	position: absolute;
	z-index: 1;
	top: 11px;
	left: 11px;
	background: rgba(255, 255, 255, 0.94);
	border-radius: var(--radius-pill);
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--navy);
}
.amerikanu-excursiekaart__chips {
	position: absolute;
	z-index: 1;
	left: 11px;
	right: 11px;
	bottom: 11px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.amerikanu-excursiekaart__chip {
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-pill);
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
}
.amerikanu-excursiekaart__chip--prijs {
	background: var(--navy);
	color: #fff;
}
.amerikanu-excursiekaart__titel {
	margin-top: 11px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.28;
	text-wrap: pretty;
}
.amerikanu-excursiekaart__plek {
	margin-top: 3px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
}
.amerikanu-excursiekaart__plek svg {
	flex: none;
}
.amerikanu-excursiekaart__plek span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* -- carrousel-shell (Doen/Reizen-rijen, stadspagina + info-carrousels) --------------------------- */
.amerikanu-carrousel__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}
.amerikanu-carrousel__kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.amerikanu-carrousel__kicker--navy {
	color: var(--navy);
}
.amerikanu-carrousel__kicker--magenta {
	color: var(--magenta);
}
.amerikanu-carrousel__kicker-stip {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.amerikanu-carrousel__titel {
	/* Designcheck-fix (punt 31, 2026-08-26): Kadence se eigen inline `h2{font-weight:700;
	   font-size:28px;...color:var(--global-palette3)}` (global.min.css se companion-<style>,
	   zelfde bron als de body-achtergrond-D9-fix in basis.css) laadt ná componenten.css en had,
	   zonder eigen font-/kleur-declaratie hier, de Doen/Reizen-kop overgenomen: verkeerde kleur
	   (koel antraciet i.p.v. navy) + 28px/700 i.p.v. de 26px/800 uit
	   design/excursies-en-blog/README.md §Doen-sectie. Expliciet hier zetten wint alsnog op
	   specificiteit (class > element), ongeacht laadvolgorde. */
	margin-top: 6px;
	color: var(--navy);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.amerikanu-carrousel__ondertitel {
	margin: 4px 0 0;
	font-size: 15px;
	color: var(--muted);
	max-width: 640px;
}
.amerikanu-carrousel__alles {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	border: 1.5px solid var(--rand-knop);
	border-radius: var(--radius-pill);
	padding: 10px 18px;
	transition: background var(--motion), border-color var(--motion);
}
.amerikanu-carrousel__alles:hover,
.amerikanu-carrousel__alles:focus-visible {
	background: var(--roze);
	border-color: var(--navy);
	color: var(--navy);
}

/* Pijl in de "alles"-pill (David-akkoord: ontwerp Stadspagina Excursies.dc.html schrijft
"Alle excursies →" voor, dezelfde pill bij de Reizen-rij) — komt uit carrousel.php se markup, niet
uit de labelstring. Eigen kleur (magenta, geen Kadence-blauw, test 095) i.p.v. de navy tekstkleur
van de pill; die kleur wint over het roze hoverstaat omdat de span zijn eigen color-declaratie
heeft, dus de pijl blijft leesbaar op zowel het rustige als het roze hoverstaat. */
.amerikanu-carrousel__alles-pijl {
	color: var(--magenta);
}

.amerikanu-carrousel__rij {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	padding: 20px 0 12px;
	scrollbar-width: thin;
	scrollbar-color: rgba(30, 46, 90, 0.18) transparent;
}
.amerikanu-carrousel__rij::-webkit-scrollbar {
	height: 8px;
}
.amerikanu-carrousel__rij::-webkit-scrollbar-thumb {
	background: rgba(30, 46, 90, 0.18);
	border-radius: var(--radius-pill);
}
.amerikanu-carrousel__rij::-webkit-scrollbar-track {
	background: transparent;
}
.amerikanu-carrousel__rij > .amerikanu-reiskaart {
	flex: none;
	width: 300px;
}
.amerikanu-carrousel__rij > .amerikanu-excursiekaart {
	flex: none;
	width: 224px;
}

.amerikanu-carrousel__meer {
	flex: none;
	width: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-klein);
	background: var(--beige);
	border: 2px dashed rgba(30, 46, 90, 0.22);
	color: var(--navy);
	text-decoration: none;
}
.amerikanu-carrousel__meer-cirkel {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-pill);
	background: var(--navy);
	color: #fff;
	font-size: 20px;
}
.amerikanu-carrousel__meer-label {
	font-size: 13px;
	font-weight: 800;
	text-align: center;
	line-height: 1.25;
}

@media (max-width: 899px) {
	.amerikanu-carrousel__titel {
		font-size: 20px;
	}
	.amerikanu-carrousel__rij > .amerikanu-reiskaart {
		width: 262px;
	}
	.amerikanu-carrousel__rij > .amerikanu-excursiekaart {
		width: 148px;
	}
	.amerikanu-carrousel__meer {
		width: 104px;
	}
	.amerikanu-carrousel__meer-cirkel {
		width: 34px;
		height: 34px;
		font-size: 16px;
	}
}

/* AmerikaNu — gedeelde componenten (fase-4 Task 12): faq, reviews, adviesblok/-strook,
   trust-regel, breadcrumb, capture, social-gallery, hero. Maten 1:1 uit
   design/website-compleet/PDP+PLP+Info-paginas Definitief.dc.html, SPEC-componenten.md §2
   (social-gallery) en design/excursies-en-blog/design-files/Blog Definitief.dc.html (capture). */

/* -- avatar (gedeeld: adviesblok/-strook) -------------------------------------------------------- */
.amerikanu-avatar {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid transparent;
	flex: none;
}
.amerikanu-avatar--initialen {
	display: inline-grid;
	place-items: center;
	background: var(--lichtblauw-accent);
	color: #fff;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: 0;
}

/* -- faq-accordeon --------------------------------------------------------------------------------- */
/* Optionele sectie-wrapper (faq.php se 'titel'-arg, fase-4 gate-3-fix-3) — de buiten-marge om
   deze <section> heen (bv. reis.css se #faq) is aanroeper-specifiek en hoort dáár, niet hier. */
.amerikanu-faq-sectie__titel {
	margin: 0 0 20px;
}
.amerikanu-faq {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}
.amerikanu-faq--kolommen-2 {
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
}
.amerikanu-faq__item {
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	/* Frame (PDP Definitief.dc.html, FAQ-kaart): border-radius 16px — 2px ruimer dan het gedeelde
	   --radius-klein-token (14px, elders veelvuldig hergebruikt); hier lokaal 1:1 op de frame-maat
	   gezet i.p.v. het token zelf te wijzigen (fase-4 gate-3-fix-3). */
	border-radius: 16px;
	overflow: hidden;
}
.amerikanu-faq__toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 20px;
	background: none;
	border: none;
	font-family: var(--font);
	text-align: left;
	cursor: pointer;
	color: var(--navy);
}
.amerikanu-faq__toggle:focus-visible {
	outline: 2px solid var(--magenta);
	outline-offset: -2px;
}
/* FAQ-hover (David, 2026-08-11, tweede correctie): het blauwe hovervlak BLIJFT — het komt
   technisch uit Kadence se globale button:hover (global.min.css), staat niet in PDP
   Definitief.dc.html, maar David wil het houden; zijn punt was uitsluitend dat het vlak te
   strak op de tekst eronder zat. Hier daarom een eigen, expliciete hover-regel met dezelfde
   Kadence-tokens (gedrag identiek aan wat er stond) zodat dit een bewuste keuze in óns bestand
   is i.p.v. een stille collision, plus ademruimte via .amerikanu-faq__antwoord se padding-top
   hieronder. NIET "terugverbeteren" naar de frame-variant zonder hover. */
.amerikanu-faq__toggle:hover,
.amerikanu-faq__toggle:focus,
.amerikanu-faq__toggle:active {
	background: var(--navy) !important;
	color: #fff !important;
}
.amerikanu-faq__vraag {
	flex: 1;
	font-size: 15px;
	font-weight: 700;
}
.amerikanu-faq__icoon {
	flex: none;
	font-size: 18px;
	font-weight: 700;
	color: var(--muted);
}
.amerikanu-faq__paneel[hidden] {
	display: none;
}
.amerikanu-faq__antwoord {
	/* padding-top 12px (was 0): ruimte tussen het blauwe hovervlak van de vraag en de
	   antwoordtekst eronder (David-punt 2026-08-11, zie hover-toelichting hierboven). */
	padding: 12px 20px 16px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--body);
}
.amerikanu-faq__antwoord p {
	margin: 0 0 0.8em;
}
.amerikanu-faq__antwoord p:last-child {
	margin-bottom: 0;
}

@media (max-width: 899px) {
	.amerikanu-faq--kolommen-2 {
		grid-template-columns: 1fr;
	}
}

/* PLP-variant (PLP-fixbatch-3 punt 5, David-bugmelding 2026-08-07, PLP Definitief.dc.html §FAQ):
   kale 1-koloms streeplijst i.p.v. losse witte kaarten — geen kaart-achtergrond/rand/radius,
   rijen gescheiden door een 1px lijn (SPEC-plp.md §12 "1px lijnen"), vraag iets groter (16px,
   frame) en een top-lijn boven de eerste rij. Het +/−-icoon (amerikanu-faq__icoon) blijft
   ongewijzigd — bewuste eerdere SPEC-keuze, geen kaart-specifiek detail. */
.amerikanu-faq--lijst {
	gap: 0;
	border-top: 1px solid var(--rand-kaart);
}
.amerikanu-faq--lijst .amerikanu-faq__item {
	background: none;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid var(--rand-kaart);
}
.amerikanu-faq--lijst .amerikanu-faq__toggle {
	padding: 18px 0;
}
.amerikanu-faq--lijst .amerikanu-faq__vraag {
	font-size: 16px;
}
.amerikanu-faq--lijst .amerikanu-faq__antwoord {
	padding: 0 0 18px;
	max-width: 760px;
	font-size: 15px;
}

/* -- zusterkaarten "Wat je verder wilt weten" ------------------------------------------------------ */
/* Verhuisd uit plek.css (PLP-fixbatch-3 punt 5, David-bugmelding 2026-08-07): het component werd
   tot nu toe alleen op plek-pagina's gebruikt (vandaar de plek.css-thuisbasis), maar wordt nu ook
   op de PLP hergebruikt (single-overzicht.php) — plek.css wordt daar niet enqueued (functions.php
   laadt 'm alleen op is_singular('plek')/'excursie'), dus de kaarten renderden op de PLP als kale,
   ongestylede links. De plek-eigen sectie-buitenmarge (`.amerikanu-plek > .amerikanu-zusterkaarten`)
   blijft in plek.css staan — dat is layout, geen componentstijl. */
.amerikanu-zusterkaarten__titel {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.015em;
}
.amerikanu-zusterkaarten__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.amerikanu-zusterkaart {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: var(--radius-klein);
	padding: 16px 18px;
	text-decoration: none;
	color: var(--navy);
	transition: box-shadow var(--motion), transform var(--motion);
}
.amerikanu-zusterkaart:hover,
.amerikanu-zusterkaart:focus-visible {
	box-shadow: 0 12px 26px -14px rgba(30, 46, 90, 0.28);
	transform: translateY(-2px);
	color: var(--navy);
}
.amerikanu-zusterkaart__icoon {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--beige);
	color: var(--navy);
}
.amerikanu-zusterkaart__tekst {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.amerikanu-zusterkaart__titel-tekst {
	font-size: 15px;
	font-weight: 800;
}
.amerikanu-zusterkaart__sub {
	font-size: 12.5px;
	color: var(--muted);
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.amerikanu-zusterkaart__pijl {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1.5px solid var(--rand-knop);
	border-radius: var(--radius-pill);
	color: var(--navy);
}

/* "+meer"-tegel: zelfde kaartvorm als amerikanu-zusterkaart, maar een <button> (geen navigatie —
   client-side uitklap-toggle, data-accordeon-toggle/menu.js) met een dashed rand zodat 'm meteen
   leest als "geen link, een actie". amerikanu-zusterkaarten__extra is de hidden-wrapper met de
   resterende kaarten: display:contents zodra zichtbaar, zodat de kaarten erin gewoon als eigen
   grid-items in amerikanu-zusterkaarten__grid blijven staan (geen extra rij/kolom-verstoring door
   de wrapper-<div> zelf). */
.amerikanu-zusterkaart--meer {
	width: 100%;
	border-style: dashed;
	background: var(--beige);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.amerikanu-zusterkaart--meer:hover,
.amerikanu-zusterkaart--meer:focus-visible {
	border-color: var(--magenta);
	color: var(--navy);
	background: var(--beige);
}
.amerikanu-zusterkaart__icoon--meer {
	background: var(--navy);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}
.amerikanu-zusterkaarten__extra {
	display: contents;
}
.amerikanu-zusterkaarten__extra[hidden] {
	display: none;
}
@media (max-width: 899px) {
	.amerikanu-zusterkaarten__grid {
		grid-template-columns: 1fr;
	}
}

/* -- reviews (D12-review-ombouw) --------------------------------------------------------------------- */
/* Sitewide scroll-lock-utility voor de review-popup (componenten.js) — dezelfde class-op-body-
   aanpak als menu.js se amerikanu-mobiel-open, hier daadwerkelijk met een overflow-regel gekoppeld. */
body.amerikanu-scroll-lock {
	overflow: hidden;
}
.amerikanu-reviews__koprij {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 10px 0 22px;
	flex-wrap: wrap;
}
.amerikanu-reviews__titel {
	margin: 0;
}
.amerikanu-reviews__score {
	font-size: 14px;
	font-weight: 800;
}
.amerikanu-reviews__aantal {
	font-size: 13px;
	color: var(--muted);
}
.amerikanu-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
/* Elke kaart is één <button> — David: "een afbeelding die eroverheen ligt ziet er raar uit"/"voelt
   niet als echte reviews" (D12), dus altijd dezelfde rustige witte kaart, nooit meer tekst over een
   foto. Native <button>-focus/Enter/Space-gedrag i.p.v. een eigen role="button"-implementatie. */
.amerikanu-reviews__kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	min-height: 168px;
	box-sizing: border-box;
	border: 1px solid var(--rand-kaart);
	border-radius: var(--radius-card);
	background: var(--card);
	padding: 22px 22px 20px;
	font-family: var(--font);
	text-align: left;
	cursor: pointer;
	transition: box-shadow var(--motion), border-color var(--motion), transform var(--motion);
}
/* Kadence se globale button:hover zet een blauwe achtergrond + witte tekst; op reviewkaarten wil
   David dat expliciet niet (2026-08-11: "niet dat hij blauw wordt bij hover") — achtergrond en
   kleur hier dus hard vastgezet, alleen schaduw/lift als hover-signaal. */
.amerikanu-reviews__kaart:hover,
.amerikanu-reviews__kaart:focus,
.amerikanu-reviews__kaart:active {
	box-shadow: var(--schaduw-hover);
	border-color: var(--rand-navy);
	transform: translateY(-2px);
	background: var(--card) !important;
	color: inherit !important;
}
.amerikanu-reviews__kaart:focus-visible {
	outline: 2px solid var(--magenta);
	outline-offset: 3px;
}
.amerikanu-reviews__naam {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--body);
}
.amerikanu-reviews__sterren {
	color: var(--magenta);
}
.amerikanu-reviews__kaart .amerikanu-reviews__quote {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--navy);
	/* Belt-and-braces: amerikanu_review_snippet() (inc/helpers.php) knipt al op zin-/woordgrens,
	   deze clamp voorkomt alleen dat een uitzonderlijk lange "korte zin" de kaart alsnog uitrekt. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.amerikanu-reviews__aanhaling {
	margin-right: 3px;
	font-size: 17px;
	font-weight: 800;
	color: var(--magenta);
}
.amerikanu-reviews__fotos {
	margin-top: auto;
	padding-top: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.amerikanu-reviews__foto-preview {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-klein);
	object-fit: cover;
}
.amerikanu-reviews__foto-teller {
	font-size: 11px;
	font-weight: 700;
	color: var(--navy);
	background: var(--beige);
	padding: 3px 9px;
	border-radius: var(--radius-pill);
}

/* -- foto-variant van de reviewkaart (David 2026-08-11, conform PDP Definitief.dc.html
   REVIEWS-blok: klantfoto vult de kaart, "Klantfoto"-pill linksboven, navy gradient onderin met
   quote + naam/score in wit; kaarthoogte 340px zoals het frame). Vervangt voor reviews MET
   klantfoto de witte D12-kaart; reviews zonder foto blijven de witte kaart. */
.amerikanu-reviews__kaart--foto {
	padding: 0;
	height: 340px;
	min-height: 340px;
	overflow: hidden;
	border: none;
	background: var(--beige) !important;
}
.amerikanu-reviews__kaart--foto:hover,
.amerikanu-reviews__kaart--foto:focus,
.amerikanu-reviews__kaart--foto:active {
	background: var(--beige) !important;
}
.amerikanu-reviews__achtergrond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amerikanu-reviews__kaart--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 46, 90, 0) 35%, rgba(30, 46, 90, 0.7) 100%);
	pointer-events: none;
}
.amerikanu-reviews__klantfoto-pill {
	position: absolute;
	top: 14px;
	left: 16px;
	z-index: 2;
	font-size: 10px;
	font-weight: 700;
	color: var(--body);
	background: rgba(255, 255, 255, 0.88);
	padding: 3px 9px;
	border-radius: var(--radius-pill);
}
.amerikanu-reviews__foto-teller--op-foto {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.88);
}
.amerikanu-reviews__foto-inhoud {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: #fff;
	text-align: left;
}
.amerikanu-reviews__foto-quote {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}
.amerikanu-reviews__foto-naam {
	font-size: 12px;
	font-weight: 700;
}
.amerikanu-reviews__foto-sterren {
	color: #fbe1eb;
}

@media (max-width: 899px) {
	.amerikanu-reviews__grid {
		grid-template-columns: 1fr;
	}
}

/* "Bekijk alle reviews"-link onder het sectie-grid → reviewpagina (David-akkoord 2026-08-12). */
.amerikanu-reviews__alle {
	margin: 18px 0 0;
}
.amerikanu-reviews__alle-link {
	font-size: 14px;
	font-weight: 700;
	color: var(--magenta);
	text-decoration: none;
}
.amerikanu-reviews__alle-link:hover,
.amerikanu-reviews__alle-link:focus-visible {
	text-decoration: underline;
	color: var(--magenta);
}

/* -- reviewpagina (page-reviews.php, David-akkoord 2026-08-12): kop + filterpillen + Google-knop;
   het kaartengrid hergebruikt .amerikanu-reviews__grid en de kaart/popup-componenten. ------------ */
.amerikanu-reviewpagina {
	max-width: var(--frame-max);
	margin: 0 auto;
	padding: 56px 48px 80px;
}
.amerikanu-reviewpagina__kop {
	max-width: 720px;
	margin-bottom: 34px;
}
.amerikanu-reviewpagina__titel {
	margin: 0 0 10px;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--navy);
}
.amerikanu-reviewpagina__score-rij {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 12px;
}
.amerikanu-reviewpagina__score {
	font-size: 17px;
	font-weight: 800;
	color: var(--navy);
}
.amerikanu-reviewpagina__score span[aria-hidden] {
	color: var(--magenta);
}
.amerikanu-reviewpagina__aantal {
	font-size: 14px;
	color: var(--muted);
}
.amerikanu-reviewpagina__intro {
	font-size: 15px;
	line-height: 1.6;
	color: var(--body);
	margin: 0 0 22px;
}
.amerikanu-reviewpagina__intro p {
	margin: 0 0 0.8em;
}
.amerikanu-reviewpagina__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.amerikanu-reviewpagina__filter {
	font-size: 13px;
	font-weight: 700;
	font-family: var(--font);
	color: var(--navy);
	background: var(--beige);
	border: none;
	border-radius: var(--radius-pill);
	padding: 8px 15px;
	cursor: pointer;
}
.amerikanu-reviewpagina__filter:hover,
.amerikanu-reviewpagina__filter:focus,
.amerikanu-reviewpagina__filter:active {
	/* Kadence-button-hover-neutralisatie (zelfde patroon als de reviewkaarten hierboven). */
	background: var(--beige) !important;
	color: var(--navy) !important;
}
.amerikanu-reviewpagina__filter.is-actief,
.amerikanu-reviewpagina__filter.is-actief:hover,
.amerikanu-reviewpagina__filter.is-actief:focus {
	background: var(--navy) !important;
	color: #fff !important;
}
.amerikanu-reviewpagina__google {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	border: 1.5px solid var(--rand-knop);
	border-radius: var(--radius-pill);
	padding: 10px 16px;
}
.amerikanu-reviewpagina__leeg {
	margin: 24px 0 0;
	font-size: 14px;
	color: var(--muted);
}
/* Witte kaarten niet laten meerekken tot foto-kaart-hoogte op de pagina: bovenaan uitlijnen. */
.amerikanu-reviewpagina__grid {
	align-items: start;
}
@media (max-width: 899px) {
	.amerikanu-reviewpagina {
		padding: 32px 16px 60px;
	}
	.amerikanu-reviewpagina__titel {
		font-size: 27px;
	}
}

/* -- review-popup <dialog> (D12-review-ombouw): zelfde patroon als
   template-parts/reis/excursie-popup.php + reis.css (28px radius, navy scrim, bottom-sheet
   ≤899px) — hier in componenten.css omdat reviews.php ook op front-page.php/single-overzicht.php
   rendert (reis.css/reis.js laden daar niet). ------------------------------------------------------ */
.amerikanu-reviews__popup {
	position: fixed;
	inset: 0;
	margin: auto;
	width: 560px;
	max-width: 92vw;
	max-height: 88vh;
	overflow: hidden;
	border: none;
	border-radius: var(--radius-hero);
	padding: 0;
	background: var(--card);
	box-shadow: 0 32px 80px -24px rgba(15, 23, 45, 0.5);
}
.amerikanu-reviews__popup::backdrop {
	background: rgba(30, 46, 90, 0.55);
}
.amerikanu-reviews__popup-sluit {
	position: absolute;
	z-index: 1;
	right: 14px;
	top: 14px;
	width: 36px;
	height: 36px;
	display: inline-grid;
	place-items: center;
	border: none;
	border-radius: var(--radius-pill);
	/* !important: zelfde Kadence-globale-button-collision als .amerikanu-excursie-popup__sluit
	   (reis.css) — Kadence se generieke button-stijl wint anders van de theme-class. */
	background: var(--beige) !important;
	color: var(--navy) !important;
	cursor: pointer;
}
/* basis.css se globale `svg { max-width:100% }` botst met deze knop se `display:inline-grid;
   place-items:center` — zelfde documenteerde Chromium-circulariteit als
   .amerikanu-dag__foto-nav svg (reis.css): zonder max-width:none klemt de svg terug naar ~0px
   breedte i.p.v. de expliciete width="16"-attribuutwaarde. */
.amerikanu-reviews__popup-sluit svg {
	width: 16px;
	height: 16px;
	max-width: none;
	flex: none;
}
.amerikanu-reviews__popup-body {
	padding: 30px 30px 28px;
	overflow-y: auto;
	max-height: 88vh;
	box-sizing: border-box;
}
.amerikanu-reviews__popup-naam {
	margin: 4px 40px 12px 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--body);
}
.amerikanu-reviews__popup-quote {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var(--navy);
}
.amerikanu-reviews__popup-fotos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.amerikanu-reviews__popup-foto {
	width: 100%;
	border-radius: var(--radius-klein);
}

@media (max-width: 899px) {
	.amerikanu-reviews__popup {
		width: 100%;
		max-width: 100%;
		max-height: 90vh;
		inset: auto 0 0 0;
		margin: 0;
		border-radius: 28px 28px 0 0;
	}
	.amerikanu-reviews__popup-body {
		max-height: 90vh;
	}
}

/* -- trust-regel --------------------------------------------------------------------------------------- */
.amerikanu-trustregel {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 600;
	color: var(--body);
}
.amerikanu-trustregel__score {
	font-weight: 700;
	color: var(--navy);
}
.amerikanu-trustregel__ster {
	color: var(--magenta);
}
.amerikanu-trustregel__scheiding {
	color: var(--rand-knop);
}
.amerikanu-trustregel__keurmerk {
	font-weight: 700;
}
/* Keurmerk-beeldmerk i.p.v. tekst (fase-4-gate-4-fix): inline-hoogte op de trustregel se eigen
   13px-tekstregel afgestemd — de logo's dragen zelf al kleur (geen kaart nodig zoals in de navy
   footer, trustregel staat altijd op een lichte achtergrond).
   PLP-fixbatch-2A punt 6 (David-feedback bij de doorloop, gecorrigeerd): een eerdere --beige-
   achtergrond-poging loste niets op — ggto.png bevat een groot half-transparant WÍT "ggto"-
   beeldmerk dat op elke lichte achtergrond (wit én beige) onleesbaar blijft ("witte letters op
   bijna-wit"). Het beeldmerk is zelf ontworpen voor het eigen merkblauw (#005DA8, gemeten uit de
   opake pixels van het icoon in ggto.png) — alleen dáárop is de "ggto"-wordmark leesbaar. ANVR/
   Calamiteitenfonds hebben dit niet nodig (geen ingebakken transparante wordmark) en blijven zonder
   achtergrond. */
.amerikanu-trustregel__keurmerk-beeld {
	display: block;
	height: 26px;
	width: auto;
	max-width: 90px;
	object-fit: contain;
}
.amerikanu-trustregel__keurmerk-beeld--ggto {
	background: #005da8;
	border-radius: 6px;
	padding: 4px 8px;
}

/* -- adviesblok (navy, PDP "EXPERT-CONTACT") ---------------------------------------------------------- */
.amerikanu-adviesblok {
	background: var(--navy);
	border-radius: var(--radius-hero);
	padding: 44px 48px;
	color: var(--bg);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 44px;
	align-items: center;
}
.amerikanu-adviesblok__eyebrow {
	color: var(--roze);
	margin-bottom: 10px;
}
.amerikanu-adviesblok__kop {
	margin: 0 0 10px;
	font-size: 30px;
	color: var(--bg);
}
.amerikanu-adviesblok__tekst {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--lichtblauw-2);
}
.amerikanu-adviesblok__trust {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--bg);
}
.amerikanu-adviesblok__trust .amerikanu-adviesblok__ster {
	color: var(--roze);
}
.amerikanu-adviesblok__cta-rij {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.amerikanu-adviesblok__mini-cta {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	border: 1.5px solid rgba(250, 250, 247, 0.3);
	padding: 12px 18px;
	border-radius: var(--radius-pill);
	transition: background var(--motion), border-color var(--motion);
}
.amerikanu-adviesblok__mini-cta:hover,
.amerikanu-adviesblok__mini-cta:focus-visible {
	background: rgba(250, 250, 247, 0.12);
	border-color: rgba(250, 250, 247, 0.6);
	color: #fff;
}
.amerikanu-adviesblok__experts {
	display: flex;
	justify-content: flex-end;
	gap: 18px;
}
.amerikanu-adviesblok__expert {
	text-align: center;
}
.amerikanu-adviesblok__expert .amerikanu-avatar {
	width: 110px;
	height: 110px;
	border-color: rgba(250, 250, 247, 0.18);
	margin: 0 auto 8px;
}
.amerikanu-adviesblok__expert-naam {
	font-size: 14px;
	font-weight: 800;
}
.amerikanu-adviesblok__expert-tagline {
	font-size: 12px;
	color: var(--lichtblauw-2);
}

@media (max-width: 899px) {
	.amerikanu-adviesblok {
		grid-template-columns: 1fr;
		padding: 32px 24px;
	}
	.amerikanu-adviesblok__experts {
		justify-content: flex-start;
	}
}

/* -- adviesstrook (roze, PLP-grid) ---------------------------------------------------------------------- */
.amerikanu-adviesstrook {
	grid-column: 1 / -1;
	background: var(--roze);
	border-radius: var(--radius-card);
	padding: 38px 44px;
	display: flex;
	align-items: center;
	gap: 32px;
}
.amerikanu-adviesstrook__kop-rij {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 0;
}
.amerikanu-adviesstrook__experts {
	display: flex;
	flex: none;
}
.amerikanu-adviesstrook__experts .amerikanu-avatar {
	width: 76px;
	height: 76px;
	border-color: var(--roze);
}
.amerikanu-adviesstrook__experts .amerikanu-avatar:not(:first-child) {
	margin-left: -16px;
}
.amerikanu-adviesstrook__kop {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--navy);
}
.amerikanu-adviesstrook__tekst {
	display: none;
	flex: 1;
	font-size: 15px;
	color: var(--body);
	line-height: 1.55;
	max-width: 760px;
	margin: 0;
}
.amerikanu-adviesstrook__cta {
	flex: none;
}

@media (min-width: 900px) {
	.amerikanu-adviesstrook:not(.amerikanu-adviesstrook--compact) .amerikanu-adviesstrook__tekst {
		display: block;
	}
}

.amerikanu-adviesstrook--compact {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 20px 16px;
	border-radius: 18px;
}
.amerikanu-adviesstrook--compact .amerikanu-adviesstrook__experts .amerikanu-avatar {
	width: 44px;
	height: 44px;
	border-width: 2px;
}
.amerikanu-adviesstrook--compact .amerikanu-adviesstrook__experts .amerikanu-avatar:not(:first-child) {
	margin-left: -12px;
}
.amerikanu-adviesstrook--compact .amerikanu-adviesstrook__kop {
	font-size: 17px;
}
.amerikanu-adviesstrook--compact .amerikanu-adviesstrook__tekst {
	display: block;
	font-size: 12.5px;
}
.amerikanu-adviesstrook--compact .amerikanu-adviesstrook__cta {
	text-align: center;
}

@media (max-width: 899px) {
	.amerikanu-adviesstrook:not(.amerikanu-adviesstrook--compact) {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 24px 20px;
	}
}

/* -- breadcrumb ------------------------------------------------------------------------------------------ */
.amerikanu-breadcrumb__lijst {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
}
.amerikanu-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.amerikanu-breadcrumb__link {
	color: inherit;
	text-decoration: none;
}
.amerikanu-breadcrumb__link:hover,
.amerikanu-breadcrumb__link:focus-visible {
	text-decoration: underline;
	color: inherit;
}
.amerikanu-breadcrumb__scheiding {
	opacity: 0.6;
}

/* Op de hero-overlay (donkere gradient-achtergrond): witte tekst i.p.v. navy-erving. */
.amerikanu-hero__breadcrumb .amerikanu-breadcrumb__lijst {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 6px rgba(30, 46, 90, 0.4);
}

/* -- capture / lead-magnet --------------------------------------------------------------------------------
   Cover = magazine-cover-mockup (gate-2-fix): staande, gekantelde kaart (rotate -3°, radius 8,
   diepe schaduw, wit vlak, foto als vulling) op een navy gradient-vlak; mid met tegengesteld
   gekantelde achterplaat. Maten per variant 1:1 uit Blog Definitief.dc.html:
   band 150×200 (r.99) · mid 132×176 + plaat (r.196-198) · afsluitend 172×228 (r.262). */
.amerikanu-capture {
	border-radius: 24px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.amerikanu-capture__visual {
	position: relative;
	background: linear-gradient(135deg, #2b3e72, var(--navy-donker));
	display: grid;
	place-items: center;
	padding: 34px;
}
.amerikanu-capture__mockup-wrap {
	position: relative;
	display: block;
}
.amerikanu-capture__mockup {
	position: relative;
	z-index: 1;
	display: block;
	width: 150px;
	height: 200px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bg);
	box-shadow: 0 26px 52px -16px rgba(0, 0, 0, 0.55);
	transform: rotate(-3deg);
}
.amerikanu-capture__cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amerikanu-capture__body {
	padding: 38px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}
.amerikanu-capture__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.amerikanu-capture__titel {
	margin: 0;
	font-size: 28px;
}
.amerikanu-capture__tekst {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	max-width: 380px;
}
.amerikanu-capture__privacy {
	margin: 0;
	font-size: 12px;
	color: var(--muted);
}
.amerikanu-capture__velden {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}
.amerikanu-capture__inputs {
	display: flex;
	gap: 10px;
	flex: 1;
	min-width: 0;
}
.amerikanu-capture__input {
	flex: 1;
	min-width: 0;
	font-family: var(--font);
	font-size: 14px;
	border-radius: var(--radius-pill);
	padding: 12px 16px;
}
.amerikanu-capture__input--voornaam {
	flex: 0.8;
}
.amerikanu-capture__submit {
	flex: none;
	font-family: var(--font);
	background: var(--magenta);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 12px 22px;
	border: none;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background var(--motion);
}
.amerikanu-capture__submit:hover,
.amerikanu-capture__submit:focus-visible {
	background: var(--magenta-hover);
}
.amerikanu-capture__melding {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
}

/* band: donker (navy), witte translucente inputs, alles op één rij. */
.amerikanu-capture--band {
	background: var(--navy);
	color: var(--bg);
}
.amerikanu-capture--band .amerikanu-capture__titel {
	color: var(--bg);
}

/* mid: één compact donker paneel (geen 50/50-grid) — mockup links, content rechts,
   inputs + knop op één rij (Blog Definitief.dc.html r.192-208). */
.amerikanu-capture--mid {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 32px 34px;
	background: linear-gradient(110deg, var(--navy-donker) 0%, #1a2750 60%, #22315e 100%);
	color: var(--bg);
	box-shadow: 0 28px 64px -30px rgba(19, 30, 61, 0.6);
}
.amerikanu-capture--mid .amerikanu-capture__visual {
	background: none;
	padding: 0;
	flex: none;
}
.amerikanu-capture--mid .amerikanu-capture__body {
	padding: 0;
	flex: 1;
	min-width: 0;
}
.amerikanu-capture--mid .amerikanu-capture__mockup {
	width: 132px;
	height: 176px;
	transform: rotate(-4deg);
}
.amerikanu-capture--mid .amerikanu-capture__mockup-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.14);
	transform: rotate(6deg);
}
.amerikanu-capture--mid .amerikanu-capture__titel {
	color: var(--bg);
	font-size: 27px;
}
.amerikanu-capture--mid .amerikanu-capture__velden {
	max-width: 480px;
}
.amerikanu-capture--band .amerikanu-capture__input,
.amerikanu-capture--mid .amerikanu-capture__input {
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
.amerikanu-capture--band .amerikanu-capture__input::placeholder,
.amerikanu-capture--mid .amerikanu-capture__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
.amerikanu-capture--band .amerikanu-capture__melding,
.amerikanu-capture--mid .amerikanu-capture__melding,
.amerikanu-capture--band .amerikanu-capture__tekst,
.amerikanu-capture--mid .amerikanu-capture__tekst {
	color: var(--lichtblauw-2);
}
/* Kicker: band = roze uppercase-regel, mid = gevulde magenta badge, afsluitend = magenta
   uppercase-regel (Blog Definitief.dc.html r.102/201/265). */
.amerikanu-capture--band .amerikanu-capture__kicker {
	color: var(--roze);
}
.amerikanu-capture--mid .amerikanu-capture__kicker {
	align-self: flex-start;
	background: var(--magenta);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
}
.amerikanu-capture--afsluitend .amerikanu-capture__kicker {
	color: var(--magenta);
}
.amerikanu-capture--afsluitend .amerikanu-capture__tekst {
	color: var(--body);
	font-size: 15px;
	line-height: 1.5;
	max-width: 360px;
}

/* afsluitend: licht (wit, radius 28), outline-inputs naast elkaar, knop vol-breed eronder. */
.amerikanu-capture--afsluitend {
	border-radius: var(--radius-hero);
	background: var(--card);
	box-shadow: 0 24px 60px -24px rgba(30, 46, 90, 0.32);
}
.amerikanu-capture--afsluitend .amerikanu-capture__visual {
	min-height: 320px;
	padding: 30px;
}
.amerikanu-capture--afsluitend .amerikanu-capture__mockup {
	width: 172px;
	height: 228px;
}
.amerikanu-capture--afsluitend .amerikanu-capture__body {
	padding: 44px 42px;
	gap: 14px;
}
.amerikanu-capture--afsluitend .amerikanu-capture__input {
	border: 1.5px solid var(--rand-input);
	color: var(--navy);
	background: var(--card);
}
.amerikanu-capture--afsluitend .amerikanu-capture__velden {
	flex-direction: column;
}
.amerikanu-capture--afsluitend .amerikanu-capture__submit {
	width: 100%;
	text-align: center;
	padding: 13px;
}
.amerikanu-capture--afsluitend .amerikanu-capture__melding {
	color: var(--muted);
}
/* Foutmelding (mislukte sync): dezelfde magenta als de knoppen, leesbaar op zowel de donkere
   (band/mid) als de lichte (afsluitend) achtergrond — overschrijft de per-variant meldingkleur
   hierboven (14-09). */
.amerikanu-capture--band .amerikanu-capture__melding--fout,
.amerikanu-capture--mid .amerikanu-capture__melding--fout,
.amerikanu-capture--afsluitend .amerikanu-capture__melding--fout {
	color: var(--magenta);
}

@media (max-width: 899px) {
	.amerikanu-capture {
		grid-template-columns: 1fr;
	}
	.amerikanu-capture--mid {
		flex-direction: column;
		align-items: flex-start;
	}
	.amerikanu-capture__velden,
	.amerikanu-capture__inputs {
		flex-direction: column;
	}
	.amerikanu-capture__submit {
		width: 100%;
	}
}

/* -- social content-gallery (SPEC-componenten.md §2) --------------------------------------------------------- */
.amerikanu-social-gallery__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}
.amerikanu-social-gallery__kopblok {
	display: flex;
	flex-direction: column;
}
.amerikanu-social-gallery__titel {
	margin-top: 2px;
}
.amerikanu-social-gallery__alles {
	flex: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	white-space: nowrap;
}
.amerikanu-social-gallery__alles:hover,
.amerikanu-social-gallery__alles:focus-visible {
	color: var(--magenta);
}
.amerikanu-social-gallery__rij {
	margin-top: 18px;
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scrollbar-width: none;
}
.amerikanu-social-gallery__rij::-webkit-scrollbar {
	display: none;
}
.amerikanu-social-gallery__kaart {
	flex: none;
	width: 224px;
	display: block;
	text-decoration: none;
	color: var(--navy);
}
.amerikanu-social-gallery__beeld-wrap {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 14px 30px -16px rgba(30, 46, 90, 0.32);
}
.amerikanu-social-gallery__beeld-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 46, 90, 0.15) 0%, rgba(30, 46, 90, 0) 40%, rgba(30, 46, 90, 0.55) 100%);
}
.amerikanu-social-gallery__beeld-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amerikanu-social-gallery__play {
	position: absolute;
	z-index: 1;
	inset: 0;
	margin: auto;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff;
}
.amerikanu-social-gallery__play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--navy);
}
.amerikanu-social-gallery__duur {
	position: absolute;
	z-index: 1;
	left: 10px;
	bottom: 10px;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.amerikanu-social-gallery__titel-tekst {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 800;
	color: var(--navy);
	text-wrap: pretty;
}
.amerikanu-social-gallery__meer {
	flex: none;
	width: 150px;
	aspect-ratio: 3 / 4;
	border-radius: 18px;
	background: var(--beige);
	border: 1.5px dashed rgba(30, 46, 90, 0.22);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--navy);
	font-size: 13px;
	font-weight: 700;
}
.amerikanu-social-gallery__meer-cirkel {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
}
.amerikanu-social-gallery__volg {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.amerikanu-social-gallery__volg-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--body);
}
.amerikanu-social-gallery__volg-knoppen {
	display: flex;
	gap: 10px;
}
.amerikanu-social-gallery__volg-knop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--motion), border-color var(--motion);
}
.amerikanu-social-gallery__volg-knop--instagram {
	background: var(--magenta);
	color: #fff;
}
.amerikanu-social-gallery__volg-knop--instagram:hover,
.amerikanu-social-gallery__volg-knop--instagram:focus-visible {
	background: var(--magenta-hover);
}
.amerikanu-social-gallery__volg-knop--tiktok {
	background: var(--card);
	color: var(--navy);
	border: 1.5px solid var(--rand-knop);
}
.amerikanu-social-gallery__volg-knop--tiktok:hover,
.amerikanu-social-gallery__volg-knop--tiktok:focus-visible {
	border-color: var(--navy);
}
.amerikanu-social-gallery__volg-knop--facebook {
	background: var(--navy);
	color: #fff;
}
.amerikanu-social-gallery__volg-knop--facebook:hover,
.amerikanu-social-gallery__volg-knop--facebook:focus-visible {
	background: var(--navy-donker);
}

@media (max-width: 899px) {
	.amerikanu-social-gallery__kaart,
	.amerikanu-social-gallery__meer {
		width: 150px;
	}
}

/* -- hero (PDP/PLP/plek-hub) ---------------------------------------------------------------------------------- */
.amerikanu-hero {
	position: relative;
	border-radius: var(--radius-hero);
	overflow: hidden;
	background: var(--navy-donker);
	color: #fff;
}
.amerikanu-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amerikanu-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 46, 90, 0.15) 0%, rgba(30, 46, 90, 0) 35%, rgba(30, 46, 90, 0.62) 100%);
}
.amerikanu-hero__content {
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 30px;
	z-index: 1;
}
.amerikanu-hero__breadcrumb {
	margin-bottom: 8px;
}
.amerikanu-hero__eyebrow {
	color: var(--roze);
	margin-bottom: 8px;
	text-shadow: 0 1px 8px rgba(30, 46, 90, 0.45);
}
.amerikanu-hero__titel {
	margin: 6px 0;
	color: #fff;
	text-shadow: 0 2px 14px rgba(30, 46, 90, 0.45);
}
/* over-ons-bouw: mobiele H1-variant (hero.php se h1_mobiel-arg) — desktop-tak default zichtbaar,
   mobiel-tak default weg; het 899px-breakpointblok hieronder draait dit om. Geen effect op de
   andere hero-aanroepers (die geven $h1_mobiel niet mee, dus deze spans bestaan daar niet). */
.amerikanu-hero__titel-mobiel {
	display: none;
}
.amerikanu-hero__subregel {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.94);
	max-width: 760px;
	text-shadow: 0 1px 10px rgba(30, 46, 90, 0.5);
}

.amerikanu-hero--pdp {
	height: 540px;
}
.amerikanu-hero--plp {
	height: 340px;
}
.amerikanu-hero--plek {
	height: 360px;
}
/* Over ons Definitief.dc.html: hoogte 340 desktop / 300 mobiel — enige frame met deze combinatie
   (over-ons-bouw, David-akkoord 27-08). */
.amerikanu-hero--over-ons {
	height: 340px;
}

@media (max-width: 899px) {
	.amerikanu-hero {
		border-radius: 20px;
	}
	.amerikanu-hero__content {
		left: 24px;
		right: 24px;
		bottom: 20px;
	}
	.amerikanu-hero--pdp {
		height: 300px;
	}
	.amerikanu-hero--plp {
		height: 210px;
	}
	.amerikanu-hero--plek {
		height: 260px;
	}
	.amerikanu-hero--over-ons {
		height: 300px;
	}
	/* over-ons-bouw: mobiel toont de korte H1-variant i.p.v. de volledige desktopzin (hero.php se
	   h1_mobiel-arg/docblock) — de sitewide h1-clamp (basis.css, ~40px op 390px) verkleint niet
	   genoeg voor een lange zin, dus zonder deze swap clipt de tekst boven uit de vaste
	   hero-hoogte. font-size zit bewust op de -mobiel-span zelf, niet op .amerikanu-hero__titel —
	   die laatste raakt anders ALLE mobiele hero-H1's sitewide (PDP/PLP/plek, kort en prima op de
	   sitewide clamp), niet alleen de pagina's die h1_mobiel meegeven. */
	.amerikanu-hero__titel-desktop {
		display: none;
	}
	.amerikanu-hero__titel-mobiel {
		display: inline;
		font-size: 27px;
	}
}

/* -- routekaart (MapLibre-container, Task 13) -------------------------------------------------------------------- */
/* Basis-maat hoort bij de component zelf (gate-2-fix): MapLibre rendert in een 0px-container
   zonder expliciete hoogte, dus de component moet zelfstandig kunnen renderen. Task 14
   (PDP-hero-toggle) mag dit contextueel overriden. */
.routekaart {
	height: clamp(320px, 45vw, 480px);
	border-radius: 16px;
	overflow: hidden;
	background: var(--beeld-placeholder);
	/* D2-fix (controleronde 2026-08-10, David: pins scrollen over de sticky navigatie heen):
	   routekaart-init.js zet op elke pin inline een z-index van 9000-min-dagnummer (zodat een lager
	   dagnummer nooit onbereikbaar achter een latere pin verdwijnt bij overlappende locaties, zie
	   routekaart-init.js pinElement()). Zonder eigen stacking-context op .routekaart concurreert die
	   9000-klasse z-index rechtstreeks in de root-stacking-context tegen de header/sticky-subnav
	   (#masthead z-index:80, .amerikanu-submenu z-index:40 — chrome.css) en zou 'm winnen; met
	   Playwright kon dit alleen daadwerkelijk gereproduceerd worden nadat de twee toevallige
	   beschermingen op de bestaande mountpoints (position:sticky op .amerikanu-dagen__kaart resp.
	   het expliciete z-index:1 op .amerikanu-reis-hero__kaart — beide creëren zelf al, min of meer
	   per ongeluk, een lokale stacking-context) tijdelijk buiten werking waren gezet — dat maakt de
	   onderliggende kwetsbaarheid reëel maar fragiel (afhankelijk van niet-gedocumenteerde
	   bijwerkingen elders, die bij een toekomstige refactor kunnen verdwijnen). `isolation: isolate`
	   sluit de hoge pin-z-indexen structureel en browser-onafhankelijk op in het lokale
	   stacking-gedrag van de kaart zelf (de pins blijven onderling wél in de bedoelde volgorde),
	   zodat de kaart als geheel altijd gewoon op z-index:auto meedoet in de paginavolgorde — geen
	   z-indexen verhoogd, geen regressie op de mega-menu/subnav-stapelvolgorde (commit b47b5407). */
	isolation: isolate;
}

/* Genummerde marker-pins (routekaart-init.js zet de class op het MapLibre-marker-element).
   Flex-centrering + padding:0 (gate-2-fix): de UA-default button-padding (1px 6px) kneep het
   content-box onder het globale border-box tot ~12px breed, waardoor het cijfer rechtsonder
   uit de cirkel viel i.p.v. gecentreerd erin.
   Variant C (dagreeks-pins, 2026-09-02): de pintekst is nu een dagreeks ("5-6", of bij een
   herbezochte locatie "1 · 11-14") i.p.v. altijd 1 cijfer — width:auto + min-width laat een
   enkel cijfer een cirkel van 28px blijven (min-width wint) terwijl een langere reeks de pin tot
   een pil rekt (border-radius:999px geeft dan het pil-effect); white-space:nowrap voorkomt dat
   de reeks afbreekt. Hoogte, rand, kleur en font ongewijzigd. */
.amerikanu-routekaart__pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	white-space: nowrap;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--navy);
	color: #fff;
	font: 700 13px/1 var(--font);
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* R4 (contactpagina-locatiekaart): solo-pin zonder dagnummer — kleinere magenta locatiestip,
   default cursor (er valt niets aan te klikken: geen dag-accordion op de contactpagina).
   min-width en padding expliciet mee-overriden (variant C): zonder die reset zou de basisklasse
   se min-width:28px de kleinere 18px altijd overstemmen (CSS neemt bij een conflict de grootste
   van width en min-width), en zou de 8px zij-padding de kale stip breder maken dan bedoeld. */
.amerikanu-routekaart__pin--solo {
	width: 18px;
	min-width: 18px;
	height: 18px;
	padding: 0;
	background: var(--magenta);
	cursor: default;
}

.amerikanu-routekaart__pin--actief {
	background: var(--magenta);
}

/* -- info-secties (fase-4 Task 16, verplaatst uit overzicht.css bij Task 17): gedeelde renderer
   (infosecties.php) tussen PLP se info_secties en plek.php se content_secties — hoort dus in het
   sitewide componenten-bundel, niet in een per-template bundel. -------------------------------------- */
.amerikanu-infosectie {
	margin-top: 56px;
	display: flex;
	align-items: center;
	gap: 48px;
}
.amerikanu-infosectie--rechts {
	flex-direction: row;
}
.amerikanu-infosectie--links {
	flex-direction: row-reverse;
}
.amerikanu-infosectie--boven {
	flex-direction: column-reverse;
	align-items: stretch;
}
.amerikanu-infosectie--tekst {
	max-width: 820px;
}
.amerikanu-infosectie__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.amerikanu-infosectie__kop {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.amerikanu-infosectie__tekst {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--body);
	text-wrap: pretty;
}
.amerikanu-infosectie--rechts .amerikanu-infosectie__beeld,
.amerikanu-infosectie--links .amerikanu-infosectie__beeld {
	flex: none;
	width: 480px;
	height: 280px;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--beeld-placeholder);
}
.amerikanu-infosectie--boven .amerikanu-infosectie__beeld {
	height: 300px;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--beeld-placeholder);
}
.amerikanu-infosectie__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Punt 22 (Beslisbord, David-akkoord 2026-08-26): lange secties — foto bovenaan uitlijnen en
   sticky laten meescrollen, zodat hij niet "zweeft" naast een veel langere tekstkolom.
   Alleen desktop: op mobiel stapelt de sectie en schoof de foto raar over de tekst heen. */
@media (min-width: 900px) {
	.amerikanu-infosectie--lang {
		align-items: flex-start;
	}
	.amerikanu-infosectie--lang .amerikanu-infosectie__beeld {
		position: sticky;
		top: 104px;
	}
}
@media (max-width: 899px) {
	.amerikanu-infosectie {
		flex-direction: column-reverse !important;
		align-items: stretch;
		gap: 12px;
		margin-top: 24px;
	}
	.amerikanu-infosectie--rechts .amerikanu-infosectie__beeld,
	.amerikanu-infosectie--links .amerikanu-infosectie__beeld,
	.amerikanu-infosectie--boven .amerikanu-infosectie__beeld {
		width: auto;
		height: 150px;
	}
}

/* -- USP-blok (fase-4 Task 16, verplaatst hierheen vanuit overzicht.css bij fase-4 Task 21 —
   usp-blok.php se eigen docblock noemt dit al expliciet een sitewide, ook-voor-de-homepage-
   bedoeld component; zelfde verplaatsingsredenering als de infosectie hierboven). __kop-rij is
   nieuw (Task 21): optionele "Meer over ons →"-link naast de kop, achterwaarts compatibel — zonder
   die link blijft de rij gewoon de kop alleen tonen, visueel identiek aan vóór Task 21. --------- */
.amerikanu-usp-blok {
	margin-top: 56px;
}
.amerikanu-usp-blok__kop-rij {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 20px;
}
.amerikanu-usp-blok__kop {
	margin: 0;
}
.amerikanu-usp-blok__alles {
	margin-left: auto;
	flex: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: underline;
	text-decoration-color: var(--magenta);
	text-underline-offset: 3px;
	white-space: nowrap;
}
.amerikanu-usp-blok__alles:hover,
.amerikanu-usp-blok__alles:focus-visible {
	color: var(--navy);
}
/* Over ons Definitief.dc.html blok 2: gedempt sublabel naast de kop ("Wat jullie van ons mogen
   verwachten") — geen "meer"-link op deze pagina, dus los van __alles hierboven. */
.amerikanu-usp-blok__sublabel {
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}
/* Over ons Definitief.dc.html blok 2: magenta icoontegel i.p.v. het sitewide navy-icoon
   (usp-blok.php se icoon_kleur-arg). */
.amerikanu-usp-blok--magenta .amerikanu-usp-blok__icoon {
	color: var(--magenta);
}
.amerikanu-usp-blok__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}
/* Gate-4-pariteitsfix (frame: Homepage Definitief.dc.html blok 6): witte kaart op een licht
   randje, kaart-eigen beige alleen op het icoon-plaatje — was omgedraaid (beige kaart, witte
   icoonplek) en had geen aparte titel-regel (icoon+tekst in 1 rij). Kolomlayout icoon -> titel
   -> tekst, zelfde radius/rand-tokens als de reiskaart/reviews-kaarten elders in dit bestand. */
.amerikanu-usp-blok__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: var(--radius-card);
	padding: 26px 24px;
}
.amerikanu-usp-blok__icoon {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--beige);
	color: var(--navy);
	flex: none;
}
.amerikanu-usp-blok__item-titel {
	margin-top: 16px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--navy);
}
.amerikanu-usp-blok__tekst {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--body);
}
@media (max-width: 899px) {
	.amerikanu-usp-blok__kop-rij {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* -- Adviesgesprek-overlay (R4, componenten.js initAdviesOverlay): de flow-pagina in een
   <dialog>-iframe boven de huidige pagina; mobiel een fullscreen takeover (David-besluit
   2026-08-17 — een zwevende modal met agenda-kiezer is op kleine schermen structureel krap). */
.amerikanu-advies-overlay {
	width: min(760px, calc(100vw - 32px));
	height: min(860px, calc(100dvh - 32px));
	max-width: none;
	max-height: none;
	padding: 0;
	border: none;
	border-radius: 16px;
	overflow: hidden;
}

.amerikanu-advies-overlay::backdrop {
	background: rgba(19, 27, 54, 0.55);
}

.amerikanu-advies-overlay__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
}

.amerikanu-advies-overlay__sluit {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 999px;
	background: rgba(19, 27, 54, 0.08);
	color: var(--navy);
	cursor: pointer;
}

.amerikanu-advies-overlay__sluit:hover,
.amerikanu-advies-overlay__sluit:focus-visible {
	background: rgba(19, 27, 54, 0.16);
}

@media (max-width: 700px) {
	.amerikanu-advies-overlay {
		width: 100vw;
		height: 100dvh;
		border-radius: 0;
	}
}

/* Reiskaart zonder vanafprijs (motorreizen e.d.): "Prijs op aanvraag" in dezelfde regel als het
   bedrag, maar zonder het prijs-accent — het is een mededeling, geen getal om op te vergelijken. */
.amerikanu-reiskaart__prijs--opaanvraag {
	font-weight: 600;
	color: var(--muted-navy);
}

/* -- Klassetabs (segmented control): PDP-accommodatiesectie én aanvraagformulier (07-09) --
   Eén component voor de hotelklasse-keuze; de PDP (hotels.php) en het formulier
   (page-reis-aanvragen.php) delen deze klassen. De `--aanvraag`-variant heeft twee regels per
   tab (naam + meerprijs). Mobiel: volle breedte met gelijke kolommen, want vier tabs naast
   elkaar liepen op 390px net over de kolom heen. */
.amerikanu-hotels__tabs {
	display: inline-flex;
	background: var(--card);
	border: 1.5px solid var(--rand-input);
	border-radius: var(--radius-pill);
	padding: 5px;
	gap: 4px;
	margin-bottom: 24px;
}
.amerikanu-hotels__tab {
	position: relative;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 700;
	color: var(--navy);
	background: none;
	border: none;
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background var(--motion), color var(--motion);
	white-space: nowrap;
}
.amerikanu-hotels__tab.is-actief {
	background: var(--navy);
	color: #fff;
}
.amerikanu-hotels__badge {
	position: absolute;
	top: -10px;
	right: -6px;
	font-size: 9px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--magenta);
	border-radius: var(--radius-pill);
	padding: 3px 8px;
	white-space: nowrap;
}
.amerikanu-hotels__tab:focus-visible {
	outline: 2px solid var(--magenta);
	outline-offset: 2px;
}
.amerikanu-hotels__tab input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.amerikanu-hotels__tabs--aanvraag .amerikanu-hotels__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 16px;
	line-height: 1.15;
}
.amerikanu-hotels__tab-naam {
	font-size: 13px;
	font-weight: 800;
}
.amerikanu-hotels__tab-meer {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--magenta);
}
.amerikanu-hotels__tab.is-actief .amerikanu-hotels__tab-meer {
	color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 600px) {
	.amerikanu-hotels__tabs {
		display: flex;
		width: 100%;
		padding: 4px;
		gap: 2px;
	}
	.amerikanu-hotels__tab {
		flex: 1 1 0;
		padding: 8px 6px;
		font-size: 12px;
		text-align: center;
	}
	.amerikanu-hotels__tabs--aanvraag .amerikanu-hotels__tab {
		padding: 7px 4px;
	}
	.amerikanu-hotels__tab-naam {
		font-size: 12px;
	}
	.amerikanu-hotels__tab-meer {
		font-size: 10.5px;
	}
	.amerikanu-hotels__tab-pp {
		display: none;
	}
	.amerikanu-hotels__badge {
		right: 50%;
		transform: translateX(50%);
	}
}

/* -- pil-toggle: gedeeld component voor een rij chips (maandfix 10-09, samengevoegd met de
   contact-chips 10-09-2). Twee gebruikers: 1) de maandknoppen boven de dagenrij op /adviesgesprek
   (.amerikanu-advies__maanden, page-adviesgesprek.php) — <button aria-pressed>, filtert alleen
   client-side, post niet mee; 2) de onderwerp-chips op /contact (.amerikanu-contact__onderwerpen,
   page-contact.php) — <label><input type="radio">, post wél mee. Dit component levert alleen de
   gedeelde vorm (wrapper + chip-look); de activatie (aria-pressed vs. input:checked) en de
   focusring op het onderliggende form-element (input:focus-visible + span, contact.css) blijven
   per gebruiker eigen CSS, want de mechaniek verschilt. */
.amerikanu-pillen {
	display: flex;
	gap: 10px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.amerikanu-pil {
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	/* Zelfde radius als de span hieronder: zonder deze regel had de <button>/<label> zelf nog de
	   scherpe hoeken van Kadence's globale knopstijl (of het label-element default), en een
	   browser-focusring om dat vierkante vlak oogde dan als een rechthoek over de ronde pil heen
	   (bevinding maandfix-check/na-desktop.png 10-09: "September" kreeg scherpe hoeken na een
	   klik). :focus-visible hieronder vervangt 'm sowieso door de eigen ring op de span, maar
	   deze regel dekt ook browsers/gevallen waar de native ring nog even doorschemert. */
	border-radius: var(--radius-pill);
}

.amerikanu-pil:focus-visible {
	outline: none;
}

.amerikanu-pil span {
	display: block;
	padding: 11px 20px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--rand-knop);
	background: var(--card);
	font-size: 14px;
	font-weight: 700;
	color: var(--body);
	cursor: pointer;
	transition: background var(--motion), color var(--motion), border-color var(--motion);
}

.amerikanu-pil[aria-pressed="true"] span {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.amerikanu-pil:focus-visible span {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
}