/* ── Text widget — Figma "Text-grid" (e.g. 2118:6039) ───────────────────────
   4-col grid: heading row 1 cols 1–3, body row 2 cols 3–4 (≈660px),
   gap 20px / 40px. Body copy is Body/Large (.text-lg in the markup).
   The widget OWNS its bottom padding (sections pad only the top) — responsive
   values + button collapse live in the "Trailing space" rules below. */
.text-grid {
  /* Context knobs. Pages/shells flip THESE (e.g. .expertise-text in
     page-expertise-single.css, .single-case in case-content.css) — never the
     internals below. */
  --tw-row-gap: 40px;              /* heading -> body */
  --tw-para-gap: 24px;             /* between paragraphs (Figma: one blank line) */
  --tw-pad-bottom: 100px;          /* trailing space the widget owns */
  --tw-body-col: 3 / span 2;       /* body column span (desktop/tablet) */
  --tw-body-size: var(--body-lg);
  --tw-body-lh: var(--body-lg-lh);
  display: grid;
  width: 100%;
  column-gap: 20px;
  row-gap: var(--tw-row-gap);
  padding-bottom: var(--tw-pad-bottom);
  /* Rows are implicit (.tw-heading pins row 1, .tw-text row 2), so a
     heading-only widget is one row with no trailing row-gap. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Block variant (dragster/text-grid) — kept for the Gutenberg block */
.text-grid--block { display: grid; width: 100%; }

.tw-heading {
  grid-row: 1;
  grid-column: 1 / span 3;
  align-self: start;
}

.tw-text {
  display: flex;
  flex-direction: column;
  gap: var(--tw-para-gap);
  grid-row: 2;
  grid-column: var(--tw-body-col);
  align-self: start;
  /* Body typography lives here and is inherited by the paragraphs (wysiwyg
     bodies arrive as bare <p>; plain-text bodies render <p class="text-lg">). */
  font-size: var(--tw-body-size);
  line-height: var(--tw-body-lh);
  letter-spacing: -0.01em;
  color: var(--text-body);
}
/* base/tokens.css has a global `p { line-height: 1.7 }` that would beat the
   inherited token line-height (a bare <p> used to render 34/40.8px instead of
   Figma's 30/36px). Re-inherit inside the component so every paragraph — bare
   or .text-lg — follows --tw-body-lh. */
.tw-text p { line-height: inherit; }

/* ── Text widget featured (xl heading, e.g. homepage "Frontrunners") ──────── */
.text-grid--featured .tw-heading {
  grid-column: 1 / span 2;
  /* forces "in the Making" to next line */
}
.text-grid--featured .tw-heading .title-lg {
  font-size: var(--title-xl);
  line-height: var(--title-xl-lh);
}

/* ── Trailing space ──────────────────────────────────────────────────────────
   ALL variants own their bottom padding: 100px in the base rule above, 80px
   tablet / 60px mobile in the media queries below. It collapses when a button
   sits inside the text block or immediately after the widget, so the button
   hugs the copy instead of floating far below. (--ifk overrides its own
   padding in page-ifk.css, which loads later.) */
.text-grid:has(.btn),
.text-grid:has(+ .btn) { --tw-pad-bottom: 32px; }

/* Dark sections (data-theme="dark") → white heading + body copy. */
[data-theme="dark"] .text-grid .title-lg,
[data-theme="dark"] .text-grid .tw-text,
[data-theme="dark"] .text-grid .text-lg { color: var(--text-light); }

/* ── Tablet ────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .text-grid { --tw-pad-bottom: 80px; }
}

/* ── Mobile: the widget runs FULL WIDTH — no column split between heading
   and body copy; they simply stack. Keeps the base 4-col grid (page variants
   still address it); only the spans + padding change here. ── */
@media (max-width: 767px) {
  .text-grid { --tw-pad-bottom: 40px; }   /* Figma mobile spec; .container pads the sides */
  .text-grid:has(.btn),
  .text-grid:has(+ .btn) { --tw-pad-bottom: 24px; }
  /* Full width — heading and body each span all 4 columns, so the
     desktop heading-left / body-right split collapses to a plain stack.
     Same specificity as the variant rules and placed after them, so no
     !important is needed — page variants (--ifk, .about-text) can still
     say otherwise, which is exactly what they already do. */
  .text-grid .tw-heading,
  .text-grid .tw-text { grid-column: 1 / -1; }
}