/* ============================================================
   Blog Callout (h2g/blog-callout) — citaat/inzicht/tip met
   gekleurde linkerbalk. Leeft in de post-body (donkere blog-bg).
   ============================================================ */

.blog-callout {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin: 36px 0;
}

/* Gekleurde linkerbalk — kleur per type */
.blog-callout-bar {
  flex: 0 0 3px;
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);   /* citaat: neutraal/wit */
}
.blog-callout--inzicht .blog-callout-bar { background: var(--teal-500); }
.blog-callout--tip     .blog-callout-bar { background: var(--gold-500); }

.blog-callout-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-callout-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-300);
}
.blog-callout--tip .blog-callout-label { color: var(--gold-300); }

.blog-callout-text {
  font-size: 21px;
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
  color: var(--n-0);
  margin: 0;
}