/* Before & After comparison sliders — BOR review site
   Companion to assets/site.css (uses its :root tokens). Loaded by index.html only. */

.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.6rem}
@media(max-width:860px){.ba-grid{grid-template-columns:1fr}}

.ba-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.ba-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:1rem 1.2rem .95rem}
.ba-head h3{font-size:1.28rem;text-transform:uppercase;letter-spacing:.02em}
.ba-chip{flex-shrink:0;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;color:#8a5a00;background:linear-gradient(180deg,#ffe9bd,#ffd98c);border:1px solid #f0c169;border-radius:999px;padding:.32rem .65rem}

.ba{position:relative;aspect-ratio:16/10;background:var(--blue-deep);overflow:hidden;--pos:50%}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.ba-img.before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.45);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:linear-gradient(180deg,var(--orange),var(--orange-2));border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.15rem;font-weight:700;pointer-events:none}
.ba:focus-within .ba-knob{box-shadow:0 0 0 3px #fff,0 0 0 7px var(--blue),0 6px 18px rgba(0,0,0,.35)}
.ba-tag{position:absolute;top:.7rem;z-index:2;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;padding:.34rem .6rem;border-radius:6px;background:rgba(6,47,85,.78);color:#fff;pointer-events:none}
.ba-tag-b{left:.7rem}
.ba-tag-a{right:.7rem;background:rgba(2,85,160,.85)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;border:0}
.ba-range:focus{outline:none}

.ba-how{color:var(--muted);margin-top:1rem;font-size:.98rem}
.ba-note{margin-top:1.4rem;font-size:.9rem;color:var(--muted);background:var(--wash);border:1px solid var(--line);border-radius:10px;padding:.85rem 1.1rem;max-width:76ch}
.ba-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
@media(max-width:560px){.ba-cta .btn{flex:1 1 100%}}