/* =========================================================
   Voor en na — sleepvergelijking

   Eén bron voor de positie: --pos op het kader, een getal van
   0 tot 1. De clip van de "na"-foto, de scheidingslijn en de
   labels leiden daar allemaal uit af, dus het script hoeft maar
   één waarde te zetten.

   Bewust een getal en geen percentage: in clamp() mag je die twee
   niet door elkaar gebruiken, en de labels rekenen ermee.
========================================================= */

.ls-voor-na__title {
  font-size: var(--fs-h2);
  max-width: 14ch;
  margin: 0;
}

.ls-voor-na__title em {
  font-style: normal;
  color: var(--color-accent);
}

.ls-section-head .kicker {
  margin-bottom: var(--space-md);
}


/* =========================================================
   Grid
========================================================= */

.ls-voor-na__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-gap);
}

.ls-voor-na__grid--single {
  grid-template-columns: 1fr;
}

@media (max-width: 860px) {
  .ls-voor-na__grid {
    grid-template-columns: 1fr;
  }
}

.ls-voor-na__item {
  margin: 0;
}


/* =========================================================
   Het kader
========================================================= */

.ls-voor-na__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #000;

  /* Verticaal scrollen op touch blijft werken; horizontaal slepen
     is voor de vergelijking. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.ls-voor-na__img {
  display: block;
  width: 100%;
  height: auto;
}

/* De "na"-foto ligt over de "voor"-foto en wordt van links
   weggeknipt tot aan de scheidingslijn. */
.ls-voor-na__img--after {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 calc(var(--pos, .5) * 100%));
}


/* =========================================================
   Scheidingslijn en knop
========================================================= */

.ls-voor-na__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos, .5) * 100%);
  width: 2px;
  margin-left: -1px;
  background: var(--color-bone);
  pointer-events: none;
}

.ls-voor-na__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;

  background: var(--color-accent);
  color: var(--color-inverted);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);

  transition: transform var(--dur-fast) var(--ease-out);
}

.ls-voor-na__handle svg {
  width: 22px;
  height: 22px;
}

@media (hover: hover) {
  .ls-voor-na__frame:hover .ls-voor-na__handle {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

/* Focus zichtbaar maken op de knop, niet op de onzichtbare schuif */
.ls-voor-na__frame:has(.ls-voor-na__range:focus-visible) .ls-voor-na__handle {
  outline: 3px solid var(--color-bone);
  outline-offset: 3px;
}

.ls-voor-na__frame.is-dragging .ls-voor-na__handle {
  transform: translate(-50%, -50%) scale(.96);
}


/* =========================================================
   Labels

   Ze vervagen zodra de scheidingslijn eroverheen komt: anders
   staat "Voor" ineens op de na-foto en klopt het niet meer.
========================================================= */

.ls-voor-na__tag {
  position: absolute;
  bottom: var(--space-lg);

  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-full);

  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;

  /* Geen transition op opacity. Een eigenschap die in een transitie
     zit wordt niet opnieuw berekend als de custom property waar hij
     van afhangt verandert — de waarde blijft dan hangen. Direct
     meebewegen is hier trouwens ook beter: het label reageert
     meteen op de sleep in plaats van erachteraan te lopen. */
}

.ls-voor-na__tag--before {
  left: var(--space-lg);
  background: rgba(22, 20, 15, .7);
  color: var(--color-text);
  opacity: clamp(0, (var(--pos, .5) - .12) * 20, 1);
}

.ls-voor-na__tag--after {
  right: var(--space-lg);
  background: var(--color-accent);
  color: var(--color-inverted);
  opacity: clamp(0, (.88 - var(--pos, .5)) * 20, 1);
}


/* =========================================================
   De schuif

   Zit er voor het toetsenbord en de schermlezer: pijltjestoetsen,
   Home/End en het voorlezen van de waarde komen gratis mee.

   pointer-events staat uit, en dat is belangrijk. Een native range
   rekent zijn waarde uit over de baan mínus de breedte van de
   thumb, terwijl het slepen over het beeld de volle breedte
   gebruikt. Laat je beide de muis afhandelen, dan vechten die twee
   berekeningen: slepen naar driekwart sprong dan naar het einde.
   Nu doet de muis één ding en het toetsenbord het andere.
========================================================= */

.ls-voor-na__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  pointer-events: none;
}

.ls-voor-na__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1px;
  height: 1px;
  background: transparent;
  border: 0;
}

.ls-voor-na__range::-moz-range-thumb {
  width: 1px;
  height: 1px;
  background: transparent;
  border: 0;
}

.ls-voor-na__range:focus {
  outline: none;
}

/* Alleen voor schermlezers — .ls-sr-only staat in reviews.css en
   geldt sitebreed; deze houdt de bestaande class in stand. */
.ls-voor-na__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   Bijschrift
========================================================= */

.ls-voor-na__caption {
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--color-muted);
}


/* =========================================================
   Uitnodiging

   Eén korte beweging zodra de vergelijking in beeld komt, zodat
   de bezoeker ziet dat er iets te slepen valt. Daarna nooit meer.
========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .ls-voor-na__frame.is-hinting .ls-voor-na__img--after,
  .ls-voor-na__frame.is-hinting .ls-voor-na__divider {
    transition: clip-path 1.1s var(--ease-out), left 1.1s var(--ease-out);
  }
}


/* =========================================================
   Mobiel
========================================================= */

@media (max-width: 600px) {
  .ls-voor-na__handle {
    width: 48px;
    height: 48px;
  }

  .ls-voor-na__handle svg {
    width: 18px;
    height: 18px;
  }

  .ls-voor-na__tag {
    bottom: var(--space-sm);
  }

  .ls-voor-na__tag--before { left: var(--space-sm); }
  .ls-voor-na__tag--after  { right: var(--space-sm); }
}