/* Before/After Slider */
.ba-grid{display:grid;grid-template-columns:1fr;gap:18px}
.ba-plain-grid{gap:24px}
.ba-plain-card{
  margin:0;
  border-radius:24px;
  overflow:hidden;
  background:transparent;
}
.ba-plain-card img{
  display:block;
  width:100%;
  height:auto;
}
.ba-slider{
  position:relative;
  width:100%;
  height:clamp(260px, 55vw, 420px);
  background:#fff;
  border:1px solid #e5e7eb;
  overflow:hidden;
  border-radius:24px;
}
.ba-layer{position:absolute;inset:0}
.ba-layer .ph{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  height:100%;
}
.ba-layer img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  pointer-events:none;
}
.ba-before{clip-path:inset(0 50% 0 0)} /* default 50% */

/* Handle */
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(to bottom, rgba(124,58,237,.12), rgba(124,58,237,.22));
  border:none;cursor:grab;color:#2d1b69;
}
.ba-handle:active{cursor:grabbing}
.ba-handle::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:4px;background:var(--accent);border-radius:2px;
}
.ba-handle .chevrons{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.ba-handle .drag-label{background:#fff;border:1px solid #e5e7eb;color:#111;padding:6px 10px;border-radius:999px;font-weight:600;font-size:12px;box-shadow:var(--shadow)}
@keyframes nudge {0%,100%{transform:translateX(-50%)}50%{transform:translateX(calc(-50% + 10px))}}
.ba-handle{animation:nudge 2.4s ease-in-out 1s 2}

@media (min-width: 720px){
  .ba-grid{grid-template-columns:1fr 1fr}
}