/*
 * Blog index + category archive.
 *
 * Hand-written rather than generated: /blog had no source page. Everything here
 * is composed from tokens and components the articles already define, so the
 * archive matches the rest of the site. Kept in the theme (not build/out) so
 * the builder never overwrites it.
 */

.blog-index{padding:44px 0 72px}

.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.84rem;color:var(--ink-3);margin-bottom:22px}
.crumbs a{color:var(--ink-3);text-decoration:none;transition:color .15s}
.crumbs a:hover{color:var(--primary)}
.crumbs .sep{color:var(--border-strong)}
.crumbs [aria-current="page"]{color:var(--ink-2);font-weight:500}

.blog-head{max-width:760px;margin-bottom:26px}
.blog-head h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.3;color:var(--ink);margin:10px 0 12px}
.blog-head .lead{font-size:1.02rem;color:var(--ink-2);line-height:1.75}

.blog-cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
/* Full pill appearance — the source .chip had no background/border, so the
   category filter defines its own so the chips are actually visible. */
.blog-cats .chip{display:inline-flex;align-items:center;padding:9px 18px;background:#fff;border:1.5px solid var(--border);border-radius:999px;color:var(--ink-2);font-family:var(--font-display);font-weight:600;font-size:.9rem;text-decoration:none;box-shadow:var(--shadow-sm);transition:background .15s,color .15s,border-color .15s,transform .15s}
.blog-cats .chip:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
.blog-cats .chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* .rp-* is the articles' "related posts" card. It lives in the per-article
   stylesheets, which the archive does not load, so the definition is repeated
   here verbatim rather than the archive inventing a second card style. */
.rp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rp-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s}
.rp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.rp-card .rp-cat{font-size:.73rem;color:var(--primary-600);font-weight:700;font-family:var(--font-display);margin-bottom:7px}
.rp-card h3{font-size:.97rem;color:var(--ink);font-family:var(--font-display);line-height:1.35}
.rp-card p{font-size:.84rem;color:var(--ink-3);margin-top:7px}

.blog-grid{grid-template-columns:repeat(3,1fr);gap:18px}
.blog-grid .rp-card{display:flex;flex-direction:column}
.blog-grid .rp-card h2{font-size:1.02rem;color:var(--ink);font-family:var(--font-display);font-weight:700;line-height:1.4}
.blog-grid .rp-card p{flex:1}
.rp-meta{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:.76rem;color:var(--ink-3)}

.blog-pagination{margin-top:38px}
.blog-pagination .nav-links{display:flex;justify-content:center;align-items:center;gap:6px;height:auto}
.blog-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink-2);font-size:.9rem;font-weight:500;text-decoration:none;transition:border-color .15s,color .15s}
.blog-pagination .page-numbers:hover{border-color:var(--primary);color:var(--primary)}
.blog-pagination .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}

@media (max-width:980px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .blog-index{padding:32px 0 56px}
}