/* ===== Blog Detail Page ===== */

/* Breadcrumb bar (sticky below header) */
.bd-breadcrumb-bar {
  position: sticky; top: 3.75rem; z-index: 40;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.bd-breadcrumb-inner {
  max-width: 72rem; margin: 0 auto; padding: 0.5rem 1.5rem;
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; color: var(--muted-fg);
}
.bd-breadcrumb-inner a {
  color: var(--muted-fg); transition: color 0.15s;
}
.bd-breadcrumb-inner a:hover { color: var(--primary); }
.bd-breadcrumb-inner span { color: var(--fg); font-weight: 500; }

/* Main */
.bd-main {
  max-width: 72rem; margin: 0 auto;
  padding: 6.25rem 1.5rem 4rem;
}

/* Article header */
.bd-article-header {
  max-width: 48rem;
  margin-bottom: 2.5rem;
}
.bd-cat {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--primary);
  margin-bottom: 0.5rem; display: inline-block;
}
.bd-title {
  font-size: 1.75rem; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.3;
  margin-bottom: 0.75rem;
}
@media (min-width: 640px) { .bd-title { font-size: 2.25rem; } }
.bd-meta {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--muted-fg);
}
.bd-sep { color: var(--border); }

/* Two-column layout */
.bd-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 960px) {
  .bd-layout {
    grid-template-columns: 1fr 16rem;
  }
}

/* Article body */
.bd-body {
  max-width: 48rem;
}
.bd-body section { margin-bottom: 2rem; }
.bd-body h2 {
  font-size: 1.25rem; font-weight: 700;
  margin-bottom: 0.75rem; letter-spacing: -0.01em;
  padding-top: 0.5rem;
}
.bd-body p {
  font-size: 0.9375rem; line-height: 1.75;
  color: var(--fg); margin-bottom: 0.875rem;
}

/* Callout */
.bd-callout {
  background: hsla(174, 30%, 96%, 1);
  border-left: 3px solid var(--primary);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.875rem; line-height: 1.6;
  margin: 1.25rem 0;
  color: var(--fg);
}

/* Sidebar */
.bd-sidebar { }
.bd-sidebar-sticky {
  position: sticky; top: 7rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}

/* TOC card */
.bd-toc-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.125rem;
}
.bd-toc-title {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted-fg);
  margin-bottom: 0.75rem;
}
.bd-toc-list {
  list-style: none; display: flex; flex-direction: column; gap: 0.125rem;
}
.bd-toc-link {
  display: block; padding: 0.375rem 0.625rem;
  font-size: 0.8125rem; color: var(--muted-fg);
  border-radius: 0.375rem; transition: all 0.15s;
  border-left: 2px solid transparent;
}
.bd-toc-link:hover { color: var(--fg); background: var(--muted); }
.bd-toc-link.active {
  color: var(--primary); font-weight: 500;
  background: var(--secondary);
  border-left-color: var(--primary);
}

/* CTA card */
.bd-cta-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.125rem;
}
.bd-cta-heading {
  font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem;
}
.bd-cta-text {
  font-size: 0.75rem; color: var(--muted-fg); line-height: 1.55;
  margin-bottom: 0.75rem;
}
.bd-cta-btn {
  display: inline-block; padding: 0.5rem 1rem;
  background: var(--primary); color: var(--primary-fg);
  border-radius: 0.5rem; font-size: 0.75rem; font-weight: 500;
  transition: opacity 0.15s;
}
.bd-cta-btn:hover { opacity: 0.9; }

/* ===== Ad slots ===== */
.bd-ad-inline, .bd-ad-sidebar {
  background: var(--card); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 1.25rem;
  text-align: center; position: relative;
  margin-top: 1rem;
}
.bd-ad-label {
  position: absolute; top: 0.5rem; left: 0.75rem;
  font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted-fg); opacity: 0.7;
}
.bd-ad-placeholder {
  font-size: 0.8125rem; color: var(--muted-fg); padding: 1rem 0;
}

.bd-ad-inline { margin-top: 2rem; }

/* ===== Mobile sidebar collapses below body ===== */
@media (max-width: 959px) {
  .bd-sidebar-sticky { position: static; }
}