/* =========================================================
   KE Voor/Na-slider — ke-beforeafter.css (v1.0.0)
   Alle maten in rem. Imagify-proof: afbeeldingen worden via
   element-selectors gestyled (img/picture), focuspunt & zoom
   via CSS-vars op de parent (.ke-ba-frame).
   ========================================================= */

/* ---------- grid ----------
   Kolommen: gebruiker-ingesteld (--ke-cols, via Elementor-control per
   breakpoint) wint; anders de automatische formatie die de widget
   per breakpoint meegeeft (--ke-cols-d / -t / -m). */
.ke-ba-grid{
  display:grid;
  grid-template-columns:repeat(var(--ke-cols,var(--ke-cols-d,3)),minmax(0,1fr));
  gap:var(--ke-gap,1.4rem);
  width:100%;
}
@media (max-width:64rem){
  .ke-ba-grid{ grid-template-columns:repeat(var(--ke-cols,var(--ke-cols-t,2)),minmax(0,1fr)); }
}
@media (max-width:48rem){
  .ke-ba-grid{ grid-template-columns:repeat(var(--ke-cols,var(--ke-cols-m,1)),minmax(0,1fr)); }
}

/* ---------- element (voor/na of losse afbeelding) ---------- */
.ke-ba-frame{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--ke-radius,0.8rem);
  background:#E9E4DD;
  isolation:isolate;
  -webkit-user-select:none;
  user-select:none;
}
.ke-ba-has-slider{ touch-action:pan-y; cursor:ew-resize; }

/* ---------- afbeeldingslagen ----------
   onder = NA: staat IN de flow en bepaalt (via aspect-ratio op de <img>)
   de hoogte van het hele element — geen hoogte-collapse in flex/grid.
   boven = VOOR: absoluut, links geclipt met clip-path.
   Element-selectors (geen img-classes): Imagify's <picture>-wrap
   verplaatst classes/inline styles, maar deze structuur niet. */
.ke-ba-under{ display:block; }
.ke-ba-over{
  position:absolute; inset:0;
  clip-path:inset(0 calc(100% - var(--ke-ba-pos,50%)) 0 0);
  -webkit-clip-path:inset(0 calc(100% - var(--ke-ba-pos,50%)) 0 0);
  transition:clip-path .3s cubic-bezier(.33,1,.36,1),-webkit-clip-path .3s cubic-bezier(.33,1,.36,1);
}
.ke-ba-under picture{ display:block; width:100%; }
.ke-ba-over picture{ display:block; width:100%; height:100%; }
.ke-ba-under img,.ke-ba-over img{
  display:block; width:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
}
.ke-ba-under img{
  height:auto;
  aspect-ratio:var(--ke-ratio,1/1);
  object-position:var(--ke-ax,50%) var(--ke-ay,50%);
  transform:scale(var(--ke-az,1));
  transform-origin:var(--ke-ax,50%) var(--ke-ay,50%);
}
.ke-ba-over img{
  height:100%;
  object-position:var(--ke-bx,50%) var(--ke-by,50%);
  transform:scale(var(--ke-bz,1));
  transform-origin:var(--ke-bx,50%) var(--ke-by,50%);
}

/* ---------- schuifbalk: verticale witte lijn + open chevrons ---------- */
.ke-ba-handle{
  position:absolute; top:0; bottom:0;
  left:var(--ke-ba-pos,50%);
  transform:translateX(-50%);
  width:2.75rem;
  display:flex; align-items:center; justify-content:center;
  z-index:4;
  cursor:ew-resize;
  touch-action:none;
  transition:left .3s cubic-bezier(.33,1,.36,1);
  outline:none;
}
.ke-ba-handle::before{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  transform:translateX(-50%);
  width:var(--ke-line-w,0.14rem);
  background:var(--ke-line-color,#fff);
  box-shadow:0 0 0.45rem rgba(0,0,0,.30);
}
.ke-ba-handle:focus-visible::before{ box-shadow:0 0 0 0.2rem rgba(255,255,255,.45); }
.ke-ba-grip{
  display:flex; align-items:center; gap:0.55rem;
  filter:drop-shadow(0 0 0.22rem rgba(0,0,0,.5));
}
.ke-ba-grip svg{
  width:var(--ke-arrow-size,1.15rem);
  height:var(--ke-arrow-size,1.15rem);
  color:var(--ke-line-color,#fff);
  stroke-width:var(--ke-arrow-sw,2.6);
  display:block;
}

/* tijdens slepen: direct volgen (geen transition) */
.ke-ba-frame.ke-ba-active .ke-ba-over,
.ke-ba-frame.ke-ba-active .ke-ba-handle{ transition:none; }

/* ---------- pillen (Voor / Na) ---------- */
.ke-ba-pill{
  position:absolute; top:50%;
  transform:translateY(-50%);
  z-index:3; pointer-events:none;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--ke-pill-minw,5.75rem);
  padding:0.28rem 0.8rem;
  background:var(--ke-pill-bg,rgba(17,24,29,.55));
  color:var(--ke-pill-color,#fff);
  border-radius:6.25rem;
  font-family:'Avenir Next',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:700; font-size:0.9rem; line-height:1.35;
  text-align:center;
  opacity:1;
  transition:opacity .3s ease;
}
.ke-ba-pill-before{ left:var(--ke-pill-offset,0.6rem); }
.ke-ba-pill-after{ right:var(--ke-pill-offset,0.6rem); }

/* pillen verdwijnen vloeiend tijdens het schuiven, komen zacht terug */
.ke-ba-frame.ke-ba-active .ke-ba-pill{ opacity:0; }

/* ---------- titel & beschrijving (overlay) ---------- */
.ke-ba-cap{
  position:absolute; left:0; right:0;
  z-index:3; pointer-events:none;
  display:flex; flex-direction:column; gap:0.15rem;
  text-align:center;
  padding:0.9rem 1rem;
}
.ke-ba-cap-top{ top:0; }
.ke-ba-cap-bottom{ bottom:0; }
.ke-ba-cap-title{
  font-family:'Avenir Next',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:600; font-size:1rem; line-height:1.3;
  letter-spacing:0.06em; text-transform:uppercase;
  color:#fff;
}
.ke-ba-cap-desc{
  font-family:'Avenir Next',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:500; font-style:italic; font-size:0.8rem; line-height:1.35;
  letter-spacing:0.04em;
  color:#fff;
}
.ke-ba-cap-shadow .ke-ba-cap-title,
.ke-ba-cap-shadow .ke-ba-cap-desc{ text-shadow:0 0.05rem 0.5rem rgba(0,0,0,.4); }

/* ---------- tekstkaart (5e slot in 3x2 e.d.) ---------- */
.ke-ba-card{
  background:#fff;
  border:0.0625rem solid #E7DFD5;
  border-radius:var(--ke-radius,0.8rem);
  box-shadow:0 0.75rem 1.125rem -0.375rem rgba(34,56,101,.04);
  padding:1.4rem 1.5rem;
  display:flex; flex-direction:column; justify-content:center; gap:0.5rem;
}
.ke-ba-card-title{
  margin:0;
  font-family:'Avenir Next',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:600; font-size:1.2rem; line-height:1.35; color:#192A3D;
}
.ke-ba-card-text{
  font-family:'Avenir Next',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400; font-size:0.96rem; line-height:1.6; color:#4B5563;
}
.ke-ba-card-text p{ margin:0 0 0.6em; }
.ke-ba-card-text p:last-child{ margin-bottom:0; }

/* ---------- mobiel ---------- */
@media (max-width:48rem){
  .ke-ba-grid{
    max-width:var(--ke-mobile-max,26rem);
    margin-left:auto; margin-right:auto;
  }
}

/* ---------- toegankelijkheid ---------- */
@media (prefers-reduced-motion: reduce){
  .ke-ba-over,.ke-ba-handle,.ke-ba-pill{ transition:none; }
}