/* AmerikaNu — plek-hub + plek-onderwerp/info (fase-4 Task 17 §A + Task 18 §B) + de excursie-leaf
   (fase-4 Task 19). Maten 1:1 uit design/website-compleet/Info-paginas Definitief.dc.html (desktop
   1440/1240 + mobiel 390) + SPEC-info-paginas.md. Conditioneel enqueued op is_singular('plek') OF
   is_singular('excursie') (functions.php). Breakpoint 900px, consistent met reis.css/overzicht.css.
   Section-ritme (marges/kaartvorm) hergebruikt overzicht.css se patroon 1:1 waar het paste — dit
   bestand voegt alleen de plek-eigen blokken toe (hubgrid/stedenpaneel/zusterkaarten/doen-rij-meer-
   tegel/galerij/gerelateerd/direct-antwoord/zachte-link). De capture/infosecties/carrousel/social-
   gallery-componenten zelf zijn sitewide (componenten.css) — hier staat alleen de plek-eigen
   sectie-margin (`.amerikanu-plek > .amerikanu-capture` e.d.).

   Excursie-leaf (Task 19): er is geen eigen .dc.html-design-frame voor deze pagina — de brief-eis
   is "volg de plek-leaf-stijlen". `.amerikanu-excursie` is daarom hier comma-toegevoegd aan de
   `.amerikanu-plek`-wrapper-/hubgrid-/titel-selectors i.p.v. een eigen bundel of gedupliceerde
   declaratieblokken: zelfde kolombreedte, zelfde 56px/24px sectie-ritme, zelfde 3-koloms/2-koloms-
   mobiel-grid. Wat écht excursie-eigen is (beschrijving-prose, prijs-regel, "reizen-grid"-titel/
   -grid-klassenaam) staat helemaal onderaan dit bestand, in een eigen blok. */

.amerikanu-plek,
.amerikanu-excursie {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 28px 8px;
}
.amerikanu-plek > .amerikanu-hero,
.amerikanu-excursie > .amerikanu-hero {
	margin-top: 24px;
}
.amerikanu-plek .amerikanu-trustregel {
	margin-top: 14px;
}
.amerikanu-plek__intro {
	margin: 24px 0 0;
	max-width: 820px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--body);
	text-wrap: pretty;
}

/* Punt 9 (David-besluit 2026-08-26): intro met kop, zonder foto ernaast. */
.amerikanu-plek__intro-blok {
	margin-top: 28px;
}
.amerikanu-plek__intro-kop {
	margin: 0 0 10px;
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--navy);
}
.amerikanu-plek__intro-blok .amerikanu-plek__intro {
	margin-top: 0;
}

/* Punt 26 (David-akkoord 2026-08-26): "Lees meer" op lange intro's (>~700 tekens, 47/356 —
   data/reports/screenshots-leesmeer/). Progressive enhancement: de knop is standaard
   display:none — verborgen voor bezoekers/crawlers zonder JS, want de <p> zelf staat gewoon
   ongeclampt in de HTML. leesmeer.js zet .amerikanu-leesmeer--js zodra het script draait; dát
   activeert zowel de line-clamp als de knop. Zonder die klasse verandert er dus niets aan wat er
   in de DOM staat, alleen aan wat zichtbaar is — precies de eis "volledige tekst blijft in de
   HTML". Stijl: bescheiden tekstknop (geen knop-magenta/knop-outline-pill), zelfde
   navy→magenta-hover-conventie als .amerikanu-social-gallery__alles hierboven in dit bestand. */
.amerikanu-leesmeer__knop {
	display: none;
	margin-top: 6px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	cursor: pointer;
}
.amerikanu-leesmeer__knop:hover,
.amerikanu-leesmeer__knop:focus,
.amerikanu-leesmeer__knop:active {
	/* Kadence-button-hover-neutralisatie (zelfde patroon als .amerikanu-reviewpagina__filter e.a.
	   hierboven in componenten.css): zonder deze !important's zet Kadence se globale button:hover
	   een navy vlak + witte tekst achter de knop, wat van de bedoelde bescheiden tekstlink een
	   volle button maakt. */
	background: none !important;
	color: var(--magenta) !important;
}
.amerikanu-leesmeer--js .amerikanu-leesmeer__knop {
	display: inline-block;
}
.amerikanu-leesmeer--js .amerikanu-plek__intro {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}
.amerikanu-leesmeer--js.is-open .amerikanu-plek__intro {
	display: block;
	overflow: visible;
}

/* Voorstel punt 41 (Beslisbord 2026-08-25): galerij klikbaar met lightbox; "+N"-tegel opent de rest. */
.amerikanu-galerij__tegel {
	cursor: zoom-in;
}
.amerikanu-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 32px 20px;
	background: rgba(12, 18, 38, 0.92);
}
.amerikanu-lightbox[hidden] {
	display: none;
}
/* Kader om de foto: de pijltjes staan hierbinnen absoluut, dus gecentreerd op de fóto
   (David 2026-08-26) in plaats van op het scherm. */
.amerikanu-lightbox__kader {
	position: relative;
	display: flex;
}
.amerikanu-lightbox__img {
	max-width: min(1100px, 92vw);
	max-height: 78vh;
	border-radius: 10px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
.amerikanu-lightbox__teller {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	opacity: 0.85;
}
.amerikanu-lightbox__knop {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
}
.amerikanu-lightbox__knop:hover,
.amerikanu-lightbox__knop:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}
.amerikanu-lightbox__knop--vorige {
	left: 14px;
}
.amerikanu-lightbox__knop--volgende {
	right: 14px;
}
.amerikanu-lightbox__sluiten {
	position: absolute;
	top: 18px;
	right: 18px;
	transform: none;
}

/* Punt 28 (informatiepaginas-inventarisatie): YouTube-facade in de infosecties-flow — zelfde
   kolombreedte als de intro/alleen-tekst-infosectie (820px), zodat hij zich netjes voegt in de
   verticale rij tussen de andere content-secties. Ritme (56px/24px-margin) matcht
   .amerikanu-infosectie hierboven in componenten.css. */
.amerikanu-plekvideo {
	margin-top: 56px;
	max-width: 820px;
}
.amerikanu-plekvideo__facade {
	position: relative;
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	background: var(--beeld-placeholder);
	border-radius: var(--radius-card);
	overflow: hidden;
	cursor: pointer;
}
.amerikanu-plekvideo__facade:hover,
.amerikanu-plekvideo__facade:focus-visible {
	background: var(--beeld-placeholder);
}
.amerikanu-plekvideo__thumb {
	width: 100%;
	display: block;
}
.amerikanu-plekvideo__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(19, 30, 61, 0.18);
	transition: background var(--motion);
}
.amerikanu-plekvideo__play::before {
	content: "";
	position: absolute;
	width: 68px;
	height: 68px;
	border-radius: var(--radius-pill);
	background: var(--magenta);
	box-shadow: var(--schaduw-hover);
	transition: background var(--motion), transform var(--motion);
}
.amerikanu-plekvideo__play svg {
	position: relative;
	color: #fff;
	transform: translateX(2px);
}
.amerikanu-plekvideo__facade:hover .amerikanu-plekvideo__play,
.amerikanu-plekvideo__facade:focus-visible .amerikanu-plekvideo__play {
	background: rgba(19, 30, 61, 0.32);
}
.amerikanu-plekvideo__facade:hover .amerikanu-plekvideo__play::before,
.amerikanu-plekvideo__facade:focus-visible .amerikanu-plekvideo__play::before {
	background: var(--magenta-hover);
	transform: scale(1.06);
}

/* Overlay — zelfde open/sluit-vormtaal als .amerikanu-lightbox hierboven (donker scrim,
   ronde sluitknop rechtsboven), maar met een 16:9-video-frame i.p.v. een los <img>. */
.amerikanu-videolightbox {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 20px;
	background: rgba(12, 18, 38, 0.92);
}
.amerikanu-videolightbox[hidden] {
	display: none;
}
.amerikanu-videolightbox__frame {
	position: relative;
	width: min(1100px, 92vw);
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
	background: #000;
}
.amerikanu-videolightbox__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.amerikanu-videolightbox__sluiten {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
}
.amerikanu-videolightbox__sluiten:hover,
.amerikanu-videolightbox__sluiten:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

@media (max-width: 899px) {
	.amerikanu-plekvideo {
		margin-top: 24px;
	}
	.amerikanu-plekvideo__play::before {
		width: 54px;
		height: 54px;
	}
}

.amerikanu-plek > .amerikanu-hubgrid,
.amerikanu-plek > .amerikanu-stedenpaneel,
.amerikanu-plek > .amerikanu-zusterkaarten,
.amerikanu-plek > .amerikanu-social-gallery,
.amerikanu-plek > .amerikanu-carrousel,
.amerikanu-plek > .amerikanu-galerij,
.amerikanu-plek > .amerikanu-gerelateerd-plek,
.amerikanu-plek > .amerikanu-adviesblok,
.amerikanu-plek > .amerikanu-capture,
.amerikanu-plek > .amerikanu-plek-onderwerp__zachte-link,
.amerikanu-excursie > .amerikanu-galerij,
.amerikanu-excursie > .amerikanu-excursie__beschrijving,
.amerikanu-excursie > .amerikanu-excursie-reizen,
.amerikanu-excursie > .amerikanu-carrousel,
.amerikanu-excursie > .amerikanu-adviesblok {
	margin-top: 56px;
}
/* Prijs-regel: een korte vervolgregel op de beschrijving erboven, geen eigen zware sectie —
   kleinere marge dan het 56px-sectie-ritme (zelfde onderscheid als amerikanu-plek__intro,
   dat ook geen volle sectie-marge draagt). */
.amerikanu-excursie > .amerikanu-excursie__prijs {
	margin-top: 14px;
}

/* -- onderwerp-/info-variant (fase-4 Task 18) ------------------------------------------------------ */
/* Direct-antwoord-blok: magenta accentbalk + lead-tekst (SPEC-info-paginas.md §B #2, "featured-
   snippet-gevoel"). Zit direct ná de trustregel (nog vóór de eerste content-H2), dus een kleinere
   margin-top dan de 56px sectie-ritme hierboven — zelfde "kop-zone"-afstand als de trustregel zelf. */
.amerikanu-directantwoord {
	margin-top: 30px;
	max-width: 860px;
	display: flex;
	gap: 20px;
}
.amerikanu-directantwoord__balk {
	flex: none;
	width: 4px;
	border-radius: 4px;
	background: var(--magenta);
}
.amerikanu-directantwoord__tekst {
	margin: 0;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.005em;
	color: var(--navy);
	text-wrap: pretty;
}

/* Zachte reizen-link (funnel_vlag=post_booking, vervangt de reizen-carrousel — SPEC §Gedrag: géén
   sticky CTA/"boek nu" op info-pagina's, dus een gewone onderstreepte tekstlink, geen knop). */
.amerikanu-plek-onderwerp__zachte-link {
	margin-bottom: 0;
	font-size: 15px;
}
.amerikanu-plek-onderwerp__zachte-link a {
	font-weight: 700;
	color: var(--navy);
	text-decoration: underline;
	text-decoration-color: var(--magenta);
	text-underline-offset: 3px;
}
/* "Doen" direct gevolgd door "Reizen": bewust contrast (magenta/navy) + een lichte scheidslijn
   erboven, zodat de twee rijen ondanks de gedeelde carrousel-shell niet als dubbeling lezen
   (design-README-eis "divider erboven"). Gescoped op de amerikanu-carrousel--bridge-modifier
   (hub-blokken.php se bridge-carrousel-aanroep) i.p.v. de kale .amerikanu-carrousel-sibling-
   selector: die laatste raakte per ongeluk óók de Doen-rij (fase-4-Task-17-fixronde-bug — beide
   rijen zijn evengoed rechtstreekse .amerikanu-plek-children met dezelfde carrousel-shell-class,
   dus de divider verscheen zwijgend op de verkeerde rij zodra een pagina zowel Doen als Reizen
   toonde, bv. San Francisco). */
.amerikanu-plek > .amerikanu-carrousel.amerikanu-carrousel--bridge {
	border-top: 1px solid var(--rand-lijn);
	padding-top: 40px;
}

/* -- Jump-menu (pillenbalk, David-akkoord 2026-08-26, mock data/reports/screenshots-jumpmenu-
   voorstel/): alleen gerenderd op de hub-niveaus land/regio/staat/stad (hub-blokken.php se eigen
   niveau-guard), nooit op onderwerp/park/hoogtepunt. Pil-stijl 1:1 gekopieerd van de PDP-
   scrollspy-pillen (.amerikanu-sticky__navm-chip, reis.css) — eigen klassen hier, bewust niet
   gekoppeld aan reis.css (losse component, geen stylesheet-afhankelijkheid).
   position:sticky i.p.v. reis.css se display:contents-truc (.amerikanu-sticky): deze balk is een
   gewone directe kind van .amerikanu-plek zonder aparte desktop/mobiel-split, dus de normale
   doc-flow-hoogte van .amerikanu-plek geeft al genoeg scroll-"ruimte" om te blijven plakken.
   top:0 is het geval zónder navy regio-submenu (amerikanu_submenu_context() levert soms null, bv.
   de VS-landpagina zonder eenduidige regio-term — single-plek.php roept submenu.php altijd aan,
   maar dat part rendert zelf niets bij null-context); de sibling-selector hieronder (submenu.php
   rendert vóór .amerikanu-plek in de DOM) schuift de balk eronder zodra het submenu er wél is,
   zelfde 52px/56px-maat als de PDP-sticky-balk (reis.css) voor hetzelfde doel gebruikt. */
.amerikanu-plek-jumpmenu {
	position: sticky;
	top: 0;
	z-index: 39;
	margin-top: 24px;
	padding: 14px 0;
	background: var(--bg);
	border-bottom: 1px solid var(--rand-lijn);
}
.amerikanu-submenu ~ .amerikanu-plek .amerikanu-plek-jumpmenu {
	top: 52px;
}
.amerikanu-plek-jumpmenu__rij {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}
.amerikanu-plek-jumpmenu__rij::-webkit-scrollbar {
	display: none;
}
.amerikanu-plek-jumpmenu__chip {
	flex: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--navy);
	background: var(--beige);
	border: none;
	border-radius: var(--radius-pill);
	padding: 8px 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--motion), color var(--motion);
}
.amerikanu-plek-jumpmenu__chip:hover,
.amerikanu-plek-jumpmenu__chip:focus-visible {
	background: var(--beige);
	color: var(--navy);
}
.amerikanu-plek-jumpmenu__chip.is-actief {
	background: var(--magenta);
	color: #fff;
}
.amerikanu-plek-jumpmenu__chip.is-actief:hover,
.amerikanu-plek-jumpmenu__chip.is-actief:focus-visible {
	background: var(--magenta);
	color: #fff;
}
@media (max-width: 899px) {
	.amerikanu-submenu ~ .amerikanu-plek .amerikanu-plek-jumpmenu {
		top: 56px;
	}
}

/* Ankerdoelen: compenseren bij klik-navigatie de vaste elementen erboven (scrollIntoView, zie
   assets/js/plek-jumpmenu.js, respecteert scroll-margin-top vanzelf). Zónder submenu: alleen de
   jump-menu-balk zelf + wat lucht. Mét submenu (52/56px): submenu + balk + lucht — zelfde
   optelsom-precedent als reis.css se #dagen/#hotels/.../scroll-margin-top:132px.
   .amerikanu-plek__anker is een leeg <span>-ankerdoel (hub-blokken.php, "Informatie"/"Foto's" —
   zelfde patroon als single-plek.php se `<div id="faq">`) — display:block/height:0 zodat het geen
   eigen ruimte inneemt, alleen als scrollIntoView-doel dient. */
.amerikanu-hubgrid,
.amerikanu-plek__anker {
	scroll-margin-top: 88px;
}
.amerikanu-plek__anker {
	display: block;
	height: 0;
}
.amerikanu-submenu ~ .amerikanu-plek .amerikanu-hubgrid,
.amerikanu-submenu ~ .amerikanu-plek .amerikanu-plek__anker {
	scroll-margin-top: 140px;
}
@media (max-width: 899px) {
	.amerikanu-submenu ~ .amerikanu-plek .amerikanu-hubgrid,
	.amerikanu-submenu ~ .amerikanu-plek .amerikanu-plek__anker {
		scroll-margin-top: 144px;
	}
}

/* -- hub-kaart (children-grid / steden-paneel / aangrenzend / gerelateerd) ----------------------- */
/* amerikanu-excursie-reizen__titel/__grid (Task 19) hergebruiken deze twee declaratieblokken via
   comma-toevoeging — het "Maakt deel uit van deze rondreizen"-grid op de excursie-leaf is qua
   kop-typografie en 3-koloms/2-koloms-mobiel-grid identiek aan het plek-hub-grid, alleen de
   kaartinhoud (reiskaart i.p.v. hubkaart) verschilt, en die kaart stijlt zichzelf al. */
.amerikanu-hubgrid__titel,
.amerikanu-excursie-reizen__titel {
	margin: 0 0 18px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.015em;
}
/* Introzin onder elke kaartenrij-kop (David-akkoord 2026-08-26, mock data/reports/screenshots-
   jumpmenu-voorstel/) — typografie van .amerikanu-plek__intro, iets kleiner (15px i.p.v. 16px).
   Negatieve margin-top trekt de zin dichter tegen de kop aan (die zelf al 18px margin-bottom
   draagt, bedoeld voor de situatie zónder introzin); .amerikanu-hubgrid__titel + hieronder raakt
   dus alléén de koppen die ook echt een introzin krijgen. */
.amerikanu-hubgrid__titel + .amerikanu-hubgrid__intro {
	margin-top: -8px;
}
.amerikanu-hubgrid__intro {
	margin: 0 0 24px;
	max-width: 640px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--body);
	text-wrap: pretty;
}
.amerikanu-hubgrid__grid,
.amerikanu-gerelateerd-plek__grid,
.amerikanu-excursie-reizen__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.amerikanu-hubkaart {
	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-hubkaart:hover,
.amerikanu-hubkaart:focus-visible {
	box-shadow: var(--schaduw-hover);
	transform: translateY(-3px);
}
.amerikanu-hubkaart__beeld {
	display: block;
	height: 168px;
	background: var(--beeld-placeholder);
}
.amerikanu-hubkaart__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.amerikanu-hubkaart__body {
	/* Punt-34-fix (David 2026-08-24, "tekst plakt tegen het kaartje"): de body is een <span> en
	   bleef display:inline — de flex-__rij erbinnen splitst zo'n inline box, waardoor de
	   horizontale padding visueel wegviel. Block maakt de padding weer echt. */
	display: block;
	padding: 14px 18px 16px;
}
.amerikanu-hubkaart__rij {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.amerikanu-hubkaart__naam {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.amerikanu-hubkaart__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);
}
.amerikanu-hubkaart__marquee {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "Ook in …" link-rij */
.amerikanu-hubgrid__ookin {
	margin-top: 14px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
}
.amerikanu-hubgrid__ookin-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
}
.amerikanu-hubgrid__ookin-link {
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: underline;
	text-decoration-color: var(--magenta);
	text-underline-offset: 3px;
}

/* -- steden-paneel (beige pills) ------------------------------------------------------------------ */
.amerikanu-stedenpaneel {
	margin-top: 20px;
	background: var(--beige);
	border-radius: var(--radius-card);
	padding: 26px 30px;
}
.amerikanu-stedenpaneel__label {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
}
.amerikanu-stedenpaneel__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
}
.amerikanu-stedenpaneel__pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
	background: var(--card);
	border: 1px solid var(--rand-kaart);
	border-radius: var(--radius-pill);
	padding: 9px 16px;
}
.amerikanu-stedenpaneel__pill:hover,
.amerikanu-stedenpaneel__pill:focus-visible {
	border-color: var(--magenta);
}
.amerikanu-stedenpaneel__pill span {
	color: var(--muted);
}

/* Zusterkaarten "Wat je verder wilt weten" — component zelf is sitewide (PLP-fixbatch-3 punt 5,
   David-bugmelding 2026-08-07: hergebruikt op de PLP, single-overzicht.php) en staat daarom nu in
   componenten.css; hier blijft alleen de plek-eigen sectie-margin staan (zie de
   `.amerikanu-plek > .amerikanu-zusterkaarten`-regel hierboven). */

/* -- "Doen"-rij: afsluitende decoratieve tegel (geen archiefpagina om naar te linken) -------------- */
.amerikanu-doen-rij__meer {
	flex: none;
	width: 150px;
	aspect-ratio: 3 / 4;
	background: var(--beige);
	border: 2px dashed var(--rand-knop);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--navy);
}
.amerikanu-doen-rij__meer-cirkel {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-pill);
	background: var(--navy);
	color: #fff;
	font-size: 18px;
}
.amerikanu-doen-rij__meer-label {
	font-size: 12.5px;
	font-weight: 800;
	text-align: center;
}

/* -- galerij (hoogtepunt/park) ---------------------------------------------------------------------- */
.amerikanu-galerij__kop {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 16px;
}
.amerikanu-galerij__titel {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.015em;
}
.amerikanu-galerij__aantal {
	font-size: 13px;
	color: var(--muted);
}
.amerikanu-galerij__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: 200px;
	gap: 12px;
}
.amerikanu-galerij__tegel {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	/* Punt-41-voorstel: tegel is nu een <button> (lightbox) — native knopstijl neutraliseren. */
	border: 0;
	padding: 0;
	background: none;
	display: block;
	width: 100%;
	text-align: inherit;
	font: inherit;
}
.amerikanu-galerij__tegel:hover,
.amerikanu-galerij__tegel:focus-visible {
	background: none;
	color: inherit;
}
.amerikanu-galerij__tegel--groot {
	grid-row: span 2;
}
.amerikanu-galerij__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.amerikanu-galerij__meer {
	position: absolute;
	inset: 0;
	background: rgba(30, 46, 90, 0.55);
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 16px;
	font-weight: 800;
}

@media (max-width: 899px) {
	.amerikanu-plek,
	.amerikanu-excursie {
		padding: 0 14px 8px;
	}
	.amerikanu-plek > .amerikanu-hubgrid,
	.amerikanu-plek > .amerikanu-stedenpaneel,
	.amerikanu-plek > .amerikanu-zusterkaarten,
	.amerikanu-plek > .amerikanu-social-gallery,
	.amerikanu-plek > .amerikanu-carrousel,
	.amerikanu-plek > .amerikanu-galerij,
	.amerikanu-plek > .amerikanu-gerelateerd-plek,
	.amerikanu-plek > .amerikanu-adviesblok,
	.amerikanu-plek > .amerikanu-capture,
	.amerikanu-plek > .amerikanu-plek-onderwerp__zachte-link,
	.amerikanu-excursie > .amerikanu-galerij,
	.amerikanu-excursie > .amerikanu-excursie__beschrijving,
	.amerikanu-excursie > .amerikanu-excursie-reizen,
	.amerikanu-excursie > .amerikanu-carrousel,
	.amerikanu-excursie > .amerikanu-adviesblok {
		margin-top: 24px;
	}
	.amerikanu-plek > .amerikanu-carrousel.amerikanu-carrousel--bridge {
		padding-top: 20px;
	}

	.amerikanu-directantwoord {
		margin-top: 24px;
		gap: 14px;
	}
	.amerikanu-directantwoord__tekst {
		font-size: 17px;
	}

	/* Plek-kaarten 2-op-een-rij (SPEC §Mobiel), zowel het children-grid als "gerelateerd" —
	   + het excursie-reizen-grid (Task 19, zelfde grid, gedeelde selector). */
	.amerikanu-hubgrid__grid,
	.amerikanu-gerelateerd-plek__grid,
	.amerikanu-excursie-reizen__grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.amerikanu-hubkaart__beeld {
		height: 90px;
	}
	.amerikanu-hubkaart__body {
		padding: 10px 12px 12px;
	}
	.amerikanu-hubkaart__naam {
		font-size: 15px;
	}
	.amerikanu-hubkaart__marquee {
		font-size: 11px;
	}
	.amerikanu-hubkaart__pijl {
		width: 26px;
		height: 26px;
	}

	.amerikanu-galerij__grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 130px;
	}
}

/* -- excursie-leaf-eigen (fase-4 Task 19): het enige echt nieuwe hier — de rest van de pagina
   hergebruikt bovenstaande plek-leaf-declaraties via comma-toevoeging (zie de docblock bovenaan). */
.amerikanu-excursie__beschrijving {
	max-width: 820px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--body);
}
.amerikanu-excursie__beschrijving p {
	text-wrap: pretty;
}
.amerikanu-excursie__beschrijving p + p {
	margin-top: 14px;
}
.amerikanu-excursie__prijs {
	max-width: 820px;
	font-size: 16px;
	color: var(--body);
}
.amerikanu-excursie__prijs strong {
	color: var(--navy);
	font-weight: 800;
}