/* Blog layout — dark-theme compatible; uses base.html CSS variables where useful */

.blog-hero {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 24rem;
    overflow: hidden;
    border-radius: var(--sv-radius-block, 0.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.blog-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-thumb {
    --sv-card-media-aspect-ratio: 16 / 10;
}

.blog-card-thumb img {
    object-fit: var(--sv-card-media-fit, cover);
}

.blog-card-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.reading-experience .blog-content {
    font-size: var(--sv-reading-body-size);
    line-height: var(--sv-reading-body-leading);
}

.reading-experience .blog-content p {
    margin-bottom: var(--sv-space-4);
}

.reading-experience .blog-content p:last-child {
    margin-bottom: 0;
}

.blog-reading-column {
    width: 100%;
    max-width: 100ch;
    margin-inline: auto;
}

.blog-card-thumb,
.blog-card-thumb--empty {
    --sv-card-media-aspect-ratio: 16 / 10;
}