/* Il sito sul telefono. Comune a tutte le pagine, caricato dopo moto.css.
 *
 * Gli stili delle pagine sono scritti negli elementi (inline), e uno stile inline batte qualunque
 * regola di un foglio. Per questo: gli spazi verticali passano da --aria (le pagine scrivono
 * calc(Npx * var(--aria))), e i pochi valori inline da cambiare qui portano !important, solo dentro
 * la media query del telefono. Il giorno che il CSS comune esce dalle pagine (backlog), i
 * !important spariscono.
 *
 * Dopo ogni modifica si alza il ?v= nei <link> di tutte le pagine, come per moto.css. */

/* ── Su ogni schermo: le cose che tradiscono «sito visto dal telefono» ─────────────────────── */
html {
  -webkit-tap-highlight-color: transparent; /* niente lampo grigio al tocco */
  -webkit-text-size-adjust: 100%;           /* niente testo gonfiato in orizzontale */
}
a, button, .bottone, .scelta {
  touch-action: manipulation; /* il tocco risponde subito, senza aspettare il doppio tocco */
}
button, .bottone, .scelta {
  -webkit-user-select: none;
  user-select: none;          /* tenere premuto un pulsante non ne seleziona il testo */
}

/* ── Telefono ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Le sezioni respirano meno: gli spazi del desktop, su uno schermo stretto, sono fasce vuote */
  :root { --aria: 0.5; }

  /* Intestazione su una riga sola: il timbro GA fa da firma, il nome lo dice già la pagina */
  .nome-barra { display: none; }
  .barra > div { flex-wrap: nowrap !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  .menu { flex-wrap: nowrap !important; gap: 0 16px !important; font-size: 15px !important; }
  .menu a { padding: 8px 0; white-space: nowrap; } /* bersaglio di tocco più alto, senza cambiare l'aspetto */

  /* Apertura: il titolo occupa la larghezza, la foto non si prende uno schermo intero */
  .apertura h1 .s1 { font-size: 26px !important; }
  .apertura h1 .s2 { font-size: 12.2vw !important; }
  .apertura h1 .s3,
  .apertura h1 .s4 { font-size: 9vw !important; }
  .apertura p { font-size: 17px !important; }
  .foto-apertura { flex-basis: 100% !important; max-width: 300px !important; margin: 8px auto 28px; }

  /* I tre numeri su una riga, non uno sotto l'altro */
  .fatti { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
  .fatti .mincho { font-size: 36px !important; }
  .fatti .mincho + div { font-size: 13px; line-height: 1.35; }

  /* La frase della passione: il timbro sopra, la frase su tutta la larghezza */
  .passione { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  .passione p { font-size: 30px !important; }

  /* Le richieste: una per riga, a tutta larghezza, come le voci di un elenco */
  .scelte { flex-direction: column; }
  .scelte .scelta { width: 100%; text-align: left; padding: 14px 18px; border-radius: 14px; }
}