/* Land- en plaatspagina's — kruimelpad, paginahero, feitenstrip,
   stedengrid, prijsladder, luchthaventabel, reisgids. */

/* ---------- kruimelpad ---------- */
.crumb{max-width:1360px;margin:0 auto;padding:14px 20px 0;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink-3);flex-wrap:wrap}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand)}
.crumb i{font-style:normal;color:var(--ink-4)}
.crumb b{color:var(--ink);font-weight:700}

/* ---------- paginahero ---------- */
.phero{max-width:1360px;margin:0 auto;padding:20px 20px 8px;display:grid;grid-template-columns:1fr 440px;gap:38px;align-items:center}
.phero h1{font-size:clamp(35px,4vw,55px);letter-spacing:-.04em;line-height:1.02;margin:0}
.phero h1 .dot{color:var(--accent)}
.phero .lead{margin:14px 0 0;font-size:17.5px;line-height:1.62;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.phero .pimg{position:relative;aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-2)}
.phero .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.phero .pimg .cap{position:absolute;left:0;right:0;bottom:0;padding:32px 16px 13px;color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.03em;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0))}

/* ---------- feitenstrip ---------- */
.facts{max-width:1360px;margin:0 auto;padding:18px 20px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
/* min-width:0 omdat een gridkind anders nooit smaller wordt dan zijn langste woord: op 375px duwde "bestemming" naast "gemiddelde retourprijs" de pagina bij Dubai 3px opzij */
.facts>*{min-width:0}
.fc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:14px 16px;overflow-wrap:break-word}
.fc .v{font-size:26px;font-weight:800;letter-spacing:-.032em;line-height:1}
.fc .l{font-size:13.5px;font-weight:600;color:var(--ink-3);margin-top:5px;line-height:1.4}
.fc.hi{background:var(--brand);border-color:var(--brand)}
.fc.hi .v{color:#fff}
.fc.hi .l{color:rgba(255,255,255,.76)}

/* ---------- zoekkaart op contentpagina ---------- */
.scwrap{max-width:1360px;margin:0 auto;padding:20px 20px 0}
.scwrap .sc{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.scwrap .sc-tabs button{color:var(--ink-3)}
.scwrap .sc-tabs button.on{background:var(--dark);color:#fff}
.scwrap .fld{background:var(--surface-2)}
.scwrap .sc-under .src{color:var(--ink-3)}

/* ---------- stedengrid met foto ---------- */
.cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.cg{background:var(--surface);border:1.4px solid var(--line);border-radius:var(--r-l);overflow:hidden;text-align:left;display:block;width:100%;font-family:inherit;color:inherit;transition:border-color .13s,box-shadow .13s,transform .1s}
.cg:hover{border-color:var(--line-3);box-shadow:var(--sh-2);transform:translateY(-2px)}
.cg .im{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surface-3)}
.cg .im img{width:100%;height:100%;object-fit:cover;display:block}
.cg .im .pr{position:absolute;top:9px;right:9px;background:rgba(255,255,255,.96);color:var(--ink);font-size:14px;font-weight:800;letter-spacing:-.02em;padding:3px 8px;border-radius:99px}
.cg .bd{padding:11px 13px 13px}
.cg .cy{font-size:16.5px;font-weight:800;letter-spacing:-.024em;display:flex;align-items:baseline;gap:5px}
.cg .cy i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-4)}
.cg .mt{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--ink-3);flex-wrap:wrap}
.cg .hd{padding:1px 6px;border-radius:4px;border:1px solid;font-size:12.5px;font-weight:700}

/* ---------- prijsladder ---------- */
.ladder{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:18px 22px;display:grid;gap:7px}
.lr{display:grid;grid-template-columns:130px 1fr 62px;align-items:center;gap:14px}
.lr .cy{font-size:15.5px;font-weight:700;letter-spacing:-.018em}
.lr .cy i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-4);margin-left:5px}
.lr .bar{height:22px;border-radius:5px;position:relative;background:var(--surface-2)}
.lr .bar span{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.lr .pp{font-size:16px;font-weight:800;letter-spacing:-.025em;text-align:right}
.lr:hover .cy{color:var(--brand)}

/* ---------- luchthaventabel met maatschappijen ---------- */
.aptbl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.aptbl .hr,.aptbl .rw{display:grid;grid-template-columns:132px 88px 96px 1fr 86px;align-items:center;gap:14px;padding:12px 18px}
.aptbl .hr{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.aptbl .rw{border-bottom:1px solid var(--line);font-size:15.5px}
.aptbl .rw:last-child{border-bottom:0}
.aptbl .rw:hover{background:var(--surface-2)}
.aptbl .rw.best{background:var(--cheap-bg)}
.aptbl .ap-n{font-weight:700;letter-spacing:-.018em}
.aptbl .ap-n i{font-style:normal;display:block;font-size:12.5px;font-weight:700;color:var(--ink-4);letter-spacing:.06em;margin-top:1px}
.aptbl .ap-p{font-size:18px;font-weight:800;letter-spacing:-.028em}
.aptbl .ap-d{font-size:13.5px;font-weight:700}
.aptbl .ap-a{font-size:14px;color:var(--ink-3);font-weight:600}
.aptbl .ap-b{text-align:right}
.aptbl .ap-b .btn{height:32px;padding:0 13px;font-size:14px}

/* ---------- reisgids ----------
   De redactionele tekst. Deze had alleen regels voor h3, p, ul en li, terwijl
   de geschreven teksten met h2 werken. Een h2 erft dan alleen de basisregel
   met margin:0, en dus plakte elke tussenkop tegen de alinea erboven: geen
   witruimte, geen hierarchie, en op een tekst van duizend woorden leest dat
   als een muur. Hieronder staat de volledige set, met h2 als de kop van een
   tekstdeel en h3 als onderverdeling daarbinnen. */
.guide{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start}
.gmain{max-width:68ch}

/* Ruim boven een kop, krap eronder: witruimte hoort bij de kop die volgt en
   niet bij de alinea die eindigt. Zonder die asymmetrie zweeft een kop tussen
   twee tekstblokken en weet de lezer niet waar hij bij hoort. */
.gmain h2{font-size:25px;letter-spacing:-.032em;line-height:1.22;margin:0 0 11px}
.gmain h2:not(:first-child){margin-top:44px}
.gmain h3{font-size:19.5px;letter-spacing:-.024em;line-height:1.28;margin:0 0 8px}
.gmain h3:not(:first-child){margin-top:30px}

/* Een streepje in de merkkleur voor de kop van een tekstdeel. Het zet de
   geschreven tekst apart van de datasecties eromheen, die hun eigen koppen
   met een punt erachter hebben. */
.gmain h2::before{content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--accent);margin-bottom:13px}

.gmain p{margin:0 0 15px;font-size:16.5px;line-height:1.72;color:var(--ink-2);text-wrap:pretty}
.gmain p:last-child{margin-bottom:0}
.gmain p b,.gmain p strong{color:var(--ink);font-weight:700}
.gmain p a{color:var(--brand);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1.5px}
.gmain p a:hover{color:var(--accent)}

/* De eerste alinea onder een kop een tikje groter. Dat geeft een tekst van
   duizend woorden een ritme in plaats van een egale lap. */
.gmain h2+p{font-size:17.5px;line-height:1.68;color:var(--ink)}

.gmain ul{margin:0 0 15px;padding-left:0;list-style:none;display:grid;gap:8px}
.gmain li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.gmain li::before{content:"";position:absolute;left:5px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.gmain li b{color:var(--ink);font-weight:700}

/* De bronregel onderaan elke tekst. Die stond nergens in de opmaak en kwam er
   dus uit als een gewone cursieve alinea van vijf regels, even zwaar als de
   tekst zelf, terwijl het een voetnoot is. */
.gmain p.bron{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.6;color:var(--ink-4);max-width:none}
.gmain p.bron em{font-style:normal}
.gside{display:grid;gap:9px;position:sticky;top:78px}
.gs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px}
.gs .h{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:9px}
.gs .rw{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.gs .rw:last-child{border-bottom:0}
.gs .rw .k{color:var(--ink-3);font-weight:600}
.gs .rw .v{font-weight:700;text-align:right}
.gs.dark{background:var(--dark);border-color:var(--dark)}
.gs.dark .h{color:rgba(255,255,255,.5)}
.gs.dark .rw{border-bottom-color:rgba(255,255,255,.13)}
.gs.dark .rw .k{color:rgba(255,255,255,.62)}
.gs.dark .rw .v{color:#fff}

/* regiokaarten */
.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:4px 0 8px}
.rg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px}
.rg .t{font-size:16px;font-weight:800;letter-spacing:-.02em}
.rg .s{font-size:14px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.rg .a{font-size:12.5px;font-weight:700;color:var(--brand);margin-top:8px;letter-spacing:.03em}

/* ---------- gerelateerd ---------- */
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.rl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:13px 15px;display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:600;color:inherit}
.rl:hover{border-color:var(--line-3);box-shadow:var(--sh-1)}
.rl img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--surface-3)}
.rl .pp{margin-left:auto;font-size:15.5px;font-weight:800;letter-spacing:-.022em}

/* ---------- responsive ---------- */
@media(max-width:1140px){
  .phero{grid-template-columns:1fr;gap:22px}
  .phero .pimg{max-width:520px}
  .facts{grid-template-columns:1fr 1fr}
  .cgrid{grid-template-columns:repeat(3,1fr)}
  .guide{grid-template-columns:1fr;gap:24px}
  .gside{position:static}
  .regions{grid-template-columns:1fr 1fr}
  .rel{grid-template-columns:1fr 1fr}
  .aptbl .hr{display:none}
  .aptbl .rw{grid-template-columns:1fr auto;gap:6px 12px;padding:13px 15px}
  .aptbl .ap-a{grid-column:1/-1;font-size:13.5px}
  .aptbl .ap-b{grid-column:1/-1;text-align:left;margin-top:4px}
}
@media(max-width:760px){
  .crumb{font-size:12.5px}
  .cgrid{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr;gap:6px}
  .fc{padding:12px 13px}
  .fc .v{font-size:21.5px}
  .lr{grid-template-columns:96px 1fr 54px;gap:9px}
  .lr .cy{font-size:14px}
  .lr .cy i{display:none}
  .regions{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr}
  .ladder,.gs{padding:14px 15px}
  /* De koppen in de geschreven tekst staan op de brede weergave op 31px. Op
     een kolom van 347 pixels is dat vier woorden per regel en een kop van vier
     regels. Gemeten op 375, niet geschat. */
  body.wt .gmain h2,.gmain h2{font-size:23px;margin-bottom:10px}
  body.wt .gmain h2:not(:first-child),.gmain h2:not(:first-child){margin-top:38px}
  body.wt .gmain h3,.gmain h3{font-size:18.5px}
  body.wt .gmain h3:not(:first-child),.gmain h3:not(:first-child){margin-top:26px}
  body.wt .gmain p,body.wt .gmain li{font-size:17px;line-height:1.68}
  body.wt .gmain h2+p{font-size:18px}
}