/**
 * Alex Strait — Blog Styles
 */

/* Blog listing cards */
.blog-listing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.blog-card {
    text-decoration: none;
    color: inherit;
}

.blog-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.25;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.blog-card:hover h3 {
    color: var(--accent);
}

.blog-card .meta {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
}

.blog-card p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .blog-listing {
        grid-template-columns: 1fr;
    }
}

/* Single blog post */
.content.blog-post article {
    max-width: var(--narrow-width);
    margin: 0 auto;
}

.content.blog-post h1 {
    margin-bottom: var(--space-md);
}

.content.blog-post .post-meta {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
}

.content.blog-post .post-body p {
    margin-bottom: var(--space-lg);
    max-width: 65ch;
}

.content.blog-post .post-body h2 {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.content.blog-post .post-body h3 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.content.blog-post .post-body blockquote {
    border-left: 3px solid var(--accent);
    padding-left: var(--space-lg);
    margin: var(--space-xl) 0;
    color: var(--text-secondary);
    font-style: italic;
}

.content.blog-post .post-body img {
    border-radius: var(--radius-md);
    margin: var(--space-xl) 0;
}

.content.blog-post .post-body pre {
    margin: var(--space-xl) 0;
}