/* Design direction A "Prijsbord" (owner decision 2026-09-28): location pages, hubs and the homepage.
   Scoped to body.pk-prijsbord (inc/prijsbord.php). One web font, Inter, self-hosted (assets/fonts/README.md). Mobile first.
   Owner's changes to the prototype: yellow only for the one highlighted price; "volgens openbare bronnen"
   is a neutral grey outline tag; the city hub's four cards are a compact 2×2 grid on phones; a price of 0
   reads "Gratis" / "2 uur gratis"; in "Goedkoper of dichterbij?" this location is bold, without a link.
   Borrowed: B's summary line and intro sentence, C's filter chips.
   Polish release 0.4.37 (Jurre, 2026-11-14, design/polish-2026-11/ in the data repo): Inter in two weights (400 and
   600), seven sizes (13, 15, 17, 19, 23, 30 and 38 px), body text 17 px, a quieter grey.
   Contrast (WCAG AA, checked): ink #111 on white 18.9:1; muted #5b6168 on white 6.3:1, on #f2f4f7 5.7:1 and on the
   lightest card tint #e4f1f6 5.5:1; links #0b3d91 on white 10.0:1; ink on yellow #ffd400 13.2:1; white on blue 10.0:1;
   white on the city band #0b3a82 10.6:1; green #1b6b2f 6.6:1; grey tag border #767676 (4.5:1, above the 3:1 needed for a
   non-text outline). */

/* Inter 4.1, Latin subset, 400 and 600 (Jurre, 2026-11-14); both preloaded on these pages (inc/prijsbord.php). Swap: the
   text shows at once in the fallback and takes Inter when it arrives. */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

.pk-prijsbord {
	--pb-ink: #111111;
	--pb-muted: #5b6168;
	--pb-blue: #0b3d91;
	--pb-blue-dark: #082d6b;
	--pb-line: #d9d9d9;
	--pb-outline: #767676;
	--pb-yellow: #ffd400;
	--pb-soft: #f2f4f7;
	--pb-green: #1b6b2f;
	--pb-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	/* the older components (design.css, site.css) on these pages read the theme's font tokens: the same one font */
	--pk-font-sans: var(--pb-font);
	--pk-font-serif: var(--pb-font);
	margin: 0;
	font: 17px/1.5 var(--pb-font);
	color: var(--pb-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
/* Headings too: the theme's global heading font (IBM Plex Serif) is not loaded on these pages. */
.pk-prijsbord h1, .pk-prijsbord h2, .pk-prijsbord h3, .pk-prijsbord h4, .pk-prijsbord .wp-block-heading { font-family: var(--pb-font); }
.pk-prijsbord :where(button, input, select, textarea) { font-family: inherit; }
/* Two weights only (polish 2026-11-14): whatever the browser would make bold is 600 (no specificity, so any rule wins);
   a heading without a weight of its own is 400, as the prototype Jurre chose shows them (the theme's global heading
   weight, 500 in theme.json, is for the older block pages and has no Inter file) */
:where(.pk-prijsbord) :where(strong, b, th, dt) { font-weight: 600; }
.pk-prijsbord :where(h1, h2, h3, h4, h5, h6) { font-weight: 400; }
.pk-prijsbord :where(h1, h2, h3) { letter-spacing: -0.012em; }
.pk-prijsbord a { color: var(--pb-blue); text-underline-offset: 2px; }
.pk-prijsbord a:hover { color: var(--pb-blue-dark); }
.pk-prijsbord :focus-visible { outline: 3px solid var(--pb-yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--pb-ink); }
.pk-prijsbord .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pk-prijsbord .num, .pk-prijsbord .pb-board dd, .pk-prijsbord .pb-rank-price, .pk-prijsbord .pb-card-value, .pk-prijsbord .pb-amount,
.pk-prijsbord .pb-price-main, .pk-prijsbord .pb-card2-value, .pk-prijsbord .pb-hl-text, .pk-prijsbord td { font-variant-numeric: tabular-nums; }

/* ---------- Header: blue bar, white wordmark with the "P" sign ---------- */
.pk-prijsbord .wp-site-blocks > header.wp-block-template-part { background: var(--pb-blue); color: #fff; }
.pk-prijsbord .pk-site-header.pk-shell { width: auto; max-width: 1240px; margin: 0 auto; padding: 0 16px; min-height: 56px; display: flex; align-items: center; gap: 12px; }
.pk-prijsbord .pk-site-header .pk-brand { font: 600 19px/1 var(--pb-font); margin: 0; }
.pk-prijsbord .pk-site-header .pk-brand a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; border: 0; padding: 0; text-decoration: none; }
.pk-prijsbord .pk-site-header .pk-brand a::before { content: "P"; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; background: #fff; color: var(--pb-blue); font-size: 19px; }
.pk-prijsbord .pk-site-header .wp-block-navigation { color: #fff; font: 600 15px/1.3 var(--pb-font); }
.pk-prijsbord .pk-site-header .wp-block-navigation a,
.pk-prijsbord .pk-site-header .wp-block-navigation button { color: inherit; }
.pk-prijsbord .pk-site-header .wp-block-navigation__responsive-container-open { min-width: 44px; min-height: 44px; justify-content: center; }
.pk-prijsbord .pk-site-header .wp-block-navigation__submenu-container,
.pk-prijsbord .pk-site-header .wp-block-navigation__responsive-container.is-menu-open { color: var(--pb-ink); background: #fff; }
.pk-prijsbord .pk-site-header :focus-visible { outline-color: var(--pb-yellow); box-shadow: none; }

/* ---------- Footer: quiet ---------- */
.pk-prijsbord .wp-site-blocks > footer.wp-block-template-part { margin-top: 40px; background: var(--pb-soft); border-top: 1px solid var(--pb-line); }
.pk-prijsbord .pk-site-footer.pk-shell { width: auto; max-width: 1240px; margin: 0 auto; padding: 28px 16px 40px; border-top: 0; }
.pk-prijsbord .pk-site-footer, .pk-prijsbord .pk-site-footer h2, .pk-prijsbord .pk-site-footer p { font-family: var(--pb-font); }
.pk-prijsbord .pk-site-footer .pk-brand { font: 600 19px/1.2 var(--pb-font); }
.pk-prijsbord .pk-site-footer .pk-brand a { border: 0; padding: 0; color: var(--pb-blue); }
.pk-prijsbord .pk-site-footer p:not(.pk-brand) { color: var(--pb-muted); }

/* ---------- Page shell and type ---------- */
.pb-main { display: block; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.pb-crumbs { font-size: 15px; color: var(--pb-muted); margin: 14px 0 4px; display: flex; flex-wrap: wrap; gap: 0 6px; }
/* touch targets (city-release-22, Lighthouse target-size): every breadcrumb link at least 24 px high */
.pb-crumbs a { color: var(--pb-muted); display: inline-flex; align-items: center; min-height: 24px; }
.pb-head h1 { font-size: 30px; line-height: 1.15; margin: 4px 0 6px; letter-spacing: -.01em; font-weight: 600; }
.pb-kicker { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--pb-muted); }
.pb-address { margin: 0; color: var(--pb-muted); }
.pb-lead { margin: 0 0 16px; color: var(--pb-muted); max-width: 70ch; }
.pb-head .pb-lead { color: var(--pb-ink); }
.pb-summary-line { margin: 4px 0 16px; color: var(--pb-muted); }
.pb-status { color: var(--pb-green); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.pb-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.pb-status--closed { color: var(--pb-muted); }
.pb-notice { margin: 12px 0; padding: 10px 14px; border-left: 4px solid var(--pb-ink); background: var(--pb-soft); }
.pb-section { padding: 22px 0; border-top: 1px solid var(--pb-line); }
.pb-section h2 { font-size: 19px; line-height: 1.25; margin: 0 0 12px; }
.pb-h3 { font-size: 17px; margin: 20px 0 8px; }
.pb-meta { display: block; font-size: 13px; color: var(--pb-muted); font-weight: 400; }
.pb-source-line { font-size: 15px; color: var(--pb-muted); margin: 10px 0 0; }
.pb-editorial { margin: 16px 0; max-width: 70ch; }

/* The grey outline tag: "volgens openbare bronnen", "Tijdelijk gesloten". */
.pb-tag { display: inline-block; margin-top: 2px; padding: 0 6px; border: 1px solid var(--pb-outline); border-radius: 4px; font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--pb-muted); background: #fff; white-space: nowrap; }

/* ---------- Price board (location pages) ---------- */
.pb-board { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 12px; background: var(--pb-line); border: 1px solid var(--pb-line); border-radius: 8px; overflow: hidden; }
.pb-board > div { background: #fff; padding: 12px 14px; min-width: 0; }
.pb-board--single { grid-template-columns: 1fr; }
.pb-board > div:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
/* tile labels in sentence case, as on the hub cards (round 2, 2026-10-04), in the regular weight (polish 2026-11-14) */
.pk-prijsbord .pb-board dt { font-size: 15px; font-weight: 400; color: var(--pb-ink); }
.pb-board dd { margin: 2px 0 0; font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }
.pb-board .pb-detail { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; line-height: 1.35; color: var(--pb-muted); }
.pb-board .pb-hl { background: var(--pb-yellow); }
.pb-board .pb-hl dt, .pb-board .pb-hl .pb-detail { color: var(--pb-ink); }
.pb-checked { font-size: 15px; color: var(--pb-muted); margin: 8px 0 0; }
.pb-checked:not(.pb-checked--public)::before { content: "✓ "; color: var(--pb-green); font-weight: 600; }
.pb-operator-link { margin: 10px 0 0; font-weight: 600; }
.pb-operator-link a::after { content: " \2197"; }
.pb-entrances { margin: 10px 0 0; font-size: 15px; }
.pb-entrances p { margin: 0; }
.pb-entrances-label { font-weight: 600; }
.pb-entrances ul { list-style: none; margin: 4px 0 0; padding: 0; }
.pb-entrances li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; border-top: 1px solid var(--pb-line); }
.pb-entrances li:last-child { border-bottom: 1px solid var(--pb-line); }
.pb-entrances li a { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.pb-meta-inline { font-size: 13px; color: var(--pb-muted); }

/* The route block under the prices (Jurre, 2026-11-14, polish release 0.4.37): the address with a pin, then "Navigeer
   naar de ingang" (filled) and "Bekijk de ingang" (outline, Street View), side by side where they fit. It replaces the
   navigate button in the right-hand column, the one after the prices on phones and the address line with the Street
   View link in "goed om te weten". */
.pb-route { margin: 12px 0 4px; padding: 14px 16px 16px; border: 1px solid var(--pb-line); border-radius: 8px; }
.pb-route-address { display: flex; gap: 10px; margin: 0 0 12px; line-height: 1.4; }
.pb-route-address:last-child { margin-bottom: 0; }
.pb-route-address svg { flex: none; margin-top: 2px; color: var(--pb-blue); }
.pb-route-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-route-btns > a { flex: 1 1 220px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 8px 16px; border-radius: 8px; font-size: 17px; font-weight: 600; text-align: center; text-decoration: none; }
.pb-navbtn { background: var(--pb-blue); color: #fff !important; }
.pb-navbtn:hover { background: var(--pb-blue-dark); }
.pk-prijsbord .pb-svbtn { border: 1.5px solid var(--pb-blue); background: #fff; color: var(--pb-blue); }
.pk-prijsbord .pb-svbtn:hover { background: #eef3fb; }

/* Reserved slots: invisible to visitors while empty, dashed placeholder for editors. */
.pk-prijsbord .pd-slot:empty { display: none; }
.pk-prijsbord .pd-slot--booking { margin: 16px 0 0; }
.pk-prijsbord .pd-slot-placeholder { margin: 0; padding: 12px; border: 2px dashed var(--pb-line); color: var(--pb-muted); font-size: 15px; }

/* ---------- Ranked lists: "Goedkoper of dichterbij?", hub list, homepage ---------- */
.pb-rank { list-style: none; margin: 0; padding: 0; }
.pb-rank > li { display: grid; grid-template-columns: minmax(min(8em, 35%), 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--pb-line); }
/* the name column keeps at least 8em (2026-11-03, release 0.4.28: see "List prices in two lines" below) */
.pb-rank > li[hidden] { display: none; }
.pb-rank-name { min-width: 0; }
.pb-rank-name strong, .pb-rank-plain { font-weight: 600; display: inline; }
.pb-rank-name a { font-weight: 600; display: inline-flex; min-height: 32px; align-items: center; }
/* A link inside a line of text (e.g. "Open alternatief: <link>, 102 m verderop.") flows with the sentence. */
.pb-rank-name .pb-meta a { display: inline; min-height: 0; font-weight: 600; }
.pb-rank-self .pb-rank-name strong { font-weight: 600; }
/* names as quiet links in the lists (polish 2026-11-14): underlined on hover only; a link inside a line of text keeps its
   underline */
.pb-rank-name > a, .pb-gv-list li > a { text-decoration: none; }
.pb-rank-name > a:hover, .pb-gv-list li > a:hover { text-decoration: underline; }
.pb-rank-price strong { display: block; font-size: 19px; line-height: 1.2; font-weight: 600; }
.pb-rank-price > span:not(.pb-tag) { display: block; max-width: 16ch; margin-left: auto; font-size: 13px; line-height: 1.35; color: var(--pb-muted); }
.pb-pin { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--pb-blue); color: #fff; font-size: 13px; font-weight: 600; vertical-align: 1px; }
.pb-more-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; }
.pb-more-links a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.pb-empty { margin: 12px 0; padding: 12px; border: 1px solid var(--pb-line); border-radius: 8px; }

/* Plain lists (destinations) */
.pb-list { list-style: none; margin: 0; padding: 0; }
.pb-list li { padding: 8px 0; border-bottom: 1px solid var(--pb-line); }
.pb-list li > span:first-child { font-weight: 600; }
.pb-more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--pb-blue); font-weight: 600; }

/* ---------- Tables ---------- */
.pb-table { width: 100%; border-collapse: collapse; }
.pb-table caption { text-align: left; font-weight: 600; padding: 0 0 6px; }
.pb-table th, .pb-table td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--pb-line); text-align: left; vertical-align: top; }
.pb-table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--pb-muted); font-weight: 600; }
.pb-table .pb-amount { text-align: right; font-weight: 600; padding-right: 0; }
.pb-tariffs { display: grid; gap: 16px; }
/* Owner, 2026-10-21: "Geen P+R-ticket met OV" instead of the Met OV table */
.pb-tariff-line { margin: 12px 0 0; font-weight: 600; }
.pb-table-wrap { overflow-x: auto; }
.pb-note { margin: 8px 0 0; font-size: 15px; color: var(--pb-muted); }
.pb-cell-note { display: block; font-size: 13px; font-weight: 400; color: var(--pb-muted); }

/* ---------- Key facts ---------- */
.pb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.pb-facts > div { min-width: 0; }
.pb-facts dt { font-size: 13px; color: var(--pb-muted); }
.pb-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Maps (site.js [data-pk-map]) ---------- */
.pk-prijsbord .pd-map, .pk-prijsbord .pb-map { position: relative; margin: 8px 0 0; }
/* the empty map is a quiet box with one button in the middle, "Toon de kaart" on a location page (polish 2026-11-14: the
   captions above the button went; the tiles' credit is Leaflet's, on the loaded map) */
.pk-prijsbord .pk-map-inactive { border: 1px solid var(--pb-line); border-radius: 8px; background: var(--pb-soft); padding: 16px; min-height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.pk-prijsbord .pk-map-canvas { height: 280px; border-radius: 8px; isolation: isolate; }
.pk-prijsbord .pk-map-inactive:has(+ .pk-map-canvas:not([hidden])) { min-height: 0; position: absolute; z-index: 450; left: 12px; right: 12px; bottom: 36px; background: #fff; }
.pk-prijsbord .pk-map-status { margin: 6px 0 0; font-size: 15px; color: var(--pb-muted); }
.pk-prijsbord .pk-map-status:empty { display: none; }
.pb-btn-secondary { min-height: 44px; padding: 0 16px; border: 2px solid var(--pb-blue); border-radius: 8px; background: #fff; color: var(--pb-blue); font: 600 17px var(--pb-font); cursor: pointer; }

/* ---------- City hub cards: compact 2×2 on phones ---------- */
.pb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.pb-card { border: 1px solid var(--pb-line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.pb-card h2 { margin: 0; font-size: 13px; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; color: var(--pb-muted); font-weight: 600; }
.pb-card-value { margin: 2px 0; font-size: 23px; line-height: 1.15; font-weight: 600; }
.pb-card-value small { font-size: 13px; font-weight: 400; color: var(--pb-muted); }
.pb-hl-text { background: var(--pb-yellow); color: var(--pb-ink); padding: 0 4px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* A highlighted amount that wraps ("€ 4,00 tot € 8,00" in a narrow card): room between the lines, so the second
   line's highlight does not cover the comma above it. */
.pb-card-value:has(.pb-hl-text) { line-height: 1.4; }
.pb-card-links { margin: 0; font-size: 13px; line-height: 1.4; }
.pb-card-links a { font-weight: 600; }
.pb-card-tag { margin: 4px 0 0; }
/* One or two tiles (destination pages): they share the full width, on phones and desktop alike. */
.pb-cards.pb-cards--few { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pb-card .pb-meta { margin: 2px 0 0; }

/* ---------- Filter chips (from direction C) ---------- */
.pb-chips { margin: 0 0 8px; }
.pb-chips > div[role="group"], .pb-chips .pk-hub-sort { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.pb-chips > div[hidden], .pb-chips .pk-hub-sort[hidden], .pb-chips[hidden] { display: none; }
.pb-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--pb-outline); border-radius: 22px; background: #fff; color: var(--pb-ink); font: 600 15px var(--pb-font); cursor: pointer; }
.pb-chip[aria-pressed="true"] { background: var(--pb-blue); border-color: var(--pb-blue); color: #fff; }
.pb-chip[aria-pressed="true"]::before { content: "✓ "; }
/* Phones: one row that scrolls sideways, so the list starts sooner. */
@media (max-width: 759px) {
	.pb-chips > div[role="group"], .pb-chips .pk-hub-sort { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 8px; padding: 2px 16px 4px; scrollbar-width: none; }
	.pb-chip { flex: none; }
}
/* With scripts on (html.pb-js, set in <head>) the chips and their status line hold their space from the
   first paint; the scripts then only make them work. Without scripts they stay hidden. */
.pb-js .pb-chips[hidden] { display: block !important; }
.pb-js .pb-chips > div[role="group"][hidden], .pb-js .pb-chips .pk-hub-sort[hidden] { display: flex !important; }
.pb-js .pb-chip-status:empty { display: block; min-height: 21px; }
.pb-chip-status { margin: 0 0 4px; font-size: 15px; color: var(--pb-muted); }
.pb-chip-status:empty { display: none; }

/* ---------- Type hub tables: labelled cards on phones ---------- */
.pb-hub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pb-hub-table, .pb-hub-table tbody, .pb-hub-table tr { display: block; }
.pb-hub-table tbody tr { border: 1px solid var(--pb-line); border-radius: 8px; padding: 10px 14px; margin: 0 0 10px; }
.pb-hub-table tbody tr[hidden] { display: none; }
.pb-hub-table tbody th { display: block; padding: 0 0 4px; border: 0; font-size: 17px; }
.pb-hub-table tbody th a { font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
/* label/value cells on phones: the label keeps its own width and is never squeezed (mobile polish round 5, 2026-10-05) */
.pb-hub-table td { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; padding: 6px 0; border-bottom: 0; border-top: 1px solid var(--pb-line); text-align: right; font-weight: 600; }
.pb-hub-table td::before { content: attr(data-label); text-align: left; color: var(--pb-muted); font-size: 15px; font-weight: 400; }
.pb-hub-table td .pb-cell-note, .pb-hub-table td .pb-tag { grid-column: 2; justify-self: end; }
/* a weekday/weekend pair (2026-10-24): the second price on its own line, in the value column on phones */
.pb-cell-second { display: block; margin-top: 4px; }
.pb-hub-table td .pb-cell-second { grid-column: 2; justify-self: end; }
.pb-closed { background: var(--pb-soft); }

/* ---------- Homepage ---------- */
.pb-home-head { padding: 12px 0 8px; }
.pb-city-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pb-city { display: block; padding: 14px 16px; border: 2px solid var(--pb-blue); border-radius: 8px; text-decoration: none; }
.pb-city-name { display: block; font-size: 23px; font-weight: 600; color: var(--pb-blue); }
.pb-city-name::after { content: " →"; }
.pb-city .pb-meta { font-size: 15px; }
.pb-city-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pb-city-facts span { padding: 2px 8px; border-radius: 4px; background: var(--pb-soft); color: var(--pb-ink); font-size: 15px; font-weight: 600; }
.pb-how-grid { display: grid; gap: 4px 24px; }
.pb-how-grid p { margin: 0 0 8px; color: var(--pb-muted); }

/* ---------- Page copy from WordPress (intro, "Goed om te weten", guide, FAQ) ---------- */
.pb-copy p, .pb-prose p, .pb-faq-answer p { margin: 0 0 10px; max-width: 70ch; }
.pb-copy p:last-child, .pb-prose p:last-child, .pb-faq-answer p:last-child { margin-bottom: 0; }
.pb-copy--intro { margin: 14px 0 0; }
.pb-hub .pb-copy--intro { margin: 8px 0 18px; }
.pb-location .pb-copy--intro { font-size: 17px; }
.pb-copy ul, .pb-prose ul, .pb-faq-answer ul { margin: 0 0 10px; padding-left: 20px; }
/* Placeholder text: a dashed outline and a label, so it can never pass for real copy. */
.pb-copy--placeholder { outline: 2px dashed var(--pb-outline); outline-offset: 6px; }
.pb-copy--intro.pb-copy--placeholder, .pb-guide.pb-copy--placeholder { margin-top: 18px; }
.pb-placeholder-label { display: inline-block; margin: 0 0 8px !important; padding: 0 8px; border: 1px solid var(--pb-outline); border-radius: 4px; background: var(--pb-soft); color: var(--pb-muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pb-faq-item { border-bottom: 1px solid var(--pb-line); }
.pb-faq-item:first-of-type { border-top: 1px solid var(--pb-line); }
.pb-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 0; cursor: pointer; list-style: none; }
.pb-faq-item summary::-webkit-details-marker { display: none; }
.pb-faq-item summary::after { content: "+"; flex: none; font-size: 23px; font-weight: 600; color: var(--pb-blue); }
.pb-faq-item[open] summary::after { content: "−"; }
.pb-faq-item summary h3 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 600; }
.pb-faq-answer { padding: 0 0 14px; color: var(--pb-ink); }
.pb-toc { margin: 8px 0 0; padding: 14px 16px; background: var(--pb-soft); border-radius: 8px; }
.pb-toc-title { margin: 0 0 6px; font-weight: 600; }
.pb-toc ol { margin: 0; padding-left: 20px; }
.pb-toc li { margin: 2px 0; }
.pb-toc a { display: inline-flex; min-height: 32px; align-items: center; font-weight: 600; }
.pb-guide-section h2 { scroll-margin-top: 16px; }
.pb-prose { max-width: 70ch; }

/* ---------- Desktop ---------- */
@media (min-width: 760px) {
	.pb-head h1 { font-size: 38px; }
	.pb-location-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
	.pb-location-aside { position: sticky; top: 16px; padding-top: 12px; }
	.pb-location-aside .pb-section { border-top: 0; padding-top: 16px; }
	.pk-prijsbord .pk-map-canvas { height: 360px; }
	.pb-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
	.pb-card { padding: 14px; }
	.pb-card h2 { font-size: 13px; }
	.pb-card-value { font-size: 30px; margin: 4px 0 6px; }
	.pb-card-links { font-size: 15px; }
	.pb-tariffs--split { grid-template-columns: 1fr 1fr; gap: 24px; }
	.pb-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pb-hub--city .pb-rank { columns: 2; column-gap: 40px; }
	.pb-hub--city .pb-rank > li { break-inside: avoid; }
	.pb-how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pb-city-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
	.pb-hub-table { display: table; }
	.pb-hub-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
	.pb-hub-table tbody { display: table-row-group; }
	.pb-hub-table tr { display: table-row; }
	.pb-hub-table tbody tr { border: 0; border-radius: 0; padding: 0; margin: 0; }
	/* the table fits its screen (2026-11-03, release 0.4.28: the P+R tables of Amsterdam, Den Bosch, Rotterdam and Utrecht
	   ran up to 349 px past a 768 px screen with every cell on one line): a value stays on one line, its notes and the
	   station wrap, the name keeps at least 8em */
	.pb-hub-table tbody th { display: table-cell; min-width: 8em; font-size: inherit; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--pb-line); }
	.pb-hub-table td { display: table-cell; border-top: 0; border-bottom: 1px solid var(--pb-line); padding: 8px 12px 8px 0; white-space: nowrap; }
	.pb-hub-table td .pb-cell-note, .pb-hub-table td.pb-td-stack { white-space: normal; }
	.pb-hub-table td::before { content: none; }
	.pb-hub-table thead th:not(:first-child) { text-align: right; }
}

@media print {
	.pb-route-btns, .pd-map, .pb-map, .pd-slot, .pb-chips, .pb-more-btn { display: none; }
	.pk-prijsbord .wp-site-blocks > header.wp-block-template-part { background: none; color: var(--pb-ink); }
}

/* ---------- Free parking page: zones per wijk ---------- */
.pb-zone-groups { border-top: 1px solid var(--pb-line); }
.pb-zone-group { border-bottom: 1px solid var(--pb-line); }
.pb-zone-group summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; font-weight: 600; list-style: none; }
.pb-zone-group summary::-webkit-details-marker { display: none; }
.pb-zone-group summary::after { content: "+"; font-size: 19px; color: var(--pb-blue); }
.pb-zone-group[open] summary::after { content: "−"; }
.pb-zone-group summary .pb-meta-inline { margin-left: auto; font-weight: 400; }
.pb-zone-group ul { list-style: none; margin: 0 0 12px; padding: 0; }
.pb-zone-group li { padding: 6px 0; border-top: 1px solid var(--pb-soft); }

/* ---------- City hub v2 (owner, 2026-10-03) ---------- */
/* Hero band: a city photo behind the H1 and intro (only with an image in city-heroes.json), full width, with a dark
   overlay so white text stays readable (at least 4.5:1 on the darkest part under the text); credit bottom right. */
.wp-site-blocks:has(.pb-head--hero) { overflow-x: clip; }
.pb-head--hero { position: relative; isolation: isolate; margin: 0 calc(50% - 50vw) 16px; padding: 56px max(16px, calc(50vw - 604px)) 36px; min-height: 240px; display: flex; align-items: flex-end; color: #fff; }
.pb-hero-art { position: absolute; inset: 0; z-index: -1; background: #1d2a3a; }
.pb-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pb-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 16, 30, .86) 0, rgba(8, 16, 30, .62) 55%, rgba(8, 16, 30, .3) 100%); }
.pb-head-text { position: relative; max-width: 760px; }
.pb-head--hero h1 { color: #fff; margin-top: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.pb-head--hero .pb-lead, .pb-head--hero .pb-copy--intro { margin-bottom: 0; color: #fff; }
.pk-prijsbord .pb-head--hero a { color: #fff; }
.pb-head--hero .pb-copy--placeholder { outline-color: rgba(255, 255, 255, .7); }
.pb-hero-credit { position: absolute; right: 8px; bottom: 4px; margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.pk-prijsbord .pb-hero-credit a { color: inherit; }
/* Polish release 0.4.37 (Jurre, 2026-11-14): the head starts right under the site header (no top margin above), the
   breadcrumb follows it (single-parkeerhub.php, hub-types/free.php); a city without a chosen photo shows its head on the
   blue band instead of the stretched map (pk_pb_city_hero()). */
.pb-hub-top > .pb-crumbs, .pb-head--hero + .pb-crumbs { margin: 10px 0 14px; }
.pb-head--hero.pb-head--band { min-height: 0; padding-top: 40px; padding-bottom: 32px; background: #0b3a82; }
.pb-head--band h1 { text-shadow: none; }

/* Summary cards (merged 2026-11-14 from four blocks; polish release 0.4.37): the icon left of the headline, on its first
   line (floated, so a second headline line uses the full width); one headline size, the amount on its own line, one
   detail size for "bij ..." and the names; one tint per card type; the whole card is the link. Phones: the cards
   stacked (Jurre, 2026-11-14); wider screens: as many in a row as fit. */
.pb-cards--city { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.pk-prijsbord a.pb-card2 { display: block; min-width: 0; padding: 14px 16px; border: 1px solid transparent; border-radius: 10px; background: var(--card-tint); color: var(--pb-ink); text-decoration: none; }
.pk-prijsbord a.pb-card2:hover { border-color: var(--card-accent); box-shadow: 0 2px 8px rgba(11, 30, 70, .12); color: var(--pb-ink); }
.pb-card2--gratis { --card-tint: #e8f5ec; --card-accent: #1b6b2f; }
.pb-card2--eerst-gratis { --card-tint: #e4f1f6; --card-accent: #0b5a7a; }
.pb-card2--pr-met-ov { --card-tint: #f0ebf9; --card-accent: #4b2f8f; }
.pb-card2--goedkoopste-garage { --card-tint: #e9eff9; --card-accent: var(--pb-blue); }
.pb-card2-icon { float: left; display: flex; margin: 0 0 2px; color: var(--card-accent); }
.pb-card2-icon svg { width: 22px; height: 22px; margin-right: 6px; }
.pb-card2-value { display: block; font-size: 17px; line-height: 1.3; font-weight: 600; overflow-wrap: normal; word-break: normal; }
.pb-card2-value small { font-size: 13px; font-weight: 400; color: var(--pb-muted); }
.pb-card2-amount { display: block; margin-top: 4px; font-size: 23px; white-space: nowrap; }
.pb-public-mark { margin-left: 2px; font-size: .7em; font-weight: 600; vertical-align: top; line-height: 1; }
.pk-prijsbord a.pb-card2 .pb-card2-label, .pb-card2-names { display: block; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--pb-muted); }
.pb-card2-label { clear: left; margin-top: 2px; }
.pb-public-footnote { margin: 4px 0 8px; font-size: 13px; color: var(--pb-muted); }

/* Map: compact, between the cards and the list (phones, tablets); beside the list and sticky (desktop). */
.pb-hub-map { margin: 8px 0 0; }
.pb-hub-map .pb-map { margin: 0; }
/* The placeholder and the map take exactly the same box, and the status line is for screen readers only (the note
   below the map says the same), so nothing moves when the map appears. */
.pb-hub-map .pk-map-canvas { height: 240px; }
.pb-hub-map .pk-map-inactive { box-sizing: border-box; height: 240px; min-height: 0; }
.pk-prijsbord .pb-hub-map .pk-map-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pb-hub-map .pb-map-note { margin: 6px 0 0; font-size: 13px; }
.pk-pin.is-hl { z-index: 10000 !important; }
/* the highlighted marker (map highlight component, 2026-10-09): yellow, larger, and it pulses (reduced motion: a ring) */
.pk-pin.is-hl span { background: var(--pb-yellow); color: var(--pb-ink); border-color: var(--pb-ink); transform: scale(1.2); box-shadow: 0 0 0 0 rgba(255, 196, 0, .7); animation: pk-pulse 1.4s ease-out infinite; }
.pk-pin span { transition: transform .12s ease-out; }

/* The list: 8 rows until "Toon alle N locaties" (only while scripts run; without them every row shows). */
.pb-expand { display: none; margin: 12px 0 0; }
.pb-js .pb-rank--collapsible:not(.is-open) > li.pb-over { display: none; }
.pb-js .pb-rank--collapsible + .pb-expand:not([hidden]) { display: inline-flex; align-items: center; }
.pb-list-section h2 { scroll-margin-top: 16px; }

@media (min-width: 760px) {
	.pb-head--hero { min-height: 300px; padding-top: 72px; padding-bottom: 40px; }
	.pb-head--hero.pb-head--band { min-height: 0; padding-top: 56px; padding-bottom: 40px; }
	.pb-hub-map .pk-map-canvas, .pb-hub-map .pk-map-inactive { height: 320px; }
}
@media (min-width: 1024px) {
	.pb-hub-layout--map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 44%); gap: 0 40px; align-items: start; }
	.pb-hub-layout--map .pb-list-section { grid-column: 1; grid-row: 1; }
	.pb-hub-layout--map .pb-hub-map { grid-column: 2; grid-row: 1; position: sticky; top: 16px; margin: 0; padding-top: 23px; }
	/* 4:3, so a city spread wider than tall (Utrecht) fills the map instead of a band in a tall one (2026-10-03). */
	.pb-hub-layout--map .pk-map-canvas, .pb-hub-layout--map .pk-map-inactive { height: auto; aspect-ratio: 4 / 3; max-height: calc(100vh - 96px); }
	.pb-hub--city .pb-hub-layout--map .pb-rank { columns: auto; }
	.pb-hub--city .pb-hub-layout--map .pb-rank > li { padding: 10px 8px; margin: 0 -8px; border-radius: 6px; }
	.pb-hub--city .pb-hub-layout--map .pb-rank > li:hover { background: var(--pb-soft); }
}
/* While tiles load, the placeholder becomes the small overlay at the bottom of the map (as on other maps). */
.pk-prijsbord .pb-hub-map .pk-map-inactive:has(+ .pk-map-canvas:not([hidden])) { height: auto; }

/* List prices in two lines (owner, 2026-10-03; pk_pb_price_lines_html): line 1 large, the price and its unit; line 2
   small, the second price with its own label. Never wraps inside a price: non-breaking spaces keep "€ 13,00", "p/u",
   "per 24 uur" and "4 personen" together.
   A list row never squeezes its name (2026-11-03, release 0.4.28, Jurre "Yes, fix now"; live 0.4.27, /amsterdam/ at
   1440 px: a price line that could not wrap took the row and left the name column 5 px wide). The name column keeps at
   least 8em, or 35% of a narrow row; the price column is at most 14em (224 px: "€ 13,00 per 24 uur", "€ 6,00 p/u
   ma t/m vr" and "met OV voor maximaal 4 personen" each on one line) and its lines wrap inside it: the unit or the days
   under the price, a long second line on two lines (the name's minimum is in .pb-rank > li and the map pin's row).
   tools/dev/clipscan.js checks it (SQUEEZE: a name column under 8ch). */
.pb-rank-price { max-width: 14em; text-align: right; }
/* on a phone the price's lines are short (the days and the second line go under it), so 8.5em: "€ 12,00 p/u" on one
   line, "€ 13,00" over "per 24 uur", and the rest of the row for the name */
@media (max-width: 420px) { .pb-rank-price { max-width: 8.5em; } }
.pb-rank-price .pb-price-main { display: block; }
.pk-prijsbord .pb-rank-price > .pb-price-second { display: block; max-width: none; font-size: 13px; line-height: 1.35; color: var(--pb-muted); }
@media (max-width: 420px) { .pk-prijsbord .pb-rank-price > .pb-price-second { max-width: 18ch; } }
/* "€ 6,00 p/u ma t/m vr": the days stay together and go under the price when the line does not fit (2026-11-03); on a
   phone always on their own line under the price, so the name keeps its width (2026-10-24) */
.pb-rank-price .pb-price-days { display: inline-block; margin-left: .25em; white-space: nowrap; }
/* 2026-11-05 (0.4.32): on a phone the days line wraps inside the price column (it is a block there, so nowrap only made a
   long line like "buiten za en zo 12:00 tot 18:00" run 12 px out of the row on the Utrecht pages); a short line such as
   "ma t/m vr" still fits on one line in the 8.5em column. On wider screens nowrap keeps the days together. */
@media (max-width: 420px) { .pb-rank-price .pb-price-days { display: block; margin-left: 0; font-size: 15px; white-space: normal; overflow-wrap: anywhere; } }
/* What follows a day unit, on a small line of its own that wraps (2026-11-03): who an OV price covers ("met OV voor
   maximaal 4 personen", Den Bosch: 126 px out of its row at 390 px in 0.4.27; the plugin's unit_note), or, where a list
   has no name column, a day price's condition (the plugin's cond; the list rows print it under the name) */
.pb-rank-price .pb-price-tail { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
/* The condition slots (2026-11-08, tooling release 1 task 4, efficiency audit D2). A day price's condition comes from its
   own field (mart 02 price.condition, the plugin's cond) and has two fixed places, whose width this file sets at every
   breakpoint, so no condition text decides a row's layout:
   - a list row: the note line under the name (.pb-rank-note, pk_pb_cond_note_html()), as wide as the name column (at
     least 8em, see .pb-rank > li), wrapping anywhere it must;
   - a hub table cell: its own line under the price (.pb-cell-cond), at most 14em wide, wrapping; the Per dag column
     never grows with the text (release 0.4.28: one bracket kept it 412 px wide at 768 px). */
.pb-rank-name .pb-rank-note { display: block; overflow-wrap: anywhere; }
.pk-prijsbord .pb-cell-cond { max-width: 14em; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 760px) { .pb-hub-table td .pb-cell-cond { margin-left: auto; } }

/* Street tariffs per wijk on the city hub guide (2026-10-03): a table on desktop, labelled rows on phones. */
.pb-prose .pb-table-wrap { margin: 12px 0 0; }
/* Readable at every width (Jurre, 2026-11-02, task 8 of tasks/2026-11-02_next_cities.md: "unreadable and shifted
   everywhere" on /groningen/). The "Per uur" cell no longer keeps its notes on one line: the price stays whole by its
   non-breaking spaces (parkeerdata_nbsp), every note under it wraps in a column of at least 9em. "Betaald", "Zaterdag"
   and "Zondag" keep a minimum width, so no word breaks letter by letter (before: the maximum-time notes of 0.4.25
   stretched "Per uur" to 460 px and "Betaald" shrank to 66 px). Where the table sits in a narrow column (the guide
   section next to the zone map, 344 px at 1024 px), it takes the phone layout below. From 760 px the table text is
   15 px, so five columns fit the guide column of 560 px at 1440 px, also with Haarlem's and Arnhem's long wijk names. */
.pb-prose .pb-table-wrap:has(> .pb-street-table) { container: pb-street / inline-size; }
@media (min-width: 760px) { .pb-street-table { font-size: 15px; } }
.pb-street-table td:nth-child(2) { min-width: 9em; }
.pb-street-table thead th:nth-child(n+3), .pb-street-table td:nth-child(n+3) { min-width: 6.25em; }
.pb-street-table th[scope="row"] { min-width: 5.5em; font-weight: 600; hyphens: manual; }
/* the centre zones above the street table (2026-10-18): "Centrum: € 4,80 per uur (ma t/m zo 09:00 tot 21:00)" */
.pb-street-centre { list-style: none; margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--pb-line); background: #fff; border-radius: 10px; }
.pb-street-centre li + li { margin-top: 4px; }
/* Long lists, shorter (Jurre, 2026-11-14, polish release 0.4.37; inc/prijsbord.php, inc/guide.php): the street table shows
   its 8 dearest wijken under a summary line, each stadsdeel card its first 5 locations; "Toon alle N wijken" and "Toon N
   meer" show the rest. Every row stays in the HTML: the rest is hidden only while scripts run (html.pb-js, set in <head>)
   and only on screens; prijsbord-hub.js opens a list. */
.pb-street-summary { margin: 12px 0 0; font-weight: 600; }
.pb-street-summary + .pb-table-wrap { margin-top: 8px; }
.pb-more-btn { display: none; margin: 10px 0 0; padding: 8px 14px; min-height: 44px; border: 1.5px solid var(--pb-blue); border-radius: 8px; background: #fff; color: var(--pb-blue); font: 600 15px var(--pb-font); cursor: pointer; }
@media screen {
	.pb-js .pb-capped:not(.is-open) .pb-extra { display: none; }
	.pb-js .pb-capped:not(.is-open) + .pb-more-btn { display: inline-flex; align-items: center; }
}
/* duration steps under the price (2026-10-10): they wrap, in the column's width (min-width 15em dropped 2026-11-02: the
   cell's own 9em is enough, and 15em pushed the table past its column) */
.pb-street-table td .pb-step-note { margin-top: 2px; }
/* Labelled rows: every note of the "Per uur" cell goes under the price in the second column (2026-11-02, task 8). Only
   the duration steps did; "vanaf € 4,50" and the maximum-time notes of 0.4.25 fell into the 76 px label column. */
@media (max-width: 759px) {
	.pb-street-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.pb-street-table, .pb-street-table tbody, .pb-street-table tr { display: block; }
	.pb-street-table tr { padding: 8px 0; border-bottom: 1px solid var(--pb-line); }
	.pb-street-table th[scope="row"] { display: block; min-width: 0; padding: 0 0 4px; border: 0; }
	.pb-street-table td, .pb-street-table td:nth-child(n+2) { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; min-width: 0; padding: 2px 0; border: 0; }
	.pb-street-table td::before { content: attr(data-label); color: var(--pb-muted); font-size: 15px; }
	.pb-street-table td .pb-cell-note { grid-column: 2; min-width: 0; margin-top: -4px; }
}
/* the same labelled rows in a column too narrow for five columns (2026-11-02, see above) */
@container pb-street (max-width: 539px) {
	.pb-street-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.pb-street-table, .pb-street-table tbody, .pb-street-table tr { display: block; }
	.pb-street-table tr { padding: 8px 0; border-bottom: 1px solid var(--pb-line); }
	.pb-street-table th[scope="row"] { display: block; min-width: 0; padding: 0 0 4px; border: 0; }
	.pb-street-table td, .pb-street-table td:nth-child(n+2) { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; min-width: 0; padding: 2px 0; border: 0; }
	.pb-street-table td::before { content: attr(data-label); color: var(--pb-muted); font-size: 15px; }
	.pb-street-table td .pb-cell-note { grid-column: 2; min-width: 0; margin-top: -4px; }
}

/* ---------- City hub guide v3 (owner, 2026-10-03; inc/guide.php) ----------
   Full-width bands per section (white, light grey, light blue), larger headings and more space. Phones: heading,
   visual, text. Desktop: a sticky table of contents in a side column; per section the text left (about 70 characters a
   line) and the visual right. The band colour is drawn by a pseudo-element that reaches the edges of the window. */
.wp-site-blocks:has(.pb-guide2) { overflow-x: clip; }
.pb-guide2 { margin-top: 24px; }
.pb-guide2.pb-copy--placeholder { outline-offset: 0; }
.pb-guide2-grid { position: relative; isolation: isolate; }
.pb-guide2-side { display: none; }
.pb-toc--inline { margin: 0 0 8px; }
.pb-gsec { position: relative; padding: 40px 0; display: grid; gap: 16px; }
.pb-gsec::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw; background: var(--band); }
.pb-gsec--white { --band: #fff; }
.pb-gsec--grey { --band: var(--pb-soft); }
.pb-gsec--blue { --band: #e8f0fb; }
.pb-gsec h2 { margin: 0; font-size: 23px; line-height: 1.2; scroll-margin-top: 16px; }
.pb-gsec-text { max-width: 68ch; }
.pb-gsec-text p { font-size: 17px; line-height: 1.65; }
.pb-gsec .pb-prose .pb-table-wrap { margin-top: 16px; }

/* Visuals */
.pb-gsec-visual { min-width: 0; }
.pb-gv-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pb-gv-card { margin: 0; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--pb-line); min-width: 0; }
.pb-gsec--white .pb-gv-card { background: var(--pb-soft); border-color: transparent; }
.pb-gv-card-title { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.25; }
.pb-gv-card-meta { display: block; margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: var(--pb-muted); }
/* touch targets (2026-10-11, Lighthouse target-size on /groningen/): the card title link and the "Dichtstbij" link at
   least 24 px high. Vertical padding on the inline link (not inline-flex), so a long name still wraps with the text. */
.pb-gv-card-title a, .pb-gv-card-meta a { padding: 3px 0; }
.pb-gv-walk { margin: 6px 0 0; font-size: 15px; font-weight: 600; }
.pb-gv-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--pb-muted); }
.pb-gv-figure { margin: 0; }
.pb-gv-caption { margin: 0 0 8px; font-weight: 600; }
.pb-chart { display: block; width: 100%; height: auto; max-width: 420px; font: 13px var(--pb-font); }
.pb-chart-label { font-weight: 600; fill: var(--pb-ink); }
.pb-chart-kind { fill: var(--pb-muted); }
.pb-chart-value { fill: var(--pb-ink); font-weight: 600; }
.pb-bar-street { fill: #9aa7b8; }
.pb-bar-garage { fill: var(--pb-blue); }
.pb-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: 0; margin-left: 4px; }
.pb-key--street { background: #9aa7b8; }
.pb-key--garage { background: var(--pb-blue); }
.pb-zonemap { display: block; width: 100%; height: auto; max-height: 520px; }
.pb-zonemap path { stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.pb-zonemap .pb-zonemap-outline { fill: #e3e7ed; stroke: #9aa7b8; stroke-width: 3; }
.pb-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.pb-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pb-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
/* the map's background outside the zone shapes: "Geen zonegegevens" (2026-11-02) */
.pb-swatch--free { background: #eef1f4; border: 1px solid #9aa7b8; }
.pb-gv-callout { padding: 16px; border-radius: 10px; background: #fff; border: 1px solid var(--pb-line); }
.pb-gsec--white .pb-gv-callout { background: #e8f5ec; border-color: transparent; }
.pb-gv-icons { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.pb-gv-icons li { display: flex; align-items: center; gap: 12px; }
.pb-gv-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e8f5ec; color: var(--pb-green); }
.pb-gv-icons strong { font-size: 19px; }
.pb-gv-callout .hb-btn { width: 100%; }
.pk-prijsbord .pb-gv-callout a.hb-btn { color: #fff; }
.pb-gv-sides { display: grid; gap: 8px; }
.pb-gv-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pb-gv-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid var(--pb-line); font-size: 15px; }
.pb-gv-list li span { color: var(--pb-muted); white-space: nowrap; }
/* free with a condition (2026-11-09): "Overdag gratis, 's nachts van 02:00 tot 05:00 betaald" wraps, right-aligned */
.pb-gv-list li span.pb-gv-wrap { white-space: normal; text-align: right; }
/* List rows without "Parkeergarage ·" (polish 2026-11-14): a garage needs no label; another type is a small tag before the
   price. A day price's days and condition on a quieter second line (also in the P+R cards). */
.pk-prijsbord .pb-gv-tag { display: inline-block; margin-right: 2px; padding: 0 6px; border-radius: 4px; background: var(--pb-soft); color: var(--pb-ink); font-size: 13px; }
.pb-gsec--grey .pb-gv-tag { background: #fff; }
.pk-prijsbord .pb-gv-cond { display: block; font-size: 13px; line-height: 1.35; color: var(--pb-muted); white-space: normal; }
.pb-gv-card--pr { display: flex; flex-direction: column; gap: 2px; }
.pb-gv-card--pr a { font-weight: 600; line-height: 1.25; }
.pb-gv-price { font-size: 15px; color: var(--pb-ink); }
.pb-gv-card--pr.is-free .pb-gv-price { color: var(--pb-green); font-weight: 600; }
.pb-week { border-collapse: separate; border-spacing: 3px; width: 100%; max-width: 420px; font-size: 13px; table-layout: fixed; }
.pb-week th { font-weight: 600; color: var(--pb-muted); text-align: center; padding: 0 2px; }
.pb-week tbody th { text-align: left; padding-right: 6px; }
.pb-week-cell { display: table-cell; height: 26px; border-radius: 4px; background: #e3e7ed; }
.pb-legend .pb-week-cell { display: inline-block; width: 14px; height: 14px; }
.pb-week-cell.is-rustig { background: #b9e0c4; }
.pb-week-cell.is-druk { background: #ffd98a; }
.pb-week-cell.is-drukst { background: #e8743b; }

@media (min-width: 760px) {
	.pb-gsec { padding: 56px 0; }
	.pb-gsec h2 { font-size: 30px; }
	.pb-gv-cards--places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pb-gv-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.pb-toc--inline { display: none; }
	.pb-guide2-grid.has-toc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 40px; }
	.pb-guide2-side { display: block; }
	.pb-toc--sticky { position: sticky; top: 16px; margin: 40px 0 40px; padding: 14px 16px; background: #fff; border: 1px solid var(--pb-line); border-radius: 8px; font-size: 15px; }
	.pb-toc--sticky ol { padding-left: 18px; }
	.pb-toc--sticky a { min-height: 0; padding: 3px 0; line-height: 1.3; }
	.pb-toc--sticky a[aria-current="true"] { color: var(--pb-ink); font-weight: 600; text-decoration: none; }
	.pb-gsec { padding: 64px 0; gap: 18px 48px; grid-template-columns: minmax(0, 1fr); }
	.pb-gsec.has-visual { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); grid-template-rows: auto 1fr; grid-template-areas: "title visual" "text visual"; align-items: start; }
	.pb-gsec.has-visual h2 { grid-area: title; }
	.pb-gsec.has-visual .pb-gsec-text { grid-area: text; }
	.pb-gsec.has-visual .pb-gsec-visual { grid-area: visual; }
	.pb-gsec h2 { font-size: 30px; }
	.pb-gv-cards--places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-gv-sides { grid-template-columns: 1fr; }
}
.pb-week thead td { width: 64px; }

/* Zone map over a static OpenStreetMap background (2026-10-03): image and SVG fill the same box, so they line up.
   The 640 px cap keeps the map's ratio (2026-11-02, release 0.4.27 staging gate): a map taller than the cap gets narrower
   through max-width and --pb-map-ratio (inc/guide.php), where max-height alone squeezed it (Breda 380 x 640 against 0.48,
   Lighthouse image-aspect-ratio; every hub's map on tablets). Without the variable (the gratis page, cropped evenly)
   the calc is invalid and max-width stays none. */
.pb-zonemap-wrap { position: relative; width: 100%; max-width: calc(640px * var(--pb-map-ratio)); max-height: 640px; border-radius: 8px; overflow: hidden; background: #eef1f4; }
.pb-zonemap-wrap picture, .pb-zonemap-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pb-zonemap-wrap .pb-zonemap { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
.pb-zonemap-wrap .pb-zonemap path { stroke: #fff; stroke-width: 0.8; stroke-opacity: .9; vector-effect: non-scaling-stroke; }
.pb-zonemap-wrap.has-bg .pb-zonemap path { fill-opacity: .55; }
.pb-zonemap-wrap .pb-zonemap .pb-zonemap-outline { fill: #e3e7ed; stroke: #9aa7b8; stroke-width: 1; fill-opacity: 1; }
.pb-zonemap-credit { position: absolute; right: 0; bottom: 0; z-index: 1; padding: 1px 5px; background: rgba(255, 255, 255, .85); color: #333; font-size: 13px; line-height: 1.4; text-decoration: none; }
.pk-prijsbord .pb-zonemap-credit { color: #333; }

/* Interactive zone map and the zone toggle (2026-10-03, assets/js/zones.js) */
.pb-zonemap-wrap[data-pk-zonemap] { cursor: pointer; }
.pb-zonemap-wrap.is-loading::after { content: "Kaart laden…"; position: absolute; left: 8px; top: 8px; z-index: 2; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, .9); font-size: 13px; }
.pb-zonemap-live { position: absolute; inset: 0; z-index: 1; isolation: isolate; }
.pb-zonemap-wrap.is-live { cursor: auto; }
.pb-zonemap-wrap.is-live > picture, .pb-zonemap-wrap.is-live > svg, .pb-zonemap-wrap.is-live > .pb-zonemap-credit { visibility: hidden; }
.pb-zonemap-live .leaflet-popup-content { font: 15px/1.4 var(--pb-font); margin: 10px 12px; }
.pb-zonemap-live .leaflet-popup-content p, .pb-hub-map .leaflet-popup-content p { margin: 4px 0 0; }
.pb-map-hint { position: absolute; left: 50%; top: 50%; z-index: 500; transform: translate(-50%, -50%); margin: 0; padding: 8px 12px; border-radius: 6px; background: rgba(17, 17, 17, .78); color: #fff; font-size: 15px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
.pb-map-hint.is-shown { opacity: 1; }
.pb-zones-bar { margin: 0 0 8px; }
.pb-zones-bar .pb-zones-toggle[hidden] { display: none; }
.pb-zones-legend .pb-legend { margin: 6px 0 0; }
.pb-zones-legend[hidden] { display: none; }
.pb-js .pb-zones-bar { min-height: 44px; }

/* Tips callout in the guide ([tips A|B|C], 2026-10-03) */
.pb-gv-tips-title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 600; font-size: 19px; }
.pb-gv-tips .pb-gv-icon { background: #fff4d6; color: #8a5a00; }
.pb-gsec--white .pb-gv-tips { background: #fff8e6; }
.pb-gv-tiplist { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.pb-gv-tiplist li { line-height: 1.45; }

/* Free parking made visible (2026-10-03): time filters on the zone maps, free periods in green in the table. */
.pb-zone-filters { margin: 0 0 8px; }
.pb-zone-filter-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-zone-filters .pb-chip { min-height: 40px; padding: 0 12px; font-size: 15px; }
.pb-zone-filter-status { margin: 6px 0 0; font-size: 13px; color: var(--pb-muted); min-height: 1.4em; }
.pb-js figure .pb-zone-filters[hidden] { display: block !important; visibility: hidden; }
.pb-zones-bar .pb-zone-filters { margin-top: 8px; }
.pb-zones-bar .pb-zone-filters[hidden] { display: none; }
.pb-legend li[hidden] { display: none; }
.pb-free { color: var(--pb-green); font-weight: 600; }
/* the list of the free-parking page's OV zones and of a P+R page's OV card (one block since 2026-11-14) */
.pb-ov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pb-ov-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--pb-soft); }
.pb-ov-list li:first-child { border-top: 0; }
.pb-ov-list a { font-weight: 600; }
.pb-free-ov .pb-ov-group { margin-top: 4px; }
.pb-free-ov .pb-notice { margin-top: 16px; }

/* Gratis page in the hub design (2026-10-03, hub-types/free.php) */
.wp-site-blocks:has(.pb-hub--free) { overflow-x: clip; }
.pb-hub--free .pb-cards { margin-bottom: 0; }
.pb-free-map-intro, .pb-free-ov-intro { margin: 0; max-width: 68ch; }
.pb-free-map .pb-gv-figure { max-width: 680px; }
.pb-free-map .pb-zonemap-wrap { max-height: 680px; }
.pb-free-pr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-free-moments { display: grid; gap: 24px; }
.pb-free-moment { min-width: 0; padding: 16px; border-radius: 10px; background: #fff; }
.pb-free-moment .pb-h3 { margin-top: 0; }
.pb-ov-top { list-style: none; counter-reset: top; }
.pb-ov-top li { position: relative; padding-left: 34px; counter-increment: top; }
.pb-ov-top li::before { content: counter(top); position: absolute; left: 0; top: 9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e8f5ec; color: var(--pb-green); font-weight: 600; font-size: 13px; }
.pb-ov-all summary { min-height: 44px; }
.pb-ov-wijk { margin: 12px 0 2px; font-weight: 600; font-size: 15px; }
.pb-free-signs { display: flex; gap: 12px; align-items: flex-start; background: #fff8e6; border-color: transparent; }
.pb-free-signs .pb-gv-icon { background: #ffe7a6; color: #7a4f00; font-weight: 600; font-size: 23px; }
.pb-free-signs p { margin: 0; }
.pb-gv-count { display: grid; gap: 8px; }
.pb-gv-count p { margin: 0; font-size: 17px; }
.pb-gv-count strong { font-size: 23px; }
.pb-gv-count a { font-weight: 600; }
.pb-gv-cards--garage { grid-template-columns: 1fr; }
.pb-gv-card--garage a { font-weight: 600; }
.pb-gv-card--garage .pb-price-main { display: block; font-size: 19px; }
.pb-gv-card--garage .pb-price-second { display: block; font-size: 13px; color: var(--pb-muted); }
@media (min-width: 760px) { .pb-free-pr { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pb-free-moments { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Gratis page zone map: full container width on desktop at the same height (2026-10-03). The static image and SVG are
   cropped evenly (object-fit: cover / preserveAspectRatio slice), so they stay aligned. */
.pb-free-map .pb-zonemap-wrap.has-bg img { object-fit: cover; }
@media (min-width: 1024px) {
	.pb-free-map .pb-gv-figure { max-width: none; }
	.pb-free-map .pb-zonemap-wrap { aspect-ratio: auto !important; height: 680px; max-height: none; }
}

/* Guide sections without text (2026-10-03): their visuals side by side in one band. */
.pb-gcards { display: grid; gap: 16px; }
.pb-gcard { min-width: 0; }
.pb-gcard-title { font-size: 19px; line-height: 1.25; margin: 0 0 10px; scroll-margin-top: 16px; }
@media (min-width: 760px) { .pb-gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pb-gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Top 3 per moment in the gratis page's guide (2026-10-03) */
.pb-gv-top-title { margin: 0 0 8px; font-weight: 600; }
.pb-gv-top ol { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 8px; }
.pb-gv-top li strong { display: block; }
.pb-gv-top-stop { display: block; font-size: 15px; }
.pb-gv-top a { font-weight: 600; }

/* ---------- Location page review round 1 (owner, 2026-10-04; single-parkeerlocatie.php) ---------- */
/* 1. Key facts as pills under the H1: compact, wrapping neatly on phones. */
.pb-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; padding: 0; }
.pb-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--pb-line); border-radius: 999px; background: var(--pb-soft); color: var(--pb-ink); font-size: 15px; line-height: 1.2; white-space: nowrap; }
.pb-pill svg { flex: none; color: var(--pb-blue); }
.pb-pill strong { font-weight: 600; }
.pb-pill--status { color: var(--pb-green); font-weight: 600; }
.pb-pill--status.is-closed { color: var(--pb-muted); }
.pb-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
/* 6. Street View link under the address */
.pb-streetview { margin: 8px 0 0; }
.pb-btn-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; }
.pk-prijsbord a.pb-btn-link { color: var(--pb-blue); }
.pb-btn-link:hover { background: var(--pb-soft); }
/* 3. Context sentences after the intro */
.pb-context { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; max-width: 70ch; }
.pb-context li { position: relative; padding-left: 18px; }
.pb-context li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--pb-blue); }
/* 4. Key facts card: groups with an icon per fact, two columns on desktop */
.pb-factcard { display: grid; gap: 16px; padding: 16px; border-radius: 10px; background: var(--pb-soft); }
.pb-factgroup-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--pb-muted); }
.pb-factlist { display: grid; gap: 10px; margin: 0; }
.pb-factlist > div { position: relative; min-height: 32px; padding-left: 42px; }
.pb-fact-icon { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #fff; color: var(--pb-blue); }
.pb-factlist dt { font-size: 13px; color: var(--pb-muted); }
.pb-factlist dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 760px) {
	/* two columns only where each is at least 14rem (2026-11-03, release 0.4.28: at 768 px the card is 336 px wide next to
	   the map, and "Gehandicaptenplaatsen" ran 25 px out of a 132 px column; clipscan, Wedren and Winkelcentrum Nova) */
	.pb-factcard { grid-template-columns: repeat(auto-fit, minmax(max(14rem, calc((100% - 32px) / 2)), 1fr)); padding: 20px; gap: 20px 32px; }
}
/* 5. Map pins as on the hub: this location large, the nearby ones small and secondary */
.pk-pin.pk-pin-primary span { width: 40px; height: 40px; margin: 2px; background: var(--pb-blue-dark, #082d6b); border-width: 3px; font-size: 15px; }
.pk-pin.pk-pin-secondary span { width: 26px; height: 26px; margin: 9px; background: #fff; color: var(--pb-blue, #0b3d91); border: 2px solid var(--pb-blue, #0b3d91); font-size: 13px; }

/* ---------- Location page round 2 (owner, 2026-10-04) ---------- */
/* 4. Price tile labels in sentence case: with the tiles above (.pb-board dt) */
/* 3. The street tariff of the zone, under the tiles: two lines, never two prices on one */
.pb-street-price { margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--pb-soft); }
.pb-street-price .pb-price-main { display: block; font-size: 17px; font-weight: 600; }
.pb-street-price .pb-price-second { display: block; font-size: 15px; color: var(--pb-muted); }
/* 15. The navigate button: in the route block under the prices since the polish release (.pb-route) */
.pb-where { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pb-where .pb-address, .pb-where .pb-streetview { margin: 0; }
.pb-prices .pb-checked { margin-top: 10px; }
/* 10. One helper line, under the map; the map's own status line is for screen readers only */
.pk-prijsbord .pb-map-section .pk-map-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pb-map-help { margin-top: 8px; }
/* 16. Meer parkeren */
.pb-more-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pb-more-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--pb-line); border-radius: 999px; font-weight: 600; text-decoration: none; }
.pb-more-list a:hover { background: var(--pb-soft); }
/* 13. The right-hand column as on the hub: the map 4:3, sticky while the page scrolls */
@media (min-width: 1024px) {
	.pb-location-aside { position: sticky; top: 16px; align-self: start; }
	.pb-location-aside .pk-map-canvas, .pb-location-aside .pk-map-inactive { height: auto; aspect-ratio: 4 / 3; max-height: calc(100vh - 200px); min-height: 0; box-sizing: border-box; }
}

/* Round 3 (owner, 2026-10-04): price disclaimer under the tiles, and the inline Street View panorama (streetview.js).
   The panorama box is a fixed 16:9 frame, so the iframe arriving later moves nothing. */
.pb-disclaimer { margin: 8px 0 0; font-size: 15px; color: var(--pb-muted); }
.pb-where .pb-sv { flex: 1 0 100%; max-width: 640px; }
.pb-sv { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--pb-soft); border: 1px solid var(--pb-line); }
.pb-sv iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pb-sv.is-loaded { border-color: transparent; }
.pb-sv-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; text-align: center; }
.pb-sv-ph[hidden] { display: none; }
.pb-sv-title { margin: 0; font-weight: 600; }
.pb-sv-note { margin: 0; max-width: 34em; font-size: 15px; color: var(--pb-muted); }
.pb-sv-remember { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; cursor: pointer; }
.pb-sv-remember input { width: 20px; height: 20px; margin: 0; }
.pb-sv-load:focus-visible, .pb-sv-remember input:focus-visible { outline: 3px solid var(--pb-yellow); outline-offset: 2px; }
@media (max-width: 380px) { .pb-sv-note { font-size: 13px; } .pb-sv-ph { gap: 4px; } }

/* P+R round (owner, 2026-10-04): OV from the P+R, under the prices; the conditions of the rate with OV under the tiles. */
.pb-ov { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--pb-line); border-radius: 8px; background: #fff; }
.pb-ov h2 { margin: 0 0 10px; font-size: 19px; line-height: 1.25; }
.pb-ov-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pb-soft); color: var(--pb-blue); }
.pb-ov-icon svg { width: 18px; height: 18px; }
.pb-ov-text { line-height: 1.4; }
.pb-ov-meta { display: block; font-size: 15px; color: var(--pb-muted); }
.pb-ov-note { margin: 10px 0 0; font-size: 15px; color: var(--pb-muted); }
.pb-ov-note a { color: var(--pb-blue); }
.pb-ov-conditions { margin: 6px 0 0; font-size: 15px; }

/* Round 4 (owner, 2026-10-04), location pages: three text styles in the main column. Body (17 px since 2026-11-14),
   small grey meta (15 px, --pb-muted) and headings. No inline badges. */
.pb-price-status { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--pb-muted); }
.pb-location .pb-operator-link { margin: 8px 0 0; font-weight: 400; }
.pb-location .pb-operator-link a::after { content: none; }
.pb-location .pb-ov-conditions { margin: 8px 0 0; font-size: 17px; }
.pb-location .pb-meta, .pb-location .pb-public-footnote, .pb-location .pb-rank-price > span { font-size: 15px; }
.pb-location .pb-ov h2 { font-size: 19px; }   /* the same size as the other H2s */
.pb-info p { margin: 0 0 12px; max-width: 70ch; font-size: 17px; line-height: 1.6; }
.pb-info p:last-child { margin-bottom: 0; }
/* a subheading in a destination page's text: on the type scale (2026-11-14; the browser's 1.17em was 19.89 px) */
.pb-info h3 { font-size: 19px; }
.pb-info-entrances { margin: 0 0 12px; padding-left: 20px; max-width: 70ch; }
.pb-info-entrances a { margin-left: 8px; }
.pb-info .pb-sv { margin: 0 0 12px; max-width: 640px; }

/* Round 5 (owner, 2026-10-04): the street price as a price component under the tiles, in the tile family (white,
   the tiles' border) with the list's price lines: line 1 the price, line 2 the meta (17 and 15 px since the polish
   release, 2026-11-14). */
.pb-location .pb-street-price { margin: 0 0 12px; padding: 10px 14px; background: #fff; border: 1px solid var(--pb-line); border-radius: 8px; }
.pb-location .pb-street-price .pb-price-main { display: block; font-size: 17px; line-height: 1.2; font-weight: 600; }
.pb-location .pb-street-price .pb-price-second { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--pb-muted); }

/* Destination round 1 (owner, 2026-10-04): destination pages and the destination index use the location page's
   components and text styles: body, meta grey, headings (17 and 15 px since 2026-11-14). No grey lead, no text
   highlight, no small caps labels. */
.pb-intro { margin: 8px 0 16px; max-width: 70ch; font-size: 17px; line-height: 1.6; color: var(--pb-ink); }
.pb-hub--destination .pb-meta, .pb-hub--destination .pb-public-footnote, .pb-hub--destination .pb-rank-price > span { font-size: 15px; }
.pb-hub--destination .pb-board .pb-detail { font-size: 15px; }
.pb-hub--destination .pb-board .pb-detail a { color: var(--pb-blue); }
.pb-hub--destination .pb-prices { margin: 0 0 8px; }
.pb-hub--destination .pb-price-status { margin: 10px 0 0; }
.pb-pr-alt { margin: 20px 0 0; }
.pb-pr-alt > p { margin: 0 0 4px; max-width: 70ch; }
.pb-pr-alt .pb-rank > li:first-child { border-top: 1px solid var(--pb-line); }

/* Default pages (page.php, 2026-10-04): the page text in the prijsbord typography. */
.pb-page-text { font-size: 17px; line-height: 1.6; }
.pb-page-text h2 { margin: 28px 0 10px; font-size: 19px; line-height: 1.25; }
.pb-page-text h2:first-child { margin-top: 0; }
.pb-page-text h3 { margin: 20px 0 8px; font-size: 17px; }
.pb-page-text ul, .pb-page-text ol { margin: 0 0 12px; padding-left: 20px; }
.pb-page-text li { margin: 0 0 6px; max-width: 70ch; }
.pb-page-text p { margin: 0 0 12px; }
.pb-page-text a { color: var(--pb-blue); }

/* ---------- Mobile polish round (owner, 2026-10-05) ---------- */
/* 3. Location and P+R pages on phones: H1 and pills, prices (tiles, street price, navigate), the OV card (P+R), then the
   map ("Ligging"), then the rest in page order. The main column dissolves into the grid so the aside can slot in after
   the prices; desktop keeps the sticky right-hand column. The map still loads on first interaction (parkeerlocatie.js). */
@media (max-width: 759.98px) {
	.pb-location-grid { display: flex; flex-direction: column; }
	.pb-location-main { display: contents; }
	.pb-location-main > * { order: 3; }
	.pb-location-main > .pb-head, .pb-location-main > .pb-prices, .pb-location-main > .pb-ov { order: 1; }
	.pb-location-aside { order: 2; }
	.pb-location-aside .pb-map-section { margin-top: 16px; }
}
/* 5. Label/value cells on phones: the label keeps its own width (.pb-hub-table td above); a long value (the station near a
   P+R) goes on its own line under the label on narrow screens. */
@media (max-width: 479.98px) {
	.pb-hub-table td.pb-td-stack { grid-template-columns: minmax(0, 1fr); text-align: left; }
}
/* 6. Gratis parkeren, the zone lists: a block per zone. Line 1 the name and wijk, line 2 the stops with walking time. */
.pb-free-moment .pb-ov-list li.pb-zone-item, .pb-ov-all .pb-ov-list li.pb-zone-item { display: block; }
.pb-zone-line1 { display: block; }
.pb-zone-line2 { display: block; font-size: 15px; line-height: 1.4; color: var(--pb-muted); }
/* 7. City hub cards: the icon left of the heading (.pb-card2-icon, with the summary cards above). */
/* 3. Destination pages on phones: the tiles and the list, then the map, then the text. */
@media (max-width: 759.98px) {
	.pb-hub--destination .pb-location-main > .pb-list-section, .pb-hub--destination .pb-location-main > .pb-notice { order: 1; }
}
/* 10. Destination index: a card per destination, the nearest location and the cheapest within 10 minutes. */
.pb-dest-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pb-dest-card { padding: 14px 16px; border: 1px solid var(--pb-line); border-radius: 10px; background: #fff; }
.pb-dest-card-title { margin: 0; font-size: 19px; line-height: 1.3; }
.pb-dest-card-title a { display: inline-flex; align-items: center; min-height: 44px; }
.pb-dest-card > .pb-meta { margin: 0 0 6px; }
.pb-dest-card-rows { margin: 0; display: grid; gap: 0; }
.pb-dest-card-rows > div { padding: 8px 0; border-top: 1px solid var(--pb-line); }
.pb-dest-card-rows dt { font-size: 15px; color: var(--pb-muted); }
.pb-dest-card-rows dd { margin: 2px 0 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 4px 12px; }
/* the place keeps at least 8em and the price wraps in its 14em, as in the list rows (2026-11-03, release 0.4.28) */
.pb-dest-card-place { display: flex; flex-direction: column; min-width: min(8em, 35%); }
.pb-dest-card-place a { font-weight: 600; }
.pb-dest-card-rows .pb-rank-price { flex: 0 1 auto; text-align: right; }
@media (min-width: 760px) { .pb-dest-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Theme 0.3.6: an unknown value reads "Onbekend" in the desktop table; on phones (label and value stacked) the row is left out. */
@media (max-width: 759.98px) { .pb-hub-table td:has(> .pb-unknown:only-child) { display: none; } }

/* City hub desktop (owner, 2026-10-09; rows since the polish release, Jurre 2026-11-14): one grid with the head (photo or
   band) across the full width, then the breadcrumb, then the cards in one row, then the list on the left with the map
   beside it. .pb-hub-layout--map dissolves into this grid. */
@media (min-width: 1024px) {
	.pb-hub-top--map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 44%); column-gap: 40px; align-items: start; }
	.pb-hub-top--map > .pb-head { grid-column: 1 / -1; grid-row: 1; }
	.pb-hub-top--map > .pb-crumbs { grid-column: 1 / -1; grid-row: 2; }
	.pb-hub-top--map > .pb-cards--city { grid-column: 1 / -1; grid-row: 3; margin-bottom: 16px; }
	.pb-hub-top--map .pb-hub-layout--map { display: contents; }
	.pb-hub-top--map .pb-hub-layout--map .pb-list-section { grid-column: 1; grid-row: 4; }
	.pb-hub-top--map .pb-hub-layout--map .pb-hub-map { grid-column: 2; grid-row: 4; padding-top: 4px; }
}

/* Map highlight component (owner, 2026-10-09): the highlighted marker (is-hl) pulses and shows its name; reduced motion:
   the highlighted state only. "Toon op kaart" only on touch screens (no hover), so desktop rows do not change. */
@keyframes pk-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 0, .7); } 100% { box-shadow: 0 0 0 14px rgba(255, 196, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .pk-pin.is-hl span { animation: none; box-shadow: 0 0 0 4px rgba(255, 196, 0, .7); } }
.leaflet-tooltip.pk-hl-label { font: 600 15px/1.2 var(--pb-font); padding: 4px 8px; }
.pk-show-on-map { display: none; }
@media (hover: none) {
	/* the row gets a third column: name, price, the map pin (48 x 48 px tap target) */
	.pb-rank > li:has(> .pk-show-on-map) { grid-template-columns: minmax(min(8em, 35%), 1fr) auto 48px; }   /* the name's minimum, 2026-11-03 */
	.pk-show-on-map { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: var(--pb-blue); }
	.pk-show-on-map:active { background: var(--pb-soft); }
}

/* Openingstijden (2026-10-11): today in bold; paid hours as a note under the table; the limited-opening line */
.pb-hours tr.is-today th, .pb-hours tr.is-today td { font-weight: 600; }
.pb-hours .pb-today { font-weight: 600; color: var(--pb-muted); }
.pb-hours-note { margin: 8px 0 0; font-size: 15px; color: var(--pb-muted); }
.pb-limited { margin: 0 0 12px; }

/* Compact breadcrumb on phones (Jurre, 2026-10-11): below the 760 px tablet breakpoint only the parent page shows, as a
   back link ("← Parkeergarages in Arnhem"); from tablet up the full trail. The same markup on every template (.pb-crumbs:
   links, separators, the current page as a span), so no HTML changes; the JSON-LD breadcrumb is untouched. */
@media (max-width: 759px) {
	.pb-crumbs > a, .pb-crumbs > span { display: none; }
	.pb-crumbs > a:last-of-type { display: inline-flex; color: var(--pb-ink); font-weight: 600; }
	.pb-crumbs > a:last-of-type::before { content: "\2190\00a0"; }
}