/* ==========================================================================
   VIDIM — Impianto responsive: regole comuni

   ATTENZIONE — QUESTA CARTELLA E PROVVISORIA.
   Il mockup mobile non esiste ancora. Tutto quello che sta in css/responsive/
   NON viene da Figma: sono scelte mie, prese per far scendere il layout
   desktop sotto i 1512px senza scroll orizzontale e senza rotture.
   Quando arriveranno i frame mobile, questa cartella si sostituisce in blocco:
   nessun file di css/sections/ e nessun partial va toccato.

   REGOLA INVIOLABILE: qui dentro non esiste una sola riga fuori da @media.
   A partire da 1512px la pagina resta identica al mockup, al pixel.

   ---------------------------------------------------------------------------
   Breakpoint del progetto

     >= 1512   Desktop di riferimento — 1:1 con Figma. Intoccabile.
     1280-1511 Desktop compresso — stessa struttura, container fluido
     1024-1279 Laptop            — le griglie a 4 colonne passano a 2
      768-1023 Tablet            — i blocchi affiancati si impilano
      480-767  Mobile            — colonna singola
       < 480   Mobile stretto    — gutter e tipografia ridotti

   I valori 1280/1024/768/480 sono i breakpoint convenzionali del web, non
   misure ricavate dal design: quando il mockup mobile arrivera andranno
   riallineati ai suoi frame reali.
   ========================================================================== */

/* --- Sotto i 1512: la pagina diventa fluida -------------------------------
   Rimuove il min-width che a 1512 tiene la pagina fissa, e converte il
   container da 1432 fissi a fluido. Il gutter resta 40 finche c'e spazio. */
@media (max-width: 1511px) {
  body,
  #contenuto,
  body > [id]:not(#contenuto),
  #contenuto > [id] {
    min-width: 0;
  }
  body > [id]:not(#contenuto),
  #contenuto > [id] {
    padding-inline: var(--page-gutter);
  }
  .container {
    width: 100%;
    max-width: var(--container-width);
  }

  /* Ogni elemento che in Figma ha una larghezza fissa pari a una colonna
     della griglia non puo restare in px: le sezioni lo ridichiarano nei
     propri file responsive. Qui si evita solo che qualcosa sfondi. */
  img,
  video,
  .ph {
    max-width: 100%;
  }
}

/* --- Tipografia fluida ----------------------------------------------------
   I quattro token display sono enormi (600 / 160 / 120 px): sotto i 1512
   sfonderebbero qualsiasi viewport. Scendono con clamp() mantenendo le
   proporzioni relative. I token di testo restano invariati fino al tablet:
   la leggibilita a 16px non e un problema di larghezza. */
@media (max-width: 1511px) {
  :root {
    --type-display-xxl-size: clamp(180px, 40vw, 600px);
    --type-display-xl-size:  clamp(72px,  10.6vw, 160px);
    --type-display-l-size:   clamp(56px,  7.9vw,  120px);
  }
}

@media (max-width: 1023px) {
  :root {
    --type-h1-size: clamp(36px, 5vw, 64px);
    --type-h1-lh:   1.21;
    --type-h2-size: clamp(30px, 4vw, 48px);
    --type-h2-lh:   1.21;
    --type-h3-size: clamp(22px, 2.8vw, 28px);
    --type-h3-lh:   1.21;
    --type-h4-size: clamp(20px, 2.4vw, 24px);
    --type-h4-lh:   1.21;
  }
}

/* --- Gutter ---------------------------------------------------------------
   40px e il margine di pagina di Figma. Sotto il tablet diventa sproporzionato
   rispetto alla larghezza disponibile. */
@media (max-width: 767px) {
  :root { --page-gutter: 24px; }
}
@media (max-width: 479px) {
  :root { --page-gutter: 16px; }
}

/* --- Ritmo verticale ------------------------------------------------------
   I 160px di padding delle sezioni narrative su mobile sono mezzo schermo. */
@media (max-width: 1023px) {
  .section--narrative { padding-block: 96px; }
  .section--compact   { padding-block: 64px; }
}
@media (max-width: 767px) {
  .section--narrative { padding-block: 64px; }
  .section--compact   { padding-block: 48px; }
}

/* --- Altezze di sezione ---------------------------------------------------
   Diverse sezioni hanno height fisse prese da Figma (1480, 901, 1020...).
   Sotto i 1512 il contenuto si riflowa e quelle altezze diventano sbagliate:
   vanno rilasciate. Le singole sezioni gestiscono i propri interni. */
@media (max-width: 1511px) {
  body > [id]:not(#contenuto),
  #contenuto > [id] {
    height: auto;
    min-height: 0;
  }
}

/* --- Interruzioni di riga del desktop -------------------------------------
   Nei partial ci sono <br> che riproducono gli a-capo espliciti del mockup a
   1512px (titolo Hero, lead di Applications, sottotitolo di In Good Company,
   titolo Outcome...). Sotto il tablet quelle interruzioni cadono nel punto
   sbagliato e spezzano le righe a meta. Qui vengono disattivate e il testo
   torna a fluire: e una scelta mia, da riverificare col mockup mobile, che
   potrebbe volere interruzioni proprie in punti diversi. */
@media (max-width: 767px) {
  h1 br,
  h2 br,
  h3 br,
  p br {
    display: none;
  }
}

/* --- Pulsanti -------------------------------------------------------------
   In Figma il Pulsante e hug e non va mai a capo. Su mobile stretto una label
   come "BOOK A VIDIM DEMO" supera la viewport: si concede il ritorno a capo. */
@media (max-width: 479px) {
  .btn {
    white-space: normal;
    height: auto;
    min-height: 43px;
    text-align: center;
  }
  .btn-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .btn-group .btn { width: 100% !important; }
}