/* Blog List & Article */

.blog-list { margin-bottom: 60px; }

/* Post Card */
.blog-post { margin-bottom: 50px; }

.blog-post h2 {
    font-family: var(--font-sans);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: 1.25;
    margin-bottom: 8px;
}

.blog-post h2 a { color: var(--color-text); text-decoration: none; }
.blog-post h2 a:hover { color: #000; }

.post-date {
    font-family: var(--font-system);
    font-size: var(--fs-small);
    color: var(--color-text-muted);
    margin-bottom: 15px;
}

.post-content { margin-bottom: 15px; }
.post-content p { margin-bottom: 15px; }
.post-content h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--fw-bold); margin: 25px 0 15px; }

.post-image { text-align: center; margin: 20px 0; }
.post-image img { max-width: 100%; height: auto; }
.post-image .placeholder { width: 100%; max-width: 600px; height: 350px; display: inline-flex; }

.post-meta { font-size: var(--fs-base); }
.post-meta a { margin-right: 10px; }

/* Single Article */
.blog-article { margin-bottom: 60px; }

.blog-article h1 {
    font-family: var(--font-sans);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin-bottom: 10px;
}

.blog-article .post-date { margin-bottom: 20px; }
.blog-article .post-content { margin-bottom: 30px; }
.blog-article .post-content p { margin-bottom: 18px; }
.blog-article .post-content ul,
.blog-article .post-content ol { margin-left: 25px; margin-bottom: 18px; }
.blog-article .post-content li { margin-bottom: 8px; }
.blog-article .post-image .placeholder { max-width: 700px; height: 400px; }

.blog-article .post-content h2 {
    font-family: var(--font-sans);
    font-size: 26px;
    font-weight: var(--fw-bold);
    margin: 35px 0 18px;
}

.blog-article .post-content h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    margin: 30px 0 15px;
}

.blog-article blockquote {
    border-left: 4px solid var(--color-border);
    padding-left: 20px;
    margin: 20px 0;
    color: var(--color-text-light);
    font-style: italic;
}

/* Comments */
.comments-section {
    border-top: 1px solid var(--color-border);
    padding-top: 30px;
    margin-top: 40px;
}

.comments-section h2 {
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: var(--fw-bold);
    margin-bottom: 20px;
}