/* ============================================================
   LLS GROUP - "See the difference before you enquire."
   Surgical amendment to that one section: the single pair becomes
   a carousel of 8 genuine before/after projects.

   Everything outside .l-ba is untouched. The section keeps its
   height, its dark ground, its heading and its left column; only
   the comparison area changes.

   Pairs are ranks 01-08 from LLS_ALL_BEFORE_AFTER_CAROUSEL_PACKAGE,
   in the order set by STRICT_RANKING.txt.
   ============================================================ */

/* the stage occupies exactly the box the old pair grid held */
.l-ba-stage{
  position:absolute;left:calc(680 * var(--u));top:calc(40 * var(--u));
  width:calc(640 * var(--u));height:calc(640 * var(--u));
}

/* restrained dark glass frame - a surface, not a widget */
.l-ba-card{
  position:absolute;inset:0;overflow:hidden;
  background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.6);
  padding:calc(10 * var(--u));
}
.l-ba-view{
  position:relative;width:100%;height:100%;overflow:hidden;background:#0e0f0d;
  touch-action:none;cursor:ew-resize;
}
.l-ba-view img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;display:block;user-select:none;-webkit-user-drag:none;
}
/* the after image is revealed from the divider rightwards */
.l-ba-view .is-after{clip-path:inset(0 0 0 var(--pos,50%))}

.l-ba-div{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:1px;
  background:rgba(255,255,255,.85);pointer-events:none;z-index:3}
.l-ba-grip{
  position:absolute;top:50%;left:var(--pos,50%);z-index:4;
  width:calc(48 * var(--u));height:calc(48 * var(--u));margin:calc(-24 * var(--u)) 0 0 calc(-24 * var(--u));
  border-radius:50%;border:1px solid rgba(0,0,0,.12);
  background:rgba(249,248,244,.94);box-shadow:0 2px 10px rgba(0,0,0,.28);
  display:grid;place-items:center;cursor:ew-resize;
  transition:transform 180ms cubic-bezier(.22,.61,.36,1)}
.l-ba-grip img{width:calc(30 * var(--u));height:auto;display:block;pointer-events:none;margin:auto;justify-self:center;align-self:center}
.l-ba-grip{padding:0}
.l-ba-view:hover .l-ba-grip,.l-ba-grip:focus-visible{transform:scale(1.06)}
.l-ba-grip:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

/* left/right reset: styles-lls.css:196 still carries the pre-carousel
   .l-ba-tag{left:0}, which would stretch the right-hand tag full width */
.l-ba-tag{position:absolute;top:calc(14 * var(--u));left:auto;right:auto;bottom:auto;z-index:3;
  padding:calc(6 * var(--u)) calc(12 * var(--u));
  font-weight:600;font-size:calc(10.0 * var(--u));letter-spacing:calc(1 * var(--u));
  text-transform:uppercase;color:#fff;background:rgba(12,14,11,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.l-ba-tag--b{left:calc(14 * var(--u))}
.l-ba-tag--a{right:calc(14 * var(--u))}
/* and its --b/--a background colours, which outrank the base rule above */
.l-ba-tag--b,.l-ba-tag--a{background:rgba(12,14,11,.62);color:#fff;transition:opacity 220ms ease}
/* a label only stays up while its half is on screen */
.l-ba-stage .l-ba-view.is-at-left .l-ba-tag.l-ba-tag--b,
.l-ba-stage .l-ba-view.is-at-right .l-ba-tag.l-ba-tag--a{opacity:0!important;visibility:hidden;transition:opacity 220ms ease,visibility 0s 220ms}

/* project-to-project transition - horizontal, restrained, no bounce */
.l-ba-card{transition:opacity 260ms cubic-bezier(.22,.61,.36,1),
                      transform 260ms cubic-bezier(.22,.61,.36,1)}
.l-ba-card.is-out-l{opacity:0;transform:translate3d(calc(-34 * var(--u)),0,0)}
.l-ba-card.is-out-r{opacity:0;transform:translate3d(calc(34 * var(--u)),0,0)}

/* controls sit under the card, in the section's own language */
.l-ba-bar{position:absolute;left:calc(680 * var(--u));top:calc(696 * var(--u));
  width:calc(640 * var(--u));display:flex;align-items:center;gap:calc(20 * var(--u))}
.l-ba-count{font-family:var(--serif);font-size:calc(15 * var(--u));
  letter-spacing:.02em;color:var(--paper);font-variant-numeric:tabular-nums}
.l-ba-count i{font-style:normal;color:var(--paper-2);opacity:.6}
.l-ba-nav{margin-left:auto;display:flex;gap:calc(10 * var(--u))}
.l-ba-nav button{
  width:calc(42 * var(--u));height:calc(42 * var(--u));border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);
  display:grid;place-items:center;cursor:pointer;
  transition:background 180ms cubic-bezier(.22,.61,.36,1),
             border-color 180ms cubic-bezier(.22,.61,.36,1)}
.l-ba-nav button:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.4)}
.l-ba-nav button:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.l-ba-nav svg{width:calc(15 * var(--u));height:calc(15 * var(--u));
  stroke:var(--paper);stroke-width:1.5;fill:none}
.l-ba-place{margin:0;font-size:calc(10.5 * var(--u));letter-spacing:calc(.4 * var(--u));
  color:var(--paper-2);opacity:.75}

/* ============================================================
   MOBILE - same section position, thumb-friendly
   ============================================================ */
@media (max-width:900px){
  .l-ba-stage{position:static;width:auto;height:auto;
    margin:calc(26 * var(--u)) calc(20 * var(--u)) 0}
  .l-ba-card{position:relative;inset:auto;height:calc(360 * var(--u));
    padding:calc(7 * var(--u))}
  .l-ba-grip{width:calc(54 * var(--u));height:calc(54 * var(--u));
    margin:calc(-27 * var(--u)) 0 0 calc(-27 * var(--u))}
  .l-ba-grip img{width:calc(34 * var(--u))}
  .l-ba-tag{font-size:calc(9.5 * var(--u));padding:calc(5 * var(--u)) calc(10 * var(--u))}
  .l-ba-bar{position:static;width:auto;margin:calc(26 * var(--u)) calc(20 * var(--u)) 0;
    gap:calc(14 * var(--u))}
  .l-ba-count{font-size:calc(14 * var(--u))}
  .l-ba-nav button{width:calc(46 * var(--u));height:calc(46 * var(--u))}
  .l-ba-place{display:none}
}

@media (prefers-reduced-motion:reduce){
  .l-ba-card,.l-ba-grip,.l-ba-nav button{transition:none!important}
  .l-ba-card.is-out-l,.l-ba-card.is-out-r{transform:none!important}
}