/* ============================================================
   Schermi grandi (da 1100 px in su): il sito usa la larghezza
   disponibile e cresce un poco in proporzione.
   Sotto i 1100 px non cambia nulla: tutte le regole stanno qui dentro.

   Larghezza utile del contenuto (tolti i margini interni):
     1280 → ~1160 · 1440 → ~1300 · 1680 → ~1520 · 1920 → ~1720 · 2560 → ~1760
   Testo di base (1rem): 16 px a 1100 → 17,5 a 1680 → 18,2 a 1920 → 19 px da 2240.
   Le righe di testo restano sotto i ~70 caratteri: si allargano le griglie,
   non le colonne di lettura.
   ============================================================ */
@media (min-width:1100px){
  html{font-size:clamp(100%,calc(13.1px + .2636vw),118.75%)}
  :root{
    --maxw:min(94vw,1880px);
    --pad:clamp(2rem,2.6vw,3.25rem);
    --sec:clamp(5rem,7vw,9rem);
  }
  /* l'altezza dell'header cresce col testo: le ancore restano sotto */
  [id]{scroll-margin-top:calc(4.75rem + 1.25rem)}
  .hd-in{min-height:4.25rem}
  .brand svg{width:2.15rem;height:2.35rem}

  /* hero: colonna di testo più ampia, riquadro che cresce senza mai ingrandire il video
     (720 px a densità 1, 1200 px a densità 2: vedi hero.js) */
  .hero-t{grid-column:1/7}
  .hero h1{font-size:clamp(3.2rem,1.4rem + 3.4vw,6rem)}
  .lead{max-width:36ch}
  .hero-d{grid-column:7/13}
  .hx{max-width:min(100%,720px,calc((100svh - 190px) * .8))}
  /* didascalia: due righe riservate anche col testo più grande (il pulsante non si sposta) */
  .hx-cap{height:calc(2 * .9375rem * 1.45 + 1.3rem + 2px)}

  /* titoli di sezione */
  .sec-h h2{font-size:clamp(2.6rem,1.2rem + 2.6vw,4.4rem)}
  .sec-h p{max-width:48ch}

  /* 02 serie: disegno più grande, scheda accanto */
  .ser-d{grid-column:1/8}
  .ser-b .tabs,.ser-i{grid-column:8/13}
  /* arrivando con «Le serie» il disegno sta intero sullo schermo (sopra ci sono etichetta, titolo e schede) */
  .ser-d svg{max-height:max(380px,calc(100svh - 24rem))}
  /* note e paragrafi: righe sotto i ~75 caratteri anche con la colonna larga */
  .ser-note,.opz .on{max-width:62ch}
  .fin-sh p{max-width:64ch}
  .who-t p{max-width:60ch}

  /* 03 finiture: modello più grande, sempre entro lo schermo */
  .fin-v{grid-column:1/8;top:calc(4.75rem + 1rem)}
  .fin-c{grid-column:8/13}
  .f3v{max-height:max(420px,calc(100svh - 21rem))}

  /* 04 logistica e strip */
  .scale h2{font-size:clamp(2.8rem,1.2rem + 3vw,5rem)}
  .lead,.scale .lead{line-height:1.6}

  /* 06 contatti e footer: già a griglia, prendono la larghezza */
  .ct-g a{padding-block:1.75rem}
}

/* schermi ad alta densità: il riquadro resta a 600 px perché il video da 1200 non venga mai ingrandito */
@media (min-width:1100px) and (min-resolution:1.5dppx){
  .hx{max-width:min(100%,600px,calc((100svh - 190px) * .8))}
}

/* schermi molto grandi: oltre i ~2240 px il testo non cresce più, il contenuto si ferma a ~1880 */
@media (min-width:2240px){
  .hero-in{padding-block:6rem 6.5rem}
}

/* ============================================================
   Sezione 03 su computer: arrivando con «Finiture» la console sta
   intera sotto l'header (prodotti, modello, movimenti, e a destra
   lati, filtri, campioni e pulsanti).
   ============================================================ */
@media (min-width:1100px){
  .fin-s{padding-block:clamp(2.5rem,4vw,4.5rem)}
  .fin-s .tag{margin-bottom:.75rem}
  /* titolo su una riga, introduzione accanto */
  .fin-s .sec-h{margin-bottom:1.25rem;gap:.5rem 2.5rem;align-items:end}
  .fin-s .sec-h h2{grid-column:1/8;font-size:clamp(2rem,1rem + 1.6vw,3rem);line-height:1.05}
  .fin-s .sec-h p{grid-column:8/13;font-size:.9375rem;line-height:1.5}
  /* modello: altezza sullo spazio reale (header, etichetta di sezione, titolo,
     prodotti, intestazione del riquadro, movimenti e margini) */
  .fin{row-gap:1rem}
  .fin-v{top:calc(4.75rem + .75rem)}
  .f3v{aspect-ratio:auto;height:clamp(300px,calc(100svh - 4.75rem - 20.5rem),920px);max-height:none;min-height:0}
  .fin-c{align-self:start}
  .fin-c .side{margin-top:0}
}

/* ============================================================
   Ritocchi su computer: hero allineato al riquadro, meno vuoto
   dopo la sezione 01 e nella 04.
   ============================================================ */
@media (min-width:1100px){
  /* hero: la colonna di testo parte in linea con il riquadro e arriva al suo fondo
     (la didascalia sotto il riquadro è alta 2 righe + margine: si toglie dal fondo) */
  .hero-in{align-items:stretch}
  .hero-t{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;
    padding-bottom:calc(.7rem + 2 * .9375rem * 1.45 + 1.3rem + 2px)}
  .hero-t .lead{margin-top:1.25rem}
  .hero-t .specs{margin-top:0}
  .hero-t .cta-row{margin-top:0}

  /* 01 → 02: meno aria fra le famiglie e il selettore delle serie */
  #prodotti{padding-bottom:0}
  .sec:has(#prodotti){padding-bottom:clamp(3rem,4vw,4.5rem)}
  .sec.ser{padding-top:clamp(3rem,4vw,4.5rem)}

  /* 04: dati più vicini al testo, meno blu in fondo */
  .facts{margin-top:clamp(3.5rem,6vw,6rem)}
  .scale{padding-bottom:clamp(2.5rem,3vw,3.5rem)}
  .strip-w{padding-block:.75rem clamp(2rem,2.5vw,3rem)}
}