/* ==========================================================================
   Customer Story — le 4 slide del carosello
   --------------------------------------------------------------------------
   Foglio AGGIUNTIVO a css/sections/10-customer-story.css, che NON e stato
   toccato: qui ci sono solo le regole nuove introdotte dal passaggio da una
   sola storia a quattro.

   CARICAMENTO — build.py e stato corretto: ora raccoglie anche i fogli di
   css/sections/ il cui nome non corrisponde a un partial, accodandoli dopo
   quelli di base. Prima venivano ignorati in silenzio.

   MECCANICA — stesso schema di How Vidim Helps (.how-card__text--01/02/03):
   tutte le slide sono nel markup, sovrapposte in assoluto dentro un
   contenitore che occupa nel flusso lo spazio della vecchia Recensione
   (1432 x 400). Solo la 01 e visibile. Poiche nessuna slide e nel flusso,
   l'altezza della sezione resta 945px indipendentemente da quale sia attiva.
   Il JS del carosello e scritto a parte: qui c'e solo lo stato.
   ========================================================================== */


/* --- Contenitore delle slide ----------------------------------------------
   Prende il posto che aveva .story__row nel flusso della sezione: stessa
   larghezza (1432) e stessa altezza (400), cosi il calcolo verticale
   160 + 58 + 80 + 400 + 80 + 8 + 160 non cambia di un pixel.
   `flex: 0 0 auto` protegge dall'eventuale shrink del flex column di sezione.
--------------------------------------------------------------------------- */
.story__slides {
  position: relative;
  width: var(--container-width);           /* 1432px */
  height: 400px;
  flex: 0 0 auto;
}


/* --- La singola slide -----------------------------------------------------
   Fuori dal flusso e ancorata al contenitore: non puo alterare l'altezza
   della sezione ne spostare il Mover, qualunque sia la lunghezza dei testi.
   `pointer-events` spento sulle slide nascoste: senza, le card invisibili
   intercetterebbero i clic sopra quella visibile.
--------------------------------------------------------------------------- */
.story__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

/* Stato attivo — in questa fase e statico sulla 01 (classe nel markup).
   Il JS del carosello dovra spostare .is-active e aggiornare aria-hidden. */
.story__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Chi preferisce meno movimento: nessuna dissolvenza. */
@media (prefers-reduced-motion: reduce) {
  .story__slide { transition: none; }
}


/* ==========================================================================
   Loghi delle aziende nel Recap
   --------------------------------------------------------------------------
   Le due larghezze NON sono interscambiabili: Iren e 43.823 x 24, Idealservice
   e 106.0588 x 24, cioe due volte e mezzo. Il foglio di base fissa gia il caso
   Iren (storie 01 e 03); qui si corregge quello di Idealservice (storie 02 e
   04). Valori Figma esatti, non arrotondati.
   ========================================================================== */
.story-card__logo--idealservice {
  width: 106.0588150024414px;
}


/* ==========================================================================
   Storia 04 — contenuto da verificare
   --------------------------------------------------------------------------
   La citazione e identica a quella della storia 01 ma attribuita a un'altra
   persona e a un'altra azienda (vedi il commento esteso nel partial).
   Questa classe non produce alcun effetto visivo: serve come appiglio per
   trovare la slide e per poterla escludere dal carosello con una riga sola,
   se il cliente confermera che e un duplicato.
   ========================================================================== */
.story__slide--check { /* nessuno stile: solo marcatore */ }


/* --- Ritratti mancanti ----------------------------------------------------
   Ritratti e loghi mancanti: il tratteggio `.ph` di base.css e gia leggibile
   (didascalia da `data-ph`). Qui si aggiunge solo il caso della storia 04,
   la cui FOTO e stata dichiarata NON DISPONIBILE dalla cliente: segnalata in
   ambra per distinguerla da un asset semplicemente non ancora esportato.
   Vedi ASSET-DA-CARICARE.md — voce marcata "da reperire". */
.story__photo--missing {
  background: repeating-linear-gradient(45deg,
              rgb(190 140 40 / .20) 0 10px, rgb(190 140 40 / .08) 10px 20px);
  outline: 1px dashed rgb(190 140 40 / .75);
}

.story__photo--missing::after { color: rgb(150 105 20 / .95); }