/*
 * Galleria dei lavori realizzati — aspetto
 *
 * Origine: .realized-gallery-section / .realized-gallery e figli di
 * source-clean/styles.css, piu' il blocco @media (max-width: 820px).
 * Ogni valore letto.
 *
 * ⚠️ QUARTA pista scorrevole del sito, e la sola SENZA comandi: nel
 * sorgente non ha pulsanti ne' barra, quindi non usa rail.js. Nessun
 * JavaScript in questa sezione.
 *
 * ⚠️ Come nelle altre tre piste, il massimo in vw di minmax() non fa
 * niente: in un carosello lo spazio libero e' negativo, quindi le schede
 * restano sempre alla larghezza MINIMA (340px qui). Per cambiarla si usa
 * il controllo Larghezza minima. Vale anche nel sorgente.
 *
 * Indice
 *   1. fascia scura
 *   2. pista
 *   3. scheda
 */

/* ======================================================================
   1. FASCIA SCURA
   ======================================================================
   ⚠️ #111 del sorgente normalizzato su #121212, come le altre fasce. */
.falone-gallery {
  padding: var(--falone-gallery-pad-y, 112px) var(--falone-gallery-pad-x, 52px);
  background: var(--falone-gallery-bg, #111111);   /* modello: #111 */
  color: var(--falone-gallery-ink, #fff);
  overflow: hidden;   /* la pista sborda a destra: qui si taglia */
}

/* .realized-gallery-section stringe l'intestazione condivisa da 62 a 42 */
.falone-gallery__head { margin-bottom: var(--falone-gallery-head-gap, 42px); }

.falone-gallery__h2 {
  /* modello: `h2 { margin-bottom: 24px }` */
  margin: 0 0 var(--falone-h2-gap, 24px);
  color: var(--falone-gallery-ink, #fff);
}

/* ======================================================================
   2. PISTA
   ====================================================================== */
.falone-gallery__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(
    var(--falone-gallery-card-min, 340px),
    var(--falone-gallery-card-vw, 32vw)
  );
  gap: var(--falone-gallery-gap, 16px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--falone-gallery-rail-pad, 24px);
  scrollbar-width: none;
}
.falone-gallery__rail::-webkit-scrollbar { display: none; }

/* la pista e' raggiungibile da tastiera (tabindex nel markup): senza
   contorno visibile chi naviga cosi' si perde. Aggiunta nostra. */
.falone-gallery__rail:focus-visible {
  outline: 2px solid var(--falone-gallery-accent, #f7941d);
  outline-offset: 4px;
}

/* ======================================================================
   3. SCHEDA
   ====================================================================== */
.falone-gallery__item {
  position: relative;
  min-height: var(--falone-gallery-card-h, 460px);
  display: grid;
  align-content: end;
  padding: var(--falone-gallery-card-pad, 28px);
  overflow: hidden;
  scroll-snap-align: start;
  /* ⚠️ #050505: un nero ancora piu' profondo, valore a se' del sorgente.
     Si vede solo se la fotografia manca o non copre. */
  background: var(--falone-gallery-card-bg, #050505);
}

/* ⚠️ Selettore DISCENDENTE: `.elementor img { height: auto }` (0,1,1)
   batterebbe la classe sola e la foto non riempirebbe la scheda. */
.falone-gallery__item .falone-gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--falone-gallery-img-op, .78);
  transition: transform var(--falone-gallery-dur, .55s) var(--falone-ease, ease);
}

.falone-gallery__item:hover .falone-gallery__img,
.falone-gallery__item:focus-within .falone-gallery__img {
  transform: scale(var(--falone-gallery-zoom, 1.04));
}

.falone-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .78));   /* ripiego */
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-gallery__item::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--falone-gallery-veil-color, #000) calc(var(--falone-gallery-veil-top, .02) * 100%), transparent),
      color-mix(in srgb, var(--falone-gallery-veil-color, #000) calc(var(--falone-gallery-veil-bottom, .78) * 100%), transparent));
  }
}

.falone-gallery__cat,
.falone-gallery__title {
  position: relative;
  z-index: 1;
}

.falone-gallery__cat {
  display: block;
  margin-bottom: var(--falone-gallery-cat-gap, 10px);
  color: var(--falone-gallery-accent, #f7941d);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.falone-gallery__title {
  margin: 0;
  /* ⚠️ Colore PROPRIO, non l'ink della fascia: questo titolo sta sopra la
     FOTOGRAFIA della scheda (fondo #050505 piu' velo), non sul fondale della
     sezione. Quando la fascia e' diventata chiara (alternanza del 31/08) l'ink
     e' passato a #262626 e i cinque titoli sono finiti grigio scuro su nero —
     rapporto 1,35:1. E' la stessa trappola gia' vista su `falone-works`, dove
     esiste `--falone-works-card-ink` per questo motivo. */
  color: var(--falone-gallery-card-ink, #fff);
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-weight: 600;
}

@media (max-width: 820px) {
  .falone-gallery {
    padding: var(--falone-gallery-pad-y-tablet, 72px) var(--falone-gallery-pad-x-tablet, 18px);
  }
  .falone-gallery__rail {
    grid-auto-columns: minmax(
      var(--falone-gallery-card-min-tablet, 280px),
      var(--falone-gallery-card-vw-tablet, 86vw)
    );
  }
  .falone-gallery__item { min-height: var(--falone-gallery-card-h-tablet, 420px); }
}

@media (prefers-reduced-motion: reduce) {
  .falone-gallery__item .falone-gallery__img { transition: none; }
  .falone-gallery__item:hover .falone-gallery__img,
  .falone-gallery__item:focus-within .falone-gallery__img { transform: none; }
}