/*
  hotel-night.com/hotels/<slug> · het magazineformat
  Bovenop /css/site.css. Geen nieuwe kleuren: alleen typografische schaal
  en witruimte, en die staan hieronder als tokens.

  Voorbereid op animatie (briefing §8): de basis-CSS zet nooit opacity: 0
  of een transform die iets buiten beeld plaatst. Beweging komt later alleen
  onder @media (prefers-reduced-motion: no-preference), via de data-anim- en
  data-block-haakjes in de HTML.
*/

:root {
  /* Typografische schaal */
  --hb-title:    clamp(44px, 7.2vw, 96px);    /* H1 op de cover */
  --hb-tagline:  clamp(23px, 2.2vw, 32px);   /* tagline op de cover, Instrument Sans */
  --hb-lead:     20px;                        /* opening, 24px vanaf 900px */
  --hb-body:     17px;                        /* lopende tekst, 18px vanaf 900px */
  --hb-leading:  1.65;
  --hb-dropcap-lines: 2;                      /* initiaal, 3 regels vanaf 900px */
  --hb-card-title: clamp(26px, 2.6vw, 36px);
  --hb-list-name:  17px;

  /* Witruimte */
  --hb-gutter:   20px;                        /* zijmarge tekst, mobiel */
  --hb-col:      640px;                       /* leeskolom */
  --hb-wide:     1200px;                      /* panelen, kaarten, lijst */
  --hb-bleed:    1600px;                      /* volle beelden, daarbuiten --black */
  --hb-space-m:  clamp(72px, 18vw, 96px);     /* tussen blokken, mobiel */
  --hb-space-l:  clamp(120px, 11vw, 160px);   /* tussen blokken, desktop */
  --hb-space:    var(--hb-space-m);
  --hb-duo-offset: clamp(80px, 8vw, 120px);   /* hoeveel lager het tweede duobeeld staat */
  --hb-caption-gap: 12px;
}
@media (min-width: 700px) {
  :root { --hb-gutter: 5vw; }
}
@media (min-width: 900px) {
  :root {
    --hb-lead: 24px;
    --hb-body: 18px;
    --hb-dropcap-lines: 3;
    --hb-space: var(--hb-space-l);
  }
}

/* ─────────────────────────────────────────────
   A. TOPBALK NA DE COVER
   Op deze pagina staat de balk niet óver de cover maar eronder, en is hij
   sticky: bij het scrollen komt hij mee omhoog en blijft hij plakken, met de
   donkere achtergrond van arrangementen.html. Zo schuift de titel van de
   cover nooit onder het logo door (besluit Jan, 23 september 2026), en is
   daar ook geen losse strook of scrim voor nodig.
───────────────────────────────────────────── */
.site-nav { position: sticky; }

/* ─────────────────────────────────────────────
   B. COVER
───────────────────────────────────────────── */
.hb-cover {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
}
/* Beeldlaag, los van de tekstlaag (§8.4). De view-transition-name staat in
   de HTML: hotel-cover-<slug>, dezelfde naam als de tegel op /hotels
   (briefing hoteloverzicht §8). Een spotpagina zet spot-cover (spots.css). */
.hb-cover__media {
  position: absolute; inset: 0; z-index: -2;
}
.hb-cover__media picture,
.hb-cover__media img { display: block; width: 100%; height: 100%; }
.hb-cover__media img {
  object-fit: cover;
  /* --focus-portrait: het focuspunt binnen de staande uitsnede.
     --focus: hetzelfde punt in het liggende origineel. */
  object-position: var(--focus-portrait, 50% 50%);
}
@media (min-width: 700px) {
  .hb-cover__media img { object-position: var(--focus, 50% 50%); }
}

/* Scrim: één verticaal verloop over de volle breedte, op elk schermformaat
   hetzelfde. Geen ellips en geen vorm die je als vlek ziet (besluit Jan,
   23 september 2026) — alleen de onderrand loopt donker weg, zoals bij een
   magazineomslag. Hoogte in pixels, want het tekstblok is op elk scherm
   ongeveer even hoog; de hoogte van de cover zegt daar niets over.

   GEEN rekenfuncties (min(), calc()) binnen de gradient: Safari rekent die
   anders uit dan Chrome. Daarom een vlak dat met gewone CSS wordt geplaatst
   en gemeten, met stops in procenten.

   Gemeten per tekstregel tegen de slechtste pixel van de foto eronder, van
   320x640 t/m 2560x1440: witte regels >= 5,1:1. Het oranje accentwoord in de
   H1 zit op 3,89 - 4,36:1: dat haalt de WCAG-eis voor grote tekst (3:1), maar
   niet de 4,5:1 die de briefing per tekstregel vraagt. Bewuste keuze van Jan,
   23 september 2026, om de foto licht te houden (zie README). */
.hb-cover::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0; right: 0; bottom: 0;
  height: 560px;
  background: linear-gradient(0deg,
    rgba(8,8,8,0.90) 0%, rgba(8,8,8,0.80) 54%, rgba(8,8,8,0) 100%);
}
/* Voor een hotel waarvan de foto onderin lichter is: "scrim": "sterk" */
.hb-cover--sterk::before {
  height: 640px;
  background: linear-gradient(0deg,
    rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.86) 54%, rgba(8,8,8,0) 100%);
}
/* Voor een lichte foto met een lange titel (3 oktober 2026): "scrim": "extra".
   Hoger en donkerder, zodat ook een titel van drie regels op een lichte lucht
   4,5:1 haalt. Alleen gebruiken als sterk gemeten niet genoeg is. */
.hb-cover--extra::before {
  height: 820px;
  background: linear-gradient(0deg,
    rgba(8,8,8,0.95) 0%, rgba(8,8,8,0.90) 55%, rgba(8,8,8,0) 100%);
}

.hb-cover__content {
  width: 100%;
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: 0 auto;
  padding: 0 var(--hb-gutter) clamp(64px, 11svh, 112px);
}
/* Het label breekt op een telefoon altijd op dezelfde plek, in welk
   lettertype ook: anders verspringt de cover als DM Mono binnenkomt (CLS). */
.hb-label-2 { white-space: nowrap; }
@media (max-width: 699px) {
  .hb-sep { display: none; }
  .hb-label-2 { display: block; }
}
.hb-cover .mono-label {
  /* Wit, niet oranje (besluit Jan, 23 september 2026). Oranje haalt 4,5:1
     alleen op een bijna zwarte ondergrond; wit heeft veel minder nodig, dus
     de foto kan lichter blijven. Oranje blijft op het accentwoord in de H1. */
  color: var(--text-primary);
  margin-bottom: 18px;
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.hb-cover h1 {
  font-size: var(--hb-title);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 7.4em;               /* em, niet ch: ch verandert mee met het lettertype */
  overflow-wrap: break-word;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
/* Breed scherm: een bredere maat, zodat de titel lager blijft en de gevel vrij. */
@media (min-width: 900px) { .hb-cover h1 { max-width: 11.5em; } }
.hb-cover__tagline {
  /* Instrument Sans, niet de serif cursief: besluit Jan, 23 september 2026. */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--hb-tagline);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin-top: 18px;
  text-shadow: 0 1px 16px rgba(0,0,0,0.6);
}
/* Scrollhint: alleen een dunne lijn. Later het eerste element met beweging. */
.hb-cover__hint {
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: clamp(36px, 6svh, 56px);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.7));
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   TERUG NAAR BOVEN
   Een sticky strook van nul pixels hoog als eerste kind van <main>: daardoor
   staat de knop pas in beeld zodra de cover voorbij is, en schuift hij bij de
   footer weer weg. De link gaat naar #inhoud, dus je landt bovenaan het
   verhaal mét het menu in beeld (dat plakt daar). Geen JS.
───────────────────────────────────────────── */
.hb-top {
  position: sticky;
  bottom: 24px;
  height: 0;
  z-index: 900;
  pointer-events: none;
}
.hb-top__knop {
  position: absolute;
  right: var(--hb-gutter);
  bottom: 0;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hb-top__knop:hover { color: var(--orange); border-color: #3A3A3A; }
/* Op een telefoon alleen de pijl: de knop zweeft over de tekst, dus hoe
   kleiner hoe beter. De naam blijft in de code staan voor schermlezers. */
@media (max-width: 599px) {
  .hb-top__knop { width: 48px; height: 48px; min-height: 48px; padding: 0; justify-content: center; gap: 0; font-size: 14px; }
  .hb-top__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ─────────────────────────────────────────────
   C. KRUIMELPAD, direct onder de cover
───────────────────────────────────────────── */
.hb-crumbs {
  max-width: calc(var(--hb-col) + 2 * var(--hb-gutter));
  margin: 0 auto;
  padding: 24px var(--hb-gutter) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
}
.hb-crumbs .crumbs li[aria-current] { color: var(--text-muted); }
.hb-jump {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.hb-jump:hover { color: var(--orange); }

/* ─────────────────────────────────────────────
   D. HET VERHAAL
───────────────────────────────────────────── */
.hb-story {
  display: flex;
  flex-direction: column;
  gap: var(--hb-space);
  padding-top: calc(var(--hb-space) * 0.45);
  overflow-x: clip;
}

/* opening + tekst */
.hb-text {
  width: 100%;
  max-width: calc(var(--hb-col) + 2 * var(--hb-gutter));
  margin: 0 auto;
  padding: 0 var(--hb-gutter);
}
.hb-text p {
  font-size: var(--hb-body);
  line-height: var(--hb-leading);
  color: var(--text-secondary);
}
.hb-text--opening p {
  font-size: var(--hb-lead);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
/* Initiaal: alleen opmaak, de tekens blijven gelijk. */
.hb-text--opening p::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--orange);
  /* Terugval zonder initial-letter: zo groot dat hij het aantal regels vult. */
  font-size: calc(var(--hb-lead) * 1.55 * var(--hb-dropcap-lines) * 1.18);
  line-height: 0.8;
  margin: 0.06em 0.1em 0 -0.02em;
}
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .hb-text--opening p::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0 0.12em 0 0;
    -webkit-initial-letter: var(--hb-dropcap-lines);
    initial-letter: var(--hb-dropcap-lines);
  }
}

/* Beelden: elke figure knipt af op zijn eigen vlak, zodat zoom, parallax en
   uitsnij-reveals later binnen het beeld blijven (§8.1). */
.hb-media { position: relative; overflow: hidden; }
.hb-media__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--card);
}
.hb-media__frame picture,
.hb-media__frame img { display: block; width: 100%; height: 100%; }
.hb-media__frame img { object-fit: cover; }
.hb-media figcaption {
  margin-top: var(--hb-caption-gap);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-secondary);          /* 9,6:1 op --black */
}
/* Beelden die tot de rand lopen: het onderschrift springt in naar de tekstmarge. */
.hb-media--bleed figcaption { padding: 0 var(--hb-gutter); }

/* vol */
.hb-vol {
  width: 100%;
  max-width: var(--hb-bleed);
  margin: 0 auto;
}

/* duo: mobiel eerst. Het eerste van rand tot rand, het tweede op 75%, rechts. */
.hb-duo {
  width: 100%;
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: 0 auto;
}
.hb-duo > .hb-media + .hb-media {
  width: 75%;
  margin: 28px 0 0 auto;
}
@media (min-width: 900px) {
  .hb-duo {
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: clamp(24px, 3vw, 48px);
    align-items: start;
    padding: 0 var(--hb-gutter);
  }
  .hb-duo > .hb-media + .hb-media {
    width: auto;
    margin: var(--hb-duo-offset) 0 0;
  }
  .hb-duo .hb-media--bleed figcaption { padding: 0; }
}

/* ─────────────────────────────────────────────
   E. DE OUTLETS — eten, drinken en ontspannen
   Hetzelfde magazineritme als het verhaal: brede rijen die om en om links en
   rechts staan, geen kaarten. De sectie staat op een eigen achtergrondband
   (--surface), zodat je ziet dat hier iets anders begint. Een outlet zonder eigen url krijgt geen link en ook geen
   vervangende verwijzing (briefing §7.E).
───────────────────────────────────────────── */
.hb-outlets {
  margin-top: var(--hb-space);
  padding: var(--hb-space) 0;
  /* --surface, niet --card: het verschil met --black moet te zien zijn. */
  background: var(--surface);
}
.hb-outlets__inner {
  width: 100%;
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: 0 auto;
}
.hb-outlets h2 {
  padding: 0 var(--hb-gutter);
  margin-bottom: clamp(40px, 6vw, 72px);
}
.hb-outlets__list {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 9vw, 104px);
}

.hb-outlet { display: grid; gap: 20px; }
/* Op mobiel loopt het beeld van rand tot rand, net als in het verhaal; de
   tekst houdt de leesmarge. */
.hb-outlet__media { overflow: hidden; background: var(--surface); }
.hb-outlet__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.hb-outlet__body { padding: 0 var(--hb-gutter); }
.hb-outlet .mono-label { margin-bottom: 12px; }
.hb-outlet__naam {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  color: var(--text-primary);
  overflow-wrap: break-word;
}
.hb-outlet__tagline {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.3;
  color: var(--text-secondary);
  margin-top: 8px;
}
.hb-outlet__tekst {
  font-size: var(--hb-body);
  line-height: var(--hb-leading);
  color: var(--text-secondary);
  margin-top: 18px;
  max-width: 38em;
}
.hb-outlet__link { margin-top: 16px; }
.hb-outlet__link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--orange);
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.hb-outlet__link a:hover { color: var(--text-primary); }
.hb-outlets__note {
  padding: 0 var(--hb-gutter);
  margin-top: clamp(48px, 7vw, 80px);
  max-width: calc(640px + 2 * var(--hb-gutter));
}

/* Spots zonder beeld: een raster van tekstkaarten (briefing spots v2 §8).
   Geen noodoplossing maar een eigen vorm: --card op de --surface-band, net
   als de kaarten op /spots. Eén kolom op mobiel, twee vanaf 700 px, drie
   vanaf 1100 px; de laatste rij lijnt links uit (gewoon grid). Hoogte volgt
   de inhoud per rij; geen lege beeldvlakken. */
.hb-tekstkaarten {
  display: grid;
  gap: 16px;
  padding: 0 var(--hb-gutter);
}
.hb-tekstkaarten--na-rijen { margin-top: clamp(56px, 9vw, 104px); }
.hb-tekstkaart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 22px 26px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.hb-tekstkaart .mono-label { margin-bottom: 12px; }
.hb-tekstkaart__naam {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.1;
  color: var(--text-primary);
  overflow-wrap: break-word;
}
.hb-tekstkaart__tagline {
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-secondary);
  margin-top: 8px;
}
.hb-tekstkaart__tekst {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 16px;
}
/* De link onderaan de kaart, ook als de tekst korter is dan bij de buren */
.hb-tekstkaart__link { margin-top: auto; padding-top: 12px; }
.hb-tekstkaart__link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--orange);
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.hb-tekstkaart__link a:hover { color: var(--text-primary); }
@media (min-width: 700px) {
  .hb-tekstkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1100px) {
  .hb-tekstkaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .hb-outlets__inner { padding: 0 var(--hb-gutter); }
  .hb-outlets h2,
  .hb-tekstkaarten,
  .hb-outlet__body { padding: 0; }
  .hb-outlet {
    grid-template-columns: 7fr 5fr;
    column-gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }
  /* Om en om: even rijen met het beeld rechts. */
  .hb-outlet:nth-child(even) .hb-outlet__media { grid-column: 2; grid-row: 1; }
  .hb-outlet:nth-child(even) .hb-outlet__body  { grid-column: 1; grid-row: 1; }
}

/* ─────────────────────────────────────────────
   F. DIT HOTEL TIJDENS DE HOTELNACHT
───────────────────────────────────────────── */
.hb-info {
  width: 100%;
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: var(--hb-space) auto 0;
  padding: 0 var(--hb-gutter);
  display: grid;
  gap: 20px;
  align-items: start;
}
@media (min-width: 900px) {
  .hb-info { grid-template-columns: 1fr 1fr; }
}
.hb-info .panel-label .accent { font-style: italic; }

.facts { display: grid; grid-template-columns: 1fr; }
.facts dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  line-height: 1.4;
  padding: 16px 0 4px;
  border-top: 1px solid var(--divider);
}
.facts dt:first-of-type { border-top: none; padding-top: 0; }
.facts dd { font-size: 16px; line-height: 1.55; color: var(--text-primary); padding-bottom: 16px; overflow-wrap: anywhere; }
.facts dd:last-of-type { padding-bottom: 0; }
.facts .facts__soort { margin: 0; line-height: inherit; }
/* Logo van het merk van de toestellen (Technogym), klein en ongewijzigd, als
   link naar het merk. Geen onderstreping; bij hover en focus iets lichter. */
.merk-logo { display: inline-block; line-height: 0; border-radius: 4px; transition: opacity 0.2s ease; }
.merk-logo img { height: 24px; width: auto; }
.merk-logo:hover { opacity: 0.85; }
.merk-logo:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
/* In de spotlijst van de hotelpagina: achter de woorden "Toestellen van" */
.hb-outlet__merk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-secondary);
}
.hb-outlet__merk .merk-logo img { height: 22px; }
@media (min-width: 1100px) {
  .facts { grid-template-columns: 150px 1fr; column-gap: 24px; }
  .facts dt,
  .facts dd { padding: 16px 0; border-top: 1px solid var(--divider); }
  .facts dt { padding-top: 20px; }
  .facts dt:first-of-type,
  .facts dd:first-of-type { border-top: none; padding-top: 0; }
  .facts dt:first-of-type { padding-top: 4px; }
  .facts dd:last-of-type { padding-bottom: 0; }
.facts .facts__soort { margin: 0; line-height: inherit; }
/* Logo van het merk van de toestellen (Technogym), klein en ongewijzigd, als
   link naar het merk. Geen onderstreping; bij hover en focus iets lichter. */
.merk-logo { display: inline-block; line-height: 0; border-radius: 4px; transition: opacity 0.2s ease; }
.merk-logo img { height: 24px; width: auto; }
.merk-logo:hover { opacity: 0.85; }
.merk-logo:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
/* In de spotlijst van de hotelpagina: achter de woorden "Toestellen van" */
.hb-outlet__merk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-secondary);
}
.hb-outlet__merk .merk-logo img { height: 22px; }
}
.facts a { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; }
.facts a:hover { color: var(--orange); text-decoration-color: currentColor; }
/* Volgen: de merkiconen uit BRANDING/icons, als masker. Daardoor volgt de
   kleur de tekst (grijs, oranje bij hover) met één bestand per kanaal, in
   plaats van drie kleurversies. */
.hb-follow { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; }
.hb-follow a { display: inline-flex; align-items: center; gap: 8px; }
.hb-ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: var(--ico); mask-image: var(--ico);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.hb-ico--facebook  { --ico: url(/logos/icons/facebook.svg); }
.hb-ico--instagram { --ico: url(/logos/icons/instagram.svg); }
.hb-ico--linkedin  { --ico: url(/logos/icons/linkedin.svg); }
.hb-ico--tiktok    { --ico: url(/logos/icons/tiktok.svg); }
.hb-ico--website   { --ico: url(/logos/icons/website.svg); }

.hb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}
.hb-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.hb-note a {
  color: var(--orange);
  white-space: nowrap;      /* "de ticketshop" blijft bij elkaar */
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hb-note a:hover { color: var(--text-primary); }
.hb-note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);                /* 5,4:1 op --card */
  margin-top: 28px;
}

/* ─────────────────────────────────────────────
   G. VOLGEND VERHAAL
   Tekstkaart en beeldkaart hebben exact dezelfde afmetingen: komt het
   exterieur later binnen, dan verspringt er niets.
───────────────────────────────────────────── */
.hb-next {
  width: 100%;
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: var(--hb-space) auto 0;
  padding: 0 var(--hb-gutter);
  display: grid;
  gap: 20px;
}
@media (min-width: 700px) {
  .hb-next { grid-template-columns: 1fr 1fr; }
}
.hb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  transition: border-color 0.2s ease;
}
@media (min-width: 900px) {
  .hb-card { aspect-ratio: 3 / 2; }
}
.hb-card:hover { border-color: #3A3A3A; }
.hb-card__media { position: absolute; inset: 0; z-index: -2; }
.hb-card__media picture,
.hb-card__media img { display: block; width: 100%; height: 100%; }
.hb-card__media img { object-fit: cover; }
.hb-card--beeld::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,8,0) 30%, rgba(8,8,8,0.7) 62%, rgba(8,8,8,0.95) 100%);
}
/* Tekstkaart zonder exterieur: een grote initiaal als beeldvervanger. */
.hb-card__mark {
  position: absolute;
  top: 0.02em; right: 0.12em;
  font-family: var(--font-serif);
  font-size: clamp(160px, 44vw, 260px);
  line-height: 1;
  color: var(--elevated);
  pointer-events: none;
  transition: color 0.2s ease;
}
@media (min-width: 700px) { .hb-card__mark { font-size: clamp(160px, 20vw, 260px); } }
.hb-card:hover .hb-card__mark { color: var(--surface); }
.hb-card__body { padding: clamp(22px, 3vw, 36px); }
.hb-card .mono-label { margin-bottom: 12px; }
.hb-card__name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--hb-card-title);
  line-height: 1.1;
  color: var(--text-primary);
  overflow-wrap: break-word;
  transition: color 0.2s ease;
}
.hb-card:hover .hb-card__name { color: var(--orange); }
.hb-card__tagline {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-secondary);
}

/* ─────────────────────────────────────────────
   H. ALLE HOTELS, de inhoudsopgave
───────────────────────────────────────────── */
.hb-all {
  width: 100%;
  max-width: calc(var(--hb-wide) + 2 * var(--hb-gutter));
  margin: var(--hb-space) auto var(--hb-space);
  padding: 0 var(--hb-gutter);
}
.hb-all h2 { margin-bottom: 32px; }
.hb-all ol {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 32px;
}
@media (min-width: 600px)  { .hb-all ol { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .hb-all ol { grid-template-columns: 1fr 1fr 1fr; } }
/* Compact: een kleine tegel naast de naam, zodat er meer hotels tegelijk in
   beeld staan (verzoek Jan, 23 september 2026). */
.hb-all a,
.hb-all [aria-current] {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 8px 0;
  border-top: 1px solid var(--divider);
}
.hb-all__media {
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  width: clamp(72px, 7vw, 92px);
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--surface);
}
.hb-all__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}
.hb-all a:hover .hb-all__media img { opacity: 0.85; }
.hb-all__tekst { min-width: 0; }
.hb-all__name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--hb-list-name);
  line-height: 1.15;
  color: var(--text-primary);
  transition: color 0.2s ease;
}
.hb-all__tagline {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-secondary);
}
.hb-all a:hover .hb-all__name,
.hb-all [aria-current] .hb-all__name { color: var(--orange); }

/* ─────────────────────────────────────────────
   §8.2 Hier komt later de beweging, en alleen hier:

   @media (prefers-reduced-motion: no-preference) {
     @supports (animation-timeline: view()) { … }
     .anim-ready [data-anim="…"] { … }
   }

   En de overgang tussen hotels, één regel:
   @view-transition { navigation: auto; }
───────────────────────────────────────────── */