/* ============================================================
   Block: rich_text — the four layout VARIANTS. `single` is the
   untouched original and deliberately has no rule in this file.
   Design source: L:73-83 (measure + prose scale), H:288 (the 3px
   accent rail the callout borrows), design-system.md §6 row 2, §7.
   Mobile-first per DECISIONS D3.

   Measures are border-box, matching the original block: the part
   sets `style="max-width:780px"` inline on .wrap for `single`, and
   --m434-gutter (20 → 32 → 44px) lives INSIDE that number. Every
   max-width below is stated the same way, so `narrow` at 680px is
   exactly 100px tighter than the default at every width.

   The inline style is also why the variants had to drop it rather
   than override it — an inline declaration beats every author rule,
   so a variant that wants its own measure has to not have one.

   Nothing here restyles .prose itself: that is global.css's shared
   article layer (posts use it too). These rules only change the
   BOX .prose sits in, plus the one promoted lead paragraph.
   ============================================================ */

/* .m434-rt__body is a plain passthrough for every variant except
   callout, which needs a box to paint that sits inside the wrap's
   gutter instead of bleeding to the viewport edge on phones. */

/* ------------------------------------------------------------
   narrow — a tighter measure for long-form reading.
   ------------------------------------------------------------ */
.m434-rt--narrow { max-width: 680px; }

/* ------------------------------------------------------------
   two-col — CSS multi-column from md up, one column below.
   Below 768px this is just a wider single column, which is the
   correct mobile degradation: two 150px columns are unreadable.
   ------------------------------------------------------------ */
.m434-rt--two-col { max-width: 1060px; }

/* .prose caps itself at var(--m434-measure) = 760px, which would
   strand the second column. The columns re-impose a measure of
   their own (~465px at desktop, ~330px at 768px). */
.m434-rt--two-col .prose { max-width: 100%; }

/* ------------------------------------------------------------
   lead — the first paragraph promoted to lede size and colour.
   :first-of-type, not :first-child, so a body that opens with a
   heading still promotes the paragraph under it.
   ------------------------------------------------------------ */
.m434-rt--lead { max-width: 780px; }

/* --m434-slate-strong #4b5563 is the design's lede grey (L:77):
   7.56:1 on #ffffff, 6.93:1 on --bg-soft #f4f5f7, 6.67:1 on
   --bg-cool #eef1f4 — all pass WCAG 2.1 AA for normal text. */
.m434-rt--lead .prose > p:first-of-type {
  font-size: 18px;
  line-height: 1.6;
  color: var(--m434-slate-strong);
}

/* global.css sets .dark-bg .prose to rgba(255,255,255,.8) at (0,2,0);
   the rule above weighs (0,3,1) and would otherwise paint the lede
   near-black on --navy. Restated one step brighter than body copy so
   the promotion still reads: rgba(255,255,255,.92) is 13.00:1 on
   --navy #262626 and 7.64:1 on --m434-crimson #8b2433. */
.dark-bg .m434-rt--lead .prose > p:first-of-type {
  color: rgba(255, 255, 255, 0.92);
}

/* ------------------------------------------------------------
   callout — the whole block as an accent-ruled card.
   The rail is the design's own lockup: 3px solid accent with the
   text held off it (H:288, and §7 gives .prose blockquote the same
   3px/18px pair). --red here is a RULE, not text, which is the only
   role that colour is allowed in (tokens.css, F-16).
   ------------------------------------------------------------ */
.m434-rt--callout { max-width: 860px; }

.m434-rt--callout .m434-rt__body {
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--m434-line-3);
  border-left: 3px solid var(--red);
  padding: 22px 20px 22px 17px;
}

/* Text inside the default card: .prose --ink #303030 on --bg-soft
   #f4f5f7 = 12.10:1. Links keep global.css's --m434-accent-text
   #a34f0e = 5.23:1 on the same ground. Both pass AA. */

/* On a band that is ALREADY --bg-soft or --bg-cool the card has to
   go the other way or it vanishes into the band. --ink on #ffffff
   = 13.20:1; --m434-accent-text links 5.70:1. */
.light-bg .m434-rt--callout .m434-rt__body { background: var(--white); }

/* On dark bands the card DARKENS rather than lightens. A white
   scrim would raise the ground under text that is already only
   rgba(255,255,255,.8); a black one lowers it, so every pairing
   inside the card is better than the band around it:
     on --navy #262626    → card #1f1f1f: body 10.91:1, lede 14.07:1,
                            --m434-link-ink rgb(255,150,60) links 7.58:1
     on --m434-crimson    → card #721e2a: body  7.48:1, lede  9.42:1,
                            --m434-link-ink #ffab5e links 5.83:1

   UPDATED: this block used to end "--m434-accent-lt is only 4.04:1 on
   the raw crimson band, so the card is the pairing that passes." That
   was true and is no longer the whole story — global.css now answers
   the same 4.04 finding at the BAND level by re-pointing the accent
   and link tokens to #ffab5e (4.69:1) on .has-bg-accent, so a link on
   the bare crimson band passes too. The card still darkens, for the
   reason above, and its links now read #ffab5e for 5.83:1 rather than
   rgb(255,150,60) for 5.02:1 — both pass; the figure simply moved. */
.dark-bg .m434-rt--callout .m434-rt__body {
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* ============================================================
   md — 768px. Two columns become readable; the callout gets its
   full padding.
   ============================================================ */
@media (min-width: 768px) {
  .m434-rt--two-col .prose {
    columns: 2;
    column-gap: 44px;
    orphans: 2;
    widows: 2;
  }

  /* Column tops must line up. .prose's rhythm is `> * + *
     { margin-top: 1.1em }`, and a top margin on whatever element
     happens to start column two pushes that column down by a
     random amount. Bottom margins cannot do that, so inside the
     columns the rhythm flips. A heading's air then comes from the
     paragraph above it rather than from its own margin-top —
     slightly tighter than the single-column 1.8em, and the only
     version that cannot strand. */
  .m434-rt--two-col .prose > * {
    margin-top: 0;
    margin-bottom: 1.2em;
  }
  .m434-rt--two-col .prose > h2 { margin-bottom: 0.5em; }
  .m434-rt--two-col .prose > h3 { margin-bottom: 0.45em; }
  .m434-rt--two-col .prose > :last-child { margin-bottom: 0; }

  /* Do not split a heading, a list, a quote or a figure across the
     column break; keep a heading with the text it introduces. */
  .m434-rt--two-col .prose h2,
  .m434-rt--two-col .prose h3,
  .m434-rt--two-col .prose h4,
  .m434-rt--two-col .prose ul,
  .m434-rt--two-col .prose ol,
  .m434-rt--two-col .prose li,
  .m434-rt--two-col .prose blockquote,
  .m434-rt--two-col .prose figure,
  .m434-rt--two-col .prose table,
  .m434-rt--two-col .prose img {
    break-inside: avoid;
  }
  .m434-rt--two-col .prose h2,
  .m434-rt--two-col .prose h3,
  .m434-rt--two-col .prose h4 {
    break-after: avoid;
  }

  .m434-rt--lead .prose > p:first-of-type { font-size: 19px; }

  .m434-rt--callout .m434-rt__body { padding: 28px 26px 28px 23px; }
}

/* ============================================================
   lg — 1024px. Desktop measures.
   ============================================================ */
@media (min-width: 1024px) {
  .m434-rt--lead .prose > p:first-of-type {
    font-size: 21px;
    line-height: 1.55;
  }

  .m434-rt--callout .m434-rt__body { padding: 34px 32px 34px 29px; }
}