/* ============================================================
   Before & After Slider — bba-slider.css
   ============================================================ */

:root {
  --bba-handle-color:   #ffffff;
  --bba-handle-shadow:  0 2px 12px rgba(0, 0, 0, 0.35);
  --bba-handle-size:    48px;
  --bba-line-width:     2px;
  --bba-label-bg:       rgba(0, 0, 0, 0.55);
  --bba-label-color:    #ffffff;
  --bba-label-radius:   4px;
  --bba-radius:         8px;
  --bba-transition:     none; /* JS controls movement */
}

/* ── Wrapper ──────────────────────────────────────────────── */
.bba-slider {
  position:    relative;
  overflow:    hidden;
  cursor:      col-resize;
  border-radius: var(--bba-radius);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;   /* prevent page-scroll during drag on mobile */
  line-height: 0;       /* collapse inline-block gap under images */
  width:       100%;
  max-width:   100%;
}

/* ── Image layers ─────────────────────────────────────────── */
.bba-after,
.bba-before {
  position: relative;
  width:    100%;
}

/* After sits as the base */
.bba-after {
  display: block;
}

/* Before clips over the top */
.bba-before {
  position: absolute;
  inset:    0;
  overflow: hidden;
  /* width is set by JS to reveal/hide */
}

.bba-after img,
.bba-before img {
  display:   block;
  width:     100%;
  height:    100%;
  object-fit: cover;
  max-width: none;      /* override theme max-width on img */
  pointer-events: none;
  border-radius: 0;     /* handled by wrapper */
}

/* ── Labels ───────────────────────────────────────────────── */
.bba-label {
  position:      absolute;
  bottom:        14px;
  padding:       4px 10px;
  background:    var(--bba-label-bg);
  color:         var(--bba-label-color);
  font-family:   system-ui, sans-serif;
  font-size:     0.75rem;
  font-weight:   600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--bba-label-radius);
  line-height:   1.4;
  pointer-events: none;
  white-space:   nowrap;
}

.bba-label--before {
  left: 14px;
}

.bba-label--after {
  right: 14px;
}

/* ── Handle ───────────────────────────────────────────────── */
.bba-handle {
  position:   absolute;
  top:        0;
  bottom:     0;
  /* left is set by JS */
  transform:  translateX(-50%);
  display:    flex;
  flex-direction: column;
  align-items:    center;
  cursor:     col-resize;
  z-index:    10;
}

/* Vertical line — top segment */
.bba-handle__line {
  flex:             1;
  width:            var(--bba-line-width);
  background:       var(--bba-handle-color);
  opacity:          0.9;
  box-shadow:       0 0 4px rgba(0,0,0,0.4);
}

/* Circle button */
.bba-handle__circle {
  flex-shrink:   0;
  width:         var(--bba-handle-size);
  height:        var(--bba-handle-size);
  border-radius: 50%;
  background:    var(--bba-handle-color);
  box-shadow:    var(--bba-handle-shadow);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #333;
  transition:    transform 0.15s ease, box-shadow 0.15s ease;
}

.bba-slider:hover .bba-handle__circle,
.bba-handle:focus .bba-handle__circle {
  transform:  scale(1.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.bba-handle__arrows {
  width:  22px;
  height: 22px;
  display: block;
}

/* ── Focus ring (keyboard nav) ────────────────────────────── */
.bba-handle:focus {
  outline: none;
}

.bba-handle:focus-visible .bba-handle__circle {
  outline:        3px solid #005fcc;
  outline-offset: 3px;
}

/* ── Error notice (editors only) ──────────────────────────── */
.bba-error {
  font-family: system-ui, sans-serif;
  font-size:   0.9rem;
  line-height: 1.5;
}