/* ===== VSFF Gallery 2026: mosaico + lightbox ===== */

/* Mosaico "justified": righe della stessa altezza in cui ogni foto prende la larghezza
   proporzionale al suo formato (--ar = larghezza/altezza, impostato dal PHP).
   Le verticali diventano più strette ma alte come le altre: nessuna foto risulta sproporzionata,
   nessun ritaglio, e l'ultima riga non viene stirata. */
.vsffgal-wrap{
  --gal-h:300px;                 /* altezza di riferimento delle righe */
  --gal-gap:12px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
.vsffgal{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gal-gap);
}
.vsffgal::after{
  content:"";
  flex-grow:999999;              /* riempie l'ultima riga senza allargare le foto */
}
.vsffgal__item{
  position:relative;
  display:block;
  overflow:hidden;
  background:#1d345c;
  flex-grow:calc(var(--ar) * 100);
  flex-basis:calc(var(--ar) * var(--gal-h));
  aspect-ratio:var(--ar);
}
.vsffgal.is-justified::after{ display:none; }
/* con JS attivo le misure di ogni foto le calcola gallery.js */
.vsffgal.is-justified .vsffgal__item{
  flex:none;
  aspect-ratio:auto;
}
.vsffgal__img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  transition:transform .4s ease, opacity .3s ease;
}
.vsffgal__item:hover .vsffgal__img,
.vsffgal__item:focus-visible .vsffgal__img{
  transform:scale(1.04);
  opacity:.92;
}
.vsffgal__item:focus-visible{
  outline:3px solid #1d345c;
  outline-offset:3px;
}

@media (max-width:991.98px){
  .vsffgal-wrap{ --gal-h:260px; --gal-gap:10px; }
}
@media (max-width:575.98px){
  .vsffgal-wrap{ --gal-h:220px; --gal-gap:8px; }
}

/* --- Lightbox --- */
.vsffbox{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(13, 27, 52, .95);
  color:#eaf4fc;
  font-family:"Jost",sans-serif;
}
.vsffbox.is-open{
  display:flex;
}
.vsffbox__figure{
  margin:0;
  max-width:92vw;
  max-height:86vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.vsffbox__img{
  display:block;
  max-width:92vw;
  max-height:80vh;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  transition:opacity .2s ease;
}
.vsffbox__img.is-loading{
  opacity:.3;
}
.vsffbox__caption{
  margin-top:12px;
  font-size:15px;
  font-weight:300;
  text-align:center;
}
.vsffbox__counter{
  position:absolute;
  top:20px;
  left:24px;
  font-size:15px;
  letter-spacing:.08em;
}
.vsffbox__btn{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  border-radius:0;
  background:rgba(234, 244, 252, .12);
  color:#eaf4fc;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:background-color .2s ease;
}
.vsffbox__btn:hover,
.vsffbox__btn:focus-visible{
  background:rgba(234, 244, 252, .28);
  outline:none;
}
.vsffbox__close{ top:12px; right:12px; }
.vsffbox__prev{ left:12px; top:50%; transform:translateY(-50%); }
.vsffbox__next{ right:12px; top:50%; transform:translateY(-50%); }
.vsffbox__btn[hidden]{ display:none; }

@media (max-width:767.98px){
  .vsffbox__prev,
  .vsffbox__next{ top:auto; bottom:16px; transform:none; }
  .vsffbox__prev{ left:16px; }
  .vsffbox__next{ right:16px; }
  .vsffbox__img{ max-height:72vh; }
}
/* blocca lo scroll della pagina sotto il lightbox */
body.vsffbox-lock{
  overflow:hidden;
}