/* --- 5. BLOG STYLES (Markdown Support) --- */
.blog-page-wrap { padding: 120px 0 80px; }
.blog-hero-card { margin-bottom: 40px; text-align: center; }
.blog-hero-card h1 { font-size: 3.5rem; margin-bottom: 10px; line-height: 1.1; }
.blog-meta-line { color: var(--accent); font-weight: 600; letter-spacing: 1px; }

.blog-cover-wrap { margin-bottom: 60px; border-radius: 30px; overflow: hidden; border: 1px solid var(--border); }
.blog-article-card { background: var(--surface); border: 1px solid var(--border); border-radius: 30px; padding: 60px; backdrop-filter: blur(20px); }

.blog-content { 
    font-size: 1.15rem; 
    line-height: 1.8; 
    color: var(--text); 
}
.blog-content h1, .blog-content h2, .blog-content h3 { font-family: 'Outfit', sans-serif; font-weight: 800; margin-top: 40px; margin-bottom: 20px; color: var(--text); }
.blog-content h1 { font-size: 2.5rem; }
.blog-content h2 { font-size: 2rem; }
.blog-content h3 { font-size: 1.5rem; }

.blog-content p { margin-bottom: 25px; }
.blog-content ul, .blog-content ol { margin-bottom: 25px; padding-left: 20px; }
.blog-content li { margin-bottom: 10px; list-style: disc; }
.blog-content ol li { list-style: decimal; }

.blog-content strong { color: var(--accent); font-weight: 700; }
.blog-content a { color: var(--accent); text-decoration: underline; font-weight: 600; }
.blog-content blockquote { 
    border-left: 5px solid var(--accent); 
    padding: 20px 30px; 
    background: var(--accent-soft); 
    margin: 30px 0; 
    border-radius: 0 15px 15px 0; 
    font-style: italic;
}
.blog-content code { background: var(--code-bg); padding: 3px 8px; border-radius: 6px; font-family: monospace; font-size: 0.9em; }
.blog-content pre { 
    background: var(--pre-bg); 
    padding: 25px; 
    border-radius: 15px; 
    overflow-x: auto; 
    margin: 30px 0;
    border: 1px solid var(--border);
}

.blog-nav-row { margin-bottom: 40px; }
.blog-back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-dim); transition: 0.3s; }
.blog-back-link:hover { color: var(--accent); transform: translateX(-5px); }