/* Text — V0.1 Why Co.Si: heading (60→Display/3) at x≈450, body (Body/MD, #484848) 56–88px below it. */
.block--text .text__eyebrow { margin-bottom: var(--space-12); /* V0.1: "Section Title" sits 10px over the heading */ }
.block--text .text__heading { max-width: 24em; }
.block--text .text__heading.t-display-3 { max-width: 13em; }
.block--text { --text-gap: var(--space-64); }
.block--text:has(.text__heading.t-display-5, .text__heading.t-display-6) { --text-gap: var(--space-32); }
.block--text .text__head + .text__body { margin-top: var(--text-gap); }
.block--text .text__body { max-width: 42em; }
.block--text.text--wide .text__body { max-width: none; }
/* Heading left, body below — V0.1 Careers "We're hiring": 65→64 heading at x48, 582 wide; body at x≈450, 66 below. */
.block--text.text--stack .text__heading { max-width: 9.5em; }

/* Heading left — V0.1 case study "The opportunity" (62:2988): heading block x50 w580,
   body x750 w480 (flush with the content edge), body level with the heading. */
@media (min-width: 1024px) {
  .block--text.text--split .text__head,
  .block--text.text--split .text__body { grid-row: 1; }
  .block--text.text--split .text__head { max-width: min(580px, calc(100% - 480px - var(--space-120))); /* V0.1 */ }
  .block--text.text--split .text__body { justify-self: end; width: min(480px, 100%); /* V0.1 */ }
  .block--text.text--split .text__head + .text__body { margin-top: 0; }
  .block--text.text--split:has(.text__eyebrow) .text__head + .text__body { margin-top: calc(1.2 * var(--fs-body-xl) + var(--space-12)); }
}

/* Body highlight ("Highlight text animation example", Why Co.Si): words light up in
   reading order as the paragraph scrolls through view, and dim again scrolling back up.
   Any element with data-module="text" gets it (the text block, pillars). text.js wraps
   each word in .hl with --i and drives --p (0→1); --n is the word count.
   --p defaults to 1 so the copy is fully lit without JS or with reduced motion. */
[data-module~="text"] { --p: 1; --n: 1; }
[data-module~="text"] .hl {
  opacity: clamp(0.2, calc((var(--p) * (var(--n) + 8) - var(--i)) / 8), 1);
  transition: opacity 200ms linear;
}

@media (max-width: 767px) {
  .block--text .text__eyebrow { margin-bottom: var(--space-8); }
}