/* ============================================================
   blog-index.css — Styles for the blog index page (blog.html)
   ============================================================ */

/* Hero text constraint — scoped to blog hub; matches --content-narrow used by other hubs */
.alt-hero-inner {
    max-width: var(--content-narrow);
    margin: 0 auto;
}

/* Constrain blog body to match other hub pages */
.section--light .section-inner {
    max-width: var(--content-narrow);
}

/* Featured post card */
.blog-card--featured {
    display: block;
    margin-bottom: 2rem;
    padding: 2rem 2.5rem;
    background-color: var(--accent-warm-subtle);
    border: 1px solid var(--accent-warm-border);
}
.blog-card--featured h2 {
    font-size: 1.4rem;
    margin-bottom: 0.6rem;
}
.blog-card--featured .blog-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.65;
    opacity: 0.82;
    margin-top: 0.4rem;
    margin-bottom: 0.75rem;
}

/* Show/hide older posts */
.blog-older-wrap {
    margin-top: 1.5rem;
}
.blog-older-toggle {
    display: block;
    margin: 0 auto 1.5rem;
    background: none;
    border: 1px solid var(--accent-warm);
    color: var(--accent-warm);
    padding: 0.65rem 1.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: inherit;
}
.blog-older-toggle:hover {
    background-color: var(--accent-warm-subtle);
}
.blog-older-toggle:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}