/* =============================================================================
   Elenchi: archivio, rubriche, ricerca, indirizzi che non portano a nulla.

   Nessun token nuovo: il sistema è congelato e questi componenti si compongono
   con quello che c'è già. La scheda articolo è la stessa della homepage —
   cambia il contenitore, non l'atomo — così un articolo si riconosce ovunque
   compaia.
   ========================================================================== */

/* --- intestazione dell'elenco ------------------------------------------------ */
.lm-elenco__intestazione{
  padding-block: var(--lm-sp-7) var(--lm-sp-6);
  border-bottom: var(--lm-bordo) solid var(--lm-riga);
}
.lm-elenco__titolo{
  font-family: var(--lm-font-titolo);
  font-weight: var(--lm-titolo-peso);
  letter-spacing: var(--lm-titolo-cren);
  /* stessa scala del titolo d'articolo: l'elenco è una pagina di pari rango */
  font-size: clamp(2rem, 5vw, var(--lm-passo-6));
  line-height: var(--lm-int-stretta);
  margin: var(--lm-sp-2) 0 0;
  max-width: 20ch;
  text-wrap: balance;
}
.lm-elenco__nota{
  margin: var(--lm-sp-4) 0 0;
  max-width: var(--lm-misura-stretta);
  font-size: var(--lm-passo-2);
  line-height: var(--lm-int-lettura);
  color: var(--lm-testo-2);
}
.lm-elenco__conteggio{
  margin: var(--lm-sp-4) 0 0;
  font-family: var(--lm-font-ui);
  font-size: var(--lm-passo-000);
  letter-spacing: var(--lm-cren-etichetta);
  text-transform: uppercase;
  color: var(--lm-testo-3);
  font-variant-numeric: tabular-nums;
}

/* --- la griglia --------------------------------------------------------------
   Tre colonne separate da filetti, come il fiume della homepage: è lo stesso
   ritmo, e chi arriva da lì non deve reimparare a leggere la pagina. */
.lm-elenco__lista{
  list-style: none;
  margin: 0;
  padding: 0;
  padding-block: var(--lm-sp-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lm-sp-6) 0;
}
.lm-elenco__voce{
  min-width: 0;
  padding-inline: var(--lm-sp-5);
  border-right: var(--lm-bordo) solid var(--lm-riga);
}
.lm-elenco__voce:nth-child(3n){ border-right: 0; padding-right: 0; }
.lm-elenco__voce:nth-child(3n+1){ padding-left: 0; }

@media (max-width: 1024px){
  .lm-elenco__lista{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-elenco__voce{ padding-inline: var(--lm-sp-4); border-right: var(--lm-bordo) solid var(--lm-riga); }
  .lm-elenco__voce:nth-child(3n){ border-right: var(--lm-bordo) solid var(--lm-riga); padding-right: var(--lm-sp-4); }
  .lm-elenco__voce:nth-child(2n){ border-right: 0; padding-right: 0; }
  .lm-elenco__voce:nth-child(2n+1){ padding-left: 0; }
}
@media (max-width: 640px){
  /* Una colonna: i filetti verticali diventano orizzontali, altrimenti le
     schede si toccherebbero senza respiro. */
  .lm-elenco__lista{ grid-template-columns: 1fr; gap: 0; }
  .lm-elenco__voce,
  .lm-elenco__voce:nth-child(2n),
  .lm-elenco__voce:nth-child(3n),
  .lm-elenco__voce:nth-child(2n+1),
  .lm-elenco__voce:nth-child(3n+1){
    padding-inline: 0;
    border-right: 0;
    padding-block: var(--lm-sp-5);
    border-bottom: var(--lm-bordo) solid var(--lm-riga);
  }
  .lm-elenco__voce:last-child{ border-bottom: 0; }
}

/* --- paginazione -------------------------------------------------------------
   Collegamenti veri, senza JavaScript. I bersagli non scendono sotto i 44px:
   sono comandi che si usano col pollice, non link dentro un paragrafo. */
.lm-paginazione{
  padding-block: var(--lm-sp-6) var(--lm-sp-7);
  border-top: var(--lm-bordo) solid var(--lm-riga);
}
.lm-paginazione__posizione{
  margin: 0 0 var(--lm-sp-4);
  font-family: var(--lm-font-ui);
  font-size: var(--lm-passo-000);
  letter-spacing: var(--lm-cren-etichetta);
  text-transform: uppercase;
  color: var(--lm-testo-3);
  font-variant-numeric: tabular-nums;
}
.lm-paginazione__lista{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--lm-sp-2);
  align-items: stretch;
}
.lm-paginazione__voce .page-numbers{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding-inline: var(--lm-sp-3);
  font-family: var(--lm-font-ui);
  font-size: var(--lm-passo-00);
  font-variant-numeric: tabular-nums;
  border: var(--lm-bordo) solid var(--lm-riga);
  border-radius: var(--lm-raggio);
  color: var(--lm-testo-2);
  text-decoration: none;
}
.lm-paginazione__voce a.page-numbers:hover{
  border-color: var(--lm-accento);
  color: var(--lm-accento-testo);
}
.lm-paginazione__voce .page-numbers.current{
  border-color: var(--lm-testo);
  color: var(--lm-fondo);
  background: var(--lm-testo);
  font-weight: var(--lm-peso-forte);
}
.lm-paginazione__voce .page-numbers.dots{
  border-color: transparent; min-width: var(--lm-sp-5);
}
/* «Più recenti» e «Più vecchi» sono parole, non frecce: hanno bisogno di aria
   e non devono spezzarsi a metà. */
.lm-paginazione__voce .prev,
.lm-paginazione__voce .next{
  padding-inline: var(--lm-sp-4);
  white-space: nowrap;
}

/* --- elenco vuoto ------------------------------------------------------------
   Non una pagina di scuse: una strada. */
.lm-vuoto{ padding-block: var(--lm-sp-6) var(--lm-sp-7); }
.lm-vuoto__titolo{
  font-family: var(--lm-font-titolo);
  font-size: var(--lm-passo-4);
  line-height: var(--lm-int-stretta);
  margin: 0;
  max-width: var(--lm-misura-stretta);
}
.lm-vuoto__nota{
  margin: var(--lm-sp-4) 0 0;
  max-width: var(--lm-misura-stretta);
  font-size: var(--lm-passo-2);
  line-height: var(--lm-int-lettura);
  color: var(--lm-testo-2);
}
.lm-vuoto__etichetta{
  margin: var(--lm-sp-7) 0 var(--lm-sp-4);
  font-family: var(--lm-font-ui);
  font-size: var(--lm-passo-000);
  font-weight: var(--lm-peso-forte);
  letter-spacing: var(--lm-cren-etichetta);
  text-transform: uppercase;
  color: var(--lm-testo-3);
}
.lm-vuoto__rubriche{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--lm-sp-3);
}
.lm-vuoto__rubriche a{
  display: inline-flex; align-items: center; gap: var(--lm-sp-3);
  min-height: 44px;
  padding: var(--lm-sp-2) var(--lm-sp-4);
  border: var(--lm-bordo) solid var(--lm-riga);
  border-radius: var(--lm-raggio);
  font-family: var(--lm-font-ui);
  font-size: var(--lm-passo-0);
  color: var(--lm-testo);
  text-decoration: none;
}
.lm-vuoto__rubriche a:hover{ border-color: var(--lm-accento); color: var(--lm-accento-testo); }
.lm-vuoto__rubriche span{
  font-size: var(--lm-passo-000);
  color: var(--lm-testo-3);
  font-variant-numeric: tabular-nums;
}