/* Server-rendered pages (place, hub, gone, 404) and the lists added to the first screen and the map column (worker/src/seo).
   Same tokens as the app (style.css); text pages reuse page.css for the header. */
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--bhm-ink); color: #FFFFFF; font: 500 14px var(--bhm-font); }
.skip:focus { top: 8px; }
.seo { font-family: var(--bhm-font); }
.seo main, .seo .doc-head { max-width: 860px; }
.seo a { text-underline-offset: 3px; }
.seo-foot { max-width: 860px; margin: 0 auto; padding: 0 24px 48px; box-sizing: border-box; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 20px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--bhm-ink-3); }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--bhm-field); }
.crumbs a { color: var(--bhm-ink-2); }
.crumbs [aria-current="page"] { color: var(--bhm-ink-3); overflow-wrap: anywhere; }

.place__head { margin-top: 8px; }
.place__org { margin: 24px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bhm-ink-3); }
.place h1, .hub h1 { margin: 8px 0 16px; overflow-wrap: anywhere; }
.plaque { margin: 16px 0 8px; padding: 11px 14px 10px; border: 1px solid #D9D3C7; border-radius: var(--bhm-r-plaque); background: #FDFCFA; box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 4px #ECE7DE; }
.plaque__address { font-family: var(--bhm-plaque); font-size: var(--bhm-fs-plaque); line-height: 1.15; overflow-wrap: anywhere; }
.plaque__district { margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bhm-ink-3); }
.banner { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.banner--confirm { background: var(--bhm-confirm-bg); color: var(--bhm-confirm-ink); border: 1px dashed var(--bhm-confirm-line); }
.banner--retired { background: var(--bhm-retired-bg); color: var(--bhm-ink); }

.action { margin: 24px 0 0; padding: 20px 22px; border-radius: var(--bhm-r-block); background: var(--bhm-card); box-shadow: 0 0 0 1px var(--bhm-line); }
.action__meta { margin: 0; font-size: 13px; font-weight: 600; color: var(--bhm-ink-2); }
.action__booking { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--bhm-tint); font-weight: 500; }
.action h2 { margin: 6px 0 12px; }
.label { font-size: var(--bhm-fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bhm-ink-3); }
.items { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; padding: 0; list-style: none; }
.items li { padding: 4px 10px; border-radius: 999px; background: var(--bhm-tint); color: var(--bhm-ink); font-size: 14px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0; font-size: 15px; }
.facts dt { font-weight: 600; color: var(--bhm-ink-2); }
.facts dd { margin: 0; color: var(--bhm-ink); overflow-wrap: anywhere; }
.facts__missing { color: var(--bhm-hours-missing); }
.facts__lang { font-size: 13px; color: var(--bhm-ink-3); }
.next p { margin: 4px 0 0; color: var(--bhm-ink); }
.quote { margin: 12px 0; padding: 12px 16px; border-left: 3px solid var(--bhm-field); background: var(--bhm-tint); border-radius: 0 12px 12px 0; }
.quote blockquote { margin: 6px 0; color: var(--bhm-ink); }
.quote figcaption { font-size: 13px; }
.auto-tr { display: inline-block; font-size: 13px; color: var(--bhm-ink-3); }
.auto-tr summary { cursor: pointer; }
.auto-tr span { display: block; margin-top: 4px; color: var(--bhm-ink-2); }

.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font: 500 15px var(--bhm-font); text-decoration: none; }
.btn--ink { background: var(--bhm-ink); color: #FFFFFF !important; }
.btn--line { border: 1px solid var(--bhm-field); background: var(--bhm-card); color: var(--bhm-ink) !important; }
.btn:focus-visible, .seo-pill:focus-visible, .cards a:focus-visible, .seo a:focus-visible { outline: 2px solid #1F5BD8; outline-offset: 2px; }
.minimap { margin: 20px 0; }
.minimap a { display: block; border-radius: var(--bhm-r-block); }
.minimap a:focus-visible { outline: 2px solid #1F5BD8; outline-offset: 2px; }
.minimap figcaption { margin-top: 4px; font-size: 11px; line-height: 1.3; color: var(--bhm-ink-3); }
.minimap figcaption a { color: inherit; }
.minimap img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: var(--bhm-r-block); box-shadow: 0 0 0 1px var(--bhm-line); background: var(--bhm-tint); }
.review { margin: 24px 0 0; padding: 16px 20px; border-radius: var(--bhm-r-block); background: var(--bhm-tint); }
.review__title { margin: 0 0 6px; font-size: 16px; color: var(--bhm-checked); }
.review p { margin: 6px 0; font-size: 14px; }

.hub .lead { font-size: 18px; color: var(--bhm-ink); }
.hub__note { font-size: 14px; }
.hub__guide { margin: 8px 0 0; font-size: 15px; font-weight: 600; }

/* Guides (worker/src/seo/guide.ts): prose over the published data, then its sources. */
.guide h1 { margin: 8px 0 16px; overflow-wrap: anywhere; }
.guide .lead { font-size: 18px; color: var(--bhm-ink); }
.guide h2 { margin: 36px 0 10px; }
.guide p, .guide li { overflow-wrap: anywhere; }
.guide__rules { margin: 8px 0; padding-left: 20px; }
.guide__rules li { margin: 4px 0; }
.guide__note { font-size: 13px; color: var(--bhm-ink-2); }
.guide__districts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px 28px; margin-top: 12px; }
.guide__district h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.guide__district h3 span { color: var(--bhm-ink-2); font-weight: 400; font-size: 13px; }
.guide__district ul { margin: 0; padding: 0; list-style: none; }
.guide__district li { display: flex; flex-direction: column; padding: 4px 0; font-size: 15px; }
.guide__district li span { font-size: 13px; color: var(--bhm-ink-2); }
.guide__district p { margin: 6px 0 0; font-size: 14px; }
.guide__places { display: grid; gap: 16px; margin-top: 12px; }
.guide__place { padding: 18px 20px; border-radius: var(--bhm-r-block); background: var(--bhm-card); box-shadow: 0 0 0 1px var(--bhm-line); }
.guide__place h3 { margin: 0 0 4px; font-size: 18px; overflow-wrap: anywhere; }
.guide__place .guide__note { margin: 8px 0 0; }
.guide__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; }
.guide__sources { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--bhm-line); }
.guide__sources ul { margin: 8px 0; padding-left: 20px; font-size: 14px; }
.guide__sources li { margin: 6px 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.cards a { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: var(--bhm-r-row); background: var(--bhm-card); box-shadow: 0 0 0 1px var(--bhm-line); color: var(--bhm-ink); text-decoration: none; }
.cards a:hover { background: var(--bhm-selected); }
.cards__name { font-weight: 600; overflow-wrap: anywhere; }
.cards__meta, .cards__what { font-size: 13px; color: var(--bhm-ink-2); overflow-wrap: anywhere; }
.nearby { margin-top: 32px; }
.seo-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.seo-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--bhm-card); box-shadow: 0 0 0 1px var(--bhm-line); color: var(--bhm-ink) !important; font-size: 15px; text-decoration: none; }
.seo-pill span { color: var(--bhm-ink-3); font-size: 13px; }

/* First screen: the hubs and every place as links under the "what do you have to give" block. */
.seo-places { margin: 56px 64px 0; }
.seo-places h2 { margin: 0 0 12px; font-size: 28px; line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; }
.seo-places .seo-pills + h2 { margin-top: 40px; }
.seo-places__date { margin: 0 0 12px; font-size: 13px; color: #737373; }
.seo-districts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px 32px; }
.seo-district h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.seo-district h3 span { color: #737373; font-weight: 400; font-size: 13px; }
.seo-district ul { margin: 0; padding: 0; list-style: none; }
.seo-district li a { display: inline-block; padding: 4px 0; font-size: 15px; color: #111111; text-underline-offset: 3px; overflow-wrap: anywhere; }
.seo-places--column { margin: 0; }
.seo-places--column h2 { font-size: 18px; font-weight: 600; }
.seo-places--column .seo-districts { grid-template-columns: 1fr; gap: 12px; }
@media (max-width: 639px) {
  .seo-places { margin: 40px 20px 0; }
  .seo-foot, .seo main { padding-left: 16px; padding-right: 16px; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 8px; }
  .action { padding: 16px; }
}