/* Gruppo FIRM.GS — layout desktop (da 1110px; i frame sono a 1440)
   Valori dai frame Figma "Desktop - 334, 341, 342, 343, 344, 345" (1440 × 1024),
   con la griglia decisa in CLAUDE.md: pannelli 2:1 esatto (a 1440: 920 | 460).

   - A sinistra l'archivio, sempre visibile: scorre solo la griglia.
   - A destra un pannello fisso (About all'apertura, Filtri, Classifica, dettaglio immagine).
   - Il rapporto 2:1 non cambia mai: le due colonne sono frazioni della larghezza (2fr | 1fr).
   - Scala: ogni misura è N × --d. Da 1110 a 1920 --d = 1px (cambiano solo le colonne: a 1110 700 | 350, a 1440 920 | 460);
     sopra 1920 --d = 100vw / 1920 e tutto scala, senza larghezza massima.
   - La griglia a 4 / 6 / 8 colonne con gap 4 coincide con la sottogriglia da 24 colonne di CLAUDE.md
     (span 6 / 4 / 3): stesse larghezze, quindi uso direttamente repeat(4|6|8). */

@media (min-width: 1110px) {
  :root { --d: 1px; }

  body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: calc(20 * var(--d));
    padding: 0 calc(20 * var(--d));
    align-items: start;
    font-size: calc(16 * var(--d));   /* 18 nei frame, ridotto a 16 su richiesta */
    /* interlinee in proporzione al corpo (nei frame 18 → 20 e 22): 16 × 20/18 = 17,8 → 18; 16 × 22/18 = 19,6 → 20 */
  }

  /* entrambe le schermate sono sempre visibili, una per colonna */
  .screen { min-height: 0; padding: 0; }
  [data-screen="archive"] { min-height: 100dvh; padding-bottom: calc(20 * var(--d)); }
  [data-screen="overlay"],
  [data-screen="overlay"].fit,
  [data-screen="overlay"]:not(.fit) {
    position: sticky; top: 0;
    height: 100dvh;
    padding-bottom: 0;
    overflow-x: clip;   /* niente può uscire nel margine destro (titolo nascosto, area di tocco del toggle) */
  }
  /* il margine in basso (20, come gli altri margini della pagina) sta dentro l'area che scorre:
     le code delle lettere (la "g" del contatore) ci finiscono dentro invece di essere tagliate o di far scorrere il pannello */
  [data-screen="overlay"] .body {
    flex: 1 1 0; min-height: 0; overflow-y: auto;
    overscroll-behavior: none;   /* niente rimbalzo, e arrivati in fondo al pannello non si trascina la griglia */
    padding-bottom: calc(20 * var(--d) + env(safe-area-inset-bottom));
  }

  /* ---------- Testata ----------
     A sinistra il logo (largo quanto la griglia); a destra il menu, allineato in alto con il logo.
     Margine in alto 20 e distanza logo → contenuto 20, come tutti gli altri margini (24 nei frame), in entrambe le colonne. */
  .head {
    gap: 0;
    padding-top: calc(20 * var(--d) + env(safe-area-inset-top));
    padding-bottom: calc(20 * var(--d));
  }
  [data-screen="archive"] .nav { display: none; }

  /* nella colonna destra il logo resta invisibile ma tiene lo spazio: il pannello parte alla stessa altezza.
     La colonna è metà della griglia (2:1), quindi la stessa altezza si ottiene con il logo largo il doppio. */
  [data-screen="overlay"] .title { visibility: hidden; overflow: clip; }
  [data-screen="overlay"] .title img { width: 200%; max-width: none; }

  /* Logo: scorrendo l'archivio esce verso l'alto, oltre il bordo dello schermo
     (classe logo-off, gestita da app.js), e la griglia sale a prendere il suo posto. Il pannello destro non cambia.
     Il margine negativo è alto quanto il logo (--logo-h, misurata da app.js) più i 20 sotto di lui: per questo quei 20
     sono un margine del logo e non il padding della testata. Alla fine la griglia parte a 20 dal bordo.
     Il movimento lo anima app.js (setLogo) con transform su logo e griglia, non qui con margin-top (vedi lì perché).
     Durante la corsa il logo, spostato, non è più sopra lo sfondo della testata: ha uno sfondo suo, e l'ombra piena
     (box-shadow) copre anche i 20 sotto di lui, così la griglia non si vede dietro né sotto il logo, come prima.
     Logo e griglia stanno sempre su un livello proprio (will-change): all'inizio della corsa il browser non deve ridisegnarli.
     Uscito, il logo non viene nascosto: sta appena sopra il bordo dello schermo (da -altezza a 0), quindi non si vede, ma
     resta disegnato. Con visibility: hidden al rientro il browser doveva ridisegnarlo da capo e per un attimo scendeva solo
     il suo sfondo, un rettangolo bianco, con il logo che arrivava dopo (segnalato da Marco il 2026-10-21).
     La testata ha lo sfondo pieno solo nella fascia in alto (i 20 sopra il logo): al rientro torna subito alta quanto il logo,
     mentre logo e griglia stanno ancora scendendo, e con lo sfondo pieno copriva la griglia con un rettangolo bianco.
     Il resto lo coprono sfondo e ombra del logo, che si muovono con lui. */
  [data-screen="archive"] .head {
    padding-bottom: 0;
    background: linear-gradient(var(--bg), var(--bg)) top / 100% calc(20 * var(--d) + env(safe-area-inset-top)) no-repeat;
  }
  [data-screen="archive"] .title, .grid { will-change: transform; }
  [data-screen="archive"] .title {
    margin-bottom: calc(20 * var(--d));
    background: var(--bg);
    box-shadow: 0 calc(20 * var(--d)) 0 var(--bg);
  }
  .logo-off [data-screen="archive"] .title {
    margin-top: calc(-1 * (var(--logo-h, 0px) + 20 * var(--d)));
  }
  .nav-overlay {
    position: absolute; left: 0; right: 0;
    top: calc(20 * var(--d) + env(safe-area-inset-top));
    height: calc(20 * var(--d));
  }
  /* "Rimuovi filtri" in Filtri / Classifica: sotto il menu, a sinistra, allineato al fondo del logo
     (stesso stile di "Chiudi"; a sinistra dal 2026-10-08, prima a destra come nel frame 341) */
  .nav-clear { display: flex; position: absolute; left: 0; bottom: calc(20 * var(--d)); }
  .head-clear { display: none; }   /* sul desktop "Rimuovi filtri" sta sotto il menu del pannello */
  .close {
    width: auto;
    border-width: calc(1.5 * var(--d));
    padding: calc(2 * var(--d)) calc(8 * var(--d));
  }

  /* toggle (disegno in base.css) dal Figma "Group 32", 877:1741: rettangolo 23,47 × 11 con il tratto da 2 centrato,
     quindi 25,47 × 13 di ingombro; pallino Ø 6,6 con centro a 6,61 dal bordo sinistro e a metà altezza
     (in Figma 6,42 su 13: 0,08 sopra la metà, trascurato). Prima 32 × 15. */
  .toggle {
    --tw: calc(25.467 * var(--d)); --th: calc(13 * var(--d)); --tb: calc(2 * var(--d));
    --tr: calc(3.3 * var(--d)); --tx: calc(6.612 * var(--d));
  }

  /* ---------- Griglia archivio ---------- */
  .grid { column-gap: calc(4 * var(--d)); row-gap: calc(6 * var(--d)); }
  .item { gap: calc(3 * var(--d)); }
  .item span { font-size: calc(12 * var(--d)); }
  .empty { line-height: calc(18 * var(--d)); }

  /* ---------- About (frame 334) ---------- */
  .about-block { gap: calc(24 * var(--d)); }
  .about-text { line-height: calc(18 * var(--d)); }
  /* Indirizzo: due colonne quando ci stanno, altrimenti la versione su tre righe (frame MacBook Air - 1; vedi mobile.css) */
  .address { line-height: calc(18 * var(--d)); }

  /* ---------- Dettaglio immagine (frame Desktop - 346) ----------
     Niente menu né toggle: in alto a destra solo "Chiudi" (al posto del toggle), allineato in alto con il logo.
     L'immagine parte 20 sotto "Chiudi" e prende tutto lo spazio fino ai dati e al Download, che restano in fondo:
     larga quanto il pannello, o alta quanto lo spazio se è più verticale (allora centrata). */
  [data-view="detail"] [data-screen="overlay"] .title { display: none; }
  [data-view="detail"] .nav-overlay { position: static; height: auto; justify-content: flex-end; }
  .detail { gap: calc(24 * var(--d)); }
  .detail-img > img { object-position: top; }
  .meta-wrap { gap: calc(8 * var(--d)); }
  .meta p { line-height: calc(18 * var(--d)); }
  .meta .row.wrap { column-gap: calc(16 * var(--d)); }
  .btn-solid {
    height: calc(35 * var(--d)); gap: calc(8 * var(--d));
    padding: calc(5 * var(--d)) calc(10 * var(--d)); line-height: calc(18 * var(--d));
  }
  /* freccia del download del desktop (assets/freccia-desktop.svg, 20,5 × 16 con il contorno esterno;
     i margini negativi riportano l'ingombro a 18,08 × 15 come in Figma) */
  .arr {
    width: calc(20.5 * var(--d)); height: calc(16 * var(--d));
    margin: calc(-0.5 * var(--d)) calc(-1.21 * var(--d));
    transform: none;
    -webkit-mask-image: url("../assets/freccia-desktop.svg");
            mask-image: url("../assets/freccia-desktop.svg");
  }

  /* ---------- Filtri / Classifica (frame 342–345) ---------- */
  .panel { justify-content: flex-start; gap: 0; }
  .sections { gap: calc(24 * var(--d)); }
  .sec { gap: calc(8 * var(--d)); }
  .sec-title, .all { line-height: calc(18 * var(--d)); }
  .opt, .cat { line-height: calc(20 * var(--d)); }

  /* Contatore e tasti, sempre in fondo al pannello (quindi al viewport):
     - senza modifiche il contatore sta in fondo;
     - con Applica / Rimuovi i tasti stanno in fondo e il contatore 16px sopra di loro;
     - dal contenuto (categorie) restano sempre almeno 24px; se il pannello è pieno scorre e la distanza resta 24. */
  .panel > :first-child { margin-bottom: calc(24 * var(--d)); }
  .panel-foot { display: contents; }
  .counter {
    order: 1;
    margin-top: auto;
    text-align: left;
    font-size: calc(12 * var(--d)); line-height: normal;
    text-box-trim: trim-both; text-box-edge: cap alphabetic;
  }
  .actions { order: 2; margin-top: calc(16 * var(--d)); gap: calc(8 * var(--d)); height: calc(33 * var(--d)); }
  .actions:only-child { margin-top: auto; }   /* Classifica senza utente: solo i tasti, in fondo */
  .act { padding: calc(5 * var(--d)) calc(20 * var(--d)); border-width: calc(1.5 * var(--d)); align-items: center; }

  .cl { gap: calc(24 * var(--d)); }
  .rank-title { line-height: calc(18 * var(--d)); margin-bottom: calc(16 * var(--d)); }
  .rank-row {
    padding: calc(4 * var(--d)) 0 calc(6 * var(--d));
    border-bottom-width: calc(1 * var(--d));
    line-height: calc(18 * var(--d));
  }
  .rank-row .n { width: calc(40 * var(--d)); }
}

@media (min-width: 1921px) {
  :root { --d: calc(100vw / 1920); }
}