/* approach.css — in-body "Approach" section.
   Values from spec ## Computed Styles: 1440 = base rules;
   768 → @media(max-width:991px); 375 → @media(max-width:479px).
   Run breakpoint boundary set {479,767,991,1919}.
   Typography via var(--font-*) (framework-11 E1 lock; source family
   'Plus Jakarta Sans' already resolves through the frozen tokens).
   All selectors scoped under the component root .c-approach__section-approach
   (rule 9 — the shared wrapper canonical classes owned by about_info/accordion
   never leak, and are styled here because the owner CSS is not attached in this
   component's isolated render).

   Heading (source h2 "Approach") + item h3 computed styles were NOT captured
   (past the 5-level DOM depth cap). Their font metrics are calibrated to the
   pixel-diff target screenshot (headway_index) — ~60px @1440 stepping to ~48px
   below 992px — not to the type-ramp tokens (whose h1 ramp drops to 36px @479,
   which the reference does not show). */

/* ---------------- Section root (source: section.section_approach) ----------- */
.c-approach__section-approach {
  display: block;
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes body margin on composed pages) */
  margin: -8px;
}
.region-content .c-approach__section-approach {
  margin: 0;
  width: 100%;
}

/* ---------------- Background band (source: div.background-color-secondary) --- */
.c-approach__section-approach .c-approach__background-color-secondary {
  display: block;
  background-color: var(--color-bg-alt3); /* rgb(247, 244, 244) */
}

/* ---------------- padding-global + padding-section-medium ------------------- */
.c-approach__section-approach .c-about_info__heading-wrap-5 {
  display: block;
  padding: 96px var(--space-40); /* 96px: no spacing token this run */
}

/* ---------------- container-large ------------------------------------------- */
.c-approach__section-approach .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

/* ---------------- row (source: div.row) ------------------------------------- */
.c-approach__section-approach .c-about_info__heading-wrap-7 {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-40);
}

/* ---------------- header column (source: div.section-header[.mb-4]) ---------- */
.c-approach__section-approach .c-accordion__heading-wrap-3 {
  display: block;
  width: 100%;
  max-width: 640px; /* source section-header fixed column */
}
/* items-grid variant only — source .mb-4 (→ c-accordion__heading-wrap):
   header gets a bottom margin to separate it from the process grid below */
.c-approach__section-approach .c-accordion__heading-wrap {
  margin: 0 0 var(--space-64); /* 64px @1440 */
}

/* ---------------- heading (source: h2 "Approach") --------------------------- */
.c-approach__section-approach .c-approach__heading {
  margin: 0 0 var(--space-20);
  font-family: var(--font-family-display);
  font-size: 44px;
  line-height: 50px;
  font-weight: var(--font-weight-h1);
  letter-spacing: -1.5px;
  color: var(--color-text-primary);
}

/* ---------------- intro copy (source: rich-text body) ----------------------- */
.c-approach__section-approach .c-approach__intro {
  font-family: var(--font-family-body);
  font-size: 18px;
  line-height: 30px;
  font-weight: var(--font-weight-body);
  color: var(--color-text-primary);
}
.c-approach__section-approach .c-approach__intro p {
  margin: 0 0 30px; /* inter-paragraph gap (~1 line) */
}
.c-approach__section-approach .c-approach__intro p:last-child {
  margin-bottom: 0;
}

/* ---------------- CTA link (cta-link variant; source anchor) ---------------- */
.c-approach__section-approach .c-approach__cta {
  display: inline-block;
  margin-top: 48px; /* gap below intro; no spacing token this run */
  font-family: var(--font-family-display);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-text-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================ Items grid (services variant) ================= */
/* source .justify---center (canonical:null → own BEM) > .max-width-1290 */
.c-approach__section-approach .c-approach__items-center {
  display: flex;
  justify-content: center;
  width: 100%;
}
.c-approach__section-approach .c-approach__max-width-1290 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-40) var(--space-64);
  width: 100%;
  max-width: 1290px; /* source max-width-1290 cap (never constrains <=1290 viewports) */
}
.c-approach__section-approach .c-approach__item {
  min-width: 0;
}
.c-approach__section-approach .c-approach__item-heading {
  margin: 0 0 var(--space-12);
  font-family: var(--font-family-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--font-weight-h3);
  letter-spacing: -0.4px;
  color: var(--color-text-dark);
}
.c-approach__section-approach .c-approach__item-body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--font-weight-body);
  color: var(--color-text-primary);
}

/* ============================ Tablet: 768 band (<=991) ===================== */
@media (max-width: 991px) {
  .c-approach__section-approach .c-about_info__heading-wrap-5 {
    padding: var(--space-64) var(--space-40); /* 64px 40px */
  }
  .c-approach__section-approach .c-about_info__heading-wrap-7 {
    gap: var(--space-10);
  }
  .c-approach__section-approach .c-accordion__heading-wrap {
    margin: 0 0 32px; /* items variant: 32px @768 */
  }
  .c-approach__section-approach .c-approach__heading {
    font-size: 34px; /* source heading band h=30px → ~33px @768/375 (measured); source scales DOWN at mobile */
    line-height: 40px;
  }
  .c-approach__section-approach .c-approach__intro {
    line-height: 26px; /* source intro line-pitch tightens to ~26px @<=991 (measured) */
  }
}

/* ============================ Mobile: 375 band (<=479) ===================== */
@media (max-width: 479px) {
  .c-approach__section-approach .c-about_info__heading-wrap-5 {
    padding: 48px var(--space-16); /* 48px 16px */
  }
  .c-approach__section-approach .c-about_info__heading-wrap-7 {
    flex-direction: column;
    gap: var(--space-20);
  }
  /* items variant: single-column stack on mobile (grid height ~doubles @375) */
  .c-approach__section-approach .c-approach__max-width-1290 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40);
  }
}