/* Sezione 02 «Le serie», versione telefono: una schermata sola sotto l'header.
   Schede in alto, disegno al centro (si adatta allo spazio), scheda della serie in basso.
   Su computer la sezione resta quella approvata: qui sotto quasi tutto è dentro la media query. */

.dlt,.dlm,.s02-act .s02-open,.s02-nav{display:none}

@media (max-width:760px){
  #serie .tag{margin-bottom:.35rem}
  .ser .sec-h{margin-bottom:.6rem}
  .ser .sec-h h2{font-size:1.5rem;line-height:1.12}
  .ser-b{gap:.6rem}
  /* ordine su telefono: schede, disegno, scheda della serie; la nota fonti dopo, fuori dalla schermata */
  .ser-b .ser-t{grid-row:auto;margin-top:.25rem}

  /* schede compatte */
  .ser .tab{min-height:60px;padding:.5rem .75rem}
  .ser .tab .mm{font-size:1.625rem}
  .ser .tab .mm small{font-size:.8125rem}
  .ser .tab .nm{margin-top:.15rem;font-size:.8125rem}

  /* disegno: prende lo spazio che resta (calcolato in s02.js) e si sfoglia col dito */
  .ser-d{touch-action:pan-y;-webkit-user-select:none;user-select:none;overflow:hidden}
  .ser-d svg{display:block;width:100%;height:var(--s02h,240px);max-height:none!important}
  #sX{display:none}
  /* frecce ai lati del disegno: dicono che si può sfogliare e servono anche a chi non fa lo swipe */
  .s02js .s02-nav{display:grid;place-items:center;position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;padding:0;
    border:1px solid var(--line-2);border-radius:50%;background:rgba(255,255,255,.88);color:var(--blue);cursor:pointer;transition:opacity .3s}
  .s02js .s02-nav[hidden]{display:none}
  .s02-nav svg{width:20px;height:20px}
  .s02-prev{left:.5rem}.s02-next{right:.5rem}

  /* scheda della serie: altezza fissa, così cambiando serie non salta niente */
  .ser-i h3{display:inline;font-size:1.375rem}
  .ser-i .role{display:inline;margin:0 0 0 .5rem;font-size:.9375rem}
  .ser-i .desc,.ser-i .dh,#sL{display:none}
  .dlt{display:block;margin:.2rem 0 0;font-size:.9375rem;font-weight:500;color:var(--blue);border-radius:3px;transition:background .5s}
  .dlt.on{background:rgba(79,200,242,.18)}
  .ser-i .dlm{display:block;margin-top:.4rem}
  .ser-i .dlm li{padding:.35rem 0 .35rem 1.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ser-i .dlm li::before{top:.35rem}
  .s02-act{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.3rem}
  .s02-act .sch{margin-top:0;white-space:nowrap}
  .s02js .s02-act .s02-open{display:inline-flex}
  .s02-open{appearance:none;align-items:center;gap:.4rem;white-space:nowrap;min-height:44px;padding:0 1rem;border:1px solid var(--line-2);border-radius:4px;background:var(--paper);
    font:inherit;font-weight:500;font-size:.9375rem;color:var(--ink);cursor:pointer}
  .s02-open svg,.s02-act .sch svg{flex:none;width:16px;height:16px}

  /* con lo script la scheda completa si apre dal basso: il vecchio riquadro a tendina non serve */
  .s02js .ser-m{display:none}
  .ser-note{margin-top:.5rem;font-size:.875rem}
}

/* pannello «Scheda completa» dal basso */
.s02-sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(14,22,40,.42);opacity:0;transition:opacity .3s}
.s02-sheet[hidden]{display:none}
.s02-sheet.on{opacity:1}
.s02-pan{width:100%;max-width:640px;max-height:86svh;display:flex;flex-direction:column;background:var(--paper);border-radius:14px 14px 0 0;
  box-shadow:0 -12px 40px rgba(14,22,40,.18);transform:translateY(100%);transition:transform .35s var(--ease)}
.s02-sheet.on .s02-pan{transform:none}
.s02-pan.drag{transition:none}
.s02-top{flex:none;padding:.5rem var(--pad) .75rem;border-bottom:1px solid var(--line-2);touch-action:none;cursor:grab}
.s02-grab{display:block;width:40px;height:4px;margin:0 auto .6rem;border-radius:2px;background:var(--line-2)}
.s02-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.s02-row h3{margin:0;font-size:1.25rem}
.s02-row small{display:block;font-size:.8125rem;color:var(--ink-3);font-weight:400}
.s02-x{appearance:none;flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:4px;background:var(--bg);cursor:pointer;color:var(--ink)}
.s02-x svg{width:18px;height:18px}
.s02-body{overflow:auto;-webkit-overflow-scrolling:touch;padding:.25rem var(--pad) calc(1.25rem + env(safe-area-inset-bottom))}
.s02-body dl{margin:0}
.s02-body dl div{display:grid;grid-template-columns:8.5rem 1fr;gap:.75rem;padding:.65rem 0;border-bottom:1px solid var(--line-2);font-size:.9375rem}
.s02-body dt{color:var(--ink-3)}
.s02-body dd{margin:0}
.s02-body .na{color:var(--ink-3);font-style:italic}
.s02-body p{margin:.9rem 0 0;font-size:.875rem;color:var(--ink-3)}
.s02-body .sch{margin-top:.5rem}
@media (prefers-reduced-motion:reduce){.s02-sheet,.s02-pan,.dlt,.s02-nav{transition:none}}