/*
  hotel-night.com/spots · overzicht, kaart en detailpagina's van de spots
  Bovenop /css/site.css (en op de detailpagina ook /css/hotel.css). Ook de
  hotelpagina's laden dit bestand, voor de link naar /spots en de topbalk
  met drie items.

  Geen nieuwe kleuren: alles komt uit de tokens van site.css. Nieuwe maten
  staan hieronder als tokens.

  De kaart bestaat alleen met JavaScript. Daarvoor is geen script in de kop
  nodig: @media (scripting: none) verbergt kaart en kaartknop al bij de eerste
  weergave, dus er verspringt niets als spots.js binnenkomt (CLS 0).
*/

:root {
  --pk-filter-h: 68px;                 /* filterbalk: knop van 44 px + 2 x 12 px */
  --pk-gutter:   20px;
  --pk-wide:     1440px;               /* lijst + kaart */
  --pk-top:      calc(var(--nav-h) + var(--pk-filter-h));
  --pk-gap:      20px;
}
@media (min-width: 700px) { :root { --pk-gutter: 5vw; --pk-gap: 24px; } }
@media (min-width: 1100px) { :root { --pk-gutter: 40px; } }

/* Een ankerlink landt onder topbalk én filterbalk */
.pk-pagina [id] { scroll-margin-top: calc(var(--pk-top) + 16px); }

/* ─────────────────────────────────────────────
   TOPBALK MET DRIE ITEMS
   Past op 320 px naast het logo zonder afbreken (briefing outletpagina §4):
   eerst de marges en de letterafstand omlaag, geen hamburgermenu.
───────────────────────────────────────────── */
.nav-links a { white-space: nowrap; }
@media (max-width: 399px) {
  .nav-inner { padding: 0 12px; }
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 12px; letter-spacing: -0.01em; }
}
/* 320 px: dan is er naast het logo 1 px over. Het logo 4 px lager (48 → 44)
   geeft 10 px lucht, zonder dat er iets afbreekt. */
@media (max-width: 359px) {
  .nav-logo { height: 44px; }
}

/* Serif-regel met een pijl: "Alle spots van de Hotelnacht →".
   Geen inline-flex: dan vallen de spaties rond het accentwoord weg. De
   padding houdt het klikvlak op minstens 44 px. */
.pk-meer {
  display: inline-block;
  padding: 9px 0;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--text-primary);
  transition: color 0.2s ease;
}
.pk-meer:hover { color: var(--orange); }

/* ─────────────────────────────────────────────
   OP DE HOTELPAGINA
───────────────────────────────────────────── */
.hb-outlet__naam a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.hb-outlet__naam a:hover { color: var(--orange); text-decoration-color: currentColor; }
.hb-outlets__meer { padding: 0 var(--hb-gutter); margin-top: clamp(48px, 7vw, 80px); }
@media (min-width: 900px) { .hb-outlets__meer { padding: 0; } }

/* ═════════════════════════════════════════════
   OVERZICHT /spots
   Geen cover: de eerste spot staat op een telefoon al in beeld.
═════════════════════════════════════════════ */
.pk-pagina .site-nav { position: sticky; }

.pk-kop {
  max-width: calc(var(--pk-wide) + 2 * var(--pk-gutter));
  margin: 0 auto;
  padding: 24px var(--pk-gutter) 28px;
}
.pk-kop .crumbs { margin-bottom: 28px; }
.pk-kop .crumbs li[aria-current] { color: var(--text-muted); }
.pk-kop h1 {
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 14em;
  text-wrap: balance;
}
/* De inleiding van Jan als lead: de maat van de opening op de hotelpagina
   (20 px, 24 px vanaf 900 px), hooguit 640 px breed (briefing §6.B). */
.pk-intro {
  margin-top: 20px;
  max-width: 640px;
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
@media (min-width: 900px) { .pk-intro { font-size: 24px; } }
/* Telefoon: de eerste spot moet op 390 x 844 al in beeld staan */
@media (max-width: 699px) {
  .pk-kop { padding: 16px var(--pk-gutter) 20px; }
  .pk-kop .crumbs { margin-bottom: 18px; }
  .pk-kop .mono-label { margin-bottom: 12px; }
  .pk-kop h1 { font-size: 32px; }
  .pk-intro { margin-top: 14px; }
  .pk-body { padding-top: 20px; }
  .pk-groep h2 { margin-bottom: 12px; }
}

/* ── C. Filterbalk ── */
.pk-filters {
  position: sticky;
  top: var(--nav-h);
  z-index: 900;
  height: var(--pk-filter-h);
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--divider);
}
.pk-filters ul {
  list-style: none;
  display: flex;
  gap: 8px;
  height: 100%;
  align-items: center;
  max-width: calc(var(--pk-wide) + 2 * var(--pk-gutter));
  margin: 0 auto;
  padding: 0 var(--pk-gutter);
  /* Op een telefoon scrolt de balk zelf, niet de pagina */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--pk-gutter);
  scrollbar-width: none;
}
.pk-filters ul::-webkit-scrollbar { display: none; }
.pk-filters li { flex: 0 0 auto; scroll-snap-align: start; }
.pk-filter {
  /* relative: de verborgen telling (.visually-hidden) hoort binnen de
     scrollende balk, anders rekt hij de pagina op tot voorbij de laatste knop */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.pk-filter:hover { color: var(--text-primary); border-color: #3A3A3A; }
/* Actief: rand en tekst in de categoriekleur ("Alles": oranje). Nooit
   witte tekst op een kleur, nooit de kleur als achtergrond. */
.pk-filter[aria-current] { color: var(--cat, var(--orange)); border-color: var(--cat, var(--orange)); }
.pk-filter__stip { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: 0 0 auto; }
.pk-filter__tal { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-muted); }
.pk-filter[aria-current] .pk-filter__tal { color: inherit; }
/* Pas vanaf 900 px past de hele rij (met de stip per filter); daaronder scrolt de balk */
@media (min-width: 900px) { .pk-filters ul { overflow-x: visible; } }

/* ── D. Lijst en kaart ── */
.pk-body {
  max-width: calc(var(--pk-wide) + 2 * var(--pk-gutter));
  margin: 0 auto;
  padding: 32px var(--pk-gutter) clamp(72px, 10vw, 120px);
}
.pk-groep + .pk-groep { margin-top: clamp(48px, 7vw, 72px); }
.pk-groep[hidden] { display: none; }
.pk-groep h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 20px; }
.pk-grid { display: grid; gap: 4px; }

/* Mobiel: compacte rij, beeld 4:3 van 104 px links, tekst rechts */
.pk-spot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--divider);
}
.pk-spot__media {
  flex: 0 0 104px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface);
}
.pk-spot__media picture,
.pk-spot__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Lijstkaart zonder beeld (briefing spots v2 §9): het beeldvlak blijft even
   groot, gevuld met --surface, met het type in de serif cursief. Zo
   verspringt er niets als het beeld later komt. Geen gevel als vervanging. */
.pk-spot__media--leeg { display: flex; align-items: center; justify-content: center; padding: 0 8px; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.15; color: var(--text-muted); overflow-wrap: anywhere; }
@media (min-width: 700px) { .pk-spot__media--leeg { font-size: 24px; } }
.pk-klein__media.pk-spot__media--leeg { font-size: 22px; }
.pk-spot__body { min-width: 0; }
.pk-spot .mono-label { margin-bottom: 4px; }
.pk-spot__naam {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.15;
  color: var(--text-primary);
  overflow-wrap: break-word;
}
/* Eén link per kaart, met een uitgerekt klikvlak over de hele kaart */
.pk-spot__naam a { transition: color 0.2s ease; }
.pk-spot__naam a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pk-spot__naam a:focus-visible { outline: none; }
.pk-spot__naam a:focus-visible::after { outline: 2px solid rgba(255,95,0,0.65); outline-offset: 2px; border-radius: var(--radius-sm); }
.pk-spot:hover .pk-spot__naam a,
.pk-spot--actief .pk-spot__naam a { color: var(--orange); }
.pk-spot__tagline { font-size: 14px; line-height: 1.35; color: var(--text-secondary); margin-top: 4px; }
.pk-spot__waar { font-size: 13px; line-height: 1.4; color: var(--text-muted); margin-top: 4px; }

@media (min-width: 700px) {
  .pk-grid { grid-template-columns: 1fr 1fr; gap: var(--pk-gap); }
  .pk-spot {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    overflow: hidden;
    transition: border-color 0.2s ease;
  }
  .pk-spot:hover, .pk-spot--actief { border-color: #3A3A3A; }
  .pk-spot__media { flex: none; width: 100%; aspect-ratio: 3 / 2; border-radius: 0; }
  .pk-spot__body { padding: 18px 20px 22px; }
  .pk-spot .mono-label { margin-bottom: 8px; }
  .pk-spot__naam { font-size: 24px; }
  .pk-spot__tagline { font-size: 15px; margin-top: 6px; }
  .pk-spot__waar { margin-top: 8px; }
}

.pk-verder { margin-top: clamp(56px, 8vw, 88px); padding-top: 28px; border-top: 1px solid var(--divider); }

/* ── De kaart ──
   Zonder JavaScript bestaat hij niet: geen kaartknop, geen leeg vlak. */
.pk-kaart, .pk-zweef { display: none; }

@media (scripting: enabled) {
  /* Tot de kaart laadt: een vlak in --surface met vaste afmetingen */
  .pk-kaart__vlak { position: relative; width: 100%; height: 100%; background: var(--surface); }

  /* Desktop: lijst 7/12, kaart 5/12, sticky onder topbalk en filterbalk */
  @media (min-width: 1100px) {
    .pk-body { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: start; }
    .pk-kaart {
      display: block;
      position: sticky;
      top: calc(var(--pk-top) + 16px);
      height: calc(100svh - var(--pk-top) - 32px);
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .pk-zweef--lijst { display: none; }
  }

  /* Tablet en mobiel: een zwevende knop "Kaart", de kaart schermvullend */
  @media (max-width: 1099.98px) {
    .pk-zweef--kaart { display: inline-flex; }
    .pk-kaart-open .pk-kaart {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 1100;
      height: 100svh;
      padding-top: var(--pk-filter-h);
      background: var(--black);
    }
    .pk-kaart-open .pk-filters { position: fixed; top: 0; left: 0; right: 0; z-index: 1110; }
    .pk-kaart-open .pk-zweef--lijst { display: inline-flex; }
    .pk-kaart-open .pk-zweef--kaart { display: none; }
    .pk-kaart-open { overflow: hidden; }
  }
}

.pk-zweef {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 950;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  /* Oranje met zwarte tekst, zoals .btn-primary, zodat hij opvalt
     (verzoek Jan, 7 oktober 2026). Nooit witte tekst op oranje. */
  border: 1px solid var(--orange);
  background: var(--orange);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: transform 0.2s ease;
}
.pk-zweef:hover { transform: translateX(-50%) translateY(-1px); }
.pk-zweef:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.pk-zweef--lijst { z-index: 1120; }

/* Markers: een klikvlak van 44 px, de stip is kleiner */
.pk-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.pk-marker__stip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cat, var(--orange));   /* categoriekleur, zie js/spots.js */
  border: 2px solid var(--black);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--black);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
}
.pk-marker--tal .pk-marker__stip { width: 24px; height: 24px; }
/* Meer soorten op één adres (een hotel): de stip blijft oranje, met een ring
   van 4 px eromheen, één segment per categorie (--ring, js/spots.js). Een
   kleine markering, geen achtergrond (Brand Guide, Category Colours). De
   zwarte rand van de stip houdt ring en stip uit elkaar. */
.pk-marker--mix .pk-marker__stip { position: relative; }
.pk-marker--mix .pk-marker__stip::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--ring);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  pointer-events: none;
}
.pk-marker:hover .pk-marker__stip,
.pk-marker:focus-visible .pk-marker__stip,
.pk-marker--actief .pk-marker__stip { width: 20px; height: 20px; border-color: var(--text-primary); }
.pk-marker--tal:hover .pk-marker__stip,
.pk-marker--tal:focus-visible .pk-marker__stip,
.pk-marker--tal.pk-marker--actief .pk-marker__stip { width: 28px; height: 28px; }
/* Naam naast de stip (/hotels): DM Mono, klein, in de hotelkleur, op een
   donker plaatje zodat de plaatsnamen van de kaart er niet doorheen lopen
   (zwart, geen categoriekleur als vlak). Raakt hij een ander label of een
   stip, dan links van de stip of weg (js/kaart.js). */
.pk-marker--naam { position: relative; }
.pk-marker__naam {
  position: absolute;
  left: calc(50% + 11px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--cat-hotel);
  padding: 5px 7px 4px;
  border-radius: 4px;
  background: rgba(8, 8, 8, 0.88);
  pointer-events: none;
}
.pk-marker--links .pk-marker__naam { left: auto; right: calc(50% + 11px); }
.pk-marker--boven .pk-marker__naam,
.pk-marker--onder .pk-marker__naam { left: 50%; transform: translateX(-50%); }
.pk-marker--boven .pk-marker__naam { top: auto; bottom: calc(50% + 10px); }
.pk-marker--onder .pk-marker__naam { top: calc(50% + 10px); }
.pk-marker--zonder-naam .pk-marker__naam { visibility: hidden; }
.pk-marker--actief .pk-marker__naam,
.pk-marker:hover .pk-marker__naam { color: var(--text-primary); }
.pk-marker:focus-visible { outline: none; }
.pk-marker--actief { z-index: 2; }

/* Kaartje bij de marker (desktop) en het paneel onderin (mobiel) */
.pk-spotjes { list-style: none; padding: 0; margin: 0; }
.pk-spotjes li + li { border-top: 1px solid var(--divider); }
.pk-spotjes a, .pk-spotjes span.pk-spotjes__naam { display: block; }
.pk-spotjes .mono-label { margin: 10px 0 2px; font-size: 10px; }
.pk-spotjes__naam { font-family: var(--font-serif); font-size: 19px; line-height: 1.2; color: var(--text-primary); padding-bottom: 10px; }
.pk-spotjes a:hover .pk-spotjes__naam { color: var(--orange); }
.pk-spotjes__hotel { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 14px; }

.maplibregl-popup-content {
  background: var(--card) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) !important;
  padding: 8px 44px 8px 18px !important;
  color: var(--text-primary);
  font-family: var(--font-sans);
  box-shadow: 0 12px 32px rgba(0,0,0,0.6) !important;
  min-width: 220px;
}
.maplibregl-popup-tip { border-top-color: var(--card) !important; border-bottom-color: var(--card) !important; }
.maplibregl-popup-close-button {
  width: 44px; height: 44px;
  font-size: 22px; line-height: 1;
  color: var(--text-secondary);
  border-radius: 0 var(--radius-sm) 0 0;
}
.maplibregl-popup-close-button:hover { background: transparent !important; color: var(--orange); }

.pk-blad {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  max-height: 40%;
  overflow-y: auto;
  padding: 12px var(--pk-gutter) 96px;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.pk-blad[hidden] { display: none; }
.pk-blad__sluit {
  position: absolute; top: 4px; right: 4px;
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
  font-size: 22px; color: var(--text-secondary);
}
.pk-blad__sluit:hover { color: var(--orange); }

/* Knoppen en bronvermelding van MapLibre in de huisstijl */
.maplibregl-ctrl-group { background: var(--card) !important; border: 1px solid var(--border); }
.maplibregl-ctrl-group button { width: 36px !important; height: 36px !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--border) !important; }
.maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(1) brightness(0.8); }
.maplibregl-ctrl-attrib {
  background: rgba(8,8,8,0.75) !important;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
}
.maplibregl-ctrl-attrib a { color: var(--text-muted) !important; }
.maplibregl-ctrl-attrib a:hover { color: var(--text-primary) !important; }
.maplibregl-cooperative-gesture-screen { font-family: var(--font-sans); background: rgba(8,8,8,0.7) !important; }

/* ═════════════════════════════════════════════
   DETAILPAGINA /spots/<slug>
   Het magazineformat van de hotelpagina (hotel.css), met deze blokken erbij.
═════════════════════════════════════════════ */
.pk-cover .hb-cover__media { view-transition-name: spot-cover; }
.pk-crumbs { max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter)); }

/* C. Verhaal met "In het kort" ernaast vanaf 900 px (5/12) */
.pk-intro-blok {
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: 0 auto;
  padding: calc(var(--hb-space) * 0.45) var(--hb-gutter) 0;
  display: grid;
  gap: 48px;
}
.pk-intro-blok .hb-text { max-width: var(--hb-col); margin: 0; padding: 0; }
@media (min-width: 900px) {
  .pk-intro-blok { grid-template-columns: 7fr 5fr; column-gap: clamp(32px, 5vw, 72px); align-items: start; }
}

/* D. Tijdens de Hotelnacht */
.pk-tijdens {
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: var(--hb-space) auto 0;
  padding: 0 var(--hb-gutter);
}
.pk-tijdens .panel { max-width: 860px; }

/* E. Ook in dit hotel · F. In de buurt */
.pk-rij {
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: var(--hb-space) auto 0;
  padding: 0 var(--hb-gutter);
}
.pk-rij h2 { margin-bottom: 28px; }
.pk-rij__grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .pk-rij__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .pk-rij__grid { grid-template-columns: repeat(3, 1fr); }
  .pk-rij__grid--vier { grid-template-columns: repeat(4, 1fr); }
}
.pk-rij__meer { margin-top: 24px; }
.pk-rij__meer .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }

.pk-klein {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.pk-klein:hover { border-color: #3A3A3A; }
.pk-klein__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface); }
.pk-klein__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-klein__body { padding: 16px 18px 20px; }
.pk-klein .mono-label { margin-bottom: 8px; }
.pk-klein__naam { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.15; overflow-wrap: break-word; }
.pk-klein__naam a { transition: color 0.2s ease; }
.pk-klein__naam a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pk-klein__naam a:focus-visible { outline: none; }
.pk-klein__naam a:focus-visible::after { outline: 2px solid rgba(255,95,0,0.65); outline-offset: -2px; border-radius: var(--radius-sm); }
.pk-klein:hover .pk-klein__naam a { color: var(--orange); }
.pk-klein__tagline { font-size: 14px; line-height: 1.35; color: var(--text-secondary); margin-top: 6px; }
.pk-klein__afstand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--text-muted); margin-top: 10px; }

/* G. Alle spots */
.pk-alle {
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: var(--hb-space) auto var(--hb-space);
  padding: 28px var(--hb-gutter) 0;
}

/* C2. Foto's: het duo en vol beeld van het hotelverhaal (hotel.css) */
.pk-fotos {
  display: flex;
  flex-direction: column;
  gap: var(--hb-space);
  margin-top: var(--hb-space);
  overflow-x: clip;
}