/* /insights/{slug} - article template. shared.css carries the chrome. */

.article { background: var(--color-surface-default); }
.article__head {
  background:
    radial-gradient(110% 80% at 92% 4%, color-mix(in srgb, var(--color-accent-primary) 12%, transparent) 0%, transparent 58%),
    var(--color-surface-subtle);
  border-bottom: var(--bw-divider) solid var(--color-border-subtle);
  padding-block: var(--bdri-space-8);
}
.article__head-inner { max-width: 40rem; }
.article__title {
  font-family: var(--bdri-text-display-family);
  font-size: clamp(2rem, 4vw, var(--bdri-size-display));
  font-weight: var(--bdri-text-display-weight); line-height: 1.08;
  letter-spacing: var(--bdri-text-display-tracking);
  margin-block: var(--bdri-space-3) var(--bdri-space-4); text-wrap: balance;
}
.article__standfirst {
  font-family: var(--bdri-text-display-family); font-size: var(--bdri-size-body-lg);
  font-weight: var(--bdri-weight-regular); line-height: var(--bdri-lh-relaxed);
  color: var(--color-text-subtle); max-width: var(--measure-narrow);
}

/* body - single controlled measure column, serif-credible reading */
.article__body { max-width: var(--measure); padding-block: var(--bdri-space-8); }
.article__body > p { font-size: var(--bdri-size-body-lg); line-height: var(--bdri-lh-loose); color: var(--color-text-subtle); margin-bottom: var(--bdri-space-5); }
.article__h2 { font-family: var(--bdri-text-h2-family); font-size: var(--bdri-size-h3); font-weight: var(--bdri-weight-semibold); line-height: var(--bdri-lh-snug); color: var(--color-text-default); margin-block: var(--bdri-space-6) var(--bdri-space-3); }

.article__pull { margin: var(--bdri-space-7) 0; padding: 0; }
.article__quote {
  margin: 0; padding: var(--bdri-space-5) var(--bdri-space-6);
  border-left: var(--bw-accent) solid var(--color-accent-primary);
  background: var(--color-surface-quote);
  font-family: var(--bdri-text-display-family); font-size: var(--bdri-size-h3);
  font-weight: var(--bdri-weight-regular); line-height: var(--bdri-lh-snug);
  color: var(--color-text-default); border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/* end-of-article contextual CTA (the one soft path) */
.article__cta {
  margin-top: var(--bdri-space-7);
  background: var(--color-surface-accent); color: var(--color-text-inverted);
  --color-accent-primary: var(--bdri-color-aquamarine-bright);
  border-radius: var(--radius-modal); padding: var(--bdri-space-7) var(--bdri-space-6);
}
.article__cta-head { font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-h3); font-weight: var(--bdri-weight-semibold); color: #fff; margin-bottom: var(--bdri-space-3); }
.article__cta-body { color: var(--bdri-color-cloud); line-height: var(--bdri-lh-loose); margin-bottom: var(--bdri-space-5); }
.article__cta-actions { display: flex; flex-wrap: wrap; gap: var(--bdri-space-3); }
.article__cta-actions .btn--primary { background: var(--bdri-color-aquamarine-bright); color: var(--bdri-color-ink); border-color: var(--bdri-color-aquamarine-bright); }
.article__cta-actions .btn--ghost { color: #fff; border-color: color-mix(in srgb, #ffffff 40%, transparent); }
.article__cta-actions .btn--ghost:hover { border-color: var(--bdri-color-aquamarine-bright); color: var(--bdri-color-aquamarine-bright); }

@media (min-width: 760px) { .article__head { padding-block: var(--bdri-space-9); } .article__body { padding-block: var(--bdri-space-9); } }