/* Blog (/blog + /blog/<slug>) — index list + post prose typography.
   Loaded AFTER site.css. Colors use --semantic-*/--base-* tokens so dark mode
   flips free. The prose column is narrower than the marketing container for
   comfortable reading. */

.blog-container { max-width: 46rem; }

/* ── Index list ── */
.blog-list { margin-top: 3rem; display: flex; flex-direction: column; gap: 2.5rem; }
.blog-item { display: flex; flex-direction: column; gap: 0.45rem; }
.blog-item__meta { font-size: 0.85rem; color: var(--semantic-text-text-tertiary); }
.blog-item__title { margin: 0; font-size: 1.45rem; line-height: 1.3; }
.blog-item__title a { color: var(--semantic-text-text-primary); text-decoration: none; }
.blog-item__title a:hover { color: var(--semantic-text-text-brand); }
.blog-item__desc { margin: 0; color: var(--semantic-text-text-secondary); line-height: 1.6; }
.blog-empty { margin-top: 3rem; color: var(--semantic-text-text-tertiary); }

/* ── Post header ── */
.blog-post__head { margin-bottom: 2.25rem; }
.blog-post__title { margin: 0 0 0.9rem; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.2; letter-spacing: -0.02em; }
.blog-post__byline { margin: 0; font-size: 0.9rem; color: var(--semantic-text-text-tertiary); }

/* ── Prose (rendered markdown) ── */
.blog-prose { font-size: 1.05rem; line-height: 1.75; color: var(--semantic-text-text-primary); }
.blog-prose > * + * { margin-top: 1.1rem; }
.blog-prose h2 { margin: 2.4rem 0 0.9rem; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; }
.blog-prose h3 { margin: 1.9rem 0 0.7rem; font-size: 1.2rem; line-height: 1.35; }
.blog-prose p { margin: 0 0 1.1rem; }
.blog-prose a { color: var(--semantic-text-text-brand); text-decoration: underline; text-underline-offset: 0.15em; }
.blog-prose a:hover { color: var(--base-primary-primary-700); }
.blog-prose ul, .blog-prose ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.blog-prose li { margin-bottom: 0.4rem; }
.blog-prose li > ul, .blog-prose li > ol { margin-top: 0.4rem; margin-bottom: 0; }
.blog-prose blockquote {
  margin: 1.4rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--base-primary-primary-300);
  color: var(--semantic-text-text-secondary);
}
.blog-prose hr { margin: 2.25rem 0; border: 0; border-top: 1px solid var(--semantic-border-border-default); }
.blog-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  background: var(--semantic-background-bg-surface-hover);
  border: 1px solid var(--semantic-border-border-subtle);
  border-radius: 0.3rem; padding: 0.1rem 0.35rem;
}
.blog-prose pre {
  margin: 1.4rem 0; padding: 1rem 1.2rem; overflow-x: auto;
  background: var(--semantic-background-bg-surface);
  border: 1px solid var(--semantic-border-border-default);
  border-radius: var(--pub-radius-sm); line-height: 1.55;
}
.blog-prose pre code { background: none; border: 0; padding: 0; font-size: 0.88rem; }
.blog-prose table { width: 100%; margin: 1.4rem 0; border-collapse: collapse; font-size: 0.95rem; }
.blog-prose th, .blog-prose td { padding: 0.55rem 0.75rem; border: 1px solid var(--semantic-border-border-default); text-align: left; }
.blog-prose th { background: var(--semantic-background-bg-surface); font-weight: 600; }
.blog-prose img { max-width: 100%; height: auto; border-radius: var(--pub-radius-sm); }

/* ── "Where this applies" (upward cluster links) ── */
.blog-solutions { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--semantic-border-border-default); }
.blog-solutions__grid { margin-top: 1rem; display: grid; gap: 1.25rem; }
.blog-solutions__grid .pub-card { display: block; }
.blog-solutions__eyebrow { display: block; margin-bottom: 0.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--semantic-text-text-brand); }

.blog-post__backlink { margin-top: 2.5rem; }