/* ==========================================================
   PICIEMME — Gallery editoriale (componente unico)
   Frame 81:3673 (desktop) e 146:3480 (mobile).
   Sequenza verticale di moduli "full" e "pair": nessuna masonry,
   nessuna griglia uniforme.
   ========================================================== */

:root{
  /* Stesso passo in orizzontale e in verticale: la gallery si legge come
     una griglia a maglia uniforme. I due token restano distinti perché
     governano cose diverse, ma oggi valgono lo stesso. */
  --gal-pair-gap:20px;
  --gal-block-gap:20px;
  --gal-max:740px;

  /* Proporzioni prese dal Figma. Desktop e mobile coincidono:
     666/355 e 361/192.42 danno lo stesso numero. */
  --gal-ar-land:1.876;        /* orizzontale a tutta larghezza  */
  --gal-ar-port:0.8955;       /* verticale, sia full sia coppia */
  --gal-ar-pair-land:1.59;    /* coppia di orizzontali          */
}

/* --- Contenitore: colonna unica, mai multicolonna --- */
.gal{
  width:100%; max-width:var(--gal-max); margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--gal-block-gap);
}

/* --- Modulo "pair": due celle di pari larghezza, allineate sopra e sotto.
       Restano due colonne anche su mobile, come nel riferimento. --- */
.gal-blocco.pair{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gal-pair-gap);
  align-items:start;
}

/* --- Figura --- */
.gal-fig{ margin:0; min-width:0; }
/* Il rapporto è dichiarato sul contenitore: l'altezza è nota prima che
   l'immagine arrivi, quindi il caricamento non sposta nulla. */
.gal-fig .box{
  position:relative; width:100%; aspect-ratio:var(--ar, var(--gal-ar-land));
  background:var(--n300); overflow:hidden;
}
.gal-fig img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:var(--focal, 50% 50%);
}
/* Errore di caricamento: resta il box grigio alla quota giusta, niente salti */
.gal-fig img.ko{ visibility:hidden; }
.gal-fig figcaption{
  margin-top:8px;
  font-size:var(--fs-xs); font-weight:400; font-style:italic;
  line-height:1.35; color:var(--n700);
}

/* --- Casi limite --- */
.gal-vuota{
  padding:32px 0; font-size:var(--fs-body); font-style:italic; color:var(--n700);
}

/* =========================================================
   Solo su viewport davvero strette le coppie si impilano.
   La soglia non è un breakpoint di comodo: sotto i 340px di
   viewport una cella di coppia scende sotto i ~150px e le
   fotografie diventano illeggibili.
   ========================================================= */
@media (max-width:339px){
  .gal-blocco.pair{ grid-template-columns:1fr; gap:var(--gal-pair-gap); }
}