/* Blog index */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
}
@media (min-width: 640px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

.blog-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.blog-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklab, var(--border) 40%, var(--accent) 60%);
    box-shadow: var(--shadow-md);
}
.blog-card__link { display: block; text-decoration: none; color: inherit; }
.blog-card__image {
    aspect-ratio: 16/9;
    background: var(--surface-2);
    overflow: hidden;
}
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__image--placeholder {
    display: grid; place-items: center;
    font-size: 42px; color: var(--text-subtle);
    background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
}
.blog-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.blog-card__cat {
    font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-subtle); font-weight: var(--fw-semibold);
}
.blog-card__title {
    font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -.015em;
    font-weight: var(--fw-bold); margin: 0;
}
.blog-card__excerpt {
    font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__meta {
    display: flex; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-subtle);
    margin-top: var(--sp-2);
}

/* Blog post */
.blog-post { max-width: 720px; margin: 0 auto; }
.blog-post__header { margin-bottom: var(--sp-6); }
.blog-post__title {
    font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -.03em;
    margin: var(--sp-2) 0 var(--sp-3);
}
@media (max-width: 640px) { .blog-post__title { font-size: var(--fs-2xl); } }
.blog-post__meta { color: var(--text-subtle); font-size: var(--fs-sm); margin: 0; }
.blog-post__hero {
    margin: 0 0 var(--sp-8);
    border-radius: var(--r-xl);
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--surface-2);
}
.blog-post__hero img { width: 100%; height: 100%; object-fit: cover; }

.blog-post__content {
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--text);
}
.blog-post__content p { margin: 0 0 var(--sp-5); }
.blog-post__content h2 { font-size: var(--fs-xl); margin: var(--sp-8) 0 var(--sp-3); }
.blog-post__content h3 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-2); }
.blog-post__content h4 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2); }
.blog-post__content ul,
.blog-post__content ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-6); }
.blog-post__content li { margin-bottom: var(--sp-2); }
.blog-post__content blockquote {
    margin: var(--sp-5) 0;
    padding: var(--sp-3) var(--sp-5);
    border-left: 3px solid var(--accent);
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-style: italic;
}
.blog-post__content pre {
    background: var(--surface-3);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    overflow-x: auto;
    font-size: var(--fs-sm);
    margin: 0 0 var(--sp-5);
}
.blog-post__content code {
    font-family: ui-monospace, monospace;
    font-size: .92em;
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: var(--r-xs);
}
.blog-post__content pre code { background: transparent; padding: 0; }
.blog-post__content img { border-radius: var(--r-md); margin: var(--sp-5) 0; }
.blog-post__content a { color: var(--accent); text-decoration: underline; }

.blog-post__tags {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin: var(--sp-8) 0 var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}
.blog-post__footer { padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.blog-post__share { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }

/* Admin: editor */
.md-toolbar {
    display: flex; flex-wrap: wrap; gap: var(--sp-1);
    margin-bottom: var(--sp-2);
    padding: var(--sp-2);
    background: var(--surface-2);
    border-radius: var(--r-md) var(--r-md) 0 0;
}
.md-preview {
    margin-top: var(--sp-4);
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    max-height: 500px;
    overflow-y: auto;
}
.md-preview :first-child { margin-top: 0; }
.blog-image-slot__preview {
    aspect-ratio: 16/9;
    background: var(--surface-2);
    border-radius: var(--r-md);
    overflow: hidden;
    display: grid;
    place-items: center;
    margin-bottom: var(--sp-3);
}
.blog-image-slot__preview img { width: 100%; height: 100%; object-fit: cover; }