/*
  hotel-night.com/hotels · het hoteloverzicht
  Bovenop /css/site.css en /css/spots.css (kop, markers, kaartje, paneel
  onderin en de serif-regel met pijl komen daarvandaan).

  Een inhoudsopgave in magazinestijl: de gevels als grote tegels, alle even
  groot, alfabetisch. Geen tekst over de gevel, dus geen scrim.

  Geen nieuwe kleuren: alles komt uit de tokens van site.css. Nieuwe maten
  staan hieronder als tokens. Geen opacity: 0 en geen transform in de basis:
  beweging komt later, via data-anim en view-transition-name (README).

  De knoppen Lijst/Kaart en de kaart bestaan alleen met JavaScript. Daarvoor
  is geen script in de kop nodig: (scripting: enabled) zet ze aan bij de
  eerste weergave, dus er verspringt niets als hotels.js binnenkomt.
*/

:root {
  --hk-tegel-gap:  clamp(72px, 18vw, 96px);   /* tussen de tegels op mobiel, = --hb-space-m */
  --hk-naam:       clamp(26px, 7vw, 32px);    /* naam op de tegel */
}
@media (min-width: 700px) {
  :root { --hk-tegel-gap: 64px; --hk-naam: clamp(26px, 3vw, 32px); }
}

.hk-pagina .site-nav { position: sticky; }

/* ── B. Kop: die van /spots (.pk-kop), met een eigen H1 ── */
.hk-kop h1 { max-width: 13em; }

/* ── C. Lijst · Kaart ── */
.hk-weergave-rij {
  max-width: calc(var(--pk-wide) + 2 * var(--pk-gutter));
  margin: 0 auto;
  padding: 0 var(--pk-gutter);
}
.hk-weergave { display: none; }
@media (scripting: enabled) {
  .hk-weergave {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--card);
  }
}
.hk-weergave button {
  height: 44px;
  min-width: 88px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hk-weergave button:hover { color: var(--text-primary); }
/* Actief: oranje rand en oranje tekst. Nooit witte tekst op oranje. */
.hk-weergave button[aria-pressed="true"] { color: var(--orange); border-color: var(--orange); }

/* ── D. De tegels ── */
.hk-lijst {
  max-width: calc(var(--pk-wide) + 2 * var(--pk-gutter));
  margin: 0 auto;
  padding: 32px var(--pk-gutter) 0;
}
.hk-tegels {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--hk-tegel-gap) var(--pk-gap);
}
.hk-tegels[hidden] { display: none; }
@media (min-width: 700px)  { .hk-tegels { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .hk-tegels { grid-template-columns: repeat(3, 1fr); column-gap: 32px; } }

.hk-tegel { position: relative; }
/* Mobiel van rand tot rand, de tekst op de marge; vanaf 700 px in de kolom */
.hk-tegel__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0 calc(-1 * var(--pk-gutter));
  background: var(--surface);
}
@media (min-width: 700px) { .hk-tegel__media { margin: 0; border-radius: var(--radius-sm); } }
.hk-tegel__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hk-tegel__body { padding-top: 20px; }
.hk-tegel .mono-label { margin-bottom: 10px; }
.hk-tegel__naam {
  font-size: var(--hk-naam);
  line-height: 1.1;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
}
/* Eén link per tegel, met de naam als ankertekst; het klikvlak is uitgerekt
   over de hele tegel. Hover: alleen de naam krijgt de onderstreping. */
.hk-tegel__naam a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  transition: text-decoration-color 0.2s ease;
}
.hk-tegel__naam a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.hk-tegel:hover .hk-tegel__naam a { text-decoration-color: currentColor; }
.hk-tegel__naam a:focus-visible { outline: none; text-decoration-color: currentColor; }
.hk-tegel__naam a:focus-visible::after {
  outline: 2px solid rgba(255,95,0,0.65);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}
/* Taglines in Instrument Sans (besluit Jan, 23 september 2026) */
.hk-tegel__tagline {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-secondary);
}
/* De spotregel: kleine letters in de bron, in de stijl van .mono-label */
.hk-spotregel {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── E. De kaart ──
   Zonder JavaScript bestaat hij niet: geen knop, geen leeg vlak. */
.hk-kaart { display: none; }
.hk-kaart__terug { display: none; }

@media (scripting: enabled) {
  .hk-kaart__vlak { position: relative; width: 100%; height: 100%; background: var(--surface); }

  /* Desktop: kaart 8/12, compacte lijst 4/12, sticky onder de topbalk */
  @media (min-width: 1100px) {
    .hk-kaartmodus .hk-kaart {
      display: grid;
      grid-template-columns: 8fr 4fr;
      gap: 32px;
      position: sticky;
      top: calc(var(--nav-h) + 16px);
      height: calc(100svh - var(--nav-h) - 32px);
    }
    .hk-kaart__kaart {
      position: relative;
      height: 100%;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
    }
  }

  /* Tablet en mobiel: de kaart schermvullend, bovenin een knop Lijst */
  @media (max-width: 1099.98px) {
    .hk-kaart-open .hk-kaart {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 1100;
      height: 100svh;
      background: var(--black);
    }
    .hk-kaart__kaart { position: relative; height: 100%; }
    .hk-kaart-open .hk-compact { display: none; }
    .hk-kaart-open .hk-kaart__terug { display: inline-flex; }
    .hk-kaart-open { overflow: hidden; }
  }
}

.hk-kaart__terug {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  z-index: 10;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 44px;
  padding: 0 22px;
  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;
}
.hk-kaart__terug:hover { transform: translateY(-1px); }
.hk-kaart__terug:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }

/* Compacte lijst naast de kaart, in de opmaak van "Alle deelnemende hotels"
   op de hotelpagina: kleine tegel, naam, buurt. Scrolt binnen de kolom. */
.hk-compact { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.hk-compact ol { list-style: none; padding: 0 4px 0 0; }
.hk-compact a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 8px 0;
  border-top: 1px solid var(--divider);
}
.hk-compact li:first-child a { border-top: 0; padding-top: 0; }
.hk-compact__media {
  flex: 0 0 auto;
  width: 92px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface);
}
.hk-compact__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-compact__tekst { min-width: 0; }
.hk-compact__naam {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.15;
  color: var(--text-primary);
  transition: color 0.2s ease;
}
.hk-compact__buurt {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hk-compact a:hover .hk-compact__naam,
.hk-compact a:focus-visible .hk-compact__naam,
.hk-compact--actief .hk-compact__naam { color: var(--orange); }

/* Het kaartje bij een marker: gevel, naam, buurt, spotregel, link */
.maplibregl-popup-content:has(.hk-kaartje) { padding: 12px 12px 6px !important; width: 260px; }
.maplibregl-popup-content:has(.hk-kaartje) .maplibregl-popup-close-button {
  top: 12px; right: 12px;
  border-radius: 0 10px 0 10px;
  background: rgba(8,8,8,0.8);
  color: var(--text-primary);
}
.hk-kaartje__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--surface); margin-bottom: 12px; }
.hk-kaartje__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-kaartje .mono-label { margin-bottom: 4px; font-size: 10px; }
.hk-kaartje__naam { font-family: var(--font-serif); font-size: 21px; line-height: 1.15; color: var(--text-primary); }
.hk-kaartje .hk-spotregel { margin-top: 6px; font-size: 10px; }
.hk-kaartje__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

/* Op mobiel in het paneel onderin: beeld links, tekst rechts */
.hk-pagina .pk-blad { padding-bottom: max(16px, env(safe-area-inset-bottom)); padding-top: 16px; }
.pk-blad .hk-kaartje { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; padding-right: 32px; align-items: start; }
.pk-blad .hk-kaartje__media { grid-row: 1 / span 4; margin-bottom: 0; }

/* ── F. Verder ── */
.hk-verder {
  max-width: calc(var(--pk-wide) + 2 * var(--pk-gutter));
  margin: clamp(72px, 10vw, 120px) auto clamp(72px, 10vw, 120px);
  padding: 0 var(--pk-gutter);
}
.hk-verder__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--divider);
}