/* Gruppo FIRM.GS — layout mobile (regole di partenza, valgono sotto il breakpoint tablet: fino a 743px)
   Valori dai frame Figma "iPhone 17 - 28…37" (402 × 874).
   Responsive: occupa sempre tutta la larghezza; testi e spaziature restano fissi, il titolo e le immagini si allargano. */

/* ---------- Struttura schermata ---------- */
html, body { overflow-x: clip; }
.screen {
  min-height: 100svh;   /* altezza con la barra di Safari aperta: non cambia mentre si scorre (con 100dvh la pagina
                           cambiava altezza durante lo scroll e Filtri "rimbalzava" di quantità diverse) */
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad) calc(15px + env(safe-area-inset-bottom));
}
/* Testata fissa in alto: copre anche i 24px tra menu e contenuto,
   quindi le immagini spariscono dove finisce quella spaziatura.
   Titolo → menu 24 e menu → contenuto 24 (frame iPhone 17 - 39 / 40, 2026-10-08; prima 32 e 32). */
.head {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 24px;
  padding-top: calc(15px + env(safe-area-inset-top));
  padding-bottom: 24px;
}
.body { flex: 1 0 auto; display: flex; flex-direction: column; }

/* Schermate che stanno tutte nel viewport, senza scroll: about, dettaglio.
   100svh (schermo con la barra di Safari intera), non 100dvh: aprendo un'immagine dall'archivio scorso la barra, che si
   era ridotta, ricresce con un'animazione; con dvh il dettaglio partiva più alto e si restringeva insieme a lei
   (l'immagine "per un attimo più grande, poi si adatta", segnalato da Marco il 2026-10-21) */
.screen.fit { height: 100svh; min-height: 0; }
.screen.fit .body { flex: 1 1 0; min-height: 0; }

/* Cambio tra archivio e pannello (startCurtain in app.js): per qualche fotogramma il pannello resta fisso sopra tutto,
   nel punto in cui si vede (--curtain-s: di quanto era scorso), mentre sotto la finestra salta al punto nuovo.
   La testata di solito si attacca in alto da sola (sticky); qui il pannello non scorre, quindi la sposto io. */
.screen.curtain { position: fixed; left: 0; right: 0; top: calc(-1 * var(--curtain-s, 0px)); z-index: 30; background: var(--bg); }
.screen.curtain .head { position: relative; top: var(--curtain-s, 0px); }

/* Logo (assets/logo.png, da script/crea_logo.py; 2026-10-09, prima la barra verde con "GRUPPO FIRM.GS"):
   largo quanto la testata a ogni larghezza, l'altezza segue la proporzione del disegno (2998 × 360).
   Il file è nero su trasparente: in modalità scura lo inverto (bianco). */
.title { display: block; }
.title img { display: block; width: 100%; height: auto; }
:root[data-theme="dark"] .title img { filter: invert(1); }

/* ---------- Menu ---------- */
/* altezza fissa 25px (quella del riquadro "Chiudi"): il menu non si sposta tra archivio e pannelli */
.nav { height: 25px; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; }
/* il menu scende di meno di un pixel dello schermo, quanto basta perché le voci partano da un pixel intero
   (calcolato da snapNav in app.js; mobile e tablet, sul desktop il menu sta già su un pixel intero) */
@media (max-width: 1109.98px) { .nav { margin-top: var(--nav-nudge, 0px); } }
/* Archivio costruito come il menu dei pannelli: tre voci + un blocco largo quanto "Chiudi" con il toggle a destra.
   Così le voci cadono nella stessa posizione con o senza "Chiudi", su ogni larghezza (267,5 / 372 nel frame 28). */
/* Le tre voci stanno in un blocco (.nav-links) che occupa lo spazio fino a "Chiudi" / al toggle; ::after è un quarto
   "posto" vuoto in fondo, così lo spazio tra le voci è lo stesso anche dopo l'ultima e le voci cadono dove cadrebbero
   distribuendo voci + "Chiudi" su tutta la riga. È la finestra del nastro (slideMenu in app.js): mentre scorre,
   quello che esce dal blocco non si vede (solo in orizzontale: sottolineature e aree di tocco restano intere). */
.nav-links { flex: 1 1 0; min-width: 0; height: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; }
.nav-links::after { content: ""; }
.nav-links.sliding { overflow-x: clip; }
/* le voci sono sempre su un livello proprio, come durante lo scorrimento: il browser le disegna allo stesso modo
   ferme e in movimento (senza, all'inizio e alla fine della corsa testo e sottolineatura potevano spostarsi di 1px) */
.nav-links > * { will-change: transform; }
.nav-right { flex: none; width: var(--close-w); display: flex; justify-content: flex-end; }
/* voci grigie tranne quella della pagina aperta (nell'archivio tutte grigie: frame iPhone 17 - 39 / 40) */
.nav .off { color: var(--muted); }
.nav-clear { display: none; }   /* "Rimuovi filtri" sotto il menu dei pannelli: solo desktop */
/* "Rimuovi filtri" nell'archivio (frame iPhone 17 - 39): stesso riquadro e stesso padding di "Chiudi" (2/4, dal 2026-10-09;
   prima 4/8), largo quanto il testo, nella testata sotto il menu, a sinistra; l'archivio scende per fargli posto.
   Menu → tasto 20 (dal 2026-10-09; prima 24): il gap della testata è 24 (logo → menu), quindi il tasto sale di 4.
   Tasto → archivio 24 (il padding in fondo alla testata).
   Resta in testata, quindi visibile anche scorrendo. Vuoto (nessun filtro attivo): non c'è e non occupa spazio. */
.head-clear { display: flex; margin-top: calc(20px - 24px); }
.head-clear:empty { display: none; }
.head-clear .close { width: auto; }
/* "Chiudi" nel riquadro (frame 31): torna indietro senza applicare i filtri */
.close { flex: none; width: var(--close-w); text-align: center; border: 1.5px solid var(--fg); padding: 2px 4px; line-height: normal; }

/* ---------- About ---------- */
.about-block { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 24px; }
.about-text, .address { line-height: 20px; }
/* Indirizzo in due versioni (vale per mobile, tablet e desktop):
   - .addr-wide, due colonne: "FIRM SRLS, / Via…" a sinistra, "© 2026 / P.IVA…" a destra;
   - .addr-narrow, quando le due colonne non ci stanno più su una riga: tre righe a sinistra, "© 2026" a destra sull'ultima.
   La scelta dipende dalla larghezza del blocco About (container query), non dallo schermo.
   Soglia in em, così vale a ogni corpo: le due colonne sono larghe 26,56em, più almeno 1em (16px) di spazio tra loro.
   Da rimisurare con la versione definitiva del font.
   .only-t / .no-t: testo che cambia nel tablet ("2026" senza ©); due versioni intere, così la crenatura resta intatta. */
.about-block { container: about / inline-size; }
.address { display: flex; justify-content: space-between; align-items: flex-end; }
.address p { white-space: nowrap; }
.address p:last-child { text-align: right; }
.address.addr-wide { display: none; }
@container about (min-width: 27.56em) {
  .address.addr-wide { display: flex; }
  .address.addr-narrow { display: none; }
}
.only-t { display: none; }
.about-text { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
/* Illustrazione (tutte le larghezze, 2026-10-09): al massimo l'80% della larghezza del blocco About, centrata.
   Il riquadro prende l'altezza che resta tra testo e indirizzo; il disegno ci sta dentro (contain): largo l'80%
   se c'è altezza, altrimenti si riduce per stare nell'altezza disponibile. */
.illustration { position: relative; width: 80%; align-self: center; flex: 1 1 0; min-height: 120px; }
.illustration img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* La versione scura è disegnata su 372 × 374 (la chiara su 372 × 372): i 2px in più la farebbero rimpicciolire
   quando lo spazio è limitato in altezza. Il suo riquadro è più alto di 2/372, così il disegno ha la stessa scala. */
.illustration .ill-dark { top: calc(-100% / 372); height: calc(100% * 374 / 372); }

/* ---------- Griglia archivio ---------- */
.grid {
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: 4px;
  row-gap: 6px;
  align-items: start;
}
.item { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.item img { display: block; width: 100%; height: auto; background: var(--ph); }
.item span { font-size: 10px; text-transform: uppercase; line-height: normal; }
/* solo prototipo: nessuna immagine del campione corrisponde ai filtri */
.empty { grid-column: 1 / -1; color: var(--muted); line-height: 20px; }

/* ---------- Dettaglio immagine (frame 30) ---------- */
.detail { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 24px; }
.detail-img {
  position: relative; flex: 1 1 0; min-height: 150px;
  touch-action: none;                              /* il dito sull'immagine muove la lente, non la pagina */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;   /* niente menu "Salva immagine" */
}
.detail-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* Lente (app.js): l'immagine ingrandita copre tutto il riquadro e si sposta seguendo il puntatore */
.lens { position: absolute; inset: 0; overflow: hidden; background: var(--bg); visibility: hidden; }
.lens.on { visibility: visible; }
.lens > div { position: absolute; left: 0; top: 0; will-change: transform; }
.lens img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.meta-wrap { display: flex; flex-direction: column; gap: 16px; }
.meta p { line-height: 20px; }
.meta .row { display: flex; justify-content: space-between; }
/* nome e ID sulla stessa riga; se il nome è troppo lungo l'ID va a capo */
.meta .row.wrap { flex-wrap: wrap; column-gap: 16px; }

/* ---------- Filtri / Classifica (frame 31, 32, 35, 36, 37) ---------- */
/* Distanze misurate dalle lettere (linea di base), non dalle righe: ultima categoria → tasti 40 (32 + gli 8px
   d'interlinea sotto la linea di base delle categorie), tasti → cifre del contatore 24,
   contatore → fondo 19: la stessa distanza dalle lettere che ha l'ultima riga di About (15 + 4 d'interlinea) */
.panel { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
[data-screen="overlay"]:not(.fit) { padding-bottom: calc(19px + env(safe-area-inset-bottom)); }   /* Filtri, Classifica */
.sections { display: flex; flex-direction: column; gap: 32px; }
.sec { display: flex; flex-direction: column; gap: 8px; }
.sec-title { line-height: 20px; text-transform: uppercase; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.sec-head { display: flex; justify-content: space-between; align-items: center; }
.opts { display: flex; flex-direction: column; align-items: flex-start; }
.opt { line-height: 28px; color: var(--muted); }
.opt.on { color: var(--fg); text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-position: from-font; }
.cat { width: 100%; display: flex; justify-content: space-between; line-height: 28px; color: var(--muted); }
.cat.on { color: var(--fg); }
.cat.on span { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-position: from-font; }
/* "Vedi tutte": nero e sottolineato solo se nessuna categoria è selezionata, altrimenti grigio */
.all { line-height: 20px; color: var(--muted); text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.all.on { color: var(--fg); text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-position: from-font; }
/* Applica / Rimuovi + contatore: in fondo allo schermo se il contenuto è corto, altrimenti dopo il contenuto */
.panel-foot { display: flex; flex-direction: column; gap: 24px; }
/* con Applica / Rimuovi (vedi footerHTML in app.js): la copia nella pagina tiene lo spazio, quella fissa sta in basso */
.panel-foot.ghost { visibility: hidden; }
.panel-foot.floating {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 15px var(--pad) calc(19px + env(safe-area-inset-bottom));   /* 15 sopra: il testo che scorre sotto non arriva a filo dei tasti */
  background: var(--bg);
  --fade: 40px;
}
/* sfumatura sopra i tasti, nel colore dello sfondo: le voci che scorrono sotto svaniscono (c'è altro più giù).
   Opacità --fade-o da footFade in app.js: segue quanto resta da scorrere (in fondo 0), senza dissolvenza a tempo.
   Non intercetta i tocchi. */
.panel-foot.floating::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--fade);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg));
  pointer-events: none;
  opacity: var(--fade-o, 1);
}
.actions { display: flex; gap: 8px; }
.act {
  flex: 1 1 0; min-width: 0; display: flex; justify-content: center;
  padding: 4px 20px; border: 1.5px solid var(--fg); line-height: normal; white-space: nowrap;   /* alto 29 (frame iPhone 17 - 31) */
}
.act.solid { background: var(--fg); color: var(--bg); }
.counter { text-align: center; font-size: 10px; line-height: 20px; text-box-trim: trim-both; text-box-edge: cap alphabetic; }   /* rifilato alle cifre */
.counter span { color: var(--muted); }

.rank-title { line-height: 20px; text-transform: uppercase; text-box-trim: trim-both; text-box-edge: cap alphabetic; margin-bottom: 16px; }
.rank { display: flex; flex-direction: column; }
.rank-row {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 14px; border-bottom: 1px solid var(--fg); line-height: 20px;
}
.rank-row .l { display: flex; align-items: center; min-width: 0; }
.rank-row .n { width: 40px; flex: none; }
.rank-row .t, .rank-row .c, .rank-row .n { text-box-trim: trim-both; text-box-edge: cap alphabetic; white-space: nowrap; }
.rank-row.sel { background: var(--fg); color: var(--bg); }
.cl { display: flex; flex-direction: column; gap: 24px; }