/* ==========================================================================
   GALLERIA — layout masonry editoriale art-directed
   6 slot con posizionamento esplicito: nessun random, ogni foto ha una
   posizione intenzionale. Asimmetria calcolata, non automatica.
   ========================================================================== */

.galleria {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
  background-color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   Intestazione
   -------------------------------------------------------------------------- */

.galleria__header {
  max-width: var(--max-width-wide);
  margin: 0 auto var(--space-12);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.galleria__header .eyebrow {
  opacity: 0;
  transform: translateY(12px);
}

.galleria__title {
  font-family: var(--font-display);
  font-weight: var(--font-light);
  font-style: italic;
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  opacity: 0;
  transform: translateY(14px);
}

/* --------------------------------------------------------------------------
   Griglia art-directed — 3 colonne, 3 righe
   Proporzioni: col 4fr | 5fr | 3fr
   Altezze: row 30vw | 20vw | 26vw

   Slot:
   [1 portrait, col1 r1-2] [2 landscape, col2 r1] [3 portrait, col3 r1-2]
   [1 cont.             ]  [4 square,    col2 r2] [3 cont.              ]
   [5 wide,  col1-2 r3  ]                         [6 square, col3 r3    ]
   -------------------------------------------------------------------------- */

.galleria__grid {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: var(--space-3);
}

/* Posizionamento esplicito dei 6 slot — solo desktop, oltre i 900px */
@media (min-width: 901px) {
  .galleria__grid {
    grid-template-columns: 4fr 5fr 3fr;
    grid-template-rows: clamp(180px, 30vw, 430px)
                        clamp(120px, 20vw, 288px)
                        clamp(160px, 26vw, 374px);
  }

  .galleria__item:nth-child(1) { grid-column: 1;     grid-row: 1 / 3; }
  .galleria__item:nth-child(2) { grid-column: 2;     grid-row: 1;     }
  .galleria__item:nth-child(3) { grid-column: 3;     grid-row: 1 / 3; }
  .galleria__item:nth-child(4) { grid-column: 2;     grid-row: 2;     }
  .galleria__item:nth-child(5) { grid-column: 1 / 3; grid-row: 3;     }
  .galleria__item:nth-child(6) { grid-column: 3;     grid-row: 3;     }
}

/* --------------------------------------------------------------------------
   Singolo item
   -------------------------------------------------------------------------- */

.galleria__item {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-2);
  /* stato iniziale per JS */
  opacity: 0;
  transform: translateY(16px);
}

.galleria__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* desaturazione leggera — look editoriale */
  filter: saturate(0.78);
  transform: scale(1);
  transition:
    filter  var(--duration-glacial) var(--ease-out-quart),
    transform var(--duration-glacial) var(--ease-out-expo);
}

/* Hover: colore torna, leggero zoom */
.galleria__item:hover img {
  filter: saturate(1);
  transform: scale(1.04);
}

/* Overlay sottilissimo su hover — solo per dare profondità */
.galleria__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.galleria__item:hover::after {
  opacity: 0.08;
}

/* Placeholder visuale quando foto non caricata */
.galleria__item--placeholder {
  background-color: var(--color-surface-2);
}

/* Numeri dei placeholder — visibili solo in assenza di immagini */
.galleria__item--placeholder::before {
  content: attr(data-slot);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-3xl);
  color: var(--color-surface-3);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Link (se il client vuole rimandare a una pagina dettaglio)
   -------------------------------------------------------------------------- */

.galleria__item a {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .galleria__grid {
    gap: var(--space-2);
  }

  /* Altezze proporzionali su tablet */
  .galleria__item { aspect-ratio: 4 / 5; }

  /* Il primo item è wider su tablet */
  .galleria__item:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

@media (max-width: 480px) {
  .galleria__grid {
    grid-template-columns: 1fr;
  }

  .galleria__item,
  .galleria__item:nth-child(1) {
    grid-column: 1;
    aspect-ratio: 3 / 4;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .galleria__header .eyebrow,
  .galleria__title,
  .galleria__item {
    opacity: 1;
    transform: none;
  }

  .galleria__item img {
    transition: filter var(--duration-base);
  }
}