/* ==========================================================================
   HOMEPAGE v3. Alleen index.html laadt dit bestand. Plan: Playbook/275. Twee delen:
   1. de hero met de kaart van Europa, zonder data (Hugo, 27 oktober 2026);
   2. drie ingangen voor drie soorten bezoekers.
   Huisstijl blijft: papier, petrol, roest, Source Serif 4 en Inter.
   ========================================================================== */
.home-page{--gut:clamp(20px,4vw,52px);--hm-night:#0b2326}

/* ---------- 1. hero: de kaart ---------- */
.home-page .hero.hm-hero{display:flex;align-items:center;justify-content:flex-start;min-height:0;padding:0;overflow:hidden;color:#eef0ea;
  background:radial-gradient(70% 85% at 74% 50%,#103033 0%,var(--hm-night) 60%,#091d20 100%)}
.hm-hero-g{width:100%}
.hm-panel{position:relative;z-index:2}
.hm-panel h1{font-size:clamp(31px,3.9vw,54px);line-height:1.07;letter-spacing:-.015em;color:#fbfaf7;text-wrap:balance;margin-bottom:22px}
.hm-panel p{font-size:clamp(16px,1.3vw,18px);line-height:1.62;color:#d3dbdd;max-width:44ch;margin-bottom:30px}
.hm-panel p b{color:#fff;font-weight:600}
.hm-panel .hero-ctas{justify-content:flex-start}

.hm-map{margin:0;position:relative}
.hm-frame{position:relative}
.hm-svg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* breed: tekst links, kaart rechts in de ruimte die overblijft; nooit eronder */
@media (min-width:960px){
  .home-page .hero.hm-hero{min-height:clamp(600px,calc(100svh - 132px),860px)}
  .home-page{--hm-panel-w:clamp(400px,37vw,500px)}
  .hm-hero-g{padding-top:76px;padding-bottom:36px}
  .hm-panel{width:var(--hm-panel-w)}
  .hm-map{position:absolute;top:80px;bottom:20px;right:calc(max(0px,(100% - 1200px) / 2) + var(--gut) * .5);
    left:calc(max(0px,(100% - 1200px) / 2) + var(--gut) + var(--hm-panel-w) + 32px)}
  .hm-frame{position:absolute;inset:0}
}
/* smal: eerst de tekst, dan de kaart in een vaste verhouding (geen verspringen) */
@media (max-width:959.98px){
  .home-page .hero.hm-hero{display:block;padding:104px 0 0}
  .hm-panel h1{font-size:clamp(30px,7.4vw,44px);max-width:20ch}
  .hm-map{margin:34px auto 0;max-width:600px;padding-bottom:32px}
  .hm-frame{aspect-ratio:900/830}
}
@media (max-width:600px){
  .hm-panel p{margin-bottom:26px}
  .hm-map{margin:28px calc(-1 * var(--gut)) 0;padding-bottom:24px}
}

/* ---------- 2. drie ingangen ---------- */
.hm-routes{background:var(--bg);padding:clamp(30px,3.2vw,42px) 0 clamp(44px,5.5vw,72px)}
.hm-routes-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;border-top:2px solid var(--rule-strong)}
/* subgrid: kop, zin en link staan in de drie kolommen op dezelfde hoogte, ook als
   een kop over twee regels loopt */
.hm-route{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:8px;align-content:start;padding:22px clamp(18px,2.2vw,32px) 4px 0;color:var(--ink);text-decoration:none;border-right:1px dotted var(--dot)}
.hm-route+.hm-route{padding-left:clamp(18px,2.2vw,32px)}
.hm-route:last-child{border-right:0;padding-right:0}
.hm-route h2{font-family:var(--disp);font-size:clamp(19px,1.75vw,23px);font-weight:500;line-height:1.22;letter-spacing:-.005em;color:var(--brand);margin:0}
.hm-route p{font-size:14.5px;line-height:1.55;color:var(--soft);max-width:42ch}
.hm-go{align-self:end;justify-self:start;padding-top:4px;font-size:13px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:8px;min-height:28px}
.hm-go::after{content:"\2192";font-size:16px;transition:transform .25s ease}
.hm-route:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.hm-route:hover .hm-go::after{transform:translateX(4px)}
@media (max-width:820px){
  .hm-routes-row{grid-template-columns:1fr;grid-template-rows:none}
  .hm-route{grid-row:auto;grid-template-rows:none}
  .hm-route,.hm-route+.hm-route{padding:20px 0 16px;border-right:0;border-bottom:1px dotted var(--dot)}
  .hm-route:last-child{border-bottom:0;padding-bottom:0}
  .hm-route p{max-width:56ch}
}