/* process_diagram.css — full-width process/approach infographic band.
   Values from the spec ## Computed Styles: 1440 = base; 768 → @media(max-width:991px);
   375 → @media(max-width:479px). Run breakpoint boundary set {479,767,991,1919}.
   Shared Webflow utility classes (padding-global/padding-section-medium/
   container-large/row) canonicalized under sibling namespaces (about_info /
   accordion); every rule below is SCOPED under this component's root
   (.c-process_diagram__media-wrap) so it neither leaks nor is clobbered (rule 9).
   Typography via var(--font-*) (framework-11 E1 lock; source family already matches). */

/* ---------------- Section root (source: .section_process-diagram) ------------ */
.c-process_diagram__media-wrap {
  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 resets body margin on composed pages) */
  margin: -8px;
}
.region-content .c-process_diagram__media-wrap {
  margin: 0;
  width: 100%;
}

/* ---------------- padding-global + padding-section-medium (source outer wrap) -
   The visible-surface container: 96px vertical / 40px horizontal at 1440. */
.c-process_diagram__media-wrap .c-about_info__heading-wrap-5 {
  display: block;
  padding: 96px var(--space-40); /* 96px: no --space token this run (max --space-64) */
}

/* ---------------- container-large (source: .container-large) ----------------- */
.c-process_diagram__media-wrap .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: .row) — flex wrapper of the single image ------ */
.c-process_diagram__media-wrap .c-about_info__heading-wrap-7 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-40);
  width: 100%;
}

/* ---------------- diagram image (source: .infographic-image) ----------------- */
.c-process_diagram__media-wrap .c-process_diagram__media {
  display: block;
  width: 100%;      /* fills the full container width at every breakpoint (spec) */
  max-width: 100%;
  height: auto;     /* natural aspect — source renders 1280×570 / 688×306 / 343×153 */
}

/* ---------------- heading-only variant (/headway#1 "How it works") ----------- */
.c-process_diagram__media-wrap .c-process_diagram__heading {
  margin: 0;
  font-family: var(--font-family-display);
  color: var(--color-text-dark);
}

/* ============================ Tablet: 768 band ============================== */
@media (max-width: 991px) {
  .c-process_diagram__media-wrap .c-about_info__heading-wrap-5 {
    padding: var(--space-64) var(--space-40);
  }
  .c-process_diagram__media-wrap .c-about_info__heading-wrap-7 {
    gap: var(--space-10);
  }
}

/* ============================ Mobile: 375 band ============================== */
@media (max-width: 479px) {
  .c-process_diagram__media-wrap .c-about_info__heading-wrap-5 {
    padding: 48px var(--space-16); /* 48px: no --space token this run */
  }
  .c-process_diagram__media-wrap .c-about_info__heading-wrap-7 {
    flex-direction: column; /* visually inert with the single image child (spec) */
    gap: var(--space-20);
  }
}