/* ═══════════════════════════════════════════════════════════════════════════
   COMPATTO — finestre basse: portatili vecchi, barra dei preferiti aperta.
   A 1366×599 la cornice mangiava un terzo dello schermo (nastro, margini,
   barra): qui il nastro sparisce, la scena prende l'altezza e i documenti
   si leggono grandi. Sopra i 760px di altezza non cambia niente.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── FINESTRA BASSA ─────────────────────────────────────────────────────────
   Via il nastro, barra sottile, margini minimi: la scena sale. */
@media (max-height: 760px) {
  .nastro { display: none; }
  .palco { padding: 6px clamp(.5rem, 1.5vw, 1rem); }
  .scena { width: min(100%, calc((100svh - 3rem) * 16 / 9)); border-radius: 12px; }
  .chrome { padding: .3rem clamp(.75rem, 2.2vw, 1.8rem); }
  .chrome__logo img { height: 24px; }

  /* un documento in mano: quasi tutta l'altezza */
  .lettura { padding: 16px; }
  .lettura__foglio { max-height: calc(100svh - 32px); }
  /* biglietti di lato (fine tappa, referto): partono dall'alto, margini più stretti */
  .lettura--lato .lettura__foglio { top: 16px; max-height: calc(100svh - 32px); padding: 1.4rem 1.8rem; }
  .lettura--destra .lettura__foglio { top: 16px; }
  .referto .doc__riga { padding: .5rem 0; }

  /* sottotitoli appena sopra la barra; il documento lascia loro il posto */
  .guida-voce, .fisso-sottotitolo { bottom: 44px; padding: 9px 20px 12px; }
  .tutorial-narrato .lettura, .assistenza-narrata .lettura { padding-bottom: 150px; }
  .tutorial-narrato .lettura__foglio, .assistenza-narrata .lettura__foglio { max-height: calc(100svh - 166px); }
  .tutorial-narrato .tel, .assistenza-narrata .tel { --alto: max(360px, min(calc(100svh - 170px), 860px)); }

  /* l'ingresso su due colonne: presentazione a sinistra, nome e pulsante a destra */
  .ingresso { padding: 1.5rem 2rem; }
  .ingresso__logo { height: clamp(44px, 9vh, 72px); margin-bottom: 1rem; }
  .ingresso__occhiello { margin-bottom: .8rem; }
  .ingresso__titolo { font-size: clamp(2.4rem, 12vh, 5rem); margin-bottom: 1rem; }
  .ingresso__testo { font-size: 1rem; line-height: 1.5; }
}
@media (max-height: 760px) and (min-width: 900px) {
  .ingresso__box {
    width: min(100%, 1080px);
    display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .ingresso__testo { margin-bottom: 0; }
  .ingresso__avviso { margin-bottom: 1.2rem; }
}

/* ── FINESTRA BASSA E LARGA (2:1 o più, es. 1366×599) ───────────────────────
   La scena prende tutta l'altezza; logo, nome del caso e tappe passano
   nelle due fasce laterali, che altrimenti resterebbero vuote. */
@media (max-height: 760px) and (min-aspect-ratio: 2/1) {
  :root { --fascia: 150px; }
  .palco { padding: 0; }
  .scena {
    width: min(calc(100vw - 2 * var(--fascia)), calc(100svh * 16 / 9));
    border-radius: 0;
  }

  /* a sinistra, uno sotto l'altro: logo (se c'è), nome, caso; a destra le tappe */
  .chrome {
    position: fixed; inset: 0; z-index: 5; pointer-events: none;
    display: grid; grid-template-columns: var(--fascia) 1fr var(--fascia);
    align-content: start; gap: .7rem 0; padding: 18px 0; letter-spacing: .12em;
  }
  .chrome > * { pointer-events: auto; justify-self: center; text-align: center; grid-column: 1; }
  .chrome__logo img { height: 44px; }
  .chrome__tappe { grid-area: 1 / 3; margin-left: 0; }

  .guida-voce, .fisso-sottotitolo { bottom: 20px; }

  /* il biglietto di fine tappa scende sotto nome e caso; il referto a destra
     copre le tappe, che a quel punto sono finite */
  .lettura--lato:not(.lettura--destra) .lettura__foglio { top: 84px; max-height: calc(100svh - 100px); }
  body:has(.lettura--destra) .chrome__tappe { visibility: hidden; }

  /* documento o telefono in mano mentre la voce parla: il sottotitolo va
     di lato, il foglio resta alto quanto la finestra */
  .tutorial-narrato .lettura, .assistenza-narrata .lettura { padding: 16px 420px 16px 16px; }
  .tutorial-narrato .lettura__foglio, .assistenza-narrata .lettura__foglio { max-height: calc(100svh - 32px); }
  .tutorial-narrato .tel, .assistenza-narrata .tel { --alto: max(420px, min(90vh, 860px)); }
  body:has(.lettura) .guida-voce, body:has(.lettura) .fisso-sottotitolo {
    left: auto; right: 24px; bottom: 50%; transform: translateY(50%);
    width: 372px; max-width: 372px; text-align: left;
  }
}