/* ── ita_two_col_text ───────────────────────────────────────────────
   Layout comes entirely from the shared .two-col grid (defined in
   shared/styles.css) — this file only spaces the kicker/heading/body
   stack inside each column and styles the badge-mode variant (which
   otherwise reuses the shared .badge-note component wholesale).
   Tokens only. */

/* No padding override — spacing to neighboring blocks now comes from
   an explicit ita_spacer block in the page, not block CSS. */
.block-ita_two_col_text .ttc-body {
  margin-top: 18px;
  font-size: 15.5px; line-height: 1.75; color: var(--color-fg-muted);
}
.block-ita_two_col_text .ttc-body p + p { margin-top: 14px; }
.block-ita_two_col_text .ttc-body em { font-style: normal; color: var(--color-accent); }
.block-ita_two_col_text .ttc-body strong { font-weight: 700; color: var(--color-fg); }
.block-ita_two_col_text .ttc-list-lead { margin-top: 14px; font-weight: 700; color: var(--color-fg); }
.block-ita_two_col_text ul.plain { margin-top: 16px; }
.block-ita_two_col_text .ttc-outro { margin-top: 14px; }

/* Navy contrast: .ttc-body/.ttc-list-lead select on DIV/P specificity
   (0,2,0) that beats the generic `.section-navy p` rule (0,1,1) in
   shared/styles.css, so a scoped override is needed here — same
   pattern as ita_split_media's .sm-feature-meta fix. */
.section-navy.block-ita_two_col_text .ttc-body { color: rgba(255,255,255,.82); }
.section-navy.block-ita_two_col_text .ttc-body strong,
.section-navy.block-ita_two_col_text .ttc-list-lead { color: var(--color-on-dark); }

/* ── Shared-header mode (render.php's $shared_header) ─────────────
   Column 1's kicker+title render once, full block width, ABOVE the
   two-column grid — instead of confined inside column 1's own
   ~half-width track, which wrapped headings earlier than the block's
   actual available width (e.g. "Great play begins with a great idea"
   on Home's "Our Purpose" section). Matches the mockup's original
   layout there: one shared header over two independent body columns.
   Kicker->title gap comes from the shared .kicker margin-bottom (16px,
   same as every other kicker+title block) — no extra margin here. */
.block-ita_two_col_text .ttc-shared-head { margin-bottom: 36px; }

/* ── Body-aligned variant ──────────────────────────────────────────
   Used when column 2 has no kicker/title (render.php's $align_body):
   without this, column 2's body sits at the very top of its column,
   level with column 1's KICKER rather than column 1's body paragraph.
   Subgrid shares row tracks between both columns so row 1/2 (kicker/
   title) size themselves off whichever column actually has content
   there, and the body row lines up across both regardless of how
   tall column 1's kicker+title stack turns out to be — no fixed
   height guess needed. Scoped to this modifier only: the badge/chips
   column-2 variants intentionally sit at their own natural height and
   shouldn't be forced into this row grid. */
.block-ita_two_col_text .two-col.ttc-align-body {
  grid-template-rows: auto auto 1fr;
}
.block-ita_two_col_text .two-col.ttc-align-body > .ttc-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 4;
  row-gap: 0;
}
.block-ita_two_col_text .two-col.ttc-align-body [data-field$="_kicker"] { grid-row: 1; }
.block-ita_two_col_text .two-col.ttc-align-body [data-field$="_title"] { grid-row: 2; }
.block-ita_two_col_text .two-col.ttc-align-body [data-field$="_body"] { grid-row: 3; }