/* ==========================================================================
   Blocco condiviso — CUSTOMER STORY (una sola storia)
   Maintenance `Customer Story` 80:3281 · 1512 x 858
   Su Compliance c'e `Customer Story` 85:4212, stessa forma.

   E la Customer Story della Home SENZA il carosello: una storia, niente
   Mover, niente slide sovrapposte. Riusa integralmente le classi
   `.story__row`, `.story__photo`, `.story-card` di
   css/sections/10-customer-story.css: qui c'e solo la differenza.

   Verifica altezza: 160 + 58 (titolo) + 80 + 400 (recensione) + 160 = 858 ✔
   Griglia: 346 (foto) + 16 + 708 (citazione) + 16 + 346 (recap) = 1432 ✔
   ========================================================================== */

/* ⚠️ 4 set 2026 — CENTRATO. Richiesta di Andrea su Compliance («il titolo
   della sezione recensioni deve essere centrato»), ma la regola vale per
   tutte e quattro le pagine interne: il titolo della Customer Story sulla
   Home e centrato da sempre (`.story__h2` in 10-customer-story.css) ed e lo
   stesso elemento nello stesso posto. Averlo a sinistra qui era una
   dimenticanza, non una variante. */
.storia1__h2 {
  color: var(--text-on-light);
  width: 100%;
  text-align: center;
}

/* Nella Home questa riga sta dentro `.story__slides`, che e alto 400 e
   contiene quattro slide assolute. Qui la riga sta nel flusso e basta. */
.storia1 .story__row {
  margin-top: var(--space-6);          /* 80 */
}


/* ==========================================================================
   Variante con pulsante — Monitoring `Customer Story Monitoring` 113:2752
   1512 x 1000

   Tre differenze, e sono una conseguenza dell'altra:
     1. nella colonna centrale c'e un terzo figlio, il pulsante SEE INTERVIEW,
        a larghezza piena della colonna (628) e non hug;
     2. quindi la colonna passa da `space-between` a `gap: 40`;
     3. quindi la riga cresce da 400 a 454, che e il conto dei suoi figli:
        40 + 232 (citazione) + 40 + 19 (autore) + 40 + 43 (pulsante) + 40.

   ⚠️ Le altezze NON vanno fissate: 454 lo decide il contenuto della colonna
   centrale, e la foto e la card di destra ci arrivano con `align-self:
   stretch`. Fissare 454 vorrebbe dire ridichiararlo a ogni cambio di testo.

   Verifica altezza: 160 + 58 + 80 + 454 + 80 + 8 (Mover) + 160 = 1000 ✔
   ========================================================================== */

/* ⚠️ 4 set 2026 — `min-height: 400px`, non solo `height: auto`.
   Con il pulsante aggiunto anche su Maintenance (richiesta di Andrea:
   «Proof from the field» + «SEE INTERVIEW») e venuto fuori che liberare
   l'altezza puo far RIMPICCIOLIRE il blocco: la citazione di Carlo Pelli e
   piu corta di quella di Monitoring, e la riga scendeva da 400 a 367,
   portandosi dietro la sezione (858 -> 825). Il pulsante doveva far crescere
   il blocco, non accorciarlo.
   I 400 restano quindi il PAVIMENTO — sono la misura del mockup su
   Maintenance, Compliance e MRF — e da li in su comanda il contenuto: su
   Monitoring la colonna centrale chiede 454 e li arriva, come prima.
   `align-self: stretch` e gia dichiarato in 10-customer-story.css, quindi la
   foto e le due card seguono l'altezza della riga senza altro da scrivere. */
.storia1--cta .story__row,
.storia1--cta .story__photo,
.storia1--cta .story-card {
  height: auto;
  min-height: 400px;
}

/* ⚠️ 4 set 2026 — NIENTE PIU `gap: 40`. Adesso la citazione e l'autore
   stanno insieme in alto (10px fra loro, vedi 10-customer-story.css) e il
   pulsante va in fondo da solo, spinto dal `margin-bottom: auto` dell'autore.
   Un gap di 40 avrebbe distanziato anche la citazione dall'autore, cioe
   proprio quello che Andrea ha chiesto di stringere. */
.storia1--cta .story-card--quote {
  gap: 0;
}

/* 628 = 708 - 2 x 40. Il pulsante e l'unico del progetto a larghezza piena:
   `.btn` e hug dappertutto, qui va allargato esplicitamente.

   ⚠️ 7 set 2026 — LO STACCO MINIMO DALL'AUTORE. Segnalato da Andrea: «nella
   sezione interviste aggiungere uno spazio prima della CTA».
   L'autore ha `margin-bottom: auto`, che spinge il pulsante in fondo alla
   card: funziona finche nella card AVANZA spazio. Quando la citazione e
   lunga — ed e il caso di Monitoring, la schermata che Andrea ha mandato, e
   di ogni citazione in italiano, che e piu lunga dell'inglese — l'`auto` non
   ha niente da distribuire e vale zero: il pulsante si incolla alla riga
   dell'autore.
   Il `margin-top` non toglie niente all'`auto` quando c'e spazio (i due si
   sommano e l'auto assorbe il resto), e garantisce lo stacco quando non ce
   n'e. E' la differenza fra «spingi in fondo» e «stai almeno a 24». */
.storia1__cta {
  width: 100%;
  margin-top: var(--space-5);          /* 40 — stacco minimo dall'autore
                                          (7 set 2026: era 32, Andrea ha chiesto 40) */
}

/* Il Mover: 80 di gap dalla Recensione, come da auto-layout di sezione.
   Con un solo pallino la larghezza la fa il pallino (40), non gli 88 del
   carosello a quattro storie della Home. */
.storia1__mover {
  width: auto;
  margin-top: var(--space-6);          /* 80 */
}