/* Blog post extras (lane E, SPEC 3.15 and 5.14). The article layout itself (.cf-article, .cf-prose, .example-box,
   .cta-box, .cf-article__next) lives in /css/cf.css. This file only holds what the 29 migrated posts need on top. */

/* Long words and URLs in prose never push the page sideways. */
.cf-article .cf-prose { overflow-wrap: break-word; }
.cf-article .cf-prose a { overflow-wrap: anywhere; }

/* Hero image of the posts that have one */
.cf-article__figure { margin: var(--cf-s-6) 0 0; }
.cf-article__figure img,
.blog-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-r-3);
  box-shadow: var(--cf-shadow-1);
}

/* Callout boxes the old posts used (same look as .example-box / .cta-box family) */
.signal-box,
.test-box,
.metric-box,
.latency-box,
.evaluation-box {
  padding: var(--cf-s-4) var(--cf-s-5);
  background: var(--cf-paper-2);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-r-3);
}
.signal-box > * + *,
.test-box > * + *,
.metric-box > * + *,
.latency-box > * + *,
.evaluation-box > * + * { margin-top: var(--cf-s-3); }
.signal-box ul,
.test-box ul,
.metric-box ul,
.evaluation-box ul { margin-top: var(--cf-s-2); }

/* Multi-line code samples inside boxes */
.latency-box code,
.example-box code {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 0;
  background: none;
  font-family: var(--cf-font-mono);
  font-size: var(--cf-fs-sm);
  line-height: 1.7;
  color: var(--cf-ink);
}

/* Diagrams (inline SVG with their own captions) */
.blog-diagram,
.rk-diagram,
.method-figure { margin: var(--cf-s-6) 0; }
.blog-diagram svg,
.rk-diagram svg,
.method-figure svg { display: block; width: 100%; height: auto; }
.blog-diagram figcaption,
.method-figure figcaption { margin-top: var(--cf-s-2); font-size: var(--cf-fs-sm); color: var(--cf-muted); }

/* Next-read card at the foot of a post */
.cf-article__label {
  margin: 0;
  font-family: var(--cf-font-mono);
  font-size: var(--cf-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--cf-track-label);
  color: var(--cf-blue-deep);
}
.cf-article__next p:not(.cf-article__label):not(.cf-article__bio) { color: var(--cf-ink-2); }
.cf-article__next a { color: var(--cf-blue-deep); font-weight: var(--cf-w-semibold); text-decoration: underline; overflow-wrap: anywhere; }
.cf-article__next a:hover { color: var(--cf-blue); }
.cf-article__label + p,
.cf-article__label + p + .cf-article__label { margin-top: var(--cf-s-2); }
.cf-article__next .cf-article__label:not(:first-child) { margin-top: var(--cf-s-5); }
.cf-article__bio {
  padding-top: var(--cf-s-4);
  border-top: 1px solid var(--cf-line);
  font-size: var(--cf-fs-sm);
  color: var(--cf-ink-3);
}