/* ==========================================================================
   Vidim Numbers — 34:1440 · 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 1058: head 1432x93, griglia 4x346 di card
   alte 285, card larga 1432x115, nota legale 8/10 su una riga, pulsanti 347).

   ---------------------------------------------------------------------------
   IL PUNTO DELICATO: IL CAP-TRIM DEI NUMERI

   I numeri sono .t-display-l.cap-trim: 120px con "Vertical trim: Cap height",
   cioe il box alto esattamente 87px = 120 * 0.727. L'allineamento del suffisso
   ("%", "€", "hours/year") NON e sulla baseline: e un flex-start fra il box
   trimmato della cifra e il box normale del suffisso, quindi dipende
   interamente dal fatto che il box della cifra coincida con la cap-height.

   Il core rende fluido --type-display-l-size con clamp(56px, 7.9vw, 120px).
   Il trim regge la riduzione perche entrambe le implementazioni di .cap-trim
   sono PROPORZIONALI al font-size:
     - moderna: text-box-trim: trim-both + text-box-edge: cap alphabetic
     - fallback: line-height: 0.727 (unitless, quindi = 0.727em)
   A 56px il box e 40.7px e il suffisso resta agganciato al filo della
   cap-height come a 1512. Nessun intervento necessario sulle cifre.

   Il trim SI ROMPE in un caso solo: quando un testo trimmato ANDA A CAPO.
   Con il fallback line-height 0.727 le righe si sovrappongono. Le cifre non
   corrono il rischio (.vnum-num ha white-space: nowrap e non lo tolgo mai),
   ma il titolo della card larga — .vnum-wide__title, anch'esso .cap-trim —
   sotto il tablet va a capo per forza: li il line-height viene ripristinato.
   Vedi il blocco <= 767.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1511 · Desktop compresso — la sezione diventa fluida
   Le larghezze da 1432 erano il container di Figma: diventano percentuali.
   Le altezze fisse delle card (285 e 115) diventano MINIME: sono altezze
   calcolate sul contenuto a 346px di larghezza, e appena la card si stringe
   le label vanno su piu righe.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .vnum__head,
  .vnum__cards {
    width: 100%;                 /* era var(--container-width) = 1432 */
  }

  .vnum-card {
    height: auto;
    min-height: 285px;
  }
  .vnum-wide {
    height: auto;
    min-height: 115px;
  }

  /* min-width:0 su griglia e flex: senza, il contenuto in nowrap (le cifre)
     imporrebbe la propria larghezza minima alla colonna e sfonderebbe. */
  .vnum-num,
  .vnum-wide__title,
  .vnum-wide__aside {
    min-width: 0;
  }
}


/* --------------------------------------------------------------------------
   <= 1279 · Laptop — griglia 4 colonne -> 2
   A 4 colonne sotto i 1280 la card scende sotto i 290px e la cifra fluida
   (~100px) piu il suffisso non ci starebbero: la coppia cifra+suffisso e in
   nowrap per costruzione, quindi la griglia deve cedere prima di lei.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .vnum__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  /* .vnum-wide e .vnum__legal restano grid-column: 1 / -1, cioe ora 2 colonne:
     nessuna regola necessaria. */
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet
   La card larga tiene ancora titolo e nota affiancati, ma il titolo puo
   crescere: si toglie l'altezza minima da 115 e si lascia respirare.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .vnum { gap: 64px; }           /* 80 -> 64 MIO */
  .vnum-wide { min-height: 0; }

  /* I 285px di Figma sono tarati su una cifra da 120px: qui la cifra fluida
     e scesa a ~60px e lo space-between apre un vuoto sproporzionato fra
     numero e label. 220 e MIO: mantiene la card ariosa senza il buco. */
  .vnum-card { min-height: 220px; }
}


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

  .vnum__cards {
    grid-template-columns: 1fr;
  }

  /* 285px di altezza minima su una card larga quanto lo schermo lascerebbe
     un buco: la card torna alta quanto il suo contenuto. Il rapporto
     numero/label resta quello di Figma, e solo la cornice che si stringe. */
  .vnum-card {
    min-height: 0;
    gap: var(--space-4);         /* 32px MIO: sostituisce lo space-between,
                                    che in altezza auto non ha piu effetto */
  }

  /* Card larga: titolo e nota si impilano. */
  .vnum-wide {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);         /* 16px MIO */
  }
  .vnum-wide__title { flex: 0 0 auto; width: 100%; }
  .vnum-wide__aside { white-space: normal; }   /* era nowrap */

  /* CAP-TRIM — unico punto in cui va corretto.
     A piena larghezza "AUTOMATED REPORTING" a 48/30px sta su una riga sola e
     il trim la porta a 35px di cap-height. Stretto in una colonna singola va
     a capo, e li il FALLBACK di .cap-trim (line-height: 0.727 unitless) fa
     sovrapporre le due righe. Si ripristina un'interlinea leggibile: il
     percorso moderno (text-box-trim) continua a tagliare comunque il
     mezzo-leading sopra la prima riga e sotto l'ultima, quindi il trim
     visivo non si perde, si perde solo la compressione fra le righe. */
  .vnum-wide__title { line-height: 1.21; }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .vnum { gap: 40px; }                        /* MIO */

  /* 40px di padding su una card larga ~343 lascerebbero 263px utili:
     con una cifra da 56px e le label in maiuscolo e troppo poco. 24 e MIO
     (stesso valore usato dalle altre sezioni su mobile stretto). */
  .vnum-card,
  .vnum-wide {
    padding: 24px;
  }
  .vnum-card { gap: var(--space-3); }         /* 16px MIO */

  /* La nota legale a 8px su ~343px va su molte righe: nessun problema di
     overflow, ma l'interlinea da 10px la rende un blocco compatto. Resta
     8px come a Figma: e una nota legale, non un testo da leggere. */
}