@charset "utf-8";
/* Blog reading surface. Loaded only on blog templates.
   Class taxonomy: `.blog-*` — sibling of `.acc-*` / `.adm-*` / `.stf-*` / `.chk-*`
   (see docs/UI.md). All colour / type / spacing values come from
   `content/static/content/design-tokens.css`. Muted text reuses the existing
   `--brand-charcoal-500` token (no new tokens introduced). */

/* ----- Container / measure ----- */
.blog-shell { background: var(--brand-paper-50); }
.blog-article-wrap { max-width: 760px; margin: 0 auto; padding: 2rem 1rem 3rem; }
@media (min-width: 768px) {
  .blog-article-wrap { padding: 3rem 1.5rem 4rem; }
}

/* ----- Hero ----- */
.blog-article__hero { margin: 0 0 2rem; }
.blog-article__hero-img {
  width: 100%; height: auto; display: block;
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.08);
}
.blog-article__hero-caption {
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--brand-charcoal-500);
  font-style: italic;
  text-align: center;
}

/* ----- Title + meta row ----- */
.blog-article__title {
  font-family: var(--font-display);  /* Lora — brand display face */
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  color: var(--brand-ink-900);
  margin: 0 0 0.75rem;
}
.blog-article__meta {
  display: flex; flex-wrap: wrap; gap: 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--brand-charcoal-500);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--brand-paper-200);
}
.blog-article__meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.blog-article__meta-item i { color: var(--brand-green-700); }
a.blog-article__meta-item { color: var(--brand-charcoal-500); text-decoration: none; }
a.blog-article__meta-item:hover { color: var(--brand-green-700); text-decoration: none; }

/* ----- Prose: applied to the rendered markdown -----
   Source Serif 4 (--font-prose) for the long-form reading column — the
   editorial "reading" serif the brand guidelines sanction for article
   surfaces (NYT-style serif body). Headings stay Lora; UI chrome stays
   Inter. */
.blog-prose {
  font-family: var(--font-prose);
  font-size: 1.1875rem;           /* ~19 px — serif reads a touch larger */
  line-height: 1.75;
  color: var(--brand-ink-900);
}
.blog-prose > * + * { margin-top: 1.25em; }
.blog-prose h2,
.blog-prose h3,
.blog-prose h4 {
  font-family: var(--font-display);  /* Lora — in-article subheadings */
  color: var(--brand-ink-900);
  line-height: 1.3;
  margin-top: 2em; margin-bottom: 0.5em;
}
.blog-prose h2 { font-size: 1.625rem; font-weight: 600; }
.blog-prose h3 { font-size: 1.3125rem; font-weight: 600; }
.blog-prose h4 { font-size: 1.125rem; font-weight: 600; }
.blog-prose p { margin: 0 0 1.25em; }
.blog-prose a { color: var(--brand-green-700); text-decoration: underline; text-underline-offset: 2px; }
.blog-prose a:hover { color: var(--brand-green-500); }
.blog-prose strong { font-weight: 700; }
.blog-prose em { font-style: italic; }
/* Lists match the body copy. The global `p { font-family: var(--font-sans) }`
   in style.css forces blog paragraphs to Inter; without this, ul/ol would
   inherit the .blog-prose container's --font-prose (Source Serif 4) and render
   in a different face than the surrounding paragraphs. */
.blog-prose ul, .blog-prose ol { padding-left: 1.5rem; margin: 0 0 1.25em; font-family: var(--font-body); }
.blog-prose li + li { margin-top: 0.35em; }
.blog-prose blockquote {
  margin: 1.5em 0; padding: 0.75em 1.25em;
  border-left: 3px solid var(--brand-green-700);
  background: var(--brand-paper-50);
  font-style: italic;
  color: var(--brand-ink-900);
}
.blog-prose blockquote > :last-child { margin-bottom: 0; }
.blog-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9375em;
  background: var(--brand-paper-200);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.blog-prose pre {
  background: #1f2933;        /* deep slate for code-block readability */
  color: #e5e7eb;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 1.5em 0;
}
.blog-prose pre code { background: none; padding: 0; color: inherit; }

/* ----- Code block chrome (codeBlocks.js wraps each <pre> in .code-block) -----
   A developer-docs-style header bar (filename/language + Copy) sits flush atop
   the dark code panel. The bar + pre share one rounded, clipped container. */
.blog-prose .code-block {
  margin: 1.5em 0;
  border-radius: 6px;
  overflow: hidden;
  background: #1f2933;
}
.blog-prose .code-block pre {
  margin: 0;
  border-radius: 0;
}
.code-block__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  background: #161d24;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-sans);
  font-size: 0.75rem;
}
.code-block__label {
  color: #cbd5e1;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.code-block__label--title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #e5e7eb;
}
.code-block__spacer { flex: 1 1 auto; }
.code-block__lang {
  color: #8c9aa6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
}
.code-block__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  background: transparent;
  color: #cbd5e1;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.code-block__copy:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
}
.code-block__copy--done {
  color: var(--brand-green-300, #8fd6a6);
  border-color: var(--brand-green-300, #8fd6a6);
}
@media (max-width: 480px) {
  .code-block__copy-text { display: none; }
}
.blog-prose img {
  max-width: 100%; height: auto;
  border-radius: 4px;
  display: block;
  margin: 1.5em auto;
}
.blog-prose figure { margin: 1.5em 0; text-align: center; }
.blog-prose figure img { margin: 0 auto; }
.blog-prose figure figcaption {
  margin-top: 0.5em;
  font-size: 0.875rem;
  color: var(--brand-charcoal-500);
  font-style: italic;
}
.blog-prose hr {
  border: 0; border-top: 1px solid var(--brand-paper-200);
  margin: 2.5em 0;
}
.blog-prose table {
  width: 100%; border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9375rem;
}
.blog-prose th, .blog-prose td {
  padding: 0.6em 0.85em;
  border-bottom: 1px solid var(--brand-paper-200);
  text-align: left;
}
.blog-prose th { font-family: var(--font-sans); font-weight: 700; }

/* ----- Footer: tags + share strip (no share yet, just tags) ----- */
.blog-article__footer {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--brand-paper-200);
}
.blog-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.blog-tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: var(--brand-paper-50);
  border: 1px solid var(--brand-paper-200);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--brand-ink-900);
  text-decoration: none;
}
.blog-tag:hover { background: var(--brand-paper-200); }

/* ----- Author bio (small, just byline; full bio Phase 4) ----- */
.blog-author { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.blog-author__name { font-family: var(--font-sans); font-weight: 600; color: var(--brand-ink-900); }

/* ----- Related strip ----- */
.blog-related {
  background: #fff; border-top: 1px solid var(--brand-paper-200);
  padding: 3rem 1rem;
}
.blog-related__wrap { max-width: 1080px; margin: 0 auto; }
.blog-related__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.25rem; color: var(--brand-ink-900);
  text-align: center; margin: 0 0 1.5rem;
}
.blog-related__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .blog-related__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Card (also used on home + category list) ----- */
.blog-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: 6px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.07);
  color: inherit; text-decoration: none;
}
.blog-card__media {
  aspect-ratio: 16 / 9;
  background: var(--brand-paper-200);
  overflow: hidden;
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: 1rem 1.1rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
/* Text-only cards (no cover image) get a bit more vertical breathing room so they
 * don't look truncated next to image cards in the grid. */
.blog-card--no-image .blog-card__body { padding: 1.5rem 1.25rem 1.5rem; }
.blog-card__category {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-green-700);
  margin: 0 0 0.4rem;
}
.blog-card__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.0625rem; line-height: 1.35; color: var(--brand-ink-900);
  margin: 0 0 0.5rem;
}
.blog-card__excerpt {
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.55;
  color: var(--brand-ink-900); margin: 0 0 0.75rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__meta {
  margin-top: auto;
  font-family: var(--font-body); font-size: 0.8125rem;
  color: var(--brand-charcoal-500);
  display: flex; gap: 1rem;
}

/* ----- List page header + nav strip ----- */
.blog-list-wrap { max-width: 1080px; margin: 0 auto; padding: 2rem 1rem 3rem; }
/* Adaptive category carousel: a single row that centres when the chips fit and
   becomes a horizontal scroll carousel when there are too many (now data-driven,
   so the count is unbounded). `safe center` centres when there's room but falls
   back to flex-start on overflow so the first chip is never clipped/unreachable.
   Scrollbar hidden — scroll-snap + the always-visible row read as a carousel. */
.blog-nav {
  display: flex; flex-wrap: nowrap; gap: 0.5rem; justify-content: safe center;
  padding: 0 0 0.25rem; margin: 0 0 2rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
}
.blog-nav::-webkit-scrollbar { display: none; }
.blog-nav > li { flex: 0 0 auto; }
.blog-nav__chip {
  display: inline-block; padding: 0.4rem 0.85rem;
  background: #fff; border: 1px solid var(--brand-paper-200);
  border-radius: 999px; white-space: nowrap; scroll-snap-align: start;
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500;
  color: var(--brand-ink-900); text-decoration: none;
}
.blog-nav__chip:hover { background: var(--brand-paper-50); color: var(--brand-ink-900); text-decoration: none; }
.blog-nav__chip--active { background: var(--brand-green-700); border-color: var(--brand-green-700); color: #fff; }
.blog-nav__chip--active:hover { background: var(--brand-green-500); color: #fff; }

.blog-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* Empty state (KB1 — polished, branded) */
.blog-empty {
  max-width: 34rem;
  margin: 1.5rem auto 2rem;
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--brand-paper-50);
  border: 1px dashed var(--brand-paper-200);
  border-radius: var(--radius-lg, 20px);
  font-family: var(--font-body);
}
.blog-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--brand-green-100);
  color: var(--brand-green-700);
  font-size: 1.375rem;
}
.blog-empty__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--brand-ink-900);
}
.blog-empty__text {
  margin: 0 auto;
  max-width: 28rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--brand-charcoal-500);
}

/* ----- Search (Phase 4) ----- */
.blog-search {
  max-width: 480px; margin: 0 auto 1.5rem;
  display: flex;            /* input + button are one joined control — no gap */
}
.blog-search__input {
  flex: 1;
  border: 1px solid var(--brand-paper-200);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  background: #fff;
}
.blog-search__input:focus {
  outline: 2px solid var(--brand-green-500);
  outline-offset: 1px;
  position: relative;
  z-index: 1;
}
.blog-search__submit {
  background: var(--brand-green-700); color: #fff;
  border: 0; border-radius: 0 4px 4px 0;
  padding: 0 1.1rem;
  cursor: pointer;
}
.blog-search__submit:hover { background: var(--brand-green-500); }
.blog-search__status {
  text-align: center;
  margin: -0.5rem 0 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--brand-charcoal-500);
}
.blog-search__status a { color: var(--brand-green-700); text-decoration: underline; }
.blog-search__status a:hover { color: var(--brand-green-500); }

/* ----- Tag archive header (Phase 4) ----- */
.blog-tag-header {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--brand-ink-900);
  text-align: center;
  margin: 0 0 1.5rem;
}

/* ----- Tag archive breadcrumb chip (UX-S-03) -----
   Replaces the category-pill row on tag pages — the pill row would render
   "All" as active even though the visitor is filtered to a single tag,
   which reads as a broken nav state. */
.blog-tag-breadcrumb {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  justify-content: center;
  margin: 0 0 2rem;
}
.blog-tag-breadcrumb__current {
  display: inline-block; padding: 0.4rem 0.85rem;
  background: var(--brand-green-700, #336b3a); color: #fff;
  border-radius: 999px;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 0.875rem;
}

/* ----- Draft preview banner (Phase 4) -----
   Hardcoded amber palette — one-off surface, doesn't justify minting new
   brand tokens. */
.blog-preview-banner {
  background: #fff4d6; color: #6b5400;
  border: 1px solid #e0c66f;
  padding: 0.7rem 1rem;
  font-family: var(--font-body); font-size: 0.875rem;
  text-align: center;
  margin: 1rem auto; max-width: 760px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem;
}
.blog-preview-banner i { color: #6b5400; }

/* ----- Author bio block (Phase 4) ----- */
.blog-author-bio {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--brand-paper-50);
  border: 1px solid var(--brand-paper-200);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
}
/* Transparent layout wrapper only — the inner {% avatar %} (.bpr-avatar) is the
   circle. Styling this wrapper as a circle too produced a double-circle: a
   green ring around the avatar. Size comes from .bpr-avatar--lg (3rem). */
.blog-author-bio__avatar {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.blog-author-bio__body { flex: 1; }
.blog-author-bio__name {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 1.0625rem; color: var(--brand-ink-900);
  margin: 0 0 0.25rem;
}
.blog-author-bio__text {
  font-family: var(--font-body); font-size: 0.9375rem;
  line-height: 1.55; color: var(--brand-ink-900);
  margin: 0;
}
.blog-author-bio__contact {
  font-family: var(--font-body); font-size: 0.875rem;
  margin: 0.35rem 0 0;
}
.blog-author-bio__contact a { color: var(--brand-green-700); text-decoration: underline; }
.blog-author-bio__contact a:hover { color: var(--brand-green-500); }

/* ----- KB internal badge (FN9) ----- */
.blog-kb-notice {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff4d6; color: #6b5400;
  border: 1px solid #e0c66f;
  border-radius: 4px;
  padding: 0.45rem 0.85rem;
  font-family: var(--font-body); font-size: 0.8125rem;
  margin: 0 0 1.25rem;
}
.blog-kb-notice i { color: #6b5400; }

/* ----- "On this page" TOC (UI10) — clean docs-style margin nav -----
   No card box. A continuous hairline rule runs down the left (formed by each
   link's left border); the active section is marked by a green segment of that
   rule + green text. Sticky BELOW the meganav (top:5.5rem clears the ~66px nav;
   the old 1.5rem tucked it under the bar). */
.blog-toc {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  width: 100%;
  max-width: 15rem;          /* cap so long headings wrap inside the gutter */
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}
.blog-toc__title {
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-charcoal-500);
  margin: 0 0 0.75rem;
  padding-left: 0.9rem;        /* line up with the link text (past the rule) */
}
.blog-toc__list {
  list-style: none;
  margin: 0; padding: 0;
}
.blog-toc__item { margin: 0; }
.blog-toc__link {
  display: block;
  padding: 0.32rem 0 0.32rem 0.9rem;
  border-left: 2px solid var(--brand-paper-200);  /* stacks into one continuous rule */
  color: var(--brand-charcoal-700);
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease;
}
.blog-toc__link:hover { color: var(--brand-ink-900); }
.blog-toc__link--active {
  color: var(--brand-green-700);
  border-left-color: var(--brand-green-700);
  font-weight: 600;
}
.blog-toc__item--h3 .blog-toc__link {
  padding-left: 1.9rem;        /* deeper text indent; rule stays at the left edge */
  font-size: 0.78rem;
  color: var(--brand-charcoal-500);
}
.blog-toc__item--h3 .blog-toc__link:hover { color: var(--brand-charcoal-700); }
.blog-toc__item--h3 .blog-toc__link--active { color: var(--brand-green-700); }

/* ----- Breadcrumb (UI10) ----- */
.blog-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  font-family: var(--font-body); font-size: 0.875rem;
  color: var(--brand-charcoal-500);
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1.25rem 0;
}
.blog-breadcrumb__link {
  color: var(--brand-green-700);
  text-decoration: none;
}
.blog-breadcrumb__link:hover { color: var(--brand-green-500); text-decoration: underline; }
.blog-breadcrumb__sep { color: var(--brand-paper-200); }
.blog-breadcrumb__current { color: var(--brand-charcoal-500); }

/* ----- Pagination ----- */
.blog-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 1rem; margin-top: 2.5rem;
}
.blog-pagination__link {
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600;
  text-decoration: none; color: var(--brand-green-700);
  border: 1px solid var(--brand-paper-200);
  background: #fff;
  border-radius: 4px;
  padding: 0.45rem 0.9rem;
}
.blog-pagination__link:hover { background: var(--brand-paper-50); color: var(--brand-green-500); text-decoration: none; }
.blog-pagination__status { font-family: var(--font-body); color: var(--brand-charcoal-500); font-size: 0.875rem; }