/* ==========================================================================
   77-before-after.css — Before/After Slider Component
   ==========================================================================
   Interactive drag-to-compare slider for before/after image pairs.
   Variant: gal-04 (before-after)

   HTML structure:
   .gallery.gal-04[data-before-after]
     .ba__track
       img.ba__img.ba__img--before
       img.ba__img.ba__img--after
     .ba__handle[role="separator"][aria-valuenow="50"]
       .ba__handle-line
       .ba__handle-btn
         i.bi.bi-arrows-expand-horizontal  (or just arrows via ::before/::after)
     .ba__labels  (optional)
       .ba__label.ba__label--before  "Before"
       .ba__label.ba__label--after   "After"

   Usage in template data:
     type: gallery, appearance.variant: gal-04
     images[0]: { src, alt }  -- before
     images[1]: { src, alt }  -- after
     caption: optional overall caption
   ========================================================================== */

/* ── Container ──────────────────────────────────────────────── */
.gallery.gal-04 {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  background: var(--bg-surface-alt);
}

/* Aspect ratio — default 16:9, can be overridden */
.gallery.gal-04::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

/* ── Track (image layer) ────────────────────────────────────── */
.ba__track {
  position: absolute;
  inset: 0;
}

/* ── Both images fill the container ────────────────────────── */
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* After image: clipped from the handle position to the right.
   JS sets --ba-pct CSS variable (0..100).  Default: 50. */
.ba__img--after {
  clip-path: inset(0 0 0 var(--ba-clip, 50%));
  transition: none;
}

/* ── Handle ─────────────────────────────────────────────────── */
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-clip, 50%);
  transform: translateX(-50%);
  width: 3px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
}

.ba__handle-line {
  position: absolute;
  inset: 0;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

.ba__handle-btn {
  position: relative;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-default, #1e293b);
  font-size: 1.1rem;
  transition: transform var(--duration-fast, .15s) ease, box-shadow var(--duration-fast, .15s) ease;
}

.gallery.gal-04:hover .ba__handle-btn,
.gallery.gal-04:focus-within .ba__handle-btn {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

/* Arrows inside button via Bootstrap Icons (icon rendered in JS) */
.ba__handle-btn .bi {
  pointer-events: none;
}

/* ── Labels ─────────────────────────────────────────────────── */
.ba__labels {
  position: absolute;
  top: .75rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 2;
  pointer-events: none;
}

.ba__label {
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: var(--text-xs, .75rem);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .25rem .625rem;
  border-radius: var(--radius-md, 6px);
  backdrop-filter: blur(4px);
}

/* ── Optional caption below slider ─────────────────────────── */
.ba__caption {
  text-align: center;
  font-size: var(--text-sm, .875rem);
  color: var(--text-muted);
  margin-top: .625rem;
}

/* ── Multiple sliders stacked ───────────────────────────────── */
.gallery-ba-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ba__handle-btn {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .95rem;
  }
}