/* ============================================================
   VOOR EN NA (voorna.js): schuif tussen de camerafoto en de
   eindfoto. Overgenomen van de By Casper-site, in de kleuren
   van deze site. De paren staan in voorna.json.
   ============================================================ */
.vn-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(3rem,6vw,4.5rem)}
.vn-blok__tekst h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.15;color:var(--text-1);margin:.7rem 0 .9rem}
.vn-blok__tekst h3 em{font-style:italic;color:var(--accent)}
.vn-blok__tekst p{margin:0 0 1.2rem;font-size:.95rem;font-weight:300;line-height:1.65;color:var(--text-2)}
.vn-blok__legenda{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.88rem;font-weight:300;line-height:1.5;color:var(--text-2)}
.vn-blok__legenda li{display:flex;gap:.8rem;align-items:baseline}
.vn-blok__legenda b{flex:none;min-width:2.6rem;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
@media (max-width:980px){.vn-blok{grid-template-columns:minmax(0,1fr);gap:1.4rem}.vn-blok__tekst{max-width:40rem}}

/* de schuif */
.vn{position:relative;min-width:0}
.vn__stage{--pos:50%;position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-lg);background:var(--vlak-zacht);
  box-shadow:inset 0 0 0 1px var(--line),var(--glass-shadow);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;isolation:isolate}
.vn:not(.vn--klaar){aspect-ratio:3/2;border-radius:var(--r-lg);background:var(--vlak-zacht)}
.vn__lagen,.vn__laag,.vn__voor{position:absolute;inset:0}
.vn__laag{transition:opacity .7s ease}
.vn__laag--in{opacity:0}
.vn__laag img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.vn__voor{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vn__lijn{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;z-index:3;background:rgba(255,255,255,.85);
  box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 0 14px rgba(0,0,0,.25);pointer-events:none}
.vn__greep{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border-radius:50%;
  pointer-events:auto;cursor:ew-resize;background:rgba(255,255,255,.92);color:#0b1a2b;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 20px -6px rgba(0,0,0,.45),0 0 0 1px rgba(11,26,43,.08);transition:transform .35s ease,box-shadow .35s ease}
.vn__greep svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vn__stage:hover .vn__greep,.vn--sleept .vn__greep{transform:scale(1.06)}
.vn__greep:focus{outline:none}
.vn__greep:focus-visible{box-shadow:0 0 0 3px var(--accent),0 6px 20px -6px rgba(0,0,0,.45)}
.vn__chip{position:absolute;top:14px;z-index:2;pointer-events:none;padding:5px 11px 4px;border-radius:999px;font-size:.6rem;font-weight:700;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;color:#f4eee4;background:rgba(8,16,27,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .3s ease}
.vn__chip--voor{left:14px}
.vn__chip--na{right:14px}
.vn--voor-weg .vn__chip--voor,.vn--na-weg .vn__chip--na{opacity:0}

/* onder de foto: bijschrift en de andere voorbeelden */
.vn__onder{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-top:14px}
.vn__bijschrift{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:.88rem;font-weight:300;color:var(--text-2);min-width:0}
.vn__bijschrift b{font-weight:600;color:var(--text-1)}
.vn__bijschrift i{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.12em;color:var(--text-3)}
.vn__duims{display:flex;gap:8px;flex-wrap:wrap}
.vn__duim{position:relative;width:60px;aspect-ratio:3/2;padding:0;border:0;border-radius:9px;overflow:hidden;cursor:pointer;background:var(--vlak-zacht);
  opacity:.55;transition:opacity .35s ease,box-shadow .35s ease}
.vn__duim img{width:100%;height:100%;object-fit:cover;display:block}
.vn__duim:hover{opacity:.85}
.vn__duim[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px var(--accent)}
.vn__duim:focus{outline:none}
.vn__duim:focus-visible{opacity:1;box-shadow:0 0 0 2px var(--text-1)}
@media (max-width:600px){
  .vn__stage{border-radius:16px}
  .vn__chip{top:10px;padding:4px 8px 3px;font-size:.55rem}
  .vn__chip--voor{left:10px}.vn__chip--na{right:10px}
  .vn__greep{width:40px;height:40px;margin:-20px 0 0 -20px}
  .vn__duims{gap:6px}.vn__duim{width:48px;border-radius:7px}
}
@media (prefers-reduced-motion:reduce){.vn__laag,.vn__greep,.vn__chip{transition:none}}