/* L'elenco delle proprie partite: la sezione della home e la pagina /partite/.

   File a parte per la stessa ragione di `home.css`: la riga di una partita
   compare in due pagine, e chi lavora sulla home non deve trovarsela in mezzo
   alle tre vie. Nessun colore nuovo: tutto dalle variabili di `tavolo.css`.

   La riga prima era una sola linea — codice, stato, dettaglio a destra — e
   bastava finche' diceva solo «finita». Ora dice anche com'e' finita, e quella
   frase e' la cosa che si legge: quindi due righe, il codice e lo stato sopra
   come etichetta, la frase grande sotto, e sul telefono niente va a capo a
   meta' fra il punteggio e il nome. */

.partite-testa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .4rem 1rem; flex-wrap: wrap;
}
.partite-testa h2 { margin-bottom: .2rem; }

.capo-elenco {
  margin: 1.1rem 0 0; font-weight: normal; font-size: .78rem;
  letter-spacing: .09em; font-variant: small-caps; color: var(--fioco-piu);
}

.riga.riga-partita {
  display: grid; grid-template-columns: 1fr; gap: .15rem;
  padding: .7rem .5rem; margin: 0 -.5rem;
}
.riga-testa { display: flex; align-items: center; gap: .6rem; }
.riga-partita .codice-riga { font-size: .92rem; }
/* Sul telefono la frase e il dettaglio stanno sempre uno sopra l'altro: col
   `wrap` lasciato al caso, righe vicine andavano a capo in punti diversi e
   l'elenco sembrava impaginato a mano. */
.riga-corpo { display: grid; gap: .1rem; }
.riga-esito { font-size: 1.05rem; line-height: 1.35; }
.esito-vinta { color: var(--accento-chiaro); }
/* Tocca a te: e' l'unica riga su cui c'e' qualcosa da fare adesso. */
.esito-tocca { color: var(--accento); }
.riga-tocca { box-shadow: inset 2px 0 0 var(--accento); }
.riga-partita .dettaglio { margin-left: 0; text-align: left; }

@media (min-width: 640px) {
  /* Su uno schermo largo la riga torna una riga sola: etichetta a sinistra,
     frase in mezzo, avversario e data a destra. */
  .riga.riga-partita {
    grid-template-columns: 11.5rem 1fr; align-items: baseline; gap: 1rem;
  }
  .riga-corpo {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  }
  .riga-partita .dettaglio { text-align: right; white-space: nowrap; }
}

/* ------------------------------------------------------ la pagina intera */

.pagina-partite { max-width: 760px; }
.ritorno { margin: 0 0 1.2rem; }
.pagina-partite .intestazione { margin-bottom: 1.6rem; }
.pagina-partite h1 { font-size: clamp(2rem, 8vw, 2.8rem); }

.filtri { margin: 0 0 .6rem; }
.filtri .pillola { text-decoration: none; }

.elenco-vuoto { margin: 1.2rem 0 .4rem; }

.paginazione {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--bordo-tenue);
}
.paginazione .btn { font-size: .9rem; padding: .5rem .9rem; }
.paginazione [aria-disabled="true"] { opacity: .35; cursor: default; pointer-events: none; }
.paginazione-dove { color: var(--fioco); font-size: .85rem; font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
  /* Due bottoni e una scritta non stanno su 360 px: la scritta va sopra. */
  .paginazione-dove { order: -1; flex-basis: 100%; text-align: center; }
  .paginazione .btn { flex: 1; }
}