/* Concrete Impressions — before/after drag slider */
.ba-holder{margin:0 0 30px}
.ba-slider{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.ba-stage{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:pan-y}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-clip{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden;pointer-events:none;z-index:1}
.ba-inner{position:absolute;top:0;left:0;height:100%}
.ba-inner .ba-top{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:0;pointer-events:none;z-index:3}
.ba-line{position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.28)}
.ba-grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;
  background:var(--red,#c20e1a);color:#fff;display:grid;place-items:center;
  box-shadow:0 3px 12px rgba(0,0,0,.35);border:2px solid #fff}

.ba-tagb,.ba-taga{position:absolute;top:12px;z-index:2;font-family:var(--font-h,'Figtree',sans-serif);font-weight:800;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:6px;
  background:rgba(10,10,12,.82);color:#fff;pointer-events:none}
.ba-tagb{left:12px}
.ba-taga{right:12px;background:var(--red,#c20e1a)}

/* the range input is the accessible control; visually it covers the stage */
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;z-index:4}
.ba-range:focus-visible{opacity:1;outline:3px solid var(--red,#c20e1a);outline-offset:-3px}

@media (min-width:620px){
  .ba-stage{aspect-ratio:4/3;max-height:620px}
}
@media (prefers-reduced-motion:reduce){
  .ba-grip{transition:none}
}