/*
  textBlock — an optional title and one or more paragraphs (component.json textBlock, 6 tokens).
  e.g. the Overview's Problem / Why it mattered / Goal / Outcome; each My design process step;
  plain prose with no title (The problem, Reflections, section intros).
  The title is a real heading (one level below the section header), so screen readers can jump between blocks.
*/

.text-block {
  display: flex;
  flex-direction: column;
  color: var(--text-block-content-all);
}
.text-block__title + .text-block__body { margin-block-start: var(--text-block-title-gap-all); }
.text-block__body + .text-block__body  { margin-block-start: var(--text-block-paragraph-gap-all); }

/* Bulleted list (BUILD 25, Vivek 2026-10-02; first used for the homepage Fun facts).
   Each item is a .text-block__body, so items are 16px apart (paragraph gap) and use body text.
   Plain round bullet in the text color; wrapped lines align with the text, not the bullet
   (the bullet sits in a 24px indent). Indent: textBlock.listIndent (component v0.25.0). */
.text-block__list {
  margin: 0;
  padding-inline-start: var(--text-block-list-indent-all); /* 24px */
  list-style: disc;
}
.text-block__title + .text-block__list { margin-block-start: var(--text-block-title-gap-all); }

.text-block__title {
  font-family: var(--text-block-title-text-style-all-font-family);
  font-size: var(--text-block-title-text-style-all-font-size);
  font-weight: var(--text-block-title-text-style-all-font-weight);
  line-height: var(--text-block-title-text-style-all-line-height);
  /* pretty, not balance (Vivek's render, 2026-09-30): balance evened out two-line titles by cutting the
     first line short ("...didn't" then ~300px of empty space). pretty fills the first line and only
     avoids a lone last word. Browsers without it wrap normally, which looks the same here. */
  text-wrap: pretty;
}

.text-block__body {
  font-family: var(--text-block-body-text-style-all-font-family);
  font-size: var(--text-block-body-text-style-all-font-size);
  font-weight: var(--text-block-body-text-style-all-font-weight);
  line-height: var(--text-block-body-text-style-all-line-height);
}

/* Run-in title (BUILD 21 DECISIONS 3 and 6, Vivek 2026-09-30): a bold sentence at the start of a paragraph,
   on the same line as the text. Body size (20px) at weight 600, so the line spacing stays even.
   Strong text, not a heading. Used for short findings and for a quote's source ("Name, title:" then the quote). */
.text-block__run-in {
  font-family: var(--text-block-run-in-title-text-style-all-font-family);
  font-size: var(--text-block-run-in-title-text-style-all-font-size);
  font-weight: var(--text-block-run-in-title-text-style-all-font-weight);
  line-height: var(--text-block-run-in-title-text-style-all-line-height);
}