/* before-after slider */
.ba { position: relative; user-select: none; }
.ba__stage {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--k-radius-lg);
  overflow: hidden; box-shadow: var(--k-shadow-lg); cursor: ew-resize; touch-action: none;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__clip { position: absolute; inset: 0; overflow: hidden; }
.ba__clip .ba__img--before { width: 100vw; max-width: none; } /* keep before image full-width while clipped */
@media (min-width: 1024px) { .ba__clip .ba__img--before { width: 980px; } }

.ba__tag {
  position: absolute; top: var(--k-space-3); z-index: 3;
  background: rgba(31,86,46,.85); color: #fff; font-size: var(--k-small); font-weight: 700;
  padding: .25rem .7rem; border-radius: 999px; letter-spacing: .04em;
}
.ba__tag--before { left: var(--k-space-3); }
.ba__tag--after  { right: var(--k-space-3); background: rgba(62,74,86,.85); }

.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; }
.ba__handle-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.ba__handle-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  box-shadow: var(--k-shadow), 0 0 0 4px rgba(141,192,62,.5);
}
.ba__handle-grip::before, .ba__handle-grip::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 6px solid transparent;
}
.ba__handle-grip::before { left: 9px; border-right: 8px solid var(--k-green-forest); transform: translateY(-50%); }
.ba__handle-grip::after  { right: 9px; border-left: 8px solid var(--k-green-forest); transform: translateY(-50%); }

/* Range input sits on top, invisible but interactive (keyboard accessible). */
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__range:focus-visible + .ba__handle .ba__handle-grip,
.ba__range:focus-visible ~ .ba__handle .ba__handle-grip { outline: 3px solid var(--k-green); outline-offset: 3px; }