/* ══════════════════════════════════════════════════════════════════════════
   mobile.css — mobiele override-laag voor basboudewijn.nl
   ──────────────────────────────────────────────────────────────────────────
   ⚠ AAN DE PROJECT MANAGER — twee verplichte koppelstappen, anders werkt dit
     bestand niet:

   1) LAAD DIT BESTAND ALS ALLERLAATSTE STYLESHEET, NÁ rebuild.css én
      v3-pages.css (en, op the-journey, ná v3-globe.css). Het bevat puur
      overrides die op de bestaande regels moeten WINNEN; staat het ervóór, dan
      verliest het de cascade. Voorbeeld voor élke publieke HTML:
          <link rel="stylesheet" href="/css/rebuild.css?v=10">
          <link rel="stylesheet" href="/css/v3-pages.css?v=25">
          <link rel="stylesheet" href="/css/v3-globe.css?v=17">   (waar van toepassing)
          <link rel="stylesheet" href="/css/mobile.css?v=1">       ← LAATSTE

   2) ZET viewport-fit=cover IN DE VIEWPORT-META OP ÉLKE PAGINA:
          <meta name="viewport"
                content="width=device-width, initial-scale=1, viewport-fit=cover">
      Zonder viewport-fit=cover rapporteert iOS álle env(safe-area-inset-*) als 0
      en is alle safe-area-code hieronder (en in de andere CSS) dood.

   ──────────────────────────────────────────────────────────────────────────
   SCOPE: alleen mobiele ergonomie — safe-area-insets, 100dvh, ≥44px touch-doelen,
   overflow. GEEN kleur-/typografie-identiteit gewijzigd. Alles binnen media-/
   supports-queries zodat desktop volledig ongemoeid blijft. De ?v= hoort bij dit
   bestand opgehoogd te worden bij elke wijziging (projectregel).
   Bron: review/mobile.md (mobiele audit, 2026-06-23).
   ══════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1 · SAFE-AREA INSETS — nu viewport-fit=cover aanstaat, geven we de
   fixed chrome-lagen notch-/home-indicator-ademruimte. We gebruiken
   max()/calc() zodat op toestellen ZONDER notch (inset=0) de bestaande
   maatvoering exact behouden blijft.
   ════════════════════════════════════════════════════════════════ */

/* ── NAV (gedeelde fixed bovenbalk) — notch boven + zijkant-insets (landscape) ── */
.nav{
  padding-top:max(18px, calc(14px + env(safe-area-inset-top, 0px)));
  padding-left:max(clamp(22px,5vw,52px), env(safe-area-inset-left, 0px));
  padding-right:max(clamp(22px,5vw,52px), env(safe-area-inset-right, 0px));
}

/* ── NAV-LAYOUT op smal scherm: NL/EN-pill + hamburger nooit geknepen ──────────
   Op ≤720px is .nav-links de off-canvas slide-out (position:fixed), dus de
   ZICHTBARE flexrij is: merknaam · taal-pill · hamburger. Op ~360px knelde de
   118px-pill (rebuild.css 355: gap:26px nowrap) tegen merknaam en hamburger.
   Fix: kleinere nav-gap, pill als compacte segmented control die mag krimpen,
   en een bewuste groepering rechts (pill + hamburger samen, margin-left:auto),
   zodat de merknaam links ademt en niets tegen elkaar of de schermrand plakt.
   Puur layout — kleuren/typografie/identiteit van de pill blijven van
   rebuild.css. ── */
@media (max-width:720px){
  .nav{gap:12px}

  /* merknaam mag krimpen i.p.v. de rij op te rekken, maar nooit afkappen */
  .nav-name{flex:0 1 auto;min-width:0}

  /* taal-pill: rechts uitgelijnd, compacter, krimpt mee als het echt moet —
     blijft een nette segmented control en nooit onder z'n tap-zone (44px). */
  .lang{
    flex:0 0 auto;margin-left:auto;
    min-height:44px;padding:2px;
  }
  .lang::before,.lang::after{
    min-width:30px;padding:0 9px;        /* van 34/11 → strakker maar leesbaar */
  }

  /* hamburger sluit direct op de pill aan (eigen margin-left:auto laten varen,
     anders zou de pill van de hamburger wegduwen i.p.v. samen rechts staan). */
  .nav-toggle{margin-left:0;flex:0 0 auto}
}

/* ── extra-smal (~360px en kleiner, iPhone mini/SE): pill nóg compacter zodat
   merknaam + pill + hamburger comfortabel op één rij passen. ── */
@media (max-width:380px){
  .nav{gap:10px;padding-left:max(16px, env(safe-area-inset-left, 0px));
    padding-right:max(16px, env(safe-area-inset-right, 0px))}
  .lang::before,.lang::after{min-width:26px;padding:0 7px;letter-spacing:.06em}
}

/* ── Slide-out menupaneel — start onder de notch i.p.v. de vaste 84px-gok,
   en houdt rechts-inset (landscape-notch) vrij. Alleen waar het paneel het
   slide-out paneel ís (≤720px, zoals rebuild.css het zet). ── */
@media (max-width:720px){
  .nav-links{
    padding-top:max(84px, calc(70px + env(safe-area-inset-top, 0px)));
    padding-right:max(28px, calc(28px + env(safe-area-inset-right, 0px)));
    padding-bottom:max(28px, calc(28px + env(safe-area-inset-bottom, 0px)));
  }
}

/* ── Site-brede speler (.bbp) — onderrand boven de home-indicator.
   rebuild.css regelt dit al binnen de ≤560px-uitklap-query; we borgen de
   compacte/idle-staat én bredere telefoons (≤720px) hier eveneens. ── */
@media (max-width:720px){
  .bbp-inner{
    padding-left:max(clamp(14px,4vw,28px), env(safe-area-inset-left, 0px));
    padding-right:max(clamp(14px,4vw,28px), env(safe-area-inset-right, 0px));
  }
  .bbp.bbp-min .bbp-inner{
    padding-bottom:max(9px, calc(9px + env(safe-area-inset-bottom, 0px)));
  }
  /* idle/compacte speler reserveert óók de home-indicator onderaan de body */
  body.bbp-active{
    padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Globe-dock (.jr-dock) als onderbalk — al safe-area-bewust in v3-globe.css;
   we borgen ook de zij-insets (landscape) van de dock-rij. ── */
@media (max-width:680px){
  .jr-dock-row{
    padding-left:max(12px, env(safe-area-inset-left, 0px));
    padding-right:max(12px, env(safe-area-inset-right, 0px));
  }
}

/* ── Bottom-sheets / panelen — onderrand-inset vrij zodat content + grip nooit
   onder de home-indicator vallen. (cluster-sheet en kies-een-reis hebben er al
   deels in voorzien; we maken het consistent en voegen de release-lade toe.) ── */
@media (max-width:760px){
  /* release-lade (platenmuur) — was het enige paneel zónder safe-area onderaan */
  .rl-panel{
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
}
@media (max-width:620px){
  /* cluster-paneel-sheet: borg de inset (stond al, hier hard gehouden) */
  .atl-cpanel-sheet{
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
}
@media (max-width:680px){
  /* "kies een reis"-sheet onderaan vrij */
  .jr-trip-sheet-panel{
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
}

/* ── Muziek-popup (story.html) — onderrand boven de home-indicator/speler.
   v3-globe.css zet 'm op bottom:84px op mobiel; we tellen de safe-area erbij
   zodat de popup niet tegen de home-indicator plakt. ── */
@media (max-width:680px){
  .story-music{
    bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  }
}


/* ════════════════════════════════════════════════════════════════
   2 · 100dvh / iOS — de full-screen bol loopt edge-to-edge en springt
   niet meer met de adresbalk. We zetten een nette cascade
   (vh → -webkit-fill-available → dvh) en duwen de bol tot de randen.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:680px){
  .jr-hero,
  .jr-hero--full{
    min-height:100vh;                 /* oudste fallback */
    min-height:-webkit-fill-available;/* iOS Safari < dvh: stabiele "ingevulde" hoogte */
    overflow:hidden;
  }
  /* moderne, dynamische maat wint waar ondersteund — geen sprong meer */
  @supports (height:100dvh){
    .jr-hero,
    .jr-hero--full{ min-height:100dvh }
  }
  /* edge-to-edge: de atlas/canvas tot de fysieke schermranden, onder de notch
     en home-indicator door (geen letterbox meer dankzij viewport-fit=cover) */
  .jr-atlas,
  .jr-canvas{ inset:0; width:100%; height:100% }
  /* pull-to-refresh onderdrukken zodat een veeg-omlaag de bol draait i.p.v. de
     browser te verversen (sluit aan op de one-finger-globe-modus) */
  .jr-hero,
  .jr-hero--full{ overscroll-behavior-y:none }
}


/* ════════════════════════════════════════════════════════════════
   3 · TOUCH-TARGETS ≥44px — vergroot de te kleine doelen op touch.
   We mikken op (pointer:coarse) ÉN ≤720px zodat ook tablets met de
   vinger comfortabel raken — niet alleen telefoons.
   ════════════════════════════════════════════════════════════════ */
@media (pointer:coarse), (max-width:720px){

  /* ── taaltoggle (nav + reader) — al ≥40px; tot 44px voor AAA-comfort ── */
  .lang{min-height:44px}
  .r-lang{min-height:44px}
  .r-lang-btn{min-width:44px;min-height:44px}

  /* ── dock-iconen + dobbelsteen + zoom — dobbelsteen was 42px, zoom 38px ── */
  .jr-dock-ic{min-width:44px;min-height:44px}
  .jr-dock-dice{width:44px;height:44px}
  .jr-dock-zoom button{width:44px;height:44px}

  /* ── oude atlas-zoom + wereld-knop (tablet-touchzone 681–1024px) ── */
  .atl-zoom button{width:44px;height:44px}

  /* ── cluster-paneel-sluitknop (.atl-cpanel-x was 40px) ── */
  .atl-cpanel-x{width:44px;height:44px}

  /* ── kies-een-reis-sheet-sluitknop (was 36px) ── */
  .jr-trip-sheet-x{width:44px;height:44px}

  /* ── reader-knoppen: sluiten + "volgende halte"-pijl (waren 40 / 34px) ── */
  .r-close{width:44px;height:44px}
  .r-tools .r-close{width:44px;height:44px}
  .r-next-arrow{width:44px;height:44px}

  /* ── speler-controls (.bbp) — ronde knoppen waren 38px ── */
  .bbp-btn{width:44px;height:44px}

  /* ── music-page mini-speler: play-knop (was 42px) ── */
  .mini-player .pp{width:44px;height:44px}
  .mini-player .mp-close{min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}

  /* ── muziek-popup (story.html): play (40px) + sluitkruis (22px → 44px) ── */
  .story-music-play{width:44px;height:44px}
  .story-music-x{width:44px;height:44px;
    /* het kruis zit absoluut in de hoek; iets terugschuiven zodat de grotere
       raakzone niet over de rand valt, zonder het ikoon te verplaatsen */
    top:2px;right:2px}

  /* ── demo-toggles + bedienelementen op de muziekpagina/lade ── */
  .demo-play{width:44px;height:44px}
  .demo-view{min-height:44px}
  .demo-item{min-height:44px}
  .rl-ab-btn{min-height:44px}

  /* ── release-lade nav/sluit (was al 44px min — hard houden) ── */
  .rl-nav,.rl-close{min-width:44px;min-height:44px}
}


/* ════════════════════════════════════════════════════════════════
   4 · OVERFLOW — horizontale bleed op smal scherm afdekken.
   ════════════════════════════════════════════════════════════════ */

/* ── body: 100vw telt op sommige toestellen de scrollbar mee → subpixel-bleed.
   100% is veiliger; overflow-x:clip blijft het vangnet (in rebuild.css). ── */
body{max-width:100%}

/* ── lange, niet-afbreekbare strings (URL's, titels, mono-coördinaten) mogen
   nooit de baan oprekken; we laten ze netjes binnen de kolom breken. ── */
@media (max-width:720px){
  .r-body,
  .r-coord,
  .rl-desc,
  .bbp-title,.bbp-q-title,
  .demo-title,.demo-sub,
  .jm-name,.jm-sub,
  .rec-title,.rec-where,
  .atl-cpanel-rtitle,
  .story-music-title,.story-music-artist{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  /* mono-coördinaten breken op het scheidteken i.p.v. de baan te verbreden */
  .r-coord{ overflow-wrap:break-word }
}

/* ── apps-embed: de iframe heeft een vaste min-breedte van de externe app;
   we klemmen 'm hard binnen de kolom zodat de pagina zelf niet horizontaal
   gaat scrollen (de iframe mag intern scrollen). ── */
@media (max-width:560px){
  .app-pass{grid-template-columns:1fr}
  .app-embed{max-width:100%;overflow:hidden}
  .app-embed iframe{max-width:100%;width:100%}
}

/* ── globe-zoek/zoom-pillen op de OUDE atlas-laag: borg dat ze niet tegen de
   schermrand-insets aanlopen op 360–390px (de nieuwe dock-IA is al geregeld). ── */
@media (max-width:680px){
  .atl-controls{
    left:max(clamp(10px,3.2vw,16px), env(safe-area-inset-left, 0px));
    right:max(clamp(10px,3.2vw,16px), env(safe-area-inset-right, 0px));
  }
}

/* ── harde vangrail: niets in het bandlint mag breder dan de viewport ── */
@media (max-width:390px){
  .wrap,.band > .wrap{max-width:100%}
}


/* ════════════════════════════════════════════════════════════════
   5 · WAVE-1 LEESFLOW-STRIPS — gerichte mobiele spacing-pass (~360px).
   De basis-stijlen leven in v3-globe.css; hier alleen mobiele ademruimte
   + safe-areas zodat niets tegen de schermranden of tegen elkaar plakt.
   Alles binnen media-queries → desktop volledig ongemoeid.
   ════════════════════════════════════════════════════════════════ */
@media (max-width:560px){

  /* ── "WAAR BEN IK"-voortgangskaart (.r-wayhere): vult op smal scherm de volle
     kolom; telling links, "terug naar de route" rechts (space-between blijft),
     de stippenrij clippt netjes binnen zijn vak i.p.v. te wrappen. ── */
  .r-wayhere{margin:.35em 0 1.1em}
  .r-wayhere-link{
    width:100%;box-sizing:border-box;justify-content:space-between;gap:10px;
    padding:9px 12px 9px 14px;min-height:44px;     /* tap-zone + ademruimte */
  }
  .r-wayhere-route{overflow:hidden;flex-wrap:nowrap} /* stippen clippen i.p.v. wrappen */

  /* ── "VERDER ONDERWEG"-cover-strip (.r-follow): de veegbare track mag tot de
     kolomrand lopen (negatieve marge + matchende padding) zodat de eerste/laatste
     kaart niet half tegen de rand plakt; safe-area-insets meegenomen voor de
     landscape-notch. Kaart iets smaller zodat een tweede kaart altijd "gluurt"
     en de veeg-affordance duidelijk is op 360px. ── */
  .r-follow{margin:1.6em 0 .8em}
  .r-follow-head{margin-bottom:10px}
  .r-follow-track{
    padding-left:max(2px, env(safe-area-inset-left, 0px));
    padding-right:max(14px, env(safe-area-inset-right, 0px));
    margin-left:0;margin-right:0;
    scroll-padding-left:2px;
  }
  .r-follow-card{width:152px}
  .r-follow-body{padding:9px 11px 12px}

  /* ── EINDE-VAN-REIS-STAAT (.r-end): comfortabele binnenmarge zonder tegen de
     kolomrand te drukken; de CTA pakt de volle breedte zodat tekst nooit afkapt. ── */
  .r-end{padding:24px 18px 20px}
  .r-end-body{max-width:30ch}
  .r-end-cta{width:100%;padding:14px 16px}
  .r-end-cta-title{overflow-wrap:anywhere}

  /* ── COVER-CONTACTVEL (.atl-cgrid/.atl-ctile) in het cluster-paneel: op heel
     smal scherm houdt een 3-koloms raster de tegels piepklein; we geven de
     tegels iets meer lucht en borgen dat het bijschrift niet tegen de rand valt.
     (Raster blijft 3-koloms; alleen gap + bijschrift-spacing verfijnd.) ── */
  .atl-cgrid{gap:10px}
  .atl-ctile-cap{padding:0 2px}
}

/* ── extra-smal (≤360px): contactvel-tegels niet té klein laten worden —
   2 koloms geeft leesbaardere covers + bijschriften op een iPhone mini/SE. ── */
@media (max-width:360px){
  .atl-cgrid{grid-template-columns:repeat(2,1fr);gap:11px}
}