/* =====================================================================
   GO FAR — Blog
   Estende il design system di style.css: qui ci sono solo i componenti
   che il blog aggiunge (card, griglia, corpo articolo, filtri).
   Tutto il resto — .page-hero, .section, .cta-band, .btn-* — è già in
   style.css e viene ereditato, tema di categoria incluso.

   ORDINE DI CARICAMENTO:
     1. bootstrap.min.css
     2. style.css
     3. blog.css      <- questo file
   ===================================================================== */

/* --- Briciole di pane nella hero ------------------------------------- */
.briciole{
  font-size:.86rem;font-weight:500;margin-bottom:18px;
  color:rgba(255,255,255,.72);display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.briciole a{color:rgba(255,255,255,.86);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.briciole a:hover{color:var(--arancio);border-bottom-color:var(--arancio)}
.briciole span{opacity:.55}

/* --- Meta dell'articolo (data, lettura) ------------------------------ */
.art-meta{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-size:.9rem;font-weight:500;color:rgba(255,255,255,.78);
}
.art-meta span[aria-hidden]{opacity:.5}

/* --- Copertina a cavallo fra hero e contenuto ------------------------ */
.art-cover{
  margin:-64px auto 0;max-width:900px;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-hover);position:relative;z-index:2;background:var(--grigio-2);
}
.art-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* --- Corpo dell'articolo ---------------------------------------------
   Misura di riga ~68 caratteri: è la leggibilità, non un vezzo grafico. */
.art-corpo{
  max-width:720px;margin:56px auto 0;font-size:1.06rem;line-height:1.8;color:var(--testo);
}
.art-corpo > *:first-child{margin-top:0}
.art-corpo h2,.art-corpo h3,.art-corpo h4{
  color:var(--blu);font-weight:700;line-height:1.3;margin:2.2em 0 .6em;scroll-margin-top:calc(var(--header-h) + 16px);
}
.art-corpo h2{font-size:1.62rem;position:relative;padding-left:18px}
.art-corpo h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;
  border-radius:4px;background:var(--tema);
}
.art-corpo h3{font-size:1.28rem}
.art-corpo h4{font-size:1.08rem}
.art-corpo p{margin:0 0 1.25em}
.art-corpo a{color:var(--tema);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.art-corpo a:hover{color:var(--arancio)}
.art-corpo ul,.art-corpo ol{margin:0 0 1.4em;padding-left:1.35em}
.art-corpo li{margin-bottom:.5em}
.art-corpo li::marker{color:var(--tema);font-weight:700}
.art-corpo strong{color:var(--blu);font-weight:600}
.art-corpo blockquote{
  margin:1.8em 0;padding:20px 26px;border-left:5px solid var(--tema);
  background:var(--grigio);border-radius:0 var(--radius) var(--radius) 0;
  font-size:1.06rem;color:var(--testo-soft);font-style:italic;
}
.art-corpo blockquote p:last-child{margin-bottom:0}
.art-corpo code{
  background:var(--grigio-2);padding:.15em .45em;border-radius:6px;
  font-size:.9em;color:var(--blu);
}
.art-corpo pre{
  background:var(--blu-deep);color:#e7edf3;padding:20px 22px;border-radius:var(--radius);
  overflow-x:auto;margin:1.6em 0;font-size:.9rem;line-height:1.6;
}
.art-corpo pre code{background:none;color:inherit;padding:0}
.art-corpo hr{margin:2.4em 0;border:0;border-top:2px solid var(--grigio-2)}
.art-corpo table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.96rem}
.art-corpo th,.art-corpo td{padding:11px 14px;border-bottom:1px solid var(--grigio-2);text-align:left}
.art-corpo th{background:var(--grigio);color:var(--blu);font-weight:600}
.art-figura{margin:2em 0}
.art-figura img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.art-figura figcaption{
  margin-top:10px;font-size:.88rem;color:var(--testo-soft);text-align:center;font-style:italic;
}

/* --- Condivisione ----------------------------------------------------- */
.art-condividi{
  max-width:720px;margin:48px auto 0;padding:22px 0 0;border-top:2px solid var(--grigio-2);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.art-condividi span{font-weight:600;color:var(--blu);margin-right:4px}
.art-condividi a{
  display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;
  background:var(--grigio);color:var(--blu);font-size:.88rem;font-weight:600;
  text-decoration:none;transition:all .25s var(--ease);
}
.art-condividi a:hover{background:var(--tema);color:#fff;transform:translateY(-2px)}

/* --- Filtri di categoria ---------------------------------------------- */
.blog-pillole{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.pill{
  --cat:var(--azzurro);
  display:inline-flex;align-items:center;padding:9px 20px;border-radius:999px;
  border:2px solid var(--grigio-2);background:#fff;color:var(--testo-soft);
  font-size:.92rem;font-weight:600;text-decoration:none;transition:all .25s var(--ease);
}
.pill:hover{border-color:var(--cat);color:var(--cat);transform:translateY(-2px)}
.pill.attiva{background:var(--cat);border-color:var(--cat);color:#fff;box-shadow:0 8px 20px rgba(13,59,102,.18)}

/* --- Griglia e card ---------------------------------------------------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:30px}
.blog-card{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.bc-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--grigio-2)}
.bc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.blog-card:hover .bc-media img{transform:scale(1.05)}
.bc-nocover{
  display:block;width:100%;height:100%;
  background:linear-gradient(135deg,var(--blu-deep),var(--blu) 60%,var(--azzurro));
}
.bc-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.bc-cat{
  --cat:var(--azzurro);
  align-self:flex-start;padding:5px 13px;border-radius:999px;margin-bottom:14px;
  background:color-mix(in srgb,var(--cat) 12%,#fff);color:var(--cat);
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.bc-body h3{font-size:1.18rem;line-height:1.4;margin:0 0 10px;font-weight:700}
.bc-body h3 a{color:var(--blu);text-decoration:none}
.bc-body h3 a:hover{color:var(--tema)}
.bc-body p{
  font-size:.95rem;color:var(--testo-soft);margin:0 0 16px;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bc-body time{font-size:.84rem;color:var(--testo-soft);font-weight:500}

.blog-vuoto{text-align:center;color:var(--testo-soft);padding:60px 20px;font-size:1.05rem}

/* --- Pagina "articolo archiviato" -------------------------------------- */
.blog-archiviato .page-hero{min-height:60vh;display:flex;align-items:center}
.blog-archiviato .cta-actions{margin-top:28px;justify-content:flex-start}

/* --- Responsive --------------------------------------------------------- */
@media (max-width:768px){
  .art-cover{margin-top:-40px;border-radius:var(--radius)}
  .art-corpo{margin-top:40px;font-size:1rem}
  .art-corpo h2{font-size:1.4rem}
  .blog-grid{grid-template-columns:1fr;gap:24px}
  .blog-pillole{margin-bottom:32px}
}
@media (max-width:480px){
  .art-condividi{gap:8px}
  .art-condividi a{padding:7px 13px;font-size:.83rem}
}

/* Chi ha chiesto meno movimento non deve subire gli zoom delle card. */
@media (prefers-reduced-motion:reduce){
  .blog-card,.blog-card:hover,.bc-media img,.blog-card:hover .bc-media img,
  .pill,.pill:hover,.art-condividi a,.art-condividi a:hover{
    transition:none;transform:none;
  }
}