/* Before/after drag slider - reusable, used on gallery + service pages */
#pg .ba-slider{margin:0}
#pg .ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){#pg .ba-grid{grid-template-columns:1fr}}
#pg .ba-slider__frame{
  --pos:50%;
  position:relative;overflow:hidden;border-radius:20px;
  aspect-ratio:4/3;width:100%;
  cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  box-shadow:0 4px 16px rgba(0,0,0,.1),0 16px 48px rgba(0,0,0,.14),0 32px 80px rgba(0,0,0,.08);
  background:var(--dark);
}
#pg .ba-slider__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
#pg .ba-slider__img--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
#pg .ba-slider__handle{
  position:absolute;top:0;bottom:0;left:var(--pos);width:0;transform:translateX(-50%);
  z-index:2;display:flex;align-items:center;justify-content:center;
}
#pg .ba-slider__handle-line{
  position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15),0 2px 16px rgba(0,0,0,.35);
  pointer-events:none;
}
#pg .ba-slider__handle-grip{
  width:46px;height:46px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.28);cursor:ew-resize;
  transition:transform .18s var(--ease);
}
#pg .ba-slider__frame.is-dragging .ba-slider__handle-grip{transform:scale(1.08)}
#pg .ba-slider__handle-grip svg{width:20px;height:20px;stroke:var(--dark);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#pg .ba-slider__label{
  position:absolute;top:16px;padding:7px 16px;border-radius:9999px;
  background:rgba(38,50,56,.72);color:#fff;
  font-family:var(--font-h);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  pointer-events:none;backdrop-filter:blur(6px);z-index:1;
}
#pg .ba-slider__label--before{left:16px}
#pg .ba-slider__label--after{right:16px}
#pg .ba-slider__caption{margin-top:14px;font-size:14px;color:var(--muted);text-align:center}

@media(max-width:580px){
  #pg .ba-slider__frame{aspect-ratio:3/4}
  #pg .ba-slider__handle-grip{width:40px;height:40px}
}
