/* Blog pages (/blog/ and /blog/<slug>/).
   Loaded after site.css and reuses its tokens, so the blog inherits the palette,
   type scale, and background without duplicating them. Only the pieces the React
   app expresses as inline style objects (nav, footer, cards) are restated here,
   because a static page cannot reach into those components. */

.blog-body { position: relative; }
.blog-body > main,
.blog-body > header,
.blog-body > footer { position: relative; z-index: 1; }

/* === Header === */
.blog-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--section-padding-x);
  border-bottom: 1px solid var(--color-border);
  background: rgba(10, 18, 12, 0.85);
  position: sticky;
  top: 0;
  z-index: 200;
}
.blog-nav-brand { display: flex; align-items: center; }
.blog-nav-brand img { display: block; height: 34px; width: auto; }
.blog-nav-links { display: flex; align-items: center; gap: var(--space-5); }
.blog-nav-links a {
  font: 600 13px var(--font-body);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-in-out);
}
.blog-nav-links a:hover { color: var(--color-text-primary); }
.blog-nav-cta {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-light);
  background: var(--color-surface-2);
  color: var(--color-text-primary) !important;
}
.blog-nav-cta:hover { border-color: var(--color-green-bright); }

@media (max-width: 640px) {
  .blog-nav { padding: var(--space-3) var(--space-4); }
  .blog-nav-links { gap: var(--space-3); }
  .blog-nav-links a { font-size: 12px; }
  .blog-nav-cta { padding: 8px 12px; }
}

/* === Shared bits === */
.blog-kicker {
  font: 600 11px/1 var(--font-body);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-circuit);
  margin: 0 0 var(--space-4);
}
.blog-kicker a { color: inherit; text-decoration: none; }
.blog-kicker a:hover { text-decoration: underline; }

.blog-lede {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin: var(--space-4) 0 0;
}
.blog-meta {
  font: 400 var(--text-sm) var(--font-mono);
  color: var(--color-text-tertiary);
  margin: var(--space-5) 0 0;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}
.blog-tags li {
  font: 500 11px var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}

/* === Index === */
.blog-index {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--section-padding-y) var(--section-padding-x);
}
.blog-index-head { margin-bottom: var(--space-10); }
.blog-index-head h1 { font-size: var(--text-display-lg); margin: 0; }

.blog-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.blog-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
  box-shadow: var(--shadow-card-rest);
  transition: border-color var(--duration-base) var(--ease-in-out),
              transform var(--duration-base) var(--ease-out-expo);
}
.blog-card:hover { border-color: var(--color-border-light); transform: translateY(-2px); }
.blog-card a { display: block; padding: var(--space-6); text-decoration: none; }
.blog-card h2 {
  font-size: var(--text-display-md);
  margin: var(--space-3) 0 var(--space-3);
}
.blog-card p { color: var(--color-text-secondary); margin: 0; }
.blog-card-date {
  font: 400 var(--text-sm) var(--font-mono);
  color: var(--color-text-tertiary) !important;
}
.blog-card-more {
  display: inline-block;
  margin-top: var(--space-4);
  font: 600 13px var(--font-body);
  color: var(--color-circuit);
}
.blog-empty { color: var(--color-text-secondary); }

/* === Article === */
.blog-article {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--section-padding-y) var(--section-padding-x);
}
.blog-article h1 { font-size: var(--text-display-lg); margin: 0; }

.blog-prose { margin-top: var(--space-8); }
.blog-prose > * + * { margin-top: var(--space-5); }
.blog-prose p,
.blog-prose li {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}
.blog-prose h2 { font-size: var(--text-display-md); margin-top: var(--space-10); }
.blog-prose h3 { font-size: var(--text-xl); margin-top: var(--space-8); }
.blog-prose h4 { font-size: var(--text-lg); margin-top: var(--space-6); }
.blog-prose strong { color: var(--color-text-primary); font-weight: 700; }
.blog-prose a { color: var(--color-circuit); text-decoration: underline; text-underline-offset: 3px; }
.blog-prose a:hover { color: var(--color-circuit-dim); }
.blog-prose ul, .blog-prose ol { padding-left: var(--space-5); }
.blog-prose li + li { margin-top: var(--space-2); }
.blog-prose blockquote {
  border-left: 2px solid var(--color-green-mid);
  padding-left: var(--space-5);
  margin-left: 0;
}
.blog-prose blockquote p { color: var(--color-text-primary); font-style: italic; }
.blog-prose code {
  font: 400 0.9em var(--font-mono);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--color-circuit);
}
.blog-prose pre {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow-x: auto;
}
.blog-prose pre code { background: none; border: none; padding: 0; color: var(--color-text-primary); }
.blog-prose hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }
.blog-prose figure { margin: 0; }
.blog-prose img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.blog-prose figcaption {
  font: 400 var(--text-sm) var(--font-body);
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
}

/* === Article CTA === */
.blog-cta {
  margin-top: var(--space-12);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
  box-shadow: var(--shadow-green-glow);
}
.blog-cta h2 { font-size: var(--text-display-md); margin: 0 0 var(--space-4); }
.blog-cta p { color: var(--color-text-secondary); margin: 0 0 var(--space-5); }
.blog-btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  background: var(--color-green-mid);
  color: var(--color-text-primary);
  font: 700 14px var(--font-body);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-in-out);
}
.blog-btn:hover { background: var(--color-green-bright); }

/* === Footer === */
.blog-foot {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-1);
  padding: var(--space-10) var(--section-padding-x) var(--space-6);
}
.blog-foot-inner { max-width: var(--container-max); margin: 0 auto; }
.blog-foot p {
  font: 400 13px var(--font-body);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}
.blog-foot-links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4) !important; }
.blog-foot-links a { color: var(--color-text-secondary); text-decoration: none; }
.blog-foot-links a:hover { color: var(--color-text-primary); }
.blog-foot-copy { color: var(--color-text-tertiary) !important; margin-top: var(--space-5) !important; }

@media (prefers-reduced-motion: reduce) {
  .blog-card { transition: none; }
  .blog-card:hover { transform: none; }
}