/* ============================================
   ETC-GALLERY.CSS
   ─ Contenitore fisso sotto l'header
   ─ Scroll verticale interno (no scroll pagina)
   ─ 7 col desktop | 5 col tablet | 3 col mobile
   ─ Foto stessa dimensione (aspect-ratio 2/3)
   ─ Placeholder magenta in posizioni casuali
   ─ Lightbox massimizzato, non sovrapposto all'header
   ============================================ */

/* Pagina: nessuno scroll esterno */
body.page-etc {
  overflow: hidden;
  height:   100vh;
}

.etc-layout { padding-top: 0; }

/* ── CONTENITORE FISSO ──
   Si ancora ai margini della pagina (come About e Work)
   e occupa lo spazio sotto l'header fino al fondo. */
.etc-wrap {
  position:   fixed;
  top:        var(--header-height);
  left:       var(--grid-margin);
  right:      var(--grid-margin);
  bottom:     0;
  overflow:   hidden;   /* maschera il contenuto che esce */
}

/* ── AREA SCROLLABILE ──
   Altezza auto: cresce col contenuto.
   overflow-y scroll: rotellina mouse e swipe touch. */
.etc-scroll {
  width:       100%;
  height:      100%;
  overflow-y:  scroll;
  overflow-x:  hidden;
  display:     flex;
  gap:         12px;
  padding:     12px 0 32px;
  box-sizing:  border-box;
  /* scrollbar nascosta ma funzionante */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.etc-scroll::-webkit-scrollbar { display: none; }

/* ── SINGOLA COLONNA ── */
.etc-col {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            12px;
  align-self:     start;   /* altezza = contenuto, non del flex parent */
}

/* ── SINGOLA CELLA (foto o placeholder) ──
   aspect-ratio 2/3 → tutte uguale altezza visiva */
.etc-cell {
  width:        100%;
  aspect-ratio: 2 / 3;
  flex-shrink:  0;
  overflow:     hidden;
  position:     relative;
}

/* ── FOTO ── */
.etc-cell.is-photo {
  cursor: pointer;
}

.etc-cell.is-photo img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
  user-select:     none;
  pointer-events:  none;
  transition:      transform 0.3s ease;
}

.etc-cell.is-photo:hover img {
  transform: scale(1.04);
}

/* ── PLACEHOLDER MAGENTA ── */
.etc-cell.is-placeholder {
  background: var(--color-magenta);
  cursor:     default;
}

/* ── SFOCATURA SFONDO quando lightbox è aperto ── */
.etc-wrap.is-blurred .etc-cell.is-photo img {
  opacity:    0.2;
  filter:     blur(3px);
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.etc-wrap.is-blurred .etc-cell.is-placeholder {
  opacity:    0.2;
  transition: opacity 0.4s ease;
}

/* ── LIGHTBOX ──
   top: var(--header-height) → parte sotto l'header.
   La foto è centrata nello spazio disponibile.
   Il nome città nell'header rimane sempre leggibile. */
.etc-lightbox {
  position:        fixed;
  top:             var(--header-height);
  left:            0;
  right:           0;
  bottom:          0;
  z-index:         700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
  opacity:         0;
  transition:      opacity 0.3s ease;
  cursor:          pointer;
}

.etc-lightbox.is-open {
  pointer-events: all;
  opacity:        1;
}

/* Foto nello stack:
   occupa il massimo spazio disponibile sotto l'header
   mantenendo le proporzioni originali dell'immagine.
   max-height e max-width garantiscono che non sbordi. */
.etc-lightbox img {
  position:       absolute;
  max-height:     calc(100vh - var(--header-height) - 30px);
  max-width:      calc(100vw - 50px);
  width:          auto;
  height:         auto;
  object-fit:     contain;
  pointer-events: none;
  cursor:         default;
  box-shadow:     0 16px 60px rgba(0,0,0,0.28);
  transition:     filter 0.3s ease, opacity 0.3s ease;
}

/* ── TABLET max 1024px ── */
@media (max-width: 1024px) {
  .etc-scroll { gap: 10px; }
  .etc-col    { gap: 10px; }
}

/* ── MOBILE max 768px ── */
@media (max-width: 768px) {
  .etc-wrap {
    left:  var(--grid-margin);
    right: var(--grid-margin);
  }

  .etc-scroll {
    gap:     6px;
    padding: 8px 0 20px;
  }

  .etc-col { gap: 6px; }

  /* Mobile: foto lightbox occupa quasi tutto lo schermo */
  .etc-lightbox img {
    max-height: calc(100vh - var(--header-height) - 30px);
    max-width:  calc(100vw - 30px);
  }
}