.blog-cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 24px;
}
.blog-card-title { font-size: 22px; line-height: 1.4; margin-bottom: 12px; }
.blog-card-title a:hover { color: var(--primary); }
.blog-byline { margin-top: 20px; color: var(--muted); }
.blog-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 40px; }
.blog-content { max-width: 900px; line-height: 1.85; overflow-wrap: anywhere; }
.blog-content h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.4; margin: 32px 0 16px; }
.blog-content h3 { font-size: 21px; margin: 24px 0 12px; }
.blog-content p, .blog-content ul, .blog-content ol { margin-bottom: 20px; }
.blog-content ul, .blog-content ol { padding-left: 24px; }
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content a { color: var(--primary-dark); text-decoration: underline; }
.blog-content blockquote { border-left: 4px solid var(--primary); padding-left: 20px; margin: 24px 0; }
.blog-content pre { overflow-x: auto; padding: 16px; background: #f1f5f9; border-radius: 8px; }
.blog-content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.blog-content th, .blog-content td { padding: 10px; border: 1px solid #cbd5e1; text-align: left; }
.blog-content th { background: var(--primary-soft); }
.blog-content img { max-width: 100%; height: auto; }