/*
  textBlockGroup — the stack: optional lede, optional stat card group, text blocks, optional 'The full story' cue
  (component.json textBlockGroup, 10 tokens). Single column always.
  One owner per gap: 32px between every item; the one tighter gap is lede -> stat card group (16px, only before a stat card group).
*/

.text-block-group > * + * {
  margin-block-start: var(--text-block-group-gap-all);
}
.text-block-group > .text-block-group__lede + .stat-card-group {
  margin-block-start: var(--text-block-group-lede-gap-all); /* only before a stat card: the lede leads into the number.
     Before anything else (e.g. an image) the lede keeps the normal 32px (BUILD 22 DECISION 1, Vivek 2026-09-30). */
}
/* Images and the text around them (Vivek 2026-10-20, was 32px): text -> image, image -> text and image -> image are the media gap,
   32px on phones growing to 48px on desktop, so an image reads as its own moment but stays with its text.
   Covers single images, pairs and grids. Two pairs back to back are 64px apart (48px on phones), so each pair
   reads as its own scene (BUILD 21 DECISION 4); the next entry's title block uses the entry gap too (below). */
.text-block-group > * + :is(.figure, .figure-pair, .figure-grid),
.text-block-group > :is(.figure, .figure-pair, .figure-grid) + * {
  margin-block-start: var(--text-block-group-media-gap-all); /* beats figure.css's margin: 0 (loaded later, lower weight) */
}
.text-block-group > .figure-pair + .figure-pair {
  margin-block-start: var(--text-block-group-entry-gap-all);
}
/* Text-led entries (BUILD 22 DECISIONS 2 and 3, Vivek 2026-09-30): a project told as text, then images under
   the text they prove. Inside it everything is the normal 32px; the next project's title block starts 64px (48px on phones)
   below the last image, so each project reads as its own story. */
.text-block-group > * + .text-block--starts-entry {
  margin-block-start: var(--text-block-group-entry-gap-all);
}

/* Standalone lede under the section header: body large (allowed here, never under a paragraph title). */
.text-block-group__lede {
  font-family: var(--text-block-group-lede-text-style-all-font-family);
  font-size: var(--text-block-group-lede-text-style-all-font-size);
  font-weight: var(--text-block-group-lede-text-style-all-font-weight);
  line-height: var(--text-block-group-lede-text-style-all-line-height);
  color: var(--text-block-group-lede-content-all);
}

/* Overview cue, "The full story" + down arrow (Vivek 2026-10-20; was the arrow alone): says the Overview was
   the summary and the full story follows. A label, not a link: no action, no focus, no underline, hidden from
   screen readers. Body size, secondary color, 20px arrow 4px after the words. Left-aligned with the text,
   where the eye already runs down the page (decided by Vivek 2026-09-26: centered, it got lost). */
.text-block-group__cue {
  display: flex;
  align-items: center;
  gap: var(--text-block-group-cue-icon-gap-all);
  font-family: var(--text-block-group-cue-text-style-all-font-family);
  font-size: var(--text-block-group-cue-text-style-all-font-size);
  font-weight: var(--text-block-group-cue-text-style-all-font-weight);
  line-height: var(--text-block-group-cue-text-style-all-line-height);
  color: var(--text-block-group-cue-content-all);
}
.text-block-group__cue-icon {
  width: var(--text-block-group-cue-icon-size-all);
  height: var(--text-block-group-cue-icon-size-all);
}