/* ============================================================
   moltsets blog — index + post
   Requires: colors_and_type.css, components.css
   Mirrors the skills-library terminal aesthetic (dashed brand
   boxes, titlebar traffic dots, mono type, bg texture).
   ============================================================ */

/* Design tokens used by the blog body that the main site's moltsets-base.css
   does not define (they originate in the library's colors_and_type.css, which
   the blog no longer loads — the blog now uses the main-site header/footer CSS). */
:root {
  --orange-ash: rgb(57, 41, 29);
  --orange-tint: rgb(245, 141, 109);
  --slate-500: rgb(153, 161, 175);
  --slate-600: rgb(55, 65, 81);
  --surface: var(--bg-base);
}

html, body { height: 100%; margin: 0; }
body {
  background: var(--surface);
  background-image: url('bg-texture.png');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
}

.blog-page {
  flex: 1;
  padding: 24px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Hero (shared) ── */
.blog-hero { display: flex; flex-direction: column; gap: 10px; }
.blog-hero .hero-path { font: 400 11px/1 var(--font-mono); color: var(--fg-muted); letter-spacing: 0.04em; }
.blog-hero .hero-path span { color: var(--brand); }
.blog-hero .hero-path a { color: var(--brand); text-decoration: none; }
.blog-hero .hero-path a:hover { border-bottom: 1px dashed var(--brand); }
.blog-hero-title { font: 700 28px/1.1 var(--font-mono); color: var(--fg-primary); margin: 0; }
.blog-hero-title em { color: var(--brand); font-style: normal; }
.blog-hero-desc { font: 400 13px/1.6 var(--font-mono); color: var(--fg-secondary); max-width: 720px; }

/* ── Terminal box (shared shell for index grid + post) ── */
.blog-box {
  position: relative;
  border: 1px dashed var(--brand);
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
}
.blog-titlebar {
  height: 28px; min-height: 28px;
  border-bottom: 1px solid var(--brand);
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px; flex-shrink: 0;
}
.blog-titlebar-label { font: 400 12px/1 var(--font-mono); color: var(--slate-500); flex: 1; }
.blog-back {
  font: 400 11px/1 var(--font-mono); color: var(--fg-muted);
  text-decoration: none; display: flex; align-items: center; gap: 4px;
  transition: color 60ms steps(1);
}
.blog-back:hover { color: var(--brand); }

/* ── Index: card grid ── */
.blog-grid-body { padding: 20px 24px 32px; }
.blog-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

.bcard {
  border: 1px solid var(--bg-chip); background: var(--bg-elevated);
  display: flex; flex-direction: column; position: relative;
  text-decoration: none;
  transition: border-color 100ms steps(2), background 100ms steps(2);
}
.bcard:hover { border-color: var(--slate-600); background: #120f11; }
.bcard-cover { display: block; border-bottom: 1px solid var(--bg-chip); }
.bcard-cover img { display: block; width: 100%; height: 160px; object-fit: cover; }
.bcard-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bcard-title { font: 700 14px/1.35 var(--font-mono); color: var(--fg-primary); letter-spacing: 0.02em; margin: 0; }
.bcard-desc { font: 400 12px/1.55 var(--font-mono); color: var(--fg-muted); flex: 1; }
.bcard-foot {
  border-top: 1px dashed rgba(244,128,93,0.2); padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 400 10px/1 var(--font-mono); color: var(--fg-muted); letter-spacing: 0.04em;
}
.bcard-foot .bcard-author { color: var(--fg-secondary); }

/* featured (latest) — full width, cover left / body right */
.bcard-featured {
  flex-direction: row;
  margin-bottom: 14px;
  border-color: var(--orange-ash);
}
.bcard-featured:hover { border-color: var(--brand); }
.bcard-featured-cover { flex: 0 0 46%; max-width: 46%; border-right: 1px solid var(--bg-chip); overflow: hidden; }
.bcard-featured-cover img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.bcard-featured-body { flex: 1; min-width: 0; padding: 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.bcard-kicker { font: 400 10px/1 var(--font-mono); color: var(--brand); letter-spacing: 0.06em; }
.bcard-featured-title { font: 700 22px/1.25 var(--font-mono); color: var(--fg-primary); margin: 0; }
.bcard-featured-desc { font: 400 13px/1.65 var(--font-mono); color: var(--fg-muted); flex: 1; }
.bcard-featured-foot { border-top: 1px dashed rgba(244,128,93,0.2); padding: 14px 0 0; margin-top: 4px; }

.blog-empty { font: 400 13px/1.6 var(--font-mono); color: var(--fg-muted); padding: 8px 0; }

/* ── Pager ── */
.blog-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.blog-pager-link {
  font: 400 12px/1 var(--font-mono); color: var(--fg-secondary);
  text-decoration: none; border: 1px dashed var(--orange-ash); padding: 8px 14px;
  transition: color 60ms steps(1), border-color 60ms steps(1);
}
.blog-pager-link:hover { color: var(--brand); border-color: var(--brand); }
.blog-pager-link.is-disabled { color: var(--slate-600); border-color: var(--slate-600); pointer-events: none; }
.blog-pager-count { font: 400 11px/1 var(--font-mono); color: var(--fg-muted); letter-spacing: 0.04em; }

/* ── Post ── */
.blog-post { max-width: 860px; margin: 0 auto; width: 100%; }
.blog-post .blog-box .cm { position: absolute; width: 8px; height: 8px; border: 2px solid var(--brand); pointer-events: none; }
.blog-post .blog-box .cm.tl { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.blog-post .blog-box .cm.tr { top:-1px; right:-1px; border-left:0; border-bottom:0; }
.blog-post .blog-box .cm.bl { bottom:-1px; left:-1px; border-right:0; border-top:0; }
.blog-post .blog-box .cm.br { bottom:-1px; right:-1px; border-left:0; border-top:0; }

.blog-post-inner { padding: 28px 36px 44px; }
.blog-post-path { font: 400 10px/1 var(--font-mono); color: var(--fg-muted); letter-spacing: 0.04em; margin-bottom: 14px; }
.blog-post-path span { color: var(--brand); }
.blog-post-path a { color: var(--brand); text-decoration: none; }
.blog-post-path a:hover { border-bottom: 1px dashed var(--brand); }
.blog-post-title { font: 700 26px/1.2 var(--font-mono); color: var(--fg-primary); margin: 0 0 12px; }
.blog-post-meta { font: 400 11px/1 var(--font-mono); color: var(--fg-muted); display: flex; gap: 14px; letter-spacing: 0.04em; padding-bottom: 22px; border-bottom: 1px dashed rgba(244,128,93,0.2); }
.blog-post-meta .bpm-author { color: var(--fg-secondary); }
.blog-post-cover { width: 100%; height: auto; border: 1px solid var(--bg-chip); margin: 24px 0; display: block; }

/* rendered richtext body */
.blog-prose { font: 400 14px/1.75 var(--font-mono); color: var(--fg-secondary); margin-top: 24px; }
.blog-prose > *:first-child { margin-top: 0; }
.blog-prose h2 { font: 700 20px/1.3 var(--font-mono); color: var(--fg-primary); margin: 34px 0 12px; }
.blog-prose h3 { font: 700 16px/1.35 var(--font-mono); color: var(--fg-primary); margin: 26px 0 10px; }
.blog-prose p { margin: 0 0 18px; }
.blog-prose a { color: var(--brand); text-decoration: none; }
.blog-prose a:hover { color: var(--orange-tint); border-bottom: 1px dashed var(--brand); }
/* Tailwind's preflight resets ul/ol to list-style:none — restore markers here. */
.blog-prose ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.blog-prose ol { margin: 0 0 18px; padding-left: 22px; list-style: decimal; }
.blog-prose li { margin: 0 0 8px; }
.blog-prose li::marker { color: var(--brand); }
.blog-prose li > p { margin: 0; }
.blog-prose img { max-width: 100%; height: auto; border: 1px solid var(--bg-chip); }
.blog-prose blockquote { margin: 0 0 18px; padding: 6px 18px; border-left: 3px solid var(--brand); color: var(--fg-muted); }
.blog-prose blockquote p:last-of-type { margin-bottom: 0; }
.blog-prose code { font-family: var(--font-mono); color: var(--success); background: var(--bg-terminal); padding: 1px 5px; }
.blog-prose pre { background: var(--bg-terminal); border: 1px solid var(--orange-ash); padding: 16px; overflow-x: auto; font-size: 13px; margin: 0 0 18px; }
.blog-prose pre code { background: none; padding: 0; color: var(--fg-secondary); }

@media (max-width: 640px) {
  .blog-page { padding: 20px 16px 40px; }
  .blog-card-grid { grid-template-columns: 1fr; }
  .bcard-featured { flex-direction: column; }
  .bcard-featured-cover { flex: none; max-width: 100%; border-right: none; border-bottom: 1px solid var(--bg-chip); }
  .bcard-featured-cover img { min-height: 180px; }
  .bcard-featured-body { padding: 22px 20px; }
  .blog-post-inner { padding: 22px 20px 36px; }
  .blog-hero-title { font-size: 22px; }
}