/* wiki/blog.css — shared styling for the blog index and every article.
   Loaded AFTER /styles.css, so it inherits the site design tokens, reset,
   nav, and buttons and only adds blog-specific layout:
     1. the full site top-nav shown on blog pages (no SPA router, no hamburger)
     2. a left-hand, date-stamped index of every post (blog-wide navigation)
     3. article prose typography, scoped to .blog-article so it never
        clobbers the shared nav links. */

/* --- full top-nav on blog pages: no JS router here, so keep every link
       visible instead of collapsing behind the SPA hamburger --- */
.nav .nav-links{display:flex;}

/* --- two-column blog layout: post index on the left, article on the right --- */
.blog-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:44px;
  max-width:1080px;
  margin:0 auto;
  padding:44px 24px 72px;
  align-items:start;
}

/* --- left navigation index (date-stamped list of all posts) --- */
.blog-index{position:sticky;top:82px;}
.blog-index h2{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;font-weight:700;
}
.blog-index ul{list-style:none;margin:0;padding:0;}
.blog-index li{margin:0 0 4px;}
.blog-index a{
  display:block;padding:10px 12px;border-radius:10px;
  border-left:2px solid transparent;
  color:var(--muted);font-size:14px;line-height:1.35;font-weight:600;
  transition:color .2s,background .2s,border-color .2s;
}
.blog-index a:hover{color:var(--ink);background:var(--surface);}
.blog-index li.active a{
  color:var(--accent);border-left-color:var(--accent);background:var(--accent-soft);
}
.blog-index .d{
  display:block;margin-top:4px;font-size:11px;font-weight:500;
  color:var(--faint);font-family:var(--font-mono);letter-spacing:.02em;
}

/* --- article column --- */
.blog-main{min-width:0;}
.blog-article{max-width:720px;}
.blog-article h1{
  font-size:clamp(30px,4.4vw,44px);line-height:1.12;letter-spacing:-.03em;
  color:var(--accent);margin:0 0 14px;
}
.blog-article h2{
  font-size:clamp(22px,2.6vw,28px);line-height:1.18;letter-spacing:-.02em;
  color:var(--accent);margin:2.2rem 0 1rem;
}
.blog-article h3{font-size:1.2rem;margin:1.5rem 0 .75rem;color:var(--ink);}
.blog-article p{margin:0 0 1rem;color:var(--ink);}
.blog-article .byline{color:var(--muted);font-size:.9rem;margin:0 0 2rem;}
.blog-article ul,.blog-article ol{margin:0 0 1rem 1.6rem;}
.blog-article li{margin:0 0 .5rem;}
.blog-article strong{color:var(--accent);}
.blog-article a{color:var(--accent);border-bottom:1px solid var(--accent);}
.blog-article a:hover{opacity:.8;}
.blog-article blockquote{
  margin:1.2rem 0;padding:12px 18px;border-left:3px solid var(--accent);
  background:var(--surface);color:var(--muted);border-radius:0 8px 8px 0;
}
.blog-article .related{
  margin-top:2rem;padding:16px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;
}
.blog-article .related a{border-bottom:none;font-weight:600;}
.blog-article .back-link{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);}
.blog-article .back-link a{border-bottom:none;}
/* markdown-generated media/code/tables (from add_blog_post.py posts) */
.blog-article img{max-width:100%;height:auto;border-radius:10px;margin:1.2rem 0;border:1px solid var(--line);}
.blog-article code{background:var(--surface-2);padding:2px 6px;border-radius:5px;font-size:.9em;font-family:var(--font-mono);}
.blog-article pre{background:var(--surface-2);padding:14px 16px;border-radius:10px;overflow:auto;margin:1.2rem 0;border:1px solid var(--line);}
.blog-article pre code{background:none;padding:0;}
.blog-article table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:.95em;}
.blog-article th,.blog-article td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top;}
.blog-article th{background:var(--surface);}
.blog-article hr{border:0;border-top:1px solid var(--line);margin:2rem 0;}
.blog-article pre.mermaid{background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:16px;margin:1.4rem 0;overflow-x:auto;}

/* --- blog index landing page cards (wiki/index.html) --- */
.blog-main .subtitle{color:var(--muted);font-size:1.05rem;margin:0 0 2.4rem;}
.article-card{
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:1.8rem;margin-bottom:1.4rem;transition:transform .2s,border-color .2s;
}
.article-card:hover{transform:translateY(-2px);border-color:var(--accent);}
.article-card h2{font-size:1.3rem;color:var(--accent);margin:0 0 .4rem;}
.article-date{color:var(--muted);font-size:.9rem;margin:0 0 1rem;}
.article-excerpt{color:var(--ink);margin:0 0 1.4rem;}
.read-link{color:var(--accent);text-decoration:none;font-weight:600;}
.read-link:hover{text-decoration:underline;}

/* --- mobile: stack the index above the article --- */
@media (max-width:860px){
  .blog-layout{grid-template-columns:1fr;gap:28px;padding:28px 20px 56px;}
  .blog-index{position:static;top:auto;border-bottom:1px solid var(--line);padding-bottom:20px;}
  .blog-index ul{display:flex;flex-wrap:wrap;gap:6px;}
  .blog-index li{margin:0;}
  .blog-index a{border-left:0;border:1px solid var(--line);padding:8px 12px;}
  .blog-index li.active a{border-color:var(--accent);}
  .blog-index .d{display:inline;margin:0 0 0 8px;}
}