/* ========================================================================
   ARTICOLI.CSS
   Sezione articoli (/articoli, /articoli/[slug]).
   Estende gli stili già presenti in home.css (schede servizi, .servizi-grid,
   .servizio-card) e privacy.css (impaginazione testo, .privacy-hero,
   .privacy-content-wrap). Non tocca nessuno dei due file: aggiunge solo
   le regole minime che mancano.
======================================================================= */

a.articoli-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Le colonne si adattano al numero di articoli: con due articoli
   non resta una casella vuota che sembra un pezzo non caricato. */
.articoli-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.articoli-empty {
  padding: 40px 0;
  color: var(--text-mid);
}

.articoli-article-body h2 {
  margin-top: 44px;
  margin-bottom: 16px;
}

.articoli-article-body h3 {
  margin-top: 32px;
  margin-bottom: 14px;
}

.articoli-article-body p {
  margin-bottom: 18px;
}

.articoli-article-body ul,
.articoli-article-body ol {
  margin: 0 0 18px 22px;
}

.articoli-article-body li + li {
  margin-top: 8px;
}

.articoli-back {
  margin-top: 48px;
}


/* -----------------------------
   La copertina dell'articolo
   Sta fra il titolo e il testo, a tutta larghezza della colonna di lettura.
   Se l'articolo non ha immagine non compare niente: e' facoltativa.
----------------------------- */
.articolo-copertina {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--pad-x) 0;
}

.articolo-copertina img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
}

/* La stessa copertina, piccola, sulla scheda dell'elenco. */
.articoli-card-foto {
  display: block;
  margin: -18px -18px 16px;
}

.articoli-card-foto img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* -----------------------------
   Passalo a qualcuno
   Quattro modi di girare l'articolo, senza registrarsi e senza cliccare
   niente che porti via dalla pagina.
----------------------------- */
.condividi {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.condividi-titolo {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.condividi-bottoni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.condividi-tasto {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  background: none;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

/* Nel corpo dell'articolo i collegamenti sono sottolineati: questi no,
   sono tasti. */
.articoli-article-body .condividi-tasto,
.articoli-article-body .condividi-tasto:hover {
  text-decoration: none;
}

.condividi-tasto svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.condividi-tasto:hover,
.condividi-tasto:focus-visible {
  border-color: var(--gold-deep);
  color: var(--gold-deep);
}