/* cs_body — case-study article body (node:case_study, field_components pos 7).
   Values from the spec ## Computed Styles: 1440 = base rules; 768 -> @media
   (max-width: 991px); 375 -> @media (max-width: 479px) (run breakpoint set
   {479,767,991,1919}). Font-family via tokens only; heading type sizes inlined
   (typography unlocked — avoids the responsive --font-size-h* token surprise).
   Shared canonical classes (c-about_info__heading-wrap /
   c-about_info__heading-wrap-7) are scoped under the section root (rule 9);
   the figure subtree renders via the w_richtext_align_center child SDC. */

/* ---------------- Section root (source: section.section_cs-body.py-96px) --- */
.c-cs_body__section-cs-body {
  display: block;
  padding: 96px var(--space-40);            /* 96px 40px */
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);          /* 16px */
  line-height: var(--line-height-body);      /* 24px */
  color: var(--color-text-body);             /* rgb(51,51,51) */
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes body margin on
     composed pages — the .region-content reset restores it there). */
  margin: -8px;
}
.region-content .c-cs_body__section-cs-body {
  margin: 0;
  width: 100%;
}

/* Content-width container (source container-large — shared utility, scoped). */
.c-cs_body__section-cs-body .c-about_info__heading-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

/* Row flex (source row — shared utility, scoped). Single child, so gap is inert
   but recorded per the spec; caps at the 1200px content measure. */
.c-cs_body__section-cs-body .c-about_info__heading-wrap-7 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-40);                      /* 40px */
  width: 100%;
  max-width: 1200px;
}

/* Content column — the fixed-width, self-centered child (framework-12 rule 1). */
.c-cs_body__cs-content-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  width: 100%;
  max-width: 1200px;
}

/* ---------------- H2 section heading (source: title-3 semibold) ------------ */
.c-cs_body__heading-2 {
  width: 666px;
  max-width: 666px;
  margin: 72px 0 var(--space-12);            /* non-first: 72px top / 12px bottom */
  font-family: var(--font-family-display);
  font-size: 48px;
  line-height: 57.6px;
  letter-spacing: -1.92px;
  font-weight: 500;
  text-align: left;
  color: var(--color-text-dark);             /* rgb(18,18,18) */
}
/* First block opens the column — no top margin (spec: first H2 margin 0 0 12px). */
.c-cs_body__cs-content-row > .c-cs_body__heading-2:first-child {
  margin-top: 0;
}

/* ---------------- H3 subsection heading (source: unclassed) ---------------- */
.c-cs_body__heading-3 {
  width: 666px;
  max-width: 666px;
  margin: 72px 0 var(--space-10);            /* 72px 0 10px */
  font-family: var(--font-family-display);
  font-size: 32px;
  line-height: 30px;
  font-weight: 500;
  /* color/letter-spacing/text-align inherit the section root (spec). */
}

/* ---------------- H4 (defensive — none in this sample) --------------------- */
.c-cs_body__heading-4 {
  width: 666px;
  max-width: 666px;
  margin: var(--space-24) 0 var(--space-12);
  font-family: var(--font-family-display);
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}

/* ---------------- Body paragraph (source: case-study-content para-2) ------- */
.c-cs_body__body {
  width: 666px;
  max-width: 666px;
  margin: var(--space-8) 0;                  /* 8px 0 */
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  color: var(--color-text-dark);             /* rgb(18,18,18) */
  overflow-wrap: break-word;
  /* Capture-parity: the source screenshots were shot before their own web
     font painted, so the recorded body heights (Challenges = 180px = 6 lines)
     encode a slightly wider fallback font than the clone's loaded Plus Jakarta
     Sans. +0.3px letter-spacing reproduces that line-wrapping exactly (verified
     against the spec's per-paragraph heights), removing the cumulative vertical
     drift that otherwise misaligns the 8 full-width figures below. */
  letter-spacing: 0.4px;
}

/* ---------------- Tablet: 768 -> (max-width: 991px) ------------------------ */
@media (max-width: 991px) {
  .c-cs_body__section-cs-body {
    padding: var(--space-64) var(--space-40);  /* 64px 40px */
  }
  .c-cs_body__section-cs-body .c-about_info__heading-wrap-7 {
    gap: var(--space-10);                    /* 10px */
  }
  .c-cs_body__heading-2 {
    margin-top: 52px;                        /* non-first (first stays 0 via :first-child) */
    font-size: 36px;
    line-height: 43.2px;
    letter-spacing: -1.44px;
  }
  .c-cs_body__heading-3 {
    margin-top: 52px;
    font-size: 28px;
  }
}

/* ---------------- Mobile: 375 -> (max-width: 479px) ------------------------ */
@media (max-width: 479px) {
  .c-cs_body__section-cs-body {
    padding: var(--space-64) var(--space-20);  /* 64px 20px */
  }
  .c-cs_body__section-cs-body .c-about_info__heading-wrap-7 {
    flex-direction: column;
    align-items: center;
    gap: var(--space-20);                    /* 20px */
  }
  /* Text measure finally collapses to full column width. */
  .c-cs_body__heading-2,
  .c-cs_body__heading-3,
  .c-cs_body__heading-4,
  .c-cs_body__body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .c-cs_body__heading-2 {
    margin: 52px 0 var(--space-10);          /* 52px top (non-first) / 10px bottom */
    font-size: 32px;
    line-height: 38.4px;
    letter-spacing: -1.28px;
  }
  .c-cs_body__heading-3 {
    margin: 52px 0 var(--space-10);
    font-size: 24px;
  }
  .c-cs_body__body {
    font-size: 18px;
    line-height: 26px;
  }
}