/* uxaudit_about — UX Audit process section (/ux-audit).
   Breakpoint mapping (run boundary set {479,767,991,1919}): 768 →
   @media(max-width:991px); 375 → @media(max-width:479px), matching the sibling
   `services` convention. Shared wrapper canonical classes (c-about_info__*,
   c-accordion__*, c-consult_expert__*, c-hero__*) are owned by sibling
   components but their CSS is not attached in this component's isolated render —
   styled here scoped under the uxaudit_about root (rule 9). Non-tokenised source
   measures (96px, 520px, 48px, heading/method/icon metrics past the capture
   depth cap) inline with an explanatory note (no --space-96 / --space-48 /
   --container-max token this run; heading & icon metrics calibrated from the
   Phase A screenshot). */

/* ---- section root (section.section_uxaudit-about) ---- */
.c-uxaudit_about__media-wrap-3 {
  display: block;
  width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
}

/* composed-page reset — zeroes the bare-preview neutraliser (present only on
   composed pages, never in the bare preview). */
.region-content .c-uxaudit_about__media-wrap-3 { margin: 0; width: 100%; }

/* ---- padding-global + padding-section-medium (source 96px 40px @1440) ---- */
.c-uxaudit_about__media-wrap-3 .c-about_info__heading-wrap-5 {
  padding: 96px var(--space-40); /* source 96px 40px @1440; no --space-96 token this run */
}

/* ---- container-large (source max-width 1280 @1440) ---- */
.c-uxaudit_about__media-wrap-3 .c-about_info__heading-wrap {
  max-width: 1280px; /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

/* ---- steps stack (display-flex is-vertical gap-64) ---- */
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__media-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

/* ---- row (row align-top mb-96 justify---between) ---- */
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-40);
  margin: 0 0 96px; /* source mb-96 @1440; no --space-96 token this run */
}
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__row--reversed {
  flex-direction: row-reverse;
}

/* ---- text column (mt-40 position-relative max-width-520) ---- */
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__text {
  position: relative;
  flex: 0 0 auto;
  margin-top: var(--space-40); /* source mt-40 @1440 */
  width: 520px; /* source max-width-520 @1440 */
  max-width: 520px; /* source max-width-520 @1440 */
  font-weight: 500; /* typography override: text column weight 500 (spec ## Typography overrides) */
}

/* ---- step heading (h2; font metrics past the capture depth cap — calibrated) ---- */
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__heading {
  margin: 0 0 var(--space-16);
  font-family: var(--font-family-display);
  font-size: 22px; /* not captured (past depth cap); calibrated from Phase A screenshot — heading string measures ~602px @768 (1 line in the 668px column), matching a 22px advance */
  line-height: 28px; /* calibrated from Phase A screenshot */
  font-weight: 600;
  color: var(--color-text-dark);
}

/* ---- step intro (root captured color rgb(51,51,51)) ---- */
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__intro {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-text-primary);
}

/* ---- method grid (Evaluate step only; two columns, row-flow) ---- */
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-40); /* source ~40px row & column gap @768 (calibrated) */
  margin-top: var(--space-40); /* source intro→methods gap ~40px @768 (calibrated) */
}
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__methods > * { min-width: 0; }
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__method {
  font-size: var(--font-size-body); /* source body size (16px); method metrics past depth cap, calibrated from Phase A screenshot */
  line-height: var(--line-height-body);
  font-weight: 400;
  color: var(--color-text-secondary);
}
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__method-label {
  font-weight: 600;
  color: var(--color-text-dark);
}

/* ---- decorative handwritten icon annotation (metrics past depth cap — calibrated).
       Absolutely positioned within the position-relative text column so it floats
       below the copy WITHOUT inflating the column/row height (source captures it as
       an out-of-flow flourish; an in-flow icon drifts the whole vertical rhythm). ---- */
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__icon {
  position: absolute;
  top: 100%;
  left: 0;
  width: 180px; /* not captured (past depth cap); calibrated from Phase A screenshot */
  height: auto;
  margin-top: var(--space-12);
  pointer-events: none;
}

/* ---- photo (max-w-50vw → 720px @1440 viewport) ---- */
.c-uxaudit_about__media-wrap-3 .c-uxaudit_about__media {
  display: block;
  flex: 0 0 auto;
  width: 50vw; /* source max-w-50vw → 720px @1440 viewport */
  max-width: 50vw;
  height: auto;
}

/* ================= 768 band (source @768) ================= */
@media (max-width: 991px) {
  .c-uxaudit_about__media-wrap-3 .c-about_info__heading-wrap-5 {
    padding: var(--space-64) var(--space-40); /* source 64px 40px @768 */
  }
  .c-uxaudit_about__media-wrap-3 .c-uxaudit_about__media-wrap {
    gap: var(--space-20); /* source md-gap-20 @768 */
  }
  .c-uxaudit_about__media-wrap-3 .c-uxaudit_about__row {
    flex-direction: column;
    align-items: stretch;
    margin: 0 0 var(--space-64); /* source mb-64 @768 */
  }
  /* Reversed steps stack photo-above-text at <=991px (source DOM order: the
     photo-first row keeps its DOM order when the columns wrap to a stack —
     md-order-first does NOT hoist text above the photo, per Phase A screenshot). */
  .c-uxaudit_about__media-wrap-3 .c-uxaudit_about__row--reversed {
    flex-direction: column-reverse;
  }
  .c-uxaudit_about__media-wrap-3 .c-uxaudit_about__text {
    width: 100%;
    max-width: 700px; /* source md-max-width-700 @768 */
    margin-top: 0; /* source: no mt captured @768 */
  }
  .c-uxaudit_about__media-wrap-3 .c-uxaudit_about__media {
    width: 100%; /* source md-max-w-100 @768 */
    max-width: 100%;
  }
}

/* ================= 375 band (source @375) ================= */
@media (max-width: 479px) {
  .c-uxaudit_about__media-wrap-3 .c-about_info__heading-wrap-5 {
    padding: 48px var(--space-16); /* source 48px 16px @375; no --space-48 token this run */
  }
  .c-uxaudit_about__media-wrap-3 .c-uxaudit_about__media-wrap {
    gap: 0; /* source sm-gap-0 @375 (row spacing then comes from each row's mb) */
  }
  .c-uxaudit_about__media-wrap-3 .c-uxaudit_about__methods {
    grid-template-columns: minmax(0, 1fr); /* methods stack single-column on mobile */
  }
  /* Mobile heading ramps down to ~17px (2 lines @375 in the 343px column) —
     source responsive type step; at 22px it over-wraps to 3 lines and drifts the
     photo below. Metrics past the capture depth cap, calibrated from Phase A. */
  .c-uxaudit_about__media-wrap-3 .c-uxaudit_about__heading {
    font-size: 17px;
    line-height: 24px;
  }
}