/* ==========================================================================
   How Vidim Hepls — 63:2908 · responsive
   (il refuso "Hepls" e del layer Figma, riportato dalla spec)

   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.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la sezione
   resta identica al mockup (1020px di altezza, 2 colonne da 696, gap 40,
   How Card 696x187 con figli in posizionamento assoluto).

   Struttura desktop:
     .how__media 696 x 700 — fill al 174.63% ancorato a sinistra, tagliato
     .how__col   696 x 700 — Text 265 + How Card 187, space-between
     .how-card   696 x 187 — numero decorativo 160px che sborda a x -40,
                             Text01 visibile, Text02/Text03 a opacity 0
   ========================================================================== */


/* --------------------------------------------------------------------------
   1280-1511 · Desktop compresso
   Le due colonne restano affiancate: si sciolgono le altezze fisse (700, 187)
   e le larghezze fisse interne alla card (516).
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  /* stretch al posto di flex-start: le due colonne restano alte uguali come
     nel mockup (700 = 700). Chi detta l'altezza e il piu alto dei due, e
     l'altro si adegua — cosi la How Card resta appoggiata al bordo inferiore
     (space-between) e sotto l'immagine non si apre una fascia vuota. */
  .how { align-items: stretch; }

  /* 696x700 -> larghezza fluida, proporzione conservata con aspect-ratio.
     Con lo stretch l'aspect-ratio vale come altezza naturale dell'immagine:
     detta la misura quando l'immagine e il blocco piu alto, e cede quando a
     essere piu alta e la colonna di testo (il fill e comunque in crop). */
  .how__media {
    height: auto;
    aspect-ratio: 696 / 700;
  }

  /* Il core mette max-width:100% su tutti i .ph, ma qui il fill e in crop
     (width 174.63%) dentro un wrapper con overflow hidden: cappandolo al 100%
     resterebbe una banda vuota a destra. Si ripristina il comportamento. */
  .how__media-img { max-width: none; }

  /* 700px vale al wrapping di 696: rilasciata.
     gap MIO: quando la colonna hugga il contenuto (sotto lo stack, o se il
     testo supera l'immagine) space-between non separa piu nulla. */
  .how__col {
    height: auto;
    gap: var(--space-5);              /* 40 */
  }

  /* --- How Card ----------------------------------------------------------
     In Figma i figli sono tutti in posizionamento assoluto dentro un box di
     187px: appena la card si stringe, Text01 va a capo e finisce tagliato da
     overflow:clip (che nel mockup serve solo a tagliare il numero).

     SCELTA MIA: Text01 torna nel flusso e la card lo hugga, con 187px come
     minimo. Text02/Text03 restano assoluti e a opacity 0 come in Figma (sono
     gli stati pronti per l'animazione), quindi non concorrono all'altezza;
     gli si toglie solo la larghezza fissa di 516px e li si ancora al padding
     destro, cosi non sporgono mai oltre la card. Nessun overflow di documento
     comunque possibile: overflow:clip li taglia. */
  .how-card {
    height: auto;
    min-height: 187px;
    display: flex;
    align-items: center;

    /* Il padding sinistro sostituisce il left:160px di Text01 e deve seguire
       il numero decorativo, che scala col core (clamp 72-160px).
       Il box del numero e 175px a font 160px -> 1.094em; lo sbordo di 40px e
       0.25em (vedi sotto), quindi il bordo destro visibile cade a 0.844em.
       Piu 24px di respiro. A 1440 vale 152px contro i 160 del mockup. */
    padding: var(--space-5) var(--space-5) var(--space-5)
             calc(var(--type-display-xl-size) * .844 + 24px);
  }

  /* Lo sbordo a sinistra e 40px su un corpo di 160px, cioe 0.25em: espresso in
     em segue il corpo che scala e la quota di numero visibile resta sempre il
     77% del glifo, come nel mockup. Lasciandolo a -40px fissi, a 480px si
     vedrebbe meno di meta "01". */
  .how-card__num { left: -.25em; }

  .how-card__text--01 {
    position: static;
    width: auto;
    transform: none;
  }

  .how-card__text--02,
  .how-card__text--03 {
    left: calc(var(--type-display-xl-size) * .844 + 24px);
    right: var(--space-5);
    width: auto;
  }
}


/* --------------------------------------------------------------------------
   1024-1279 · Laptop
   Nessun cambio di struttura: le due colonne reggono ancora affiancate.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .how { gap: var(--space-4); }       /* 40 -> 32, MIO */
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — le due colonne si impilano
   A 1024 ogni colonna e sotto i 460px: l'H2 da 48px e il paragrafo da 7 righe
   diventano una colonna stretta accanto a un'immagine quasi quadrata.
   Immagine sopra, testo + card sotto.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .how {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);              /* 40 */
    padding-block: 96px;              /* 160 -> 96, stessa scala del core */
  }

  /* In colonna il `flex: 1 0 0` delle due colonne diventa una base
     sull'ALTEZZA: l'immagine collasserebbe a 0 e la colonna testo si
     stirerebbe. Entrambe tornano a dimensionarsi sul contenuto. */
  .how__media,
  .how__col {
    flex: none;
  }

  /* A piena larghezza un box 696:700 sarebbe alto quanto lo schermo.
     Proporzione MIA: 16/10, che sul crop del fill mostra piu superficie utile. */
  .how__media {
    align-self: auto;
    aspect-ratio: 16 / 10;
  }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .how { padding-block: 64px; }       /* 96 -> 64, stessa scala del core */
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto — il numero decorativo cambia ruolo
   Sotto i 480 la card e larga ~295px: il numero che sborda a sinistra si
   mangerebbe 65px di padding lasciando ~190px al testo, e di se stesso
   mostrerebbe solo una scheggia dell'"1". SCELTA MIA: smette di essere un
   fondale tagliato e rientra nel flusso come marcatore di step sopra il
   titolo (e gia il primo figlio nel markup, nessuna modifica all'HTML).
   Resta bianco al 25%, quindi la gerarchia visiva non cambia.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .how-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);              /* 8, MIO */
    padding: 24px;                    /* 40 -> 24, MIO */
  }

  .how-card__num {
    position: static;
    width: auto;
    font-size: 56px;                  /* MIO: marcatore, non piu fondale */
    line-height: 1;
  }

  /* i due stati nascosti seguono il nuovo padding */
  .how-card__text--02,
  .how-card__text--03 {
    left: 24px;
    right: 24px;
  }
}