/* Gruppo FIRM.GS — layout tablet
   Valori dai frame Figma "iPad Pro 12.9" - 2, 11, 12, 14, 15, 17, 18" (1024 × 1366).
   Stessa struttura e stessi comportamenti del mobile: qui cambiano solo le misure.

   Il tablet va da 744 a 1109px; da 1110 parte il desktop (css/desktop.css).
   Scala: ogni misura è scritta come N × --u.
   - da 1024 a 1109   --u = 1px            → misure identiche al Figma, la griglia si allarga
   - da 744 a 1023    --u = 100vw / 1024   → tutto si riduce in proporzione (a 744, iPad mini: × 0,727)
   - sotto 744                             → layout mobile (mobile.css)
   Il testo più piccolo (etichette #ID, contatore: 18px) a 744 vale 13px: nessuna soglia minima necessaria. */

@media (min-width: 744px) and (max-width: 1109.98px) {
  :root {
    --u: calc(100vw / 1024);
    --pad: calc(20 * var(--u));
    --close-w: calc(137 * var(--u));   /* riquadro "Chiudi" (frame 12) */
  }

  body { font-size: calc(28 * var(--u)); }

  /* ---------- Struttura schermata ---------- */
  .screen {
    padding: 0 var(--pad) calc(20 * var(--u) + env(safe-area-inset-bottom));
  }
  /* logo → menu 40, menu → contenuto 64 (contenuto a y 236 nel frame) */
  .head {
    gap: calc(40 * var(--u));
    padding-top: calc(20 * var(--u) + env(safe-area-inset-top));
    padding-bottom: calc(64 * var(--u));
  }
  /* nell'archivio menu → griglia 40, come logo → menu (dal 2026-10-09; prima 64). I pannelli restano a 64. */
  [data-screen="archive"] .head { padding-bottom: calc(40 * var(--u)); }

  /* ---------- Menu ---------- */
  .nav { height: calc(41 * var(--u)); line-height: calc(26.5 * var(--u)); }
  .close { border-width: calc(3 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)); line-height: calc(26.5 * var(--u)); }
  /* "Rimuovi filtri" sotto il menu come nel mobile, con lo stesso padding di "Chiudi" (4/8, dal 2026-10-09; prima 8/16).
     Menu → tasto 32 (dal 2026-10-09; prima 40): il gap della testata è 40, quindi il tasto sale di 8.
     Tasto → archivio 40 (il padding in fondo alla testata dell'archivio). */
  .head-clear { margin-top: calc(-8 * var(--u)); }

  /* toggle (disegno in base.css): il desktop × 21,56/15, come il toggle precedente (46 × 21,56 dal frame 14, prima 32 × 15 sul desktop).
     36,61 × 18,69, bordo 2,88, pallino Ø 9,49 con centro a 9,5 */
  .toggle {
    --tw: calc(36.609 * var(--u)); --th: calc(18.688 * var(--u)); --tb: calc(2.875 * var(--u));
    --tr: calc(4.744 * var(--u)); --tx: calc(9.505 * var(--u));
  }

  /* ---------- About (frame 2) ---------- */
  .about-block { gap: calc(57.5 * var(--u)); }
  .about-text { line-height: calc(35 * var(--u)); }
  /* indirizzo su due colonne (ci stanno sempre): a sinistra la società, a destra anno e P.IVA allineati a destra */
  .address { line-height: calc(35 * var(--u)); }
  .no-t { display: none; }
  .only-t { display: inline; }

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

  /* ---------- Dettaglio immagine (frame 11) ---------- */
  .detail { gap: calc(48 * var(--u)); }
  .detail-img { min-height: calc(150 * var(--u)); }
  .meta-wrap { gap: calc(24 * var(--u)); }
  .meta p { line-height: calc(30 * var(--u)); }
  .meta .row.wrap { column-gap: calc(16 * var(--u)); }
  .btn-solid {   /* DOWNLOAD (frame 11): alto 59 */
    height: calc(59 * var(--u)); gap: calc(16 * var(--u));
    padding: calc(16 * var(--u)) calc(10 * var(--u)); line-height: calc(26.5 * var(--u));
  }
  /* freccia del download: nel tablet è un disegno diverso (assets/freccia-tablet.svg, già rivolta in basso).
     Il file è 30,16 × 23 con il contorno esterno; i margini negativi riportano l'ingombro a 25,3 × 21 come in Figma. */
  .arr {
    width: calc(30.16 * var(--u)); height: calc(23 * var(--u));
    margin: calc(-1 * var(--u)) calc(-2.43 * var(--u));
    transform: none;
    -webkit-mask-image: url("../assets/freccia-tablet.svg");
            mask-image: url("../assets/freccia-tablet.svg");
  }

  /* ---------- Filtri / Classifica (frame 12, 15, 17, 18) ---------- */
  /* distanza minima tra contenuto e tasti: nel frame 12 restano 25px (980 di contenuto + 105 di tasti su 1110) */
  .panel { gap: calc(10 * var(--u)); }   /* + 14 d'interlinea sotto la linea di base delle categorie = 24 dalle lettere ai tasti */
  [data-screen="overlay"]:not(.fit) { padding-bottom: calc(27 * var(--u) + env(safe-area-inset-bottom)); }   /* = About dalle lettere (20 + 7) */
  .sections { gap: calc(56 * var(--u)); }
  .sec { gap: calc(8 * var(--u)); }
  .sec-title, .all { line-height: calc(49 * var(--u)); }
  .opt, .cat { line-height: calc(49 * var(--u)); }

  .panel-foot { gap: calc(48 * var(--u)); }
  .panel-foot.floating { padding: calc(20 * var(--u)) var(--pad) calc(27 * var(--u) + env(safe-area-inset-bottom)); --fade: calc(64 * var(--u)); }
  .actions { gap: calc(8 * var(--u)); }
  .act { padding: calc(8 * var(--u)) calc(20 * var(--u)); border-width: calc(1.5 * var(--u)); line-height: calc(31 * var(--u)); }
  .counter {
    font-size: calc(18 * var(--u)); line-height: normal;
    text-box-trim: trim-both; text-box-edge: cap alphabetic;
  }

  .cl { gap: calc(56 * var(--u)); }
  .rank-title { line-height: calc(26.5 * var(--u)); margin-bottom: calc(24 * var(--u)); }
  .rank-row {
    padding: calc(20 * var(--u)) 0 calc(28 * var(--u));
    border-bottom-width: calc(2 * var(--u));
    line-height: calc(26.5 * var(--u));
  }
  .rank-row .n { width: calc(70 * var(--u)); }
}

@media (min-width: 1024px) and (max-width: 1109.98px) {
  :root { --u: 1px; }
}