/* ===========================================================================
   Reisverhalen: het overzicht met filter, en de verhaalpagina met het
   meelopende blok rechts. Alleen deze twee paginasoorten laden dit blad, dus
   de rest van de site draagt het gewicht niet.
   =========================================================================== */

/* ---------------------------------------------------------------- overzicht */
.v-band{
  margin-top:26px;padding:13px 17px;border-radius:var(--hoek,2px);font-size:13.5px;line-height:1.6;
  border:1px dashed rgba(201,164,100,.5);background:rgba(201,164,100,.07);
  color:var(--zacht);max-width:64ch;
}

.v-filter{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin-bottom:12px}
.v-zoek{
  display:flex;align-items:center;gap:10px;flex:1 1 240px;max-width:340px;
  padding:0 16px;height:50px;border:1px solid var(--lijn);border-radius:999px;
  background:rgba(255,255,255,.03);transition:border-color .3s;
}
.v-zoek:focus-within{border-color:var(--goud)}
.v-zoek svg{width:18px;height:18px;color:var(--goud);flex:none}
/* Zelfde reden als bij het zoekveld op de kaart: het invoerveld moet de hele
   pil vullen, anders is de zichtbare rand groter dan het raakvlak. */
.v-zoek input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:var(--tekst);
  font:inherit;font-size:15px;align-self:stretch;
}
.v-zoek input::placeholder{color:var(--zachter)}
.v-zoek input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}

.v-pillen{display:flex;flex-wrap:wrap;gap:8px}
.v-pil{
  padding:10px 18px;border-radius:999px;border:1px solid var(--lijn);
  background:none;color:var(--zacht);font:inherit;font-size:13.5px;cursor:pointer;
  transition:color .3s,border-color .3s,background-color .3s;
}
.v-pil:hover{color:var(--goud-licht);border-color:rgba(201,164,100,.6)}
.v-pil.aan{
  color:#0B0A09;border-color:var(--goud);
  background:linear-gradient(160deg,var(--goud-licht),var(--goud));font-weight:600;
}
.v-pil:focus-visible{outline:2px solid var(--goud);outline-offset:3px}

.v-telling{font-size:13px;color:var(--zachter);margin:0 0 24px;min-height:1.2em}

.v-rooster{
  display:grid;gap:clamp(18px,2.2vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
}
.v-kaart > a{
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  border:1px solid var(--lijn);border-radius:var(--hoek,2px);overflow:hidden;
  background:rgba(255,255,255,.02);
  transition:border-color .45s,transform .45s;
}
.v-kaart > a:hover{
  border-color:rgba(201,164,100,.55);transform:translateY(-4px);
}
.v-kaart > a:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.v-beeld{position:relative;display:block;aspect-ratio:4/3;overflow:hidden}
.v-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.v-kaart > a:hover .v-beeld img{transform:scale(1.05)}
.v-voorbeeld{
  position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:999px;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  background:rgba(11,10,9,.72);border:1px solid rgba(201,164,100,.45);
  color:var(--goud-licht);backdrop-filter:blur(6px);
}
.v-tekst{display:flex;flex-direction:column;gap:9px;padding:20px 20px 22px;flex:1}
.v-land{
  display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--goud);
}
.v-land i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;flex:none}
.v-tekst b{font-family:"Cormorant",serif;font-weight:400;font-size:26px;line-height:1.15;color:var(--room)}
.v-teaser{font-size:14.5px;line-height:1.6;color:var(--zacht);flex:1}
.v-lees{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--goud-licht);
}
.v-lees svg{width:15px;height:15px;transition:transform .4s}
.v-kaart > a:hover .v-lees svg{transform:translateX(4px)}

.v-leeg{
  margin-top:30px;padding:26px;border:1px dashed var(--lijn);border-radius:var(--hoek,2px);
  color:var(--zacht);font-size:15px;line-height:1.7;
}
.v-leeg a{color:var(--goud-licht)}

/* ------------------------------------------------------------ verhaalpagina */
/* leesbalk bovenaan */
.v-leesbalk{position:fixed;inset:0 0 auto 0;height:3px;z-index:70;pointer-events:none}
.v-leesbalk i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--goud),var(--goud-licht));
  box-shadow:0 0 14px rgba(201,164,100,.55);
}

.v-hoofd .wrap + .wrap{margin-top:clamp(26px,3.4vw,44px)}
.eyebrow .v-punt{
  display:inline-block;width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.6;margin:0 10px 3px;
}
.v-hero{margin:0;border-radius:var(--hoek,2px);overflow:hidden;border:1px solid var(--lijn)}
.v-hero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

/* De kolommen: tekst links, meelopend blok rechts. Zelfde indeling als de
   blogartikelen van Fixentra, want die beviel. */
.v-body{
  display:grid;gap:clamp(28px,3.4vw,54px);align-items:start;
  grid-template-columns:minmax(0,1fr) 320px;
  margin-top:clamp(34px,4vw,60px);
}
.v-tekstkolom{min-width:0;max-width:68ch}
.v-tekstkolom h2{
  font-size:clamp(25px,2.6vw,32px);color:var(--room);
  margin:clamp(38px,4vw,54px) 0 14px;scroll-margin-top:104px;
}
.v-tekstkolom h2:first-of-type{margin-top:6px}
.v-tekstkolom p{font-size:16.5px;line-height:1.8;color:var(--zacht);margin:0 0 18px}
.v-tekstkolom p:first-of-type{font-size:18px;color:var(--tekst)}
.v-tekstkolom blockquote{
  margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--goud);
  font-family:"Cormorant",serif;font-size:clamp(21px,2.2vw,27px);line-height:1.4;
  color:var(--room);font-style:normal;
}
.v-fig{margin:30px 0}
.v-fig img{width:100%;height:auto;display:block;border-radius:var(--hoek,2px);border:1px solid var(--lijn)}
.v-fig figcaption{margin-top:10px;font-size:12.5px;color:var(--zachter)}

/* het meelopende blok */
/* align-self:stretch is hier de hele truc. Het raster staat op align-items:start,
   dus kreeg deze kolom alleen de hoogte van zijn eigen inhoud en had sticky geen
   ruimte om in te bewegen: het blok stond stil en scrolde gewoon weg
   (gemeten top -2763px halverwege de pagina). Uitgerekt loopt hij netjes mee
   tot het einde van het verhaal. */
.v-zij{min-width:0;align-self:stretch}
.v-zij-in{position:sticky;top:104px;display:flex;flex-direction:column;gap:16px}
.v-toc{
  border:1px solid var(--lijn);border-radius:var(--hoek,2px);padding:20px;
  background:rgba(255,255,255,.02);
}
.v-toc h2{
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--zachter);margin:0 0 12px;
}
.v-toc ol{list-style:none;margin:0;padding:0;counter-reset:v}
.v-toc li{counter-increment:v}
/* Gemeten op 390px: deze regels waren 36px hoog en de terugknop 38px. Net
   te weinig om blind met een duim te raken, 40px is het minimum. */
.v-toc a{
  display:flex;gap:10px;padding:9px 0;min-height:40px;align-items:flex-start;
  font-size:14px;line-height:1.45;
  color:var(--zacht);text-decoration:none;transition:color .3s;
}
.v-toc a::before{
  content:counter(v,decimal-leading-zero);flex:none;
  font-size:11px;letter-spacing:.08em;color:var(--zachter);padding-top:3px;
  transition:color .3s;
}
.v-toc a:hover{color:var(--goud-licht)}
.v-toc a.nu{color:var(--goud-licht);font-weight:600}
.v-toc a.nu::before{color:var(--goud)}
.v-toc a.gelezen{opacity:.55}

.v-cta{
  border:1px solid rgba(201,164,100,.35);border-radius:var(--hoek,2px);padding:22px;
  background:radial-gradient(120% 90% at 90% -10%,rgba(201,164,100,.14),transparent 62%),rgba(255,255,255,.02);
}
.v-cta-kop{
  font-family:"Cormorant",serif;font-weight:400;font-size:24px;line-height:1.2;
  color:var(--room);margin:0 0 9px;
}
.v-cta p{font-size:14px;line-height:1.65;color:var(--zacht);margin:0 0 16px}
.v-cta .btn{width:100%;justify-content:center}
.v-cta .btn + .btn{margin-top:9px}

/* vorige en volgende */
.v-naast-wrap{margin-top:clamp(44px,5vw,72px)}
.v-naast{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.v-naast a{
  display:flex;flex-direction:column;gap:4px;padding:18px 20px;text-decoration:none;
  border:1px solid var(--lijn);border-radius:var(--hoek,2px);transition:border-color .4s,transform .4s;
}
.v-naast a:hover{border-color:rgba(201,164,100,.55);transform:translateY(-2px)}
.v-naast span{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--zachter)}
.v-naast b{font-family:"Cormorant",serif;font-weight:400;font-size:22px;color:var(--room)}
.v-naast svg{width:16px;height:16px;color:var(--goud);margin-top:4px}
.v-terug{margin-top:22px;font-size:13.5px}
.v-terug a{color:var(--goud-licht);text-decoration:none;padding-block:11px;min-height:40px;display:inline-flex;align-items:center}

/* ------------------------------------------------------------------ smaller */
@media(max-width:1023px){
  /* Het blok rechts past niet meer naast de tekst. De inhoudsopgave gaat dan
     boven het verhaal staan (daar is hij nog nuttig) en de kaart naar onderen,
     want onderaan staat het verhaal al af te sluiten met een uitnodiging. */
  .v-body{grid-template-columns:1fr}
  /* BEIDE niveaus moeten oplossen. display:contents haalt maar een laag weg,
     dus met alleen .v-zij bleef .v-zij-in het rastervak en telde de order van
     de inhoudsopgave alleen binnen dat vak: gemeten stond hij dan op y=2344
     terwijl de tekst op y=554 begon. */
  .v-zij,.v-zij-in{display:contents}
  .v-toc{order:-1;margin-bottom:4px}
  .v-cta{order:5;margin-top:10px}
}
@media(max-width:639px){
  .v-filter{gap:12px}
  .v-zoek{max-width:none}
  .v-rooster{grid-template-columns:1fr}
  .v-tekstkolom p:first-of-type{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .v-kaart > a,.v-beeld img,.v-lees svg,.v-naast a{transition:none}
}

/* Sinds de kruimelpaden weg zijn (14-10-2026) plakte de bovenregel van een
   verhaal tegen de kopbalk. Zelfde lucht als boven de kop van het overzicht. */
.v-hoofd{padding-top:clamp(36px,6vh,64px)}

/* Eén hoek voor alles (17-10-2026), zie het slot van style.css. */
.v-kaart > a,.v-beeld,.v-hero,.v-hero img,.v-fig img,.v-cta,.v-toc,.v-toc a,.v-band{border-radius:var(--hoek,2px)}