/* Blog: stili aggiuntivi, si appoggia alle variabili di sarabi.css */
.blog-wrap { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
.blog-hero { padding: 9rem 1.5rem 2rem; }
.blog-hero .hero-h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.blog-meta { color: var(--text-dim); font-size: var(--fs-sm); letter-spacing: .08em; margin-top: 1.2rem; }
.article { padding: 1rem 1.5rem 5rem; font-size: 1.08rem; line-height: 1.8; }
.article h2 { font-size: var(--fs-2xl); font-weight: 800; margin: 3rem 0 1rem; line-height: 1.25; }
.article h2::before { content: ''; display: block; width: 2.5rem; height: 3px; background: var(--orange); margin-bottom: .9rem; }
.article h3 { font-size: var(--fs-lg); font-weight: 700; margin: 2rem 0 .6rem; }
.article p { margin: 0 0 1.2rem; color: var(--text); }
.article ul, .article ol { margin: 0 0 1.4rem 1.4rem; }
.article li { margin-bottom: .55rem; }
.article li::marker { color: var(--teal); }
.article a { color: var(--teal); text-underline-offset: 3px; }
.article a:hover { color: var(--orange-bright); }
.article b, .article strong { font-weight: 700; }
.article-end { border-top: 1px solid var(--teal-soft); padding-top: 2rem; margin-top: 3rem; color: var(--text-dim); }
.post-list { list-style: none; margin: 0; padding: 0 0 6rem; display: grid; gap: 1.2rem; }
.post-card { display: block; padding: 1.6rem 1.8rem; background: var(--bg-light); border: 1px solid var(--teal-soft); border-radius: 10px; text-decoration: none; color: var(--text); transition: border-color .2s, transform .2s; }
.post-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.post-card time { color: var(--orange); font-size: var(--fs-sm); letter-spacing: .1em; }
.post-card h2 { font-size: var(--fs-lg); font-weight: 800; margin: .4rem 0 .5rem; }
.post-card p { margin: 0; color: var(--text-dim); font-size: .98rem; }
.blog-empty { color: var(--text-dim); padding-bottom: 6rem; }
@media (max-width: 768px) { .blog-hero { padding-top: 7rem; } .article { font-size: 1.02rem; } }