.blog-post {
  padding: var(--space-xl);
  max-width: 900px;
  margin: var(--space-xl) auto;
  background: var(--color-card);
  border-radius: var(--radius-lg);
}

.blog-post h1 {
  margin-bottom: var(--space-sm);
}

.blog-post time {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  display: block;
  margin-bottom: var(--space-lg);
}

.blog-post p {
  margin-bottom: var(--space-md);
  line-height: 1.8;
}

.blog-post img {
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
}

.blog-post a {
  color: var(--color-link);
  text-decoration: underline;
}

/* ===== Blog Listing Page ===== */
.blog-page {
  padding: var(--space-xl) 0;
}

.blog-page h1 {
  margin-bottom: var(--space-lg);
}

/* .blog-grid and .blog-card styles moved to components.css
   so the homepage "Dal Blog" section inherits them. */

/* ===== Blog Post Detail ===== */
.blog-back {
  display: inline-block;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-lg);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.blog-back:hover {
  color: var(--color-link);
}

.blog-post-cover {
  width: 100%;
  /* Il riquadro prende la forma dell'immagine invece di un tetto in altezza.
     Con max-height: 400px il riquadro veniva 772x400 mentre la copertina, a
     piena larghezza, sarebbe alta 505: il tetto la comprimeva e object-fit
     la rimpiccioliva per starci, lasciando 160 px di grigio ai lati — 80 per
     parte. Misurato sulla pagina viva.
     Ora 772x505: la copertina riempie la colonna, niente fasce.
     Resta contain e resta il fondo: se un domani arriva una copertina di
     forma diversa, perde spazio ma non viene ritagliata — e le copertine qui
     hanno il testo scritto dentro. Stesso criterio della card nell'elenco. */
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  background: var(--color-card);
}

.blog-post-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.blog-tag {  /* B10 - la chip. Sul mockup e' una pillola PIENA color fascia con un bordo
     sottile, non un contorno vuoto come avevo scritto in inventario.

     Il riempimento non si puo' copiare alla lettera: la loro chip e' beige su
     fondo chiaro, la nostra sta sul foglio dell'articolo che dopo B1 e' beige.
     Beige su beige fa 3,2 punti di stacco, cioe' sparisce. Vale la stessa
     inversione delle card: la chi prende l'ALTRA superficie.

     E RIPARA UNA REGRESSIONE CHE AVEVO FATTO IO CON B1. Il fondo
     semitrasparente al 10% va composto sul foglio prima di misurarlo: su
     foglio bianco dava #f4f2f9 e il testo lavanda ci stava a 5,28; sul foglio
     beige diventa #e6ddd9 e il testo scendeva a 4,39, SOTTO la soglia di 4,5.
     Con la superficie chiara il testo torna a 5,36, meglio di prima.

     Il bordo e' --color-border: da' 7,4 punti di stacco contro i 3,5 misurati
     sul mockup. E' il doppio, ma a queste luminanze restano tutti e due un
     filo appena percepibile, e usare il token vale piu' di un esadecimale in
     piu' cablato qui. */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-link);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
}

.blog-post-content {
  line-height: 1.8;
  /*
    L'INCHIOSTRO, NON IL COLORE ATTENUATO (28-08-2026).

    Qui c'era `--color-text-muted`, cioe' il grigio che serve per le date, le
    didascalie e le note di servizio: il corpo di ogni articolo era scritto nel
    colore delle cose secondarie.

    Due misure sul fondo vero dell'articolo (`#f0e8dc`, la card, non la
    superficie della pagina): attenuato **5,10:1**, inchiostro **14,04:1**.
    Il primo passa la soglia, quindi nessun controllo di contrasto lo segnalava
    -- ma passare la soglia e' il minimo per un'etichetta, non l'obiettivo per
    tremila parole da leggere di fila.

    E c'e' un secondo motivo, che spiega perche' «sembrava verdastro» a occhio
    prima ancora di essere misurato: `#5b6170` e' un grigio-BLU (R 91, G 97,
    B 112) posato su un fondo CALDO (R 240, G 232, B 220). L'occhio legge lo
    scontro di temperatura come sbiadito, anche dove il contrasto basta.
  */
  color: var(--color-text);
}

.blog-post-content p {
  margin-bottom: 1rem;
}

.blog-post-content h2,
.blog-post-content h3 {
  color: var(--color-text);
  margin: 1.5rem 0 0.75rem;
}

.blog-post-content ul,
.blog-post-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

/* ===== Pagination ===== */
.blog-page .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: var(--space-xl);
}

.blog-page .pagination .btn-page {
  padding: 0.5rem 1rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.blog-page .pagination span.btn-page {
  opacity: 0.4;
  cursor: default;
}

.blog-page .pagination span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   I commenti sotto un articolo
   ============================================================ */

.commenti {
  /* --space-xl (4rem), non un --space-2xl: quel token NON esiste nel foglio
     delle variabili, e una var() che non risolve fa cadere la dichiarazione
     senza dire niente. Controllato invece di scriverlo a memoria. */
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.commenti-titolo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: var(--space-sm);
}

.commenti-stato {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.commenti-lista {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
}

.commento {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.commento-testa {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: 0.35rem;
}

.commento-testa time {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.commento-pollice {
  font-size: 0.95rem;
  line-height: 1;
}

.commento-testo {
  /* Il testo arriva da estranei: una parola lunghissima senza spazi
     sfonderebbe la colonna. Qui si spezza invece di sfondare. */
  overflow-wrap: anywhere;
  line-height: 1.7;
  margin: 0;
}

.commenti-scrivi {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: var(--space-md);
}

.commenti-form {
  max-width: 620px;
}

.commenti-riga {
  margin-bottom: var(--space-md);
}

.commenti-riga label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.commenti-riga input,
.commenti-riga textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
}

.commenti-riga textarea {
  resize: vertical;
  min-height: 7rem;
}

.commenti-nota {
  display: block;
  margin-top: 0.3rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* IL CAMPO TRAPPOLA. Fuori dallo schermo invece di display:none: alcuni
   compilatori automatici saltano i campi nascosti col display, e una trappola
   che lo spam riconosce non e' una trappola. Chi naviga con la tastiera o con
   uno screen reader non lo incontra comunque, perche' il markup gli mette
   aria-hidden e tabindex="-1". */
.commenti-trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.commenti-pollice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
  cursor: pointer;
}

.commenti-esito {
  margin-top: var(--space-md);
}

.commenti-esito.is-errore {
  color: var(--color-error);
}

.commenti-esito.is-fatto {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}