/*
 * Realizzazioni — aspetto
 *
 * Origine: .projects-section / .section-heading.split / .project-rail /
 * .project-slide / .projects-controls / .rail-progress di
 * source-clean/styles.css. Ogni valore letto.
 *
 * Comandi, pulsanti e barra arrivano da .falone-rail-* del tema: nel
 * sorgente sono identici a quelli di Cantieri in corso.
 * Ritaglio e ingrandimento da .falone-media / --zoom, con le scale
 * sovrascritte: qui 1 -> 1.05 in 800ms, non 1.04 -> 1.10 in 650ms.
 *
 * Indice
 *   1. sezione
 *   2. intestazione a due colonne
 *   3. pista scorrevole
 *   4. diapositiva
 *   5. comandi
 *   6. movimento ridotto
 */

/* ======================================================================
   1. SEZIONE
   ====================================================================== */
.falone-projects {
  padding: 112px 52px;   /* scavalcato dal controllo Margini interni */
  background: var(--falone-projects-bg, #fff);
  overflow: hidden;      /* la pista sborda da entrambi i lati */
}

/* ======================================================================
   2. INTESTAZIONE A DUE COLONNE
   ======================================================================
   Variante .split del sorgente: titolo a sinistra, testo a destra, allineati
   in basso. minmax(0,1fr) minmax(300px,.45fr) -> il testo vale 31%. */
.falone-projects__head {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, var(--falone-projects-head-fr, .45fr));
  gap: 24px;
  align-items: end;
  margin-left: var(--falone-indent, 0px);
  margin-bottom: var(--falone-projects-head-gap, 62px);
}

.falone-projects__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-projects-title-color, #121212);
}

.falone-projects__intro {
  max-width: 590px;
  margin: 0;
  color: var(--falone-projects-text-color, #666);
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-weight: 300;
}

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

/* ======================================================================
   3. PISTA SCORREVOLE
   ======================================================================
   Scorrimento nativo. ⚠️ Qui il margine negativo pareggia il padding
   laterale: le diapositive sbordano da ENTRAMBI i lati della sezione,
   diversamente da Cantieri in corso che sborda solo a destra. */
.falone-projects__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(
    var(--falone-projects-slide-min, 450px),
    var(--falone-projects-slide-vw, 31vw)
  );
  gap: var(--falone-projects-rail-gap, 18px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 var(--falone-projects-bleed, 52px) 28px;
  margin: 0 calc(var(--falone-projects-bleed, 52px) * -1);
  scrollbar-width: none;
}
.falone-projects__rail::-webkit-scrollbar { display: none; }

.falone-projects__rail:focus-visible {
  outline: 2px solid var(--falone-projects-accent, #f7941d);
  outline-offset: 4px;
}

/* ======================================================================
   4. DIAPOSITIVA
   ======================================================================
   ⚠️ scroll-snap-align: center, non start: le diapositive si fermano al
   centro della finestra, non a sinistra. E' l'altra differenza con
   Cantieri in corso. */
.falone-projects__slide {
  display: grid;
  align-content: end;
  min-height: var(--falone-projects-slide-h, 500px);
  scroll-snap-align: center;
  background: var(--falone-projects-slide-bg, #121212);
  color: var(--falone-projects-slide-text, #fff);

  /* scale e durata proprie: qui la fotografia parte a grandezza reale */
  --falone-zoom-from: 1;
  --falone-zoom-to: var(--falone-projects-zoom, 1.05);
  --falone-dur-media: var(--falone-projects-dur, 800ms);
}

.falone-projects__slide img {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* nessun bianco e nero qui, diversamente dalle altre due sezioni */
.falone-projects__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,18,18,.02), rgba(18,18,18,.84));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--falone-projects-slide-bg, #121212) calc(var(--falone-projects-veil-top, .02) * 100%), transparent),
    color-mix(in srgb, var(--falone-projects-slide-bg, #121212) calc(var(--falone-projects-veil-bottom, .84) * 100%), transparent)
  );
}

.falone-projects__body {
  position: relative;
  z-index: 1;
  padding: var(--falone-projects-body-pad, 34px);
}

.falone-projects__cat {
  display: block;
  margin-bottom: 12px;
  color: var(--falone-projects-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-projects__title {
  margin: 0;
  color: var(--falone-projects-slide-text, #fff);
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-weight: 600;
}

.falone-projects__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-projects-slide-text, #fff) calc(var(--falone-projects-text-op, .72) * 100%),
    transparent);
}

/* ======================================================================
   5. COMANDI
   ====================================================================== */
.falone-projects .falone-rail-controls {
  --falone-rail-accent: var(--falone-projects-accent, #f7941d);
}

@media (max-width: 820px) {
  .falone-projects__head { grid-template-columns: 1fr; }
  .falone-projects__body { padding: 28px; }
  .falone-projects .falone-rail-controls { width: calc(100% - 36px); }
}

/* ======================================================================
   6. MOVIMENTO RIDOTTO
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .falone-projects__rail { scroll-behavior: auto; }
  .falone-projects__slide img { transition: none; }
}