/* Noleggiando.com — IL DISPOSITIVO: la quarta proprietà dello schermo.
   Le quattro sono il CLIMA (data-kit, qui un valore solo: "noleggiando"), la LUCE (data-theme),
   la SUPERFICIE (data-superficie) e il DISPOSITIVO (data-dispositivo).
   Livelli: 1 · PRIMITIVO (i valori di banda --nlg-d-*, --nlg-t-*, --nlg-m-*) · 2 · SEMANTICO (i
   nomi attivi che il markup legge: margine, interruttori, moltiplicatori) · 3 · COMPONENTE (la
   tessera del marchio, la riga del lockup, la cornice della modale).
   Il tema ha già la LUCE (data-theme) e la SUPERFICIE (data-superficie). Il quarto asse è il
   DISPOSITIVO, e ha la stessa forma: non è un foglio di correzioni a valle, è un layer di
   token che il markup legge.

   ─── Come funziona ─────────────────────────────────────────────────────────────
   Ogni misura di layout esiste in tre valori, dichiarati UNA volta sola
   (--nlg-d-* desktop · --nlg-t-* tavoletta · --nlg-m-* telefono). Cinque blocchi di
   MAPPATURA scelgono la banda: tre sul viewport reale (@media, con
   :root:not([data-dispositivo]) perché la banda forzata vinca sempre) e due su
   [data-dispositivo="tablet"|"mobile"]. I nomi si ripetono, i valori no.

   ─── Il patto col markup: interruttori a ricaduta ──────────────────────────────
   Le griglie del libro NON diventano token: restano scritte in linea e chiedono al
   sistema il permesso di collassare.

       grid-template-columns:var(--nlg-g4, repeat(4,minmax(0,1fr)))

   Su desktop l'interruttore vale `initial` (garantito-invalido): vale la ricaduta, cioè il
   disegno originale, che resta leggibile nel markup. Quindi il desktop non cambia di un
   pixel, non serve alcun !important e chi legge il markup vede il disegno vero.

   I moltiplicatori fanno la stessa cosa in aritmetica: calc(64px * var(--nlg-passo-k,1))
   conserva il ritmo proprio di ogni sezione e lo comprime in proporzione.

   ─── Le tre bande ──────────────────────────────────────────────────────────────
   telefono  ≤ 719px   una colonna, margine 18, tocco ≥ 44px
   tavoletta 720–1023  due colonne, margine 26
   desktop   ≥ 1024    il disegno pieno

   Le soglie sono i punti in cui la misura di lettura (72 caratteri, § 2.3 del libro) non
   sta più accanto a una seconda colonna: non sono nomi di modelli di telefono. */

:root{
  /* margine di pagina — il respiro laterale del documento */
  --nlg-d-margine:28px;     --nlg-t-margine:26px;     --nlg-m-margine:18px;
  /* moltiplicatori: ritmo verticale e distanze larghe */
  --nlg-d-passo-k:1;        --nlg-t-passo-k:.72;      --nlg-m-passo-k:.5;
  --nlg-d-gap-k:1;          --nlg-t-gap-k:.8;         --nlg-m-gap-k:.62;
  /* interruttori di griglia: `initial` = vale la ricaduta scritta nel markup */
  --nlg-d-g2:initial;       --nlg-t-g2:initial;                   --nlg-m-g2:minmax(0,1fr);
  --nlg-d-g3:initial;       --nlg-t-g3:repeat(2,minmax(0,1fr));   --nlg-m-g3:minmax(0,1fr);
  --nlg-d-g4:initial;       --nlg-t-g4:repeat(2,minmax(0,1fr));   --nlg-m-g4:minmax(0,1fr);
  /* g4x — tessere piccole (campioni, bolli, icone): a una colonna diventerebbero
     insegne, non tessere. Restano due anche sul telefono. */
  --nlg-d-g4x:initial;      --nlg-t-g4x:repeat(2,minmax(0,1fr)); --nlg-m-g4x:repeat(2,minmax(0,1fr));
  --nlg-d-g5:initial;       --nlg-t-g5:repeat(3,minmax(0,1fr));   --nlg-m-g5:repeat(2,minmax(0,1fr));
  --nlg-d-g6:initial;       --nlg-t-g6:repeat(3,minmax(0,1fr));   --nlg-m-g6:repeat(2,minmax(0,1fr));
  /* gsx — due colonne con una fissa (barra + contenuto) */
  --nlg-d-gsx:initial;      --nlg-t-gsx:initial;      --nlg-m-gsx:minmax(0,1fr);
  /* tracce tabellari: le colonne NON collassano, la traccia scorre dentro la sua cornice
     (una riga di dati spezzata in verticale non è più una riga di dati) */
  --nlg-d-riga-min:auto;    --nlg-t-riga-min:auto;    --nlg-m-riga-min:560px;
  --nlg-d-scorri:visible;   --nlg-t-scorri:visible;   --nlg-m-scorri:auto;
  /* apertura: su desktop tiene la piega, sul telefono il contenuto detta l'altezza */
  --nlg-d-eroe:420px;       --nlg-t-eroe:340px;       --nlg-m-eroe:260px;
  /* barra di navigazione: a capo su desktop, striscia che scorre sul telefono */
  --nlg-d-nav-wrap:wrap;    --nlg-t-nav-wrap:wrap;    --nlg-m-nav-wrap:nowrap;
  --nlg-d-nav-of:visible;   --nlg-t-nav-of:visible;   --nlg-m-nav-of:auto;
  /* carta: il foglio si scala per essere visto intero, non si riflette */
  --nlg-d-foglio-zoom:1;    --nlg-t-foglio-zoom:.9;   --nlg-m-foglio-zoom:.8;
  /* misure fisse dei componenti vivi: la tessera del marchio e la riga del lockup.
     Un 348px fisso su un telefono non è una tessera, è una colonna sfondata. */
  --nlg-d-marchio-w:348px;  --nlg-t-marchio-w:300px;  --nlg-m-marchio-w:100%;
  --nlg-d-lockup-wrap:nowrap; --nlg-t-lockup-wrap:nowrap; --nlg-m-lockup-wrap:wrap;
  /* modale del punto di interesse: cornice con respiro su desktop e tavoletta, a tutto
     schermo sul telefono (niente margine, niente raggio, altezza piena) */
  --nlg-d-modale-pad:28px;  --nlg-t-modale-pad:20px;  --nlg-m-modale-pad:0;
  --nlg-d-modale-r:var(--nlg-r-xl); --nlg-t-modale-r:var(--nlg-r-xl); --nlg-m-modale-r:0;
  --nlg-d-modale-h:auto;    --nlg-t-modale-h:auto;    --nlg-m-modale-h:100%;
  /* altezza della testata: scritta a runtime dal libro, che la misura; 86 px è la ricaduta */
  --nlg-testata:86px;
  /* nome della banda: leggibile da JS, mai una tabella scritta a mano */
  --nlg-d-dispositivo:"desktop"; --nlg-t-dispositivo:"tablet"; --nlg-m-dispositivo:"mobile";
}

/* ── Mappatura · banda DESKTOP ───────────────────────────────────────────────── */
:root, [data-dispositivo="desktop"]{
  --nlg-margine:var(--nlg-d-margine);
  --nlg-passo-k:var(--nlg-d-passo-k);
  --nlg-gap-k:var(--nlg-d-gap-k);
  --nlg-g2:var(--nlg-d-g2);   --nlg-g3:var(--nlg-d-g3);   --nlg-g4:var(--nlg-d-g4);
  --nlg-g4x:var(--nlg-d-g4x); --nlg-g5:var(--nlg-d-g5);   --nlg-g6:var(--nlg-d-g6);
  --nlg-gsx:var(--nlg-d-gsx);
  --nlg-riga-min:var(--nlg-d-riga-min);
  --nlg-scorri:var(--nlg-d-scorri);
  --nlg-eroe:var(--nlg-d-eroe);
  --nlg-nav-wrap:var(--nlg-d-nav-wrap);
  --nlg-nav-of:var(--nlg-d-nav-of);
  --nlg-foglio-zoom:var(--nlg-d-foglio-zoom);
  --nlg-marchio-w:var(--nlg-d-marchio-w);
  --nlg-lockup-wrap:var(--nlg-d-lockup-wrap);
  --nlg-dispositivo:var(--nlg-d-dispositivo);
  --nlg-modale-pad:var(--nlg-d-modale-pad); --nlg-modale-r:var(--nlg-d-modale-r); --nlg-modale-h:var(--nlg-d-modale-h);
}

/* ── Mappatura · banda TAVOLETTA (viewport reale) ────────────────────────────── */
@media (max-width:1023px){
  :root:not([data-dispositivo]){
    --nlg-margine:var(--nlg-t-margine);
    --nlg-passo-k:var(--nlg-t-passo-k);
    --nlg-gap-k:var(--nlg-t-gap-k);
    --nlg-g2:var(--nlg-t-g2);   --nlg-g3:var(--nlg-t-g3);   --nlg-g4:var(--nlg-t-g4);
    --nlg-g4x:var(--nlg-t-g4x); --nlg-g5:var(--nlg-t-g5);   --nlg-g6:var(--nlg-t-g6);
    --nlg-gsx:var(--nlg-t-gsx);
    --nlg-riga-min:var(--nlg-t-riga-min);
    --nlg-scorri:var(--nlg-t-scorri);
    --nlg-eroe:var(--nlg-t-eroe);
    --nlg-nav-wrap:var(--nlg-t-nav-wrap);
    --nlg-nav-of:var(--nlg-t-nav-of);
    --nlg-foglio-zoom:var(--nlg-t-foglio-zoom);
    --nlg-marchio-w:var(--nlg-t-marchio-w);
  --nlg-lockup-wrap:var(--nlg-t-lockup-wrap);
  --nlg-dispositivo:var(--nlg-t-dispositivo);
  --nlg-modale-pad:var(--nlg-t-modale-pad); --nlg-modale-r:var(--nlg-t-modale-r); --nlg-modale-h:var(--nlg-t-modale-h);
  }
}

/* ── Mappatura · banda TELEFONO (viewport reale) ─────────────────────────────── */
@media (max-width:719px){
  :root:not([data-dispositivo]){
    --nlg-margine:var(--nlg-m-margine);
    --nlg-passo-k:var(--nlg-m-passo-k);
    --nlg-gap-k:var(--nlg-m-gap-k);
    --nlg-g2:var(--nlg-m-g2);   --nlg-g3:var(--nlg-m-g3);   --nlg-g4:var(--nlg-m-g4);
    --nlg-g4x:var(--nlg-m-g4x); --nlg-g5:var(--nlg-m-g5);   --nlg-g6:var(--nlg-m-g6);
    --nlg-gsx:var(--nlg-m-gsx);
    --nlg-riga-min:var(--nlg-m-riga-min);
    --nlg-scorri:var(--nlg-m-scorri);
    --nlg-eroe:var(--nlg-m-eroe);
    --nlg-nav-wrap:var(--nlg-m-nav-wrap);
    --nlg-nav-of:var(--nlg-m-nav-of);
    --nlg-foglio-zoom:var(--nlg-m-foglio-zoom);
    --nlg-marchio-w:var(--nlg-m-marchio-w);
  --nlg-lockup-wrap:var(--nlg-m-lockup-wrap);
  --nlg-dispositivo:var(--nlg-m-dispositivo);
  --nlg-modale-pad:var(--nlg-m-modale-pad); --nlg-modale-r:var(--nlg-m-modale-r); --nlg-modale-h:var(--nlg-m-modale-h);
  }
}

/* ── Mappatura · bande FORZATE ───────────────────────────────────────────────────
   data-dispositivo sul root — o su un contenitore, perché gli interruttori sono custom
   property e si ereditano — fissa la banda a prescindere dal viewport. È il modo in cui
   il libro espone la vista dispositivo fra le proprie opzioni, e il modo in cui una
   vetrina mostra la resa telefono dentro una pagina larga. */
:root[data-dispositivo="tablet"], [data-dispositivo="tablet"]{
  --nlg-margine:var(--nlg-t-margine);
  --nlg-passo-k:var(--nlg-t-passo-k);
  --nlg-gap-k:var(--nlg-t-gap-k);
  --nlg-g2:var(--nlg-t-g2);   --nlg-g3:var(--nlg-t-g3);   --nlg-g4:var(--nlg-t-g4);
  --nlg-g4x:var(--nlg-t-g4x); --nlg-g5:var(--nlg-t-g5);   --nlg-g6:var(--nlg-t-g6);
  --nlg-gsx:var(--nlg-t-gsx);
  --nlg-riga-min:var(--nlg-t-riga-min);
  --nlg-scorri:var(--nlg-t-scorri);
  --nlg-eroe:var(--nlg-t-eroe);
  --nlg-nav-wrap:var(--nlg-t-nav-wrap);
  --nlg-nav-of:var(--nlg-t-nav-of);
  --nlg-foglio-zoom:var(--nlg-t-foglio-zoom);
  --nlg-marchio-w:var(--nlg-t-marchio-w);
  --nlg-lockup-wrap:var(--nlg-t-lockup-wrap);
  --nlg-dispositivo:var(--nlg-t-dispositivo);
  --nlg-modale-pad:var(--nlg-t-modale-pad); --nlg-modale-r:var(--nlg-t-modale-r); --nlg-modale-h:var(--nlg-t-modale-h);
}
:root[data-dispositivo="mobile"], [data-dispositivo="mobile"]{
  --nlg-margine:var(--nlg-m-margine);
  --nlg-passo-k:var(--nlg-m-passo-k);
  --nlg-gap-k:var(--nlg-m-gap-k);
  --nlg-g2:var(--nlg-m-g2);   --nlg-g3:var(--nlg-m-g3);   --nlg-g4:var(--nlg-m-g4);
  --nlg-g4x:var(--nlg-m-g4x); --nlg-g5:var(--nlg-m-g5);   --nlg-g6:var(--nlg-m-g6);
  --nlg-gsx:var(--nlg-m-gsx);
  --nlg-riga-min:var(--nlg-m-riga-min);
  --nlg-scorri:var(--nlg-m-scorri);
  --nlg-eroe:var(--nlg-m-eroe);
  --nlg-nav-wrap:var(--nlg-m-nav-wrap);
  --nlg-nav-of:var(--nlg-m-nav-of);
  --nlg-foglio-zoom:var(--nlg-m-foglio-zoom);
  --nlg-marchio-w:var(--nlg-m-marchio-w);
  --nlg-lockup-wrap:var(--nlg-m-lockup-wrap);
  --nlg-dispositivo:var(--nlg-m-dispositivo);
  --nlg-modale-pad:var(--nlg-m-modale-pad); --nlg-modale-r:var(--nlg-m-modale-r); --nlg-modale-h:var(--nlg-m-modale-h);
}

/* ── La stampa non è una banda ────────────────────────────────────────────────
   In stampa i @media si misurano sulla CARTA, non sulla finestra: un A4 è 816px, cioè
   dentro la banda tavoletta, e il PDF uscirebbe collassato a due colonne — diverso da
   quello che si vede a schermo e diverso da quello di ieri. La stampa è sempre la banda
   piena, e il foglio non si scala (lo scala il motore di stampa). Serve !important:
   questo blocco deve vincere sulle bande forzate, che sono più specifiche. */
@media print{
  :root, [data-dispositivo]{
    --nlg-margine:var(--nlg-d-margine) !important;
    --nlg-passo-k:var(--nlg-d-passo-k) !important;
    --nlg-gap-k:var(--nlg-d-gap-k) !important;
    --nlg-g2:var(--nlg-d-g2) !important;   --nlg-g3:var(--nlg-d-g3) !important;
    --nlg-g4:var(--nlg-d-g4) !important;   --nlg-g4x:var(--nlg-d-g4x) !important;
    --nlg-g5:var(--nlg-d-g5) !important;   --nlg-g6:var(--nlg-d-g6) !important;
    --nlg-gsx:var(--nlg-d-gsx) !important;
    --nlg-riga-min:var(--nlg-d-riga-min) !important;
    --nlg-scorri:var(--nlg-d-scorri) !important;
    --nlg-eroe:auto !important;
    --nlg-nav-wrap:var(--nlg-d-nav-wrap) !important;
    --nlg-nav-of:var(--nlg-d-nav-of) !important;
    --nlg-foglio-zoom:1 !important;
    --nlg-marchio-w:var(--nlg-d-marchio-w) !important;
    --nlg-lockup-wrap:var(--nlg-d-lockup-wrap) !important;
    --nlg-dispositivo:var(--nlg-d-dispositivo) !important;
    --nlg-modale-pad:var(--nlg-d-modale-pad) !important; --nlg-modale-r:var(--nlg-d-modale-r) !important; --nlg-modale-h:var(--nlg-d-modale-h) !important;
  }
}

/* ── Il dito non è il puntatore ───────────────────────────────────────────────
   L'area minima di 44px si applica dove si TOCCA: la regola guarda il puntatore, non la
   larghezza della finestra. Una tavoletta larga si tocca comunque, e un desktop con
   schermo tattile anche. È la regola gemella della reazione al puntatore, che si
   registra solo dove un mouse esiste. */
@media (pointer:coarse){
  button, a[href], select, input, [role="button"]{ min-height:var(--nlg-tap-min); }
}

/* ── Niente scorrimento laterale, mai ────────────────────────────────────────
   Un solo pixel di troppo su un telefono si legge come «sito rotto». La pagina non
   scorre in orizzontale: scorrono le tracce che lo dichiarano (--nlg-scorri). */
@media (max-width:719px){
  html, body{ overflow-x:hidden; }
}

/* ── L'anteprima di dispositivo ───────────────────────────────────────────────
   Quando la banda è forzata su uno schermo più largo, la pagina si stringe alla misura
   di quella banda: «telefono» senza restringere mostrerebbe una colonna sola larga
   1400px, che non è la resa telefono di niente.
   Larghezze: 390px (telefono di riferimento) · 834px (tavoletta verticale). */
[data-anteprima="mobile"] body{ max-width:390px; }
[data-anteprima="tablet"] body{ max-width:834px; }
[data-anteprima="mobile"] body, [data-anteprima="tablet"] body{
  margin:0 auto;
  box-shadow:0 0 0 1px var(--nlg-border-strong), var(--nlg-shadow-lg);
  min-height:100vh;
}
[data-anteprima] body > *{ max-width:100%; }