/* ============================================================
   EdilBerat — beforeafter.css
   Home: carosello auto-scorrevole di coppie prima/dopo.
   Lightbox interattivo (trascina per confrontare).
   Galleria: celle coppia con etichette prima/dopo.
   ============================================================ */

/* ---------- Carosello home ---------- */
.ba-carousel{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ba-track{display:flex;gap:18px;width:max-content;animation:baScroll 55s linear infinite}
.ba-carousel:hover .ba-track{animation-play-state:paused}
@keyframes baScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Poche coppie che entrano nello schermo: centrate e ferme (niente scorrimento) */
.ba-track.ba-static{width:100%;justify-content:center;animation:none;transform:none}
.ba-carousel.ba-nofade{-webkit-mask-image:none;mask-image:none}

.ba-card{flex:0 0 auto;width:300px;cursor:pointer}
.ba-media{position:relative;height:210px;border-radius:var(--radius-sm);overflow:hidden;display:flex;box-shadow:var(--shadow-sm)}
.ba-h{position:relative;width:50%;height:100%;overflow:hidden}
.ba-h img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover}
.ba-h.b img{left:0}
.ba-h.a img{right:0}
.ba-h.b{border-right:2px solid #fff}
.ba-tg{position:absolute;bottom:8px;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
  font-family:var(--font-head);font-weight:600;padding:3px 8px;border-radius:6px;z-index:2}
.ba-h.b .ba-tg{left:8px;background:rgba(20,18,16,.7);color:#fff}
.ba-h.a .ba-tg{right:8px;background:#fff;color:var(--red)}
.ba-media::after{content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;color:#fff;font-size:1.3rem;
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,18,16,.25);
  opacity:0;transition:opacity .3s;z-index:3}
.ba-card:hover .ba-media::after{opacity:1}
.ba-cap{margin-top:10px;text-align:center;font-family:var(--font-head);font-weight:500;font-size:.95rem;color:var(--ink)}

/* ---------- Lightbox interattivo ---------- */
.bal{position:fixed;inset:0;z-index:210;background:rgba(15,13,11,.95);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px}
.bal.open{display:flex;animation:fade .25s}
.bal-stage{position:relative;width:min(92vw,900px);aspect-ratio:4/3;max-height:74vh;border-radius:10px;
  overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.bal-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.bal-before{position:absolute;inset:0;width:50%;overflow:hidden;border-right:3px solid #fff}
.bal-before img{position:absolute;inset:0;height:100%;object-fit:cover;pointer-events:none}
.bal-handle{position:absolute;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}
.bal-grip{width:46px;height:46px;border-radius:50%;background:#fff;color:var(--red);display:flex;
  align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.bal-tag{position:absolute;bottom:14px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--font-head);font-weight:600;padding:5px 12px;border-radius:999px;z-index:2}
.bal-tag.b{left:14px;background:rgba(20,18,16,.72);color:#fff}
.bal-tag.a{right:14px;background:#fff;color:var(--red)}
.bal-cap{color:#fff;font-family:var(--font-head);font-weight:500;font-size:1.05rem}
.bal-close{position:absolute;top:22px;right:24px;background:rgba(255,255,255,.12);border:none;color:#fff;
  width:50px;height:50px;border-radius:50%;font-size:1.3rem;cursor:pointer;transition:.2s}
.bal-close:hover{background:var(--red)}
.bal-nav{display:flex;gap:14px}
.bal-nav button{background:rgba(255,255,255,.12);border:none;color:#fff;width:50px;height:50px;border-radius:50%;
  font-size:1.1rem;cursor:pointer;transition:.2s}
.bal-nav button:hover{background:var(--red)}

/* ---------- Celle coppia in galleria ---------- */
.gal-cell.pair{break-inside:avoid}
.gal-cell.pair .pair-media{position:relative;display:flex;height:200px;border-radius:12px 12px 0 0;overflow:hidden}
.gal-cell.pair .ph{position:relative;width:50%;overflow:hidden}
.gal-cell.pair .ph img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover}
.gal-cell.pair .ph.b img{left:0}
.gal-cell.pair .ph.a img{right:0}
.gal-cell.pair .ph.b{border-right:2px solid #fff}
.gal-cell.pair .plabels{display:flex}
.gal-cell.pair .plabels span{width:50%;text-align:center;font-family:var(--font-head);font-weight:600;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:8px 0;background:#fff}
.gal-cell.pair .plabels .pb{color:var(--muted)}
.gal-cell.pair .plabels .pa{color:var(--red)}
.gal-cell.pair::after{content:none}

@media (max-width:600px){
  .ba-card{width:240px}
  .ba-media{height:170px}
}