/* pagina.css — stile della pagina «Imballaggi Selpro» (QR «Etichetta ambientale»).
   Usa SOLO token e componenti del design system degli strumenti online (klnk-ui.css, klnk-stati.css, klnk-pannelli.css):
   qui ci sono soltanto la disposizione della pagina e i pochi pezzi che il DS non ha (riquadro foto, finestra di ingrandimento).
   Nessun colore scritto a mano: tutto da var(--…). Misure di pagina decise dal contenitore .app, come nel DS. */

/* ---- testo ridimensionabile: gli stessi corpi dei token del DS (12, 13, 15, 17, 22, 32 px a 16 px di base) espressi in rem ---- */
:root{--fs12:.75rem; --fs13:.8125rem; --fs15:.9375rem; --fs17:1.0625rem; --fs22:1.375rem; --fs32:2rem}

/* ---- pagina intera: il DS pensa a una cornice con scorrimento interno, qui scorre la pagina ---- */
.app{--col:1200px; display:flex; flex-direction:column; height:auto; min-height:100vh; min-height:100dvh; overflow:visible}
.colonna,.barra{--gut:16px}
@container app (min-width:700px){ .colonna,.barra{--gut:24px} }
@container app (min-width:1000px){ .colonna,.barra{--gut:32px} }
.colonna{width:100%; max-width:calc(var(--col) + 2 * var(--gut)); margin:0 auto; padding-inline:var(--gut)}
/* testata e contenuto tengono gli stessi bordi: la barra si ferma dove si ferma la colonna */
.testata{position:sticky; top:0; z-index:20; display:block; padding:0; border-bottom:0}
.testata .barra{width:100%; padding-inline:max(var(--gut), calc((100% - var(--col)) / 2))}
.testata .barra-spazio{flex:1}
/* i gruppi vanno a capo: sul telefono si vedono tutti senza scorrere di lato */
.pan-pills{flex-wrap:wrap; overflow-x:visible}
#contenuto{flex:1 0 auto; display:flex; flex-direction:column; gap:24px; min-width:0; padding-block:24px 40px}
html:has(dialog[open]){overflow:hidden}
.solo-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---- lingua: il tasto e l'elenco sono del DS; qui solo dove si posa l'elenco (sotto il tasto, a destra) ---- */
.lingua-involucro{position:relative; flex:none}
.lingua-involucro > .lingua-elenco{position:absolute; right:0; top:calc(100% + 8px); z-index:30; background:var(--surface)}

/* ---- introduzione ---- */
.intro{display:flex; flex-direction:column; gap:12px; max-width:72ch}
.titolo-pagina{font-size:var(--fs22); font-weight:800; line-height:1.2; color:var(--navy); overflow-wrap:break-word}
@container app (min-width:700px){ .titolo-pagina{font-size:var(--fs32)} }
.intro-testo,.corrieri-testo{font-size:var(--fs15); line-height:1.5; color:var(--ink)}
/* i testi lunghi del JSON vanno a capo dove il JSON ha «\n» (riga vuota = paragrafo) e non superano una riga leggibile */
.intro-testo,.corrieri-testo{white-space:pre-line; max-width:62ch}
.intro-meta{font-size:var(--fs13); font-weight:600; color:var(--muted)}
.intro-meta .pan-link{min-height:44px}

/* ---- ricerca e pillole dei gruppi (pillole di navigazione: collegamenti, con gli stessi stati delle altre pillole) ---- */
#navigazione .ricerca input{-webkit-appearance:none; appearance:none; font-size:var(--fs17)}   /* mai sotto 16 px al tocco: su iPhone il campo più piccolo ingrandisce la pagina */
a.pan-pill{text-decoration:none}
@media (hover:hover){ a.pan-pill:hover{background:var(--line)} }
a.pan-pill:active{background:var(--line)}
.pan-link:active{text-decoration-thickness:2px}   /* al tocco come al passaggio del mouse */

/* ---- sezioni e schede ---- */
.gruppo{display:flex; flex-direction:column; gap:12px; scroll-margin-top:88px}
.gruppo > h2.titolo-sez{font-size:var(--fs17); margin:0}
.griglia{display:grid; grid-template-columns:minmax(0, 1fr); gap:16px}
@container app (min-width:700px){ .griglia{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px} }
@container app (min-width:1100px){ .griglia{grid-template-columns:repeat(3, minmax(0, 1fr))} }
.scheda{display:flex; flex-direction:column; scroll-margin-top:88px}
.scheda:target{border-color:var(--navy)}
.scheda-corpo{display:flex; flex-direction:column; gap:12px; padding:16px 16px 20px}
.scheda-titolo{font-size:var(--fs17); font-weight:800; line-height:1.3; color:var(--navy); overflow-wrap:anywhere}
.corriere-testo{font-size:var(--fs15); line-height:1.4; color:var(--ink)}

/* ---- foto: rapporto fisso 4:3, mai tagliata (contain) su fondo neutro; tocco o clic per ingrandire ---- */
.foto-riquadro{position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:4 / 3; background:var(--tenue);
  border-bottom:1px solid var(--line); text-decoration:none; text-align:center; padding:16px; font-size:var(--fs15)}
.foto{padding:0; transition:background-color .15s}
.foto picture,.ing-immagine picture{display:contents}
.foto img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain}
.foto-segno{position:absolute; right:12px; bottom:12px; display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--navy); transition:background-color .15s}
@media (hover:hover){ .foto:hover{background:var(--chip)} .foto:hover .foto-segno{background:var(--chip)} }
.foto:active,.foto:active .foto-segno{background:var(--chip)}
a.foto:focus-visible{outline:2.5px solid var(--navy); outline-offset:-4px}

/* ---- campi della scheda: righe di solo testo, etichetta sopra il valore ---- */
.dati{display:flex; flex-direction:column; gap:12px}
.dato{display:flex; flex-direction:column; gap:2px; min-width:0}
.dato dt{font-size:var(--fs13); font-weight:700; color:var(--muted)}
.dato dd{font-size:var(--fs15); font-weight:600; line-height:1.4; color:var(--ink); overflow-wrap:anywhere}
.dato dd.codici{font-variant-numeric:tabular-nums}
.fab-riga{display:block}
.codice-mat{display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:var(--r-pill);
  background:var(--infobg); color:var(--navy); font-size:var(--fs17); font-weight:800}
.nd{color:var(--muted); font-style:italic; font-weight:600}
.vuoto{padding:24px 0; text-align:center; font-size:var(--fs15); color:var(--muted)}

/* ---- piè di pagina ---- */
.piede{background:var(--surface); border-top:1px solid var(--line)}
.piede .colonna{display:flex; flex-direction:column; gap:4px; padding-block:24px; font-size:var(--fs13); color:var(--muted)}
.piede-nome{font-size:var(--fs15); font-weight:800; color:var(--ink)}
.piede .pan-link{min-height:44px}

/* ---- finestra di ingrandimento (dialog nativo): la foto da 1200 px e il tasto «Chiudi» del DS ---- */
.ingrandimento{margin:auto; padding:0; border:0; border-radius:24px; background:var(--surface); color:var(--ink); overflow:hidden;
  width:min(calc(100vw - 32px), 1000px); max-width:none; max-height:calc(100dvh - 32px); box-shadow:0 1px 2px rgba(16,33,52,.06)}
.ingrandimento[open]{display:flex; flex-direction:column}
.ingrandimento::backdrop{background:rgba(0,41,76,.4)}
.ing-immagine{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; background:var(--tenue)}
.ing-immagine img{display:block; width:auto; height:auto; min-width:0; min-height:0; max-width:100%; max-height:calc(100dvh - 32px - 112px); object-fit:contain}