/* ==========================================================================
   In Good Company — 37:1687 · 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.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la sezione
   resta identica al mockup (1512 x 760: Container 1432x600, gruppo "100%"
   1127x436 con bottom -100, Title e Caption su 1272).

   ---------------------------------------------------------------------------
   IL PUNTO DELICATO: IL "100" DA 600px TAGLIATO DI PROPOSITO

   In Figma il gruppo 42:2080 e alto 436px (= 600 * 0.727, cap-trim) e ha
   bottom = -100px rispetto al Container: sporge di 100px sotto il bordo
   inferiore e l'`overflow: hidden` del Container lo taglia. Il taglio E il
   design: della cap-height restano visibili 336px su 436, cioe il 77.1%.

   Il core rende fluido il token con clamp(180px, 40vw, 600px), MA la sezione
   dichiara `height: 436px` e `bottom: -100px` in PIXEL FISSI. Sotto i 1512
   quei due numeri non seguono piu il font e il taglio si rompe in due modi
   opposti, entrambi sbagliati:

     - il box da 436 resta piu alto del testo rimpicciolito, e siccome
       l'allineamento e flex-start il glifo resta appeso in ALTO nel box:
       a ~300px di font il "100" finisce INTERAMENTE dentro il Container e
       il taglio SPARISCE — il numero diventa una scritta che galleggia in
       mezzo alla card, con 100px di vuoto sotto;
     - all'estremo opposto, se il box fosse piu corto del testo, i -100px
       fissi taglierebbero una fetta sproporzionata: troncamento sbagliato.

   La correzione e rendere PROPORZIONALI al font-size entrambi i valori:

       height = size * --inter-cap-height      (436 = 600 * 0.727)
       bottom = size / -6                      (-100 = -600 / 6)

   Cosi la frazione visibile resta costante a ogni dimensione:
       (0.727 - 1/6) / 0.727 = 77.1%  — esattamente il taglio di Figma.
   Il taglio e proporzionale anche all'altezza della card, che qui viene
   rilasciata: il numero e ancorato al BORDO INFERIORE, non a un'altezza.

   ALLINEAMENTO NUMERO + PERCENTO
   Il "%" e agganciato in alto sulla cap-height del "100" (flex-start fra due
   box entrambi cap-trimmati). L'aggancio regge da solo a qualsiasi
   dimensione, perche entrambe le implementazioni di .cap-trim sono
   proporzionali al font-size (text-box-trim: cap alphabetic, oppure il
   fallback line-height: 0.727 unitless = 0.727em). Nessuno dei due testi va
   mai a capo (white-space: nowrap), quindi il fallback non ha modo di
   rompersi. Il trim NON va toccato.

   Quello che invece si rompe e il RAPPORTO fra i due corpi. In Figma e
   600:120 = 5:1, ma i due token hanno clamp indipendenti e vi diminuzioni
   diverse: a 375px il "100" e al minimo (180px) mentre il "%" e gia al suo
   (56px), e il rapporto crolla a 3.2:1 — un percento gigante appiccicato a
   un numero piccolo. Qui il corpo del "%" viene riagganciato a 1/5 del "100"
   (dichiarazione locale del token, solo dentro il gruppo decorativo).
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1511 · Desktop compresso — la sezione diventa fluida
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  /* 1432 era il container di Figma; 600 era l'altezza del frame. L'altezza
     va rilasciata perche lead e caption vanno a capo appena si stringe, ma
     resta un minimo pari al valore Figma. L'`overflow: hidden` NON si tocca:
     e lui a produrre il taglio del numero. */
  .igc__card {
    width: 100%;
    height: auto;
    min-height: 600px;
  }

  /* 1272 = 1432 - 2*80: era il content box, ora lo calcola il padding. */
  .igc__title,
  .igc__h2,
  .igc__lead,
  .igc__caption {
    width: 100%;
  }

  /* --- Il taglio del "100": da px fissi a proporzioni del font ------------
     436 -> size * 0.727   (cap-height di Inter, token gia esistente)
     -100 -> size / -6     (100/600 = 1/6)
     Vedi la nota lunga in testa al file. */
  .igc__number {
    height: calc(var(--type-display-xxl-size) * var(--inter-cap-height));
    bottom: calc(var(--type-display-xxl-size) / -6);
  }

  /* Rapporto 5:1 fra "100" e "%" (600/120), ripristinato agganciando il
     token del percento a quello del numero. La dichiarazione e locale al
     gruppo decorativo: --type-display-l-size resta invariato ovunque
     altrove (Vidim Numbers lo usa e non deve accorgersene). */
  .igc__number-unit {
    --type-display-l-size: calc(var(--type-display-xxl-size) / 5);
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* 80/80/40 su una card larga ~700px sono un terzo della larghezza.
     64/40/40 e MIO. */
  .igc__card {
    padding: 64px 40px 40px;
    min-height: 480px;           /* MIO: 600 tarati su un numero da 600px */
  }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .igc__card {
    padding: 48px 24px 32px;     /* MIO */
    min-height: 400px;           /* MIO */
  }

  /* Il lead ha tre hard break (<br>) presi dal contenuto Figma. A questa
     larghezza ogni segmento va comunque a capo da solo: i <br> restano
     (niente modifiche al markup) e producono al massimo una riga corta in
     piu. Nessun overflow: sono <br>, non nowrap. */
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .igc__card {
    padding: 40px 16px 24px;     /* MIO */
    min-height: 340px;           /* MIO */
  }

  /* Il PAVIMENTO del clamp del core (180px) e l'unico punto in cui il
     numero smette di essere proporzionale: sotto i 450px di viewport i
     180px non scendono piu, mentre la card continua a stringersi, e il
     gruppo "100%" (largo ~1.88 volte il proprio corpo) arriva a toccare i
     due bordi. Il taglio verticale resterebbe corretto, ma comparirebbe un
     taglio ORIZZONTALE non voluto.
     Si abbassa il solo pavimento, localmente al gruppo decorativo: a 479px
     40vw vale gia 191px, quindi il valore effettivo non cambia al confine
     (nessun salto) e il pavimento entra in gioco solo sotto i ~300px.
     A 375px il gruppo torna a occupare ~82% della card, contro il 78.7%
     del rapporto Figma (1127/1432). MIO. */
  .igc__number {
    --type-display-xxl-size: clamp(120px, 40vw, 600px);
  }
}