/* uxaudit_diagram.css — "UX Audit Process" heading + single full-width diagram image.
   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/section-header/mb-52px/heading-style-h3) are canonicalized
   under sibling namespaces (about_info / accordion); every rule below is SCOPED
   under this component's root (.c-uxaudit_diagram__section-uxaudit-diagram) so it
   neither leaks nor is clobbered (rule 9). Typography families via var(--font-*)
   (framework-11 E1 lock; weight/size/line-height/letter-spacing are literals per spec). */

/* ---------------- Section root (source: .section_uxaudit-diagram) ------------ */
.c-uxaudit_diagram__section-uxaudit-diagram {
  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-uxaudit_diagram__section-uxaudit-diagram {
  margin: 0;
  width: 100%;
}

/* ---------------- padding-global + padding-section-medium (outer wrap) --------
   The visible-surface container: 96px vertical / 40px horizontal at 1440. */
.c-uxaudit_diagram__section-uxaudit-diagram .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) ------------------
   Capped content column centred with the shared centering primitive; the
   40px side margin the source recorded is reproduced by margin-inline:auto
   against the padding-global side gutter (1360 - 1280 = 80, /2 = 40). */
.c-uxaudit_diagram__section-uxaudit-diagram .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 (heading row + image row) - */
.c-uxaudit_diagram__section-uxaudit-diagram .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%;
}

/* ---------------- section-header + mb-52px (heading wrap) ---------------------
   width:100% / max-width:640px flex item: fills to the 640px cap at 1440/768,
   collapses to the row's 343px at 375 (spec-recorded widths 640/640/343). */
.c-uxaudit_diagram__section-uxaudit-diagram .c-accordion__heading-wrap-3 {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 0 52px; /* mb-52px; 52px: no --space token this run */
}

/* ---------------- heading (source: h2.heading-style-h3) ----------------------- */
.c-uxaudit_diagram__section-uxaudit-diagram .c-accordion__heading {
  display: block;
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.5px;
}

/* ---------------- diagram image (source: img, no class) ----------------------- */
.c-uxaudit_diagram__section-uxaudit-diagram .c-uxaudit_diagram__image {
  display: block;
  width: 100%;      /* fills the full container width at every breakpoint (spec) */
  max-width: 100%;
  height: auto;     /* natural aspect — source renders 1280×798 / 688×429 / 343×214 */
}

/* ============================ Tablet: 768 band ============================== */
@media (max-width: 991px) {
  .c-uxaudit_diagram__section-uxaudit-diagram .c-about_info__heading-wrap-5 {
    padding: var(--space-64) var(--space-40);
  }
  .c-uxaudit_diagram__section-uxaudit-diagram .c-about_info__heading-wrap-7 {
    gap: var(--space-10);
  }
  .c-uxaudit_diagram__section-uxaudit-diagram .c-accordion__heading-wrap-3 {
    margin: 0 0 32px; /* 32px: no --space token this run */
  }
  .c-uxaudit_diagram__section-uxaudit-diagram .c-accordion__heading {
    line-height: 40px; /* font-size 32px / letter-spacing -1.5px unchanged from 1440 */
  }
}

/* ============================ Mobile: 375 band ============================== */
@media (max-width: 479px) {
  .c-uxaudit_diagram__section-uxaudit-diagram .c-about_info__heading-wrap-5 {
    padding: 48px var(--space-16); /* 48px: no --space token this run */
  }
  .c-uxaudit_diagram__section-uxaudit-diagram .c-about_info__heading-wrap-7 {
    flex-direction: column; /* visually inert — each row has a single child (spec) */
    gap: var(--space-20);
  }
  .c-uxaudit_diagram__section-uxaudit-diagram .c-accordion__heading {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -1px;
  }
}