/* Blog e video del sito (pagine generate da Cirocaporali Blog/backend/icp-sync.js) */
.blog-page { background: #000; color: #fff; }
.blog-container { max-width: 860px; margin: 0 auto; padding: 120px 1.5rem 80px; }
.blog-article { max-width: 780px; }
.crumbs { font-size: .82rem; color: rgba(255,255,255,.5); margin-bottom: 1.5rem; }
.crumbs a { color: rgba(255,255,255,.7); text-decoration: none; }
.crumbs a:hover { color: var(--color-accent); }
.crumbs span { margin: 0 .2rem; }
.blog-container h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2; margin-bottom: .75rem; letter-spacing: -.02em; }
.meta { font-size: .9rem; color: rgba(255,255,255,.55); margin-bottom: 2rem; }
.meta a { color: var(--color-accent); }
.blog-tabs { display: flex; gap: .5rem; margin: 0 0 1.5rem; }
.blog-tabs a { padding: .45rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.75); text-decoration: none; font-size: .9rem; }
.blog-tabs a:hover { border-color: var(--color-accent); color: #fff; }
.blog-tabs a.on { background: var(--color-accent); border-color: var(--color-accent); color: #000; font-weight: 700; }
.lead { font-size: 1.1rem; color: rgba(255,255,255,.72); line-height: 1.7; margin-bottom: 2rem; }
.cover { margin: 0 0 2rem; }
.cover img { width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); display: block; }

.article-body { font-size: 1.04rem; line-height: 1.85; color: rgba(255,255,255,.82); }
.article-body h2 { font-size: 1.5rem; margin: 2.4rem 0 1rem; color: #fff; line-height: 1.3; }
.article-body h3 { font-size: 1.2rem; margin: 1.8rem 0 .75rem; color: var(--color-accent); line-height: 1.35; }
.article-body h4 { font-size: 1.05rem; margin: 1.4rem 0 .6rem; color: #fff; }
.article-body p { margin-bottom: 1.1rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.article-body li { margin-bottom: .5rem; }
.article-body a { color: var(--color-accent); }
.article-body strong { color: #fff; }
.article-body figure { margin: 1.8rem auto; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); display: block; margin: 0 auto; }
.article-body figcaption { font-size: .85rem; color: rgba(255,255,255,.5); margin-top: .5rem; text-align: center; }
.article-body blockquote { border-left: 3px solid var(--color-accent); padding-left: 1rem; margin: 1.5rem 0; color: rgba(255,255,255,.7); }
.article-body hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 2rem 0; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.article-body table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.article-body th, .article-body td { border: 1px solid rgba(255,255,255,.12); padding: .65rem .8rem; text-align: left; vertical-align: top; }
.article-body th { background: rgba(212,175,55,.1); color: #fff; }
.ql-align-center { text-align: center; }

.cta-box { margin: 3rem 0 2rem; padding: 1.8rem; border: 1px solid rgba(212,175,55,.35); border-radius: 14px; background: rgba(212,175,55,.06); }
.cta-box h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.cta-box p { color: rgba(255,255,255,.72); margin: 0 0 1.2rem; line-height: 1.7; }
.cta-btn { display: inline-block; padding: .8rem 1.5rem; border-radius: 10px; background: var(--color-accent); color: #000 !important; font-weight: 700; text-decoration: none; }
.author-box { margin: 2rem 0; padding: 1.2rem 1.4rem; border-radius: 12px; background: rgba(255,255,255,.04); font-size: .92rem; }
.author-box strong { display: block; margin-bottom: .3rem; }
.author-box p { margin: 0; color: rgba(255,255,255,.65); line-height: 1.6; }
.author-box a { color: var(--color-accent); }
.related h2 { font-size: 1.2rem; margin: 2rem 0 .8rem; color: var(--color-accent); }
.related-list { list-style: none; padding: 0; margin: 0; }
.related-list li { margin: .5rem 0; }
.related a { color: #fff; }
.related a:hover { color: var(--color-accent); }
.also-on { font-size: .88rem; color: rgba(255,255,255,.5); margin-top: 2rem; }
.also-on a { color: var(--color-accent); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.4rem; margin: 2rem 0; }
.card { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.03); text-decoration: none; color: #fff; transition: border-color .25s, transform .25s; }
.card:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.card img, .card-ph { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: linear-gradient(135deg, #111, #1c1c1c); display: block; }
.card-ph { background: #0d0d0d url(/assets/img/logo-ic.webp) center / 20% no-repeat; border-bottom: 1px solid rgba(255,255,255,.06); }
.card-txt { padding: 1rem 1.1rem 1.2rem; }
.card-txt h2 { font-size: 1.02rem; line-height: 1.35; margin: 0 0 .5rem; color: #fff; }
.card-txt p { font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.62); margin: 0 0 .7rem; }
.card-date { font-size: .78rem; color: var(--color-accent); }

.yt-lite { position: relative; aspect-ratio: 16/9; margin: 0 0 2rem; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.1); }
.yt-lite .yt-link { display: block; width: 100%; height: 100%; }
.yt-lite img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; background: rgba(212,175,55,.92); color: #000; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; padding-left: 6px; }
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
    .blog-container { padding-top: 100px; }
    .cards { grid-template-columns: 1fr; }
}