/* Strato comune a tutti gli articoli del blog www (30/10/2026).
   Gli articoli hanno template diversi (blog.css, blog-<slug>.css): qui solo ciò che li rende coerenti.
   Va caricato DOPO il CSS dell'articolo. */

/* barra di lettura: solo CSS, dove il browser supporta scroll-timeline */
@supports (animation-timeline: scroll()) {
  body::after{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:2000;pointer-events:none;
    background:linear-gradient(90deg,#ffd700,#ff8a3d);transform-origin:0 50%;transform:scaleX(0);
    animation:blog-progress linear both;animation-timeline:scroll(root)}
  @keyframes blog-progress{to{transform:scaleX(1)}}
}

/* percorso (breadcrumb) sitewide: era una barra bianca su pagina scura */
.blog-bc{max-width:1100px;margin:0 auto;padding:10px 20px 0}
.blog-bc .breadcrumb-nav,.breadcrumb-nav{background:transparent;border:0;padding:6px 0;color:#94a3b8;font-size:.85rem}
.breadcrumb-nav a{color:#ffd700}
/* i template vecchi avevano anche un percorso loro e un secondo logo/header: uno solo basta */
body:has(.blog-bc) nav.breadcrumb{display:none}
.site-nav ~ .container > header:has(> a.logo){display:none}
.site-nav ~ header.header{display:none}

/* testo: niente giustificato (su mobile apriva buchi tra le parole) */
:is(article,.article-content,.content) :is(p,li){text-align:left!important;hyphens:auto;-webkit-hyphens:auto}
:is(article,.article-content) img{max-width:100%;height:auto}
@media (max-width:700px){
  :is(article,.article-content) table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* copertina in testa agli articoli che non avevano foto */
.blog-cover{margin:22px 0 26px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,215,0,.18);background:#141428}
.blog-cover img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* «Continua a leggere» (generato da _scripts/sync-blog-correlati.py) */
.blog-next{max-width:1100px;margin:48px auto 40px;padding:0 20px;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.blog-next__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.blog-next__head h2{margin:0;padding:0;border:0;font-size:1.5rem;color:#ffd700}
.blog-next__head a{color:#ffd700;font-weight:600;text-decoration:none}
.blog-next__head a:hover{text-decoration:underline}
.blog-next__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.blog-next__card{position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:rgba(22,24,44,.9);border:1px solid rgba(155,89,182,.28);transition:transform .25s,border-color .25s}
.blog-next__card:hover{transform:translateY(-3px);border-color:rgba(255,215,0,.5)}
.blog-next__card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.blog-next__body{padding:14px 16px 16px}
.blog-next__badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.blog-next__card h3{margin:6px 0 0;font-size:1.02rem;line-height:1.4;color:#fff}
.blog-next__card h3 a{color:inherit!important;text-decoration:none!important}
.blog-next__card h3 a::after{content:"";position:absolute;inset:0}
.blog-next__card:focus-within{outline:2px solid #ffd700;outline-offset:2px}
.blog-next__meta{margin-top:6px;font-size:.8rem;color:#94a3b8}
@media (prefers-reduced-motion:reduce){.blog-next__card{transition:none}.blog-next__card:hover{transform:none}}