/* =========================================================
   Blog pipeline — shared components
   Used by every blog page regardless of layout: the post page
   (post-layout.html) and every index layout (blog-index-*.html).
   ========================================================= */

/* Lighter, more editorial weight for every heading in the blog pipeline
   (index hero, card titles, post title, richtext subheadings), plus
   breathing room above each one — e.g. between a card's pill row and
   its title. Scoped here rather than style.css's base h1/h2/h3 rule,
   which is also loaded by the site vitrine (landing/local/legal) —
   there it would land on the hero "kicker" (an h2 right above the H1)
   and site section titles too, not just blog cards. */
h1,
h2,
h3 {
  font-weight: 400;
  padding-top: 20px;
}

.postBadge,
.postCardBadge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-soft);
}

.postCategory,
.postCardCategory {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--border);
  color: var(--subtitle-color);
  font-size: var(--text-xs);
  font-weight: 600;
}
.postCardCategory {
  margin-left: var(--space-2xs);
}

.metaIcon {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 4px;
}
.metaIcon svg {
  width: 14px;
  height: 14px;
}