/* ============================================================
   masonry.css — Gallery masonry (CSS columns, robusta ovunque)
   Sostituisce il vecchio marquee orizzontale. Niente JS.
   ============================================================ */

.gallery { padding-block: clamp(0.5rem, 0.2rem + 1vw, 1.5rem); }

.masonry {
  columns: 4 250px;          /* ~4 colonne su desktop, fluide → masonry */
  column-gap: clamp(0.7rem, 0.4rem + 1vw, 1.1rem);
}

.shot {
  break-inside: avoid;
  margin-bottom: clamp(0.7rem, 0.4rem + 1vw, 1.1rem);
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: clip;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.shot img { width: 100%; height: auto; display: block; transition: transform var(--t-slow) var(--ease-out); }
.shot:hover img { transform: scale(1.04); }

.shot figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.8rem 0.9rem 0.7rem;
  font-size: var(--fs-min); font-weight: 600; letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-navy-900) 88%, transparent), transparent);
}
/* nome-luogo evidenziato: più grande del descrittore, fa da titolo della foto */
.shot figcaption span { color: var(--c-gold-soft); font-weight: 700; font-size: var(--fs-lead); }

/* su mobile mostra al massimo 3 foto: 8 sono troppe in colonna singola */
@media (max-width: 760px) {
  .masonry .shot:nth-of-type(n+4) { display: none; }
}