/* ============ BLOG POST PAGES (shared) ============ */
.blog-post { max-width: 860px; margin: 0 auto 2rem; line-height: 1.8; }
.blog-post h1 { line-height: 1.3; }
.blog-post .post-meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.blog-post h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 1.8rem 0 0.6rem; color: var(--primary); }
.blog-post p { margin-bottom: 1rem; color: var(--text); }
.blog-post ul, .blog-post ol { padding-left: 1.5rem; margin: 0.8rem 0 1rem; }
.blog-post li { margin-bottom: 0.5rem; }
.blog-post a { color: #2563eb; text-decoration: underline; }
.breadcrumb { font-size: 0.85rem; margin-bottom: 1rem; color: var(--text-muted); }
.breadcrumb a { color: #2563eb; }
.post-cta { margin-top: 2rem; padding: 1.2rem; border: 2px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg); }
.post-cta a.btn-primary { text-decoration: none; margin-top: 0.5rem; }
.related h2 { margin-top: 2rem; }

/* Reading progress bar */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #38bdf8, #818cf8); z-index: 1200; transition: width 0.1s linear; }

/* Back to top button */
.back-to-top { position: fixed; right: 1rem; bottom: 1rem; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: var(--transition); z-index: 900; }
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--accent); }

@media (max-width: 480px) {
    .blog-post { line-height: 1.7; }
}