/* =========================================================
   ARENA UI v17 — comp-gallery.css (v7)
   Mobile-first.
   v7: Riscrittura completa navigazione.
   - Rimosso tutto il sistema thumbnail/strip
   - Navigazione: frecce prev/next + counter
   - Blur sfondo statico (zero ricalcoli)
   - GPU layer su hero img e bg
   - Shimmer rimosso (non più usato)
========================================================= */

body.is-gallery{ padding-top: 0 !important; }
body.is-gallery .film-noise{ display:none !important; }

/* ── HERO ─────────────────────────────────────────────── */
.gal-hero{
  position: relative;
  height: 100dvh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: #020617;
  color: rgba(226,232,240,.95);
}

.gal-media{ position:absolute; inset:0; z-index:0; }

/* Blur STATICO — impostato una sola volta via JS */
.gal-img-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  background-size: cover;
  background-position: center;
  display:block;
  transform: translateZ(0) scale(1.1);
  filter: blur(22px) saturate(1.1) brightness(0.75);
  opacity: 0.6;
  backface-visibility: hidden;
}

/* Hero image — nitida, interamente visibile, centrata */
.gal-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  object-position: center;
  display:block;
  transform: translateZ(0);
  will-change: opacity;
  backface-visibility: hidden;
}

.gal-overlay{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(2,6,23,.15), rgba(2,6,23,.55)),
    radial-gradient(circle at 28% 12%, rgba(34,211,238,.10), transparent 52%),
    radial-gradient(circle at 78% 92%, rgba(236,72,153,.08), transparent 60%);
}

/* ── CONTENT ──────────────────────────────────────────── */
.gal-content{
  position:relative; z-index:2;
  max-width: 980px;
  margin:0 auto;
  padding: calc(72px + env(safe-area-inset-top)) 16px 0;
  text-align:center;
}

.gal-kicker{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.26em;
  text-transform:uppercase;
  color: rgba(165,243,252,.95);
}
.gal-title{
  margin-top:10px;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight:900;
  letter-spacing:-.03em;
}
.gal-caption{
  margin-top:14px;
  display:inline-block;
  max-width: min(720px, 100%);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(2,6,23,.26);
  border: 1px solid rgba(148,163,184,.16);
  font-size:.92rem;
  font-weight:800;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 10px 24px rgba(0,0,0,.45);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── NAVIGAZIONE: frecce + counter ───────────────────── */
.gal-nav{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:10;
  transform: translateZ(0);
  backface-visibility: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  padding: 1.4rem 1.5rem calc(1.4rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(2,6,23,.65), transparent 85%);
}

.gal-nav-btn{
  width:52px; height:52px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #e2e8f0;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.gal-nav-btn svg{ width:22px; height:22px; }

.gal-nav-btn:disabled{
  opacity:.28;
  cursor:default;
}

@media (hover:hover) and (pointer:fine){
  .gal-nav-btn:hover:not(:disabled){
    background: rgba(34,211,238,.18);
    border-color: rgba(34,211,238,.5);
    transform: scale(1.08);
  }
}

.gal-nav-counter{
  font-size:1rem;
  font-weight:700;
  color: rgba(226,232,240,.85);
  letter-spacing:.08em;
  min-width:72px;
  text-align:center;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ── HERO IMAGE TRANSITION ────────────────────────────── */
#galHeroImg{ transition: opacity 0.2s ease; }

@media (prefers-reduced-motion: reduce){
  #galHeroImg{ transition: none; }
}

/* ── DESKTOP ──────────────────────────────────────────── */
@media (min-width: 900px){
  .gal-content{ padding-top: calc(88px + env(safe-area-inset-top)); }

  .gal-nav-btn{ width:58px; height:58px; }
  .gal-nav-btn svg{ width:24px; height:24px; }
  .gal-nav-counter{ font-size:1.05rem; min-width:80px; }
}