/* ==========================================================================
   Customer Story — 85:7880 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, NON una misura di Figma. Quando arriveranno i frame
   mobile questo file si sostituisce in blocco: css/sections/ e partials/
   non vanno toccati.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la sezione
   resta identica al mockup (1512 x 945: titolo 1432x58, Recensione 1432x400
   con 346 + 16 + 708 + 16 + 346, Mover 88x8).

   ---------------------------------------------------------------------------
   ORDINE DEI TRE BLOCCHI IN COLONNA SINGOLA — decisione MIA

   In colonna l'ordine e foto -> testimonianza -> recap, cioe ESATTAMENTE
   l'ordine del DOM: non uso mai `order`.
   Tre motivi:
     1. Narrativo: prima la faccia (chi parla), poi le sue parole, infine il
        contesto aziendale (logo Iren + numeri) come nota di chiusura. E la
        stessa lettura sinistra->destra del desktop, semplicemente ruotata.
     2. Il blocco "recap" e il meno importante dei tre: in fondo e il posto
        giusto per un blocco che si puo anche non leggere.
     3. `order` disaccoppierebbe l'ordine visivo da quello di lettura di
        tastiera e screen reader. Qui non serve: il DOM e gia quello giusto.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1511 · Desktop compresso — la sezione diventa fluida
   Restano tre blocchi in riga: si sciolgono solo le larghezze fisse (1432,
   346, 708, 628, 266) e le altezze fisse (400).
   346/1432 = 24.16% -> foto e recap tengono la loro quota di griglia,
   la testimonianza resta `flex: 1 0 0` e si prende il resto.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .story__h2,
  .story__slides,
  .story__row {
    width: 100%;                 /* era var(--container-width) = 1432 */
  }

  /* Il carosello: da sovrapposizione assoluta a griglia sovrapposta.
     A 1512 le quattro slide sono `position: absolute; inset: 0` dentro un
     contenitore alto 400: e il modo piu semplice per tenere l'altezza della
     sezione identica al mockup. Sotto i 1512 la citazione va a capo piu
     volte, la riga supera i 400px e le slide assolute la taglierebbero.
     Mettendo le slide nella STESSA cella di una griglia restano comunque
     sovrapposte (la dissolvenza continua a funzionare, il JS non cambia) ma
     il contenitore prende l'altezza della slide piu alta.
     `align-items: start` evita che le slide corte vengano stirate. */
  .story__slides {
    display: grid;
    align-items: start;
    height: auto;
  }

  .story__slide {
    position: static;
    grid-area: 1 / 1;
  }

  /* I 400px valevano al wrapping di 708: appena la card si stringe la citazione
     (6 righe a 628px) ne prende 7-8 e la riga cresce. L'altezza va rilasciata,
     ma resta un MINIMO pari al valore Figma cosi il blocco non si accartoccia
     quando la citazione e corta. */
  .story__row { height: auto; }

  .story-card {
    height: auto;
    min-height: 400px;
  }

  /* 628 = 708 - 2*40 e 266 = 346 - 2*40: erano i content box di Figma,
     ora li calcola il padding della card. */
  .story-card__quote,
  .story-card__author,
  .story-card__recap {
    width: 100%;
  }

  /* La foto e un .ph con dimensioni fisse in px: niente height, si passa al
     rapporto. `align-self: stretch` (ereditato dalla sezione) resta e vince
     sull'aspect-ratio finche i tre blocchi sono in riga -> la foto continua
     ad allinearsi in altezza alle due card, come in Figma. L'aspect-ratio
     entra in gioco solo quando la riga diventa colonna (<= 1023), dove
     `stretch` governa la larghezza e non piu l'altezza. */
  .story__photo {
    width: 24.16%;               /* 346 / 1432 */
    height: auto;
    aspect-ratio: 346 / 400;     /* il rapporto del frame 85:7776 */
    min-height: 0;
  }

  /* min-width: 0 sulle card flex: senza, il contenuto imporrebbe la propria
     larghezza minima e la riga sfonderebbe invece di comprimersi. */
  .story-card--quote { min-width: 0; }

  .story-card--recap {
    width: 24.16%;               /* 346 / 1432 */
    min-width: 0;
  }
}


/* --------------------------------------------------------------------------
   <= 1279 · Laptop — il recap scende sotto, a piena larghezza
   Scelta MIA. A 1024 il recap al 24.16% sarebbe largo 228px: meno i 40+40 di
   padding restano 148px di testo, cioe righe da 3 parole con il logo Iren
   sospeso sopra. Invece di stringerlo lo mando a capo con `flex-wrap`:
   la coppia foto + testimonianza (che e il cuore della sezione) resta in riga
   e il recap diventa una fascia larga sotto.
   Il ritorno a capo e affidato a wrap + width:100%, non a `order`.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .story__row {
    flex-wrap: wrap;
    align-items: stretch;        /* le due card della prima riga pari in altezza */
    row-gap: var(--space-3);     /* 16px, come il gap di colonna di Figma */
  }

  /* 30% e MIO: a 1024 la foto e 283px, praticamente la stessa larghezza che
     aveva a 1512 (346), quindi il ritratto non si deforma. */
  .story__photo { width: 30%; }

  /* base 400px: sotto quella soglia la citazione andrebbe a capo troppo
     presto e la coppia si spezzerebbe da sola. */
  .story-card--quote { flex: 1 1 400px; }

  /* Fascia larga: niente quota di griglia, niente altezza minima (il
     contenuto e logo + 3-4 righe, 400px lascerebbero un buco).
     Il gap serve perche `justify-content: space-between`, su una card ad
     altezza automatica, non produce piu nessuno stacco fra logo e testo.
     16px e MIO. */
  .story-card--recap {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
    gap: var(--space-3);
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — i blocchi affiancati si impilano
   Colonna singola nell'ordine del DOM: foto, testimonianza, recap.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .story {
    gap: 56px;                   /* era 80 (--space-6). MIO. */
  }

  .story__row {
    flex-direction: column;
    flex-wrap: nowrap;           /* in colonna il wrap creerebbe colonne */
    align-items: stretch;
    gap: var(--space-4);         /* 32px MIO: 16 fra blocchi a piena larghezza
                                    e troppo poco per leggerli come separati */
  }

  /* In colonna `align-self: stretch` governa la LARGHEZZA: l'altezza torna
     all'aspect-ratio. 346/400 (verticale) su un blocco largo 720px darebbe
     832px di foto, mezzo schermo di ritratto: il taglio diventa orizzontale.
     3/2 e MIO. */
  .story__photo {
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  .story-card--quote,
  .story-card--recap {
    width: 100%;
    flex: 0 0 auto;
  }

  /* A piena larghezza la citazione occupa 4-5 righe: i 400px di minimo
     lascerebbero un vuoto sotto. Le card tornano alte quanto il contenuto. */
  .story-card {
    min-height: 0;
    gap: var(--space-4);         /* 32px MIO, sostituisce lo space-between che
                                    ad altezza automatica non ha piu effetto */
  }

  /* Su una card larga quanto lo schermo la citazione a 24px farebbe righe da
     90+ caratteri: la si tiene su una misura leggibile. MIO. */
  .story-card__quote { max-width: 62ch; }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile — colonna singola
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .story { gap: 40px; }          /* MIO */

  /* 3/2 su 720px erano 480px di foto; su 327-719px il ritratto puo tornare
     un po' piu alto senza mangiare lo schermo. 4/3 e MIO. */
  .story__photo { aspect-ratio: 4 / 3; }

  .story-card { gap: var(--space-3); }   /* 16px MIO */
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  /* 40px di padding su una card larga ~343 lascerebbero 263px di testo:
     con la citazione a 24px sono 5-6 parole per riga. 24 e MIO (stesso
     valore usato dalle altre sezioni su mobile stretto). */
  .story-card { padding: 24px; }

  /* Il Mover (88 x 8) sta comodo a qualsiasi larghezza: nessuna regola.
     I pallini restano 8px anche se sotto il minimo touch di 44px: sono
     decorativi finche non c'e JS, e la loro dimensione e un dato Figma.
     Quando il carosello diventera interattivo va allargata l'area di tocco
     con un ::before, NON il pallino. */
}