/* ══════════════════════════════════════════════════════════════════════════════
   BEFORE / AFTER — draggable reveal slider
══════════════════════════════════════════════════════════════════════════════ */
.before-after {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--light-border);
}
.ba-image-wrap {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.ba-img-before,
.ba-img-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.ba-after-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 50% 0 0); /* default: 50/50 split, JS updates this */
}
.ba-after-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; /* JS updates this to match clip-path */
  width: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.ba-handle-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  transform: translateX(-50%);
}
.ba-handle-circle {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  font-size: 0.95rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  border: 2px solid var(--primary);
  cursor: grab;
}
.ba-handle:active .ba-handle-circle { cursor: grabbing; }
.ba-handle:focus-visible .ba-handle-circle { outline: 3px solid var(--primary-glow); outline-offset: 2px; }

.ba-badge {
  position: absolute;
  top: 14px;
  z-index: 2;
  background: rgba(15,23,42,0.75);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.ba-badge-before { left: 14px; }
.ba-badge-after  { right: 14px; }

.ba-caption {
  padding: 16px 18px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ba-caption span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--primary);
  background: var(--cyan-soft);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Grid wrapper for multiple before/after pairs */
.before-after-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .before-after-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .before-after-grid { grid-template-columns: 1fr; }
  .ba-image-wrap { aspect-ratio: 4/3; }
}