/* blog page styles — V7 (migrated from the view inline <style> block).
   Loaded for BOTH themes; Nova themes it via the token shim + pages.css. */

/* View-scoped (blog index, Task 4-a) — v4 primitives only, nothing renamed
     from the design system. */
  .mx-blog-grid { align-items: start; }
  .article-card--lead { display: grid; grid-template-columns: 1fr; }
  .article-card--lead .article-title { font-size: 1.18rem; }
  @media (min-width: 768px) {
    .article-card--lead { grid-template-columns: 1.05fr 1fr; }
    .article-card--lead .article-cover { aspect-ratio: auto; height: 100%; min-height: 280px; }
  }
  .mx-article-fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--gold-soft), var(--sunken)); color: var(--gold-ink);
  }
  .mx-article-fallback svg { width: 2.2rem; height: 2.2rem; opacity: .85; }
  .article-meta span { display: inline-flex; align-items: center; gap: 5px; }
  .mx-blog-side { display: grid; gap: 14px; min-width: 0; }
  @media (min-width: 1024px) {
    .mx-blog-side { position: sticky; top: calc(var(--nav-h) + 16px); }
  }
  .mx-blog-cats { display: grid; gap: 2px; }
  .mx-blog-cats a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: 10px; font-size: .84rem; font-weight: 600; color: var(--t2);
    transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
  }
  .mx-blog-cats a:hover { background: var(--sunken); color: var(--t1); }
  .mx-blog-cats a.is-active { background: var(--gold-soft); color: var(--gold-ink); font-weight: 800; }
  .mx-blog-cta { display: grid; gap: 9px; justify-items: start; padding: 20px 18px; }
  .mx-blog-cta h3 { font-size: 1rem; font-weight: 800; }
  .mx-blog-cta p { font-size: .8rem; color: var(--t2); line-height: 1.9; }
  .mx-blog-cta .btn { width: 100%; }