/*
 * Cantieri in corso — aspetto
 *
 * Origine: .ongoing-* di source-clean/styles.css. Ogni valore letto.
 *
 * Ritaglio e ingrandimento arrivano da .falone-media e .falone-media--zoom
 * del tema. Qui si sovrascrive solo la durata (750ms invece di 650) e si
 * aggiungono il bianco e nero e il velo, che hanno valori propri di questa
 * sezione (0.04 -> 0.88, diversi dalle Competenze).
 *
 * Indice
 *   1. sezione e intestazione
 *   2. pista scorrevole
 *   3. scheda
 *   4. comandi (dal componente condiviso)
 *   5. movimento ridotto
 */

/* ======================================================================
   1. SEZIONE E INTESTAZIONE
   ====================================================================== */
.falone-ongoing {
  padding: 112px 52px;   /* scavalcato dal controllo Margini interni */
  background: var(--falone-ongoing-bg, #f5f4f1);
  overflow: hidden;      /* la pista sborda a destra: qui si taglia */
}

.falone-ongoing__head {
  display: grid;
  gap: 24px;
  max-width: 980px;
  margin-left: var(--falone-indent, 0px);
  margin-bottom: var(--falone-ongoing-head-gap, 54px);
}

.falone-ongoing__h2 {
  /* il modello lascia `h2 { margin-bottom: 24px }`, che dentro il grid
     dell'intestazione si somma al gap di 24 */
  margin: 0 0 var(--falone-h2-gap, 24px);
  color: var(--falone-ongoing-title-color, #121212);
}

.falone-ongoing__intro {
  max-width: 620px;
  /* ⚠️ Nel modello questo paragrafo conserva il margine sotto del browser
     (1em = 16px): e' l'ultimo elemento del grid dell'intestazione, quindi quel
     margine entra nell'altezza della fascia. Con `margin: 0` la sezione
     risultava 16px piu' corta del modello — misurato su tre fasce. */
  margin: 0 0 var(--falone-p-gap, 1em);
  color: var(--falone-ongoing-text-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 300;
}

.falone-ongoing .falone-eyebrow { color: var(--falone-ongoing-accent, #f7941d); }

/* ======================================================================
   2. PISTA SCORREVOLE
   ======================================================================
   Lo scorrimento e' NATIVO: overflow-x piu' scroll-snap. Non serve una
   libreria, e senza JavaScript le schede restano tutte raggiungibili.
   Il .js aggiunge solo i pulsanti e la barra di avanzamento.

   overscroll-behavior-x: contain impedisce che, arrivati in fondo alla
   pista, il gesto continui e faccia tornare indietro la pagina. */
.falone-ongoing__shell {
  margin-left: var(--falone-indent, 0px);
}

.falone-ongoing__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(
    var(--falone-ongoing-card-min, 420px),
    var(--falone-ongoing-card-vw, 43vw)
  );
  gap: var(--falone-ongoing-rail-gap, 18px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 52px 28px 0;

  /* la barra di scorrimento del sistema si nasconde: c'e' quella disegnata */
  scrollbar-width: none;
}
.falone-ongoing__rail::-webkit-scrollbar { display: none; }

/* la pista e' raggiungibile da tastiera (tabindex nel markup): il contorno
   di messa a fuoco va mostrato, o chi naviga cosi' si perde */
.falone-ongoing__rail:focus-visible {
  outline: 2px solid var(--falone-ongoing-accent, #f7941d);
  outline-offset: 4px;
}

/* ======================================================================
   3. SCHEDA
   ======================================================================
   position, overflow e isolation arrivano da .falone-media. */
.falone-ongoing__card {
  display: grid;
  align-content: end;
  min-height: var(--falone-ongoing-card-h, 500px);
  scroll-snap-align: start;
  background: var(--falone-ongoing-card-bg, #121212);
  color: var(--falone-ongoing-card-text, #fff);

  /* durata propria di questa sezione: sovrascrive il token del tema invece
     di riscrivere la transizione. Le scale restano quelle di default
     (1.04 -> 1.10), che coincidono con questa sezione. */
  --falone-dur-media: 750ms;
}

.falone-ongoing__card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  filter: grayscale(var(--falone-ongoing-gray, .3));
}

.falone-ongoing__card:hover img,
.falone-ongoing__card:focus-within img {
  filter: grayscale(var(--falone-ongoing-gray-hover, 0));
}

/* velo proprio: 0.04 -> 0.88, piu' leggero in alto di quello delle schede
   Competenze, quindi --falone-veil-card del tema non va bene qui */
.falone-ongoing__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,18,18,.04), rgba(18,18,18,.88));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--falone-ongoing-card-bg, #121212) calc(var(--falone-ongoing-veil-top, .04) * 100%), transparent),
    color-mix(in srgb, var(--falone-ongoing-card-bg, #121212) calc(var(--falone-ongoing-veil-bottom, .88) * 100%), transparent)
  );
}

.falone-ongoing__body {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  padding: 34px;
}

.falone-ongoing__cat {
  display: block;
  margin-bottom: 12px;
  color: var(--falone-ongoing-accent, #f7941d);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.falone-ongoing__title {
  margin: 0;
  color: var(--falone-ongoing-card-text, #fff);
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-weight: 600;
}

.falone-ongoing__text {
  margin: 0;
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 300;

  color: rgba(255, 255, 255, .72);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-ongoing-card-text, #fff) calc(var(--falone-ongoing-card-text-op, .72) * 100%),
    transparent);
}

/* ======================================================================
   4. COMANDI
   ======================================================================
   Comandi, pulsanti e barra arrivano da .falone-rail-controls /
   .falone-rail-btn / .falone-rail-progress del tema: identici nel sorgente
   fra questa sezione e Realizzazioni, quindi promossi a condivisi.
   Qui si sovrascrive solo l'accento e la larghezza su schermo stretto. */
.falone-ongoing .falone-rail-controls {
  --falone-rail-accent: var(--falone-ongoing-accent, #f7941d);
}

@media (max-width: 820px) {
  .falone-ongoing__rail { padding-right: 18px; }
  .falone-ongoing .falone-rail-controls {
    width: calc(100% - var(--falone-indent, 0px));
  }
}

/* ======================================================================
   5. MOVIMENTO RIDOTTO
   ======================================================================
   Lo scorrimento resta possibile, ma senza animazione: se ne occupa anche
   il .js, che passa a un salto secco invece di 'smooth'. */
@media (prefers-reduced-motion: reduce) {
  .falone-ongoing__rail { scroll-behavior: auto; }
  .falone-ongoing__card img { transition: none; }
  /* pulsanti e barra sono gestiti dal componente condiviso */
}