/* ============================================================
   Page 4.2 — Blog index (pages/blog.css)
   Loads on the index AND on posts: blog posts render under the
   page key 'blog' (chrome anchor, see App), so the shared blog
   components (article-card, newsletter) live here; post-only
   styles live in pages/blog_post.css. Tokens only.
   ============================================================ */

/* ── Hero: dark index header (surface-dark from main.css) ──── */
.blog-hero { padding-block: var(--space-2xl); text-align: center; }
.blog-hero__eyebrow { margin-bottom: var(--space-md); } /* pill look: .eyebrow-dark */
.blog-hero__headline { margin-bottom: var(--space-sm); }
.blog-hero__intro {
    font-size: var(--text-lg);
    color: var(--ink-inverse-muted);
    max-width: 44em;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .blog-hero { padding-block: var(--space-3xl) var(--space-2xl); }
}

/* ── Category filter: link pills, horizontal scroll on mobile ─ */
.blog-filter { padding-top: var(--space-xl); }
.blog-filter__tabs {
    display: flex; gap: var(--space-sm);
    list-style: none; padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* breathing room so focus rings aren't clipped by overflow */
    padding-block: var(--space-2xs);
}
.blog-filter__tabs a {
    display: inline-flex; align-items: center;
    white-space: nowrap;
    min-height: 36px;
    padding: var(--space-2xs) var(--space-md);
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-full);
    color: var(--ink-900);
    font-size: var(--text-sm); font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard);
}
.blog-filter__tabs a:hover { border-color: var(--blue-500); color: var(--blue-700); }
.blog-filter__tabs a[aria-current="page"] {
    background: var(--blue-900);
    border-color: var(--blue-900);
    color: var(--ink-inverse);
}

/* Article grid + article-card live in main.css (shared with the home and
   product-page blog teasers). */

/* Listing sits between the filter and the newsletter on the same
   surface — half the usual section padding keeps the page rhythm
   tight (no band change to justify the full 2xl/3xl gap) */
.blog-listing { padding-block: var(--space-xl); }

/* ── Empty states (sparse locale / empty category) ─────────── */
.blog-empty { text-align: center; }
.blog-empty__heading { margin-bottom: var(--space-sm); }
.blog-empty__body { color: var(--ink-600); margin-bottom: var(--space-lg); }
.blog-empty--category { padding-block: var(--space-xl); }
.blog-empty--category .blog-empty__body { margin-bottom: var(--space-xs); }

/* ── Newsletter signup (components/newsletter-signup.md) ───── */
.newsletter__card {
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
}
.newsletter__heading { font-size: var(--text-xl); margin-bottom: var(--space-2xs); }
.newsletter__sub { color: var(--ink-600); margin-bottom: var(--space-lg); }
.newsletter__row { display: grid; gap: var(--space-sm); }
@media (min-width: 640px) {
    .newsletter__row { grid-template-columns: 1fr auto; align-items: end; }
}
.newsletter__consent {
    display: flex; align-items: baseline; gap: var(--space-xs);
    margin-top: var(--space-md);
    font-size: var(--text-sm); color: var(--ink-600);
}
.newsletter__consent input {
    width: 18px; height: 18px; flex: none;
    transform: translateY(2px);
    accent-color: var(--accent-500);
}
.newsletter__consent a { color: var(--blue-700); }
.newsletter__success { margin-top: var(--space-md); font-weight: 600; color: var(--accent-600); }