/* Sezione editoriale /articoli/ — usa i token di app.css, nessun colore fisso.
 *
 * Larghezza: UN SOLO limite, sui blocchi di testo (58ch ~= 72 caratteri, con il
 * rapporto ch->carattere di 1,24 misurato il 19/08/2026). Il contenitore resta
 * largo e lo spazio che avanza lo usano figure, tabelle e citazioni, che escono
 * a piena larghezza: due limiti sovrapposti lascerebbero mezza pagina bianca
 * (memoria feedback-larghezza-testo-pagine-web).
 */

.art-main {
  padding: var(--spacing-lg) var(--spacing-md) 0;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---- indice della sezione ---- */

.art-intro { margin: var(--spacing-lg) 0 var(--spacing-xl); }
.art-intro h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 var(--spacing-md); }
/* L'intro sta accanto al titolo sopra i 900 px: due elementi affiancati invece
 * di una riga corta con mezza pagina vuota accanto. */
.art-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--spacing-xl);
  align-items: end;
}
.art-intro h1 { margin-bottom: 0; }
.art-intro p {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .art-intro { grid-template-columns: 1fr; gap: var(--spacing-md); }
}

.art-lista { list-style: none; margin: 0 0 var(--spacing-xl); padding: 0; }
.art-lista__voce { border-top: 1px solid var(--border); }
.art-lista__voce:last-child { border-bottom: 1px solid var(--border); }

.art-lista__link {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
  padding: var(--spacing-lg) var(--spacing-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}
.art-lista__link:hover { background: var(--bg-secondary); }
/* Le anteprime sono card social in proporzione 4:5, cioè verticali: lasciate
 * intere alte 400 px dominerebbero la riga. Si ritaglia la parte alta, dove
 * la card mette titolo e numero grande. */
.art-lista__img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-md);
  display: block;
  background: var(--bg-secondary);
}
.art-lista__data {
  display: block;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-hint);
  margin-bottom: var(--spacing-xs);
}
.art-lista__titolo {
  font-size: var(--font-size-xl);
  line-height: 1.25;
  margin: 0 0 var(--spacing-sm);
  color: var(--text-primary);
}
.art-lista__link:hover .art-lista__titolo { color: var(--primary); }
/* Niente max-width qui: la colonna della griglia limita già la riga, e un
 * secondo limite lascerebbe mezza colonna bianca (memoria
 * feedback-larghezza-testo-pagine-web). */
.art-lista__sommario {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .art-lista__link { grid-template-columns: 1fr; gap: var(--spacing-md); }
  .art-lista__titolo { font-size: var(--font-size-lg); }
}

/* ---- articolo ---- */

.art { padding-bottom: var(--spacing-xl); }

.art__briciole {
  font-size: var(--font-size-sm);
  color: var(--text-hint);
  margin-bottom: var(--spacing-lg);
}
.art__briciole a { color: var(--text-secondary); text-decoration: none; }
.art__briciole a:hover { text-decoration: underline; }

.art__titolo {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.15;
  margin: 0 0 var(--spacing-md);
  /* un titolo e' fatto di poche parole grandi: la misura di lettura della prosa
     lo spezzerebbe in quattro righe lasciando mezza pagina vuota */
  max-width: 30ch;
}
.art__sommario {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0 0 var(--spacing-md);
}
.art__firma {
  font-size: var(--font-size-sm);
  color: var(--text-hint);
  margin: 0 0 var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border);
}

/* il corpo: i blocchi di testo hanno la misura di lettura, gli altri no */
.art p,
.art ul,
.art ol,
.art h2,
.art h3,
.art blockquote {
  max-width: 58ch;
}
.art p, .art li { font-size: var(--font-size-lg); line-height: 1.7; }
.art p { margin: 0 0 var(--spacing-lg); }
.art ul, .art ol { margin: 0 0 var(--spacing-lg); padding-left: 1.4em; }
.art li { margin-bottom: var(--spacing-sm); }

.art h2 {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.3;
  margin: var(--spacing-xl) 0 var(--spacing-md);
}
.art h3 {
  font-size: var(--font-size-xl);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.art a { color: var(--primary); }
.art strong { font-weight: 650; }

.art blockquote {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 3px solid var(--primary);
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-secondary);
}
.art blockquote p:last-child { margin-bottom: 0; }

/* figure e tabelle usano tutta la larghezza: e' li' che va lo spazio che avanza */
.art img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}
.art figure { margin: var(--spacing-xl) 0; }
.art figcaption {
  font-size: var(--font-size-sm);
  color: var(--text-hint);
  line-height: 1.5;
  max-width: 62ch;
}

.art table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0 var(--spacing-xl);
  font-size: var(--font-size-sm);
}
.art thead th {
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--border);
  padding: var(--spacing-sm);
  white-space: nowrap;
}
.art tbody td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--border);
}
.art tbody tr:hover { background: var(--bg-secondary); }
.art td:not(:first-child), .art th:not(:first-child) { text-align: right; }

/* una tabella larga scorre dentro il suo riquadro, la pagina no */
.art .tabella-scorrevole { overflow-x: auto; margin: var(--spacing-lg) 0; }
.art .tabella-scorrevole table { margin: 0; }

.art__fine {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--spacing-xl) 0 var(--spacing-md);
}
.art__nota {
  font-size: var(--font-size-sm);
  color: var(--text-hint);
  line-height: 1.6;
  max-width: 62ch;
}

@media (max-width: 760px) {
  .art-main { padding: var(--spacing-md) var(--spacing-md) 0; }
  .art p, .art li { font-size: var(--font-size-md); }
}