/* ==========================================================================
   R26A — Before/After case study slider + mobile compare
   Scoped, self-contained. No external libraries. Reuses site.css tokens.
   Progressive enhancement: without JS both frames are shown stacked.
   ========================================================================== */

/* ---------- Desktop PRE/POSLE slider ---------- */
.ba{
  position:relative;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  border:1px solid var(--line-2);
  border-radius:14px;
  overflow:hidden;
  background:#0C0F14;
  box-shadow:var(--shadow);
  /* aspect ratio locked to source frames (1440x900) → reserves space, no CLS */
  aspect-ratio:1440/900;
  touch-action:pan-y;            /* allow vertical page scroll; horizontal handled by JS */
  user-select:none;
  -webkit-user-select:none;
}
.ba__frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ba__frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  pointer-events:none;
}
/* AFTER = base layer (full width). BEFORE = clipped overlay on top. */
.ba__after{z-index:1}
.ba__before{
  z-index:2;
  /* clip-path revealed from the left up to --pos (%) */
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);
}
.ba__tag{
  position:absolute;
  top:14px;
  z-index:4;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
  background:rgba(8,9,12,.72);
  border:1px solid var(--line-2);
  padding:.4rem .7rem;
  border-radius:99px;
  backdrop-filter:blur(6px);
  pointer-events:none;
}
.ba__tag--before{left:14px}
.ba__tag--after{right:14px}
.ba__tag .dotx{               /* non-color cue so PRE/POSLE is not conveyed by color alone */
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  margin-right:.4rem;
  vertical-align:middle;
  background:currentColor;
}
.ba__tag--after .dotx{background:var(--accent)}

/* divider handle */
.ba__handle{
  position:absolute;
  top:0;bottom:0;
  left:var(--pos,50%);
  z-index:3;
  width:2px;
  margin-left:-1px;
  background:var(--text);
  box-shadow:0 0 0 1px rgba(8,9,12,.35);
  pointer-events:none;
}
.ba__grip{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:46px;height:46px;
  border-radius:50%;
  background:var(--accent);
  color:var(--accent-deep);
  display:grid;
  place-items:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.7),0 0 0 4px rgba(8,9,12,.35);
}
.ba__grip svg{width:24px;height:24px;display:block}

/* the range input is the accessible driver; visually transparent, full-surface */
.ba__range{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  touch-action:pan-y;   /* vertical page scroll stays native; horizontal drag → JS */
}
.ba__range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:46px;height:100%;
  cursor:ew-resize;
}
.ba__range::-moz-range-thumb{
  width:46px;height:100%;
  border:0;background:transparent;
  cursor:ew-resize;
}
.ba__range::-moz-range-track{background:transparent}
/* keyboard focus is shown on the handle grip */
.ba__range:focus-visible ~ .ba__handle .ba__grip{
  outline:3px solid var(--accent-hi);
  outline-offset:3px;
}

.ba__hint{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:.78rem;
  margin-top:.9rem;
  text-align:center;
}

/* no-JS fallback: hide interactive chrome, show both frames stacked */
.no-js .ba__range,
.no-js .ba__handle{display:none}
.no-js .ba{
  aspect-ratio:auto;
  border:0;background:transparent;box-shadow:none;
  display:grid;gap:1rem;
}
.no-js .ba__frame{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.no-js .ba__frame img{position:relative}
.no-js .ba__before{clip-path:none}
.no-js .ba__tag{position:absolute}

/* ---------- Project facts (definition list) ---------- */
.cs-facts{display:grid;gap:.1rem;margin:.4rem 0 0}
.cs-facts > div{
  display:grid;
  grid-template-columns:minmax(0,10rem) 1fr;
  gap:.6rem 1rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--line);
}
.cs-facts dt{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}
.cs-facts dd{margin:0;color:var(--text-2);font-size:.96rem;line-height:1.5}
@media (max-width:520px){
  .cs-facts > div{grid-template-columns:1fr;gap:.15rem}
}

/* ---------- Mobile PRE/POSLE compare (static, side-by-side → stacked) ---------- */
.ba-mob{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(.9rem,3vw,1.6rem);
  margin-top:1.4rem;
}
@media (max-width:560px){
  .ba-mob{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
}
.ba-mob__item{display:flex;flex-direction:column;gap:.7rem}
.ba-mob__label{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.35rem .7rem;
  border-radius:99px;
  border:1px solid var(--line-2);
  color:var(--text-2);
}
.ba-mob__label .dotx{
  width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;
}
.ba-mob__item--after .ba-mob__label{color:var(--accent);border-color:rgba(247,168,27,.4);background:rgba(247,168,27,.08)}
.ba-mob__phone{
  border:1px solid var(--line-2);
  border-radius:20px;
  overflow:hidden;
  background:#0C0F14;
  box-shadow:var(--shadow);
}
.ba-mob__phone img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:390/844;   /* reserve space, avoid CLS */
  object-fit:cover;
  object-position:top center;
}

/* reduced-motion: no transitions anywhere in this component */
@media (prefers-reduced-motion:reduce){
  .ba,.ba__handle,.ba__grip{transition:none!important}
}