/* ===================== BLOG DETAIL (bd) ===================== */
/* Banner (dark page-hero) badge + meta */
.bd-hero-badge { background: rgba(255,255,255,.14); color: #fff; }
.bd-h1-mt { margin-top: 1rem; }
.bd-article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center;
  font-size: var(--fs-sm); color: var(--c-ink-400); margin-top: var(--sp-4); }
.bd-article-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.page-hero .bd-article-meta { color: var(--c-on-dark-mute); }

/* Featured image (first element of the article), then full-width body */
.bd-article-hero-img { margin-bottom: var(--sp-7); }
.bd-article-hero-img img { width: 100%; height: auto; border-radius: var(--r-lg); display: block;
  box-shadow: var(--shadow-md); }

.bd-article-body > * + * { margin-top: var(--sp-5); }
.bd-article-body h2 { margin-top: var(--sp-8); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.bd-article-body h3 { margin-top: var(--sp-6); }
.bd-article-body ul { padding-left: 1.25rem; list-style: disc; }
.bd-article-body ul li + li { margin-top: var(--sp-2); }

.bd-mega-h3-mt { margin-top: 1rem; }
.bd-cta-btn-mt { margin-top: 1rem; }
.bd-footer-bar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; width: 100%; }

/* Full-width heading + text on blog details (no measure cap) */
.page-hero h1 { max-width: none; }
.bd-article-body, .bd-article-body p, .bd-article-body ul, .bd-article-body ol,
.bd-article-body .lead, .bd-article-body blockquote { max-width: none; }

/* Single-post (blog details): default container; images capped at 820px centered */
.bd-article-hero-img { max-width: 820px; margin-inline: auto; }
.bd-article-body img { width: 100%; max-width: 820px; height: auto; margin-inline: auto;
  border-radius: var(--r-md); display: block; }