/* The blog. Loaded only on /blog pages, after app.css, and built entirely on
   the site's own tokens — colours, radii, spacing — so it reads as the same
   site. The publisher sends structure; every visual choice is made here.

   Class names are prefixed bc-blog- so nothing here can restyle the store. */

.bc-blog, .bc-blog-article { margin: 0 auto; padding: var(--s-4) 0 var(--s-7); }
.bc-blog-article { max-width: 46rem; }

/* ---- shared ---------------------------------------------------------- */
.bc-blog-head h1, .bc-blog-article-head h1 {
  font-size: var(--type-h1); line-height: 1.15; letter-spacing: var(--tracking-tight);
  color: var(--bc-blue-ink); margin: 0 0 var(--s-3);
}
.bc-blog-lede { font-size: 1.15rem; line-height: 1.5; color: var(--bc-mute); margin: 0 0 var(--s-3); max-width: 60ch; }
.bc-blog-meta { color: var(--bc-mute); font-size: var(--type-sm); margin: 0; }
.bc-blog .bc-eyebrow a, .bc-blog-crumbs a { color: var(--bc-blue); text-decoration: none; }
.bc-blog .bc-eyebrow a:hover, .bc-blog-crumbs a:hover { text-decoration: underline; }

/* ---- index and category pages --------------------------------------- */
.bc-blog-head { margin-bottom: var(--s-5); }
.bc-blog-cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-6); }
.bc-blog-cats a {
  padding: 0.35rem 0.85rem; border: 1px solid var(--bc-border); border-radius: var(--r-pill);
  color: var(--bc-ink); text-decoration: none; font-size: var(--type-sm); font-weight: 500;
}
.bc-blog-cats a:hover { border-color: var(--bc-blue); color: var(--bc-blue); }
.bc-blog-cats a[aria-current="page"] { background: var(--bc-blue); border-color: var(--bc-blue); color: #fff; }

.bc-blog-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.bc-blog-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
}
/* 16:9, filled. The template endpoint tells the publisher the same thing:
   a card and a hero may crop the edges, so the subject belongs in the middle. */
.bc-blog-card-img { display: block; aspect-ratio: 16 / 9; background: var(--surface-muted); }
.bc-blog-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bc-blog-card-body { padding: var(--s-4) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.bc-blog-card-body .bc-eyebrow { margin: 0; }
.bc-blog-card-title { font-size: 1.2rem; line-height: 1.3; margin: 0; }
.bc-blog-card-title a { color: var(--bc-blue-ink); text-decoration: none; }
.bc-blog-card-title a:hover { text-decoration: underline; }
.bc-blog-card-excerpt { margin: 0; color: var(--bc-ink); line-height: 1.5; }

/* ---- the article ----------------------------------------------------- */
.bc-blog-crumbs { font-size: var(--type-sm); margin: 0 0 var(--s-3); color: var(--bc-mute); }
.bc-blog-article-head { margin-bottom: var(--s-5); }

.bc-blog-hero { margin: 0 0 var(--s-6); }
.bc-blog-hero img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-card); background: var(--surface-muted);
}
.bc-blog-hero figcaption, .bc-blog-figure figcaption {
  margin-top: var(--s-2); color: var(--bc-mute); font-size: var(--type-sm); line-height: 1.45;
}

.bc-blog-body { font-size: 1.0625rem; line-height: 1.7; color: var(--bc-ink); overflow-wrap: break-word; }
.bc-blog-body > :first-child { margin-top: 0; }
.bc-blog-body h2 { font-size: var(--type-h2); line-height: 1.25; color: var(--bc-blue-ink); margin: var(--s-7) 0 var(--s-3); }
.bc-blog-body h3 { font-size: 1.2rem; line-height: 1.3; color: var(--bc-blue-ink); margin: var(--s-6) 0 var(--s-2); }
.bc-blog-body h4, .bc-blog-body h5, .bc-blog-body h6 { font-size: 1.05rem; margin: var(--s-5) 0 var(--s-2); }
.bc-blog-body p, .bc-blog-body ul, .bc-blog-body ol { margin: 0 0 var(--s-4); }
.bc-blog-body ul, .bc-blog-body ol { padding-left: 1.4rem; }
.bc-blog-body li { margin-bottom: var(--s-1); }
.bc-blog-body li > p { margin-bottom: var(--s-2); }
.bc-blog-body a, .bc-blog-sources a { color: var(--bc-blue); text-decoration: underline; text-underline-offset: 2px; }
.bc-blog-body a:hover, .bc-blog-sources a:hover { color: var(--bc-blue-600); }
.bc-blog-body img { max-width: 100%; height: auto; border-radius: var(--r-btn); }
.bc-blog-figure { margin: var(--s-6) 0; }
.bc-blog-figure img { display: block; margin: 0 auto; }
.bc-blog-body blockquote {
  margin: var(--s-5) 0; padding: var(--s-1) 0 var(--s-1) var(--s-4);
  border-left: 4px solid var(--bc-neutral-200); color: var(--bc-mute);
}
.bc-blog-body blockquote > :last-child { margin-bottom: 0; }
.bc-blog-body hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-6) 0; }
.bc-blog-body code { background: var(--bc-neutral-100); padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.9em; }
.bc-blog-body pre {
  background: var(--bc-neutral-100); border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: var(--s-4); overflow-x: auto; margin: 0 0 var(--s-4); line-height: 1.5;
}
.bc-blog-body pre code { background: none; padding: 0; font-size: 0.875rem; }

/* A wide table scrolls inside the column rather than widening the page. */
.bc-blog-table { overflow-x: auto; margin: 0 0 var(--s-5); }
.bc-blog-table table { border-collapse: collapse; width: 100%; font-size: 0.975rem; }
.bc-blog-table th, .bc-blog-table td { border: 1px solid var(--border); padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; }
.bc-blog-table th { background: var(--bc-neutral-100); color: var(--bc-blue-ink); font-weight: 600; }
.bc-blog-table .bc-al-left { text-align: left; }
.bc-blog-table .bc-al-center { text-align: center; }
.bc-blog-table .bc-al-right { text-align: right; }

/* The site header is sticky. Without this, following a citation or an
   in-page link lands with its target hidden underneath the header. */
.bc-blog-body [id], .bc-blog-sources-list li { scroll-margin-top: 9.5rem; }

.bc-blog-cite { line-height: 0; font-size: 0.75em; }
.bc-blog-cite a { text-decoration: none; padding: 0 0.1em; }

.bc-blog-sources { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.bc-blog-sources h2 { font-size: var(--type-h3); color: var(--bc-blue-ink); margin: 0 0 var(--s-3); }
.bc-blog-sources-list { margin: 0; padding-left: 1.4rem; font-size: 0.95rem; line-height: 1.6; color: var(--bc-ink); overflow-wrap: anywhere; }
.bc-blog-sources-list li { margin-bottom: var(--s-2); }
.bc-blog-sources-list p { margin: 0 0 var(--s-1); }
.bc-blog-sources-list li:target { background: var(--bc-primary-tint); }
.bc-blog-cite-back { text-decoration: none; }

.bc-blog-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 0; padding: 0; }
.bc-blog-tags li {
  padding: 0.2rem 0.7rem; border-radius: var(--r-pill);
  background: var(--bc-neutral-100); color: var(--bc-mute); font-size: var(--type-sm);
}

@media (max-width: 640px) {
  .bc-blog-body { font-size: 1rem; }
  .bc-blog-lede { font-size: 1.05rem; }
}