/* ══ BEFORE / AFTER SLIDER ════════════════════════════════════════
   Sirf clip-path aur transform badalte hain (GPU-sasta, layout nahi hilta). */
.ba-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ba { margin: 0; }
.ba-frame {
  --ba-pos: 50%;
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--r-lg, 16px); background: var(--bg-softer, #eef);
  box-shadow: var(--sh, 0 8px 24px rgba(0,0,0,.12));
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
}
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.ba-tag {
  position: absolute; top: .7rem; z-index: 2;
  padding: .2rem .6rem; border-radius: var(--r-full, 999px);
  font: 600 .75rem/1.4 var(--font-head, sans-serif); letter-spacing: .03em;
  color: #fff; background: rgba(0,0,0,.55); pointer-events: none;
}
.ba-tag-before { left: .7rem; }
.ba-tag-after  { right: .7rem; background: var(--pt-a, #1E6BFF); }
.ba-track {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  transform: translate3d(var(--ba-pos), 0, 0); will-change: transform;
}
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px;
  background: linear-gradient(180deg, var(--pt-a, #1E6BFF), var(--pt-b, #22D3EE));
  box-shadow: 0 0 0 1px rgba(255,255,255,.6);
  outline: none; pointer-events: auto;
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: #fff; background: var(--pt-a, #1E6BFF);
  border: 3px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: transform .15s;
}
.ba-handle:focus-visible .ba-knob { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pt-b, #22D3EE) 70%, transparent), 0 4px 16px rgba(0,0,0,.3); }
.ba-frame.is-dragging .ba-knob { transform: translate(-50%, -50%) scale(1.1); }
.ba-cap { margin-top: .6rem; text-align: center; font-size: .9rem; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .ba-knob { transition: none; } }