/* Bundled styles for inner pages (referenced as /css/site.css) */
@import url("animations.css");

/* --- CLS: reserve header/banner space before partials inject --- */
#partial-header {
    display: block;
    min-height: 4.25rem;
}

@media (min-width: 768px) {
    #partial-header {
        min-height: 4.75rem;
    }
}

.hero-banner__frame {
    aspect-ratio: 21 / 5;
    min-height: clamp(100px, 18vw, 168px);
}

/* Crawlable blog index (static + JS grid) */
.blog-index-static {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border, rgb(255 255 255 / 0.08));
}

.blog-index-static__heading {
    font-size: 1.125rem;
    margin: 0 0 1rem;
}

.blog-index-static__list {
    columns: 1;
    gap: 0.5rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .blog-index-static__list {
        columns: 2;
    }
}

@media (min-width: 1024px) {
    .blog-index-static__list {
        columns: 3;
    }
}

.blog-index-static__list li {
    break-inside: avoid;
    margin-bottom: 0.5rem;
}

.blog-index-static__list a {
    font-size: 0.9375rem;
    line-height: 1.45;
}