/* media_row.css — four-image filmstrip band + single caption slot.
   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}.
   Typography via var(--font-*) (framework-11 E1 lock; source family already matches). */

/* ---------------- Section root (source: .section_media-row.overflow-x-clip) --- */
.c-media_row__section-media-row {
  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);
  /* source .overflow-x-clip (dropped utility token) — the filmstrip overflows
     its container at ≤991 and must be clipped, not scrolled, to match source. */
  overflow-x: clip;
  /* SDC-preview UA body-margin neutraliser (Drupal resets body margin on composed pages) */
  margin: -8px;
}
.region-content .c-media_row__section-media-row {
  margin: 0;
  width: 100%;
}

/* ---------------- padding-global (source: .padding-global) ------------------- */
.c-media_row__section-media-row .c-about_info__heading-wrap-5 {
  display: block;
  padding: 0 var(--space-40);
}

/* ---------------- container-large (source: .container-large) ----------------- */
.c-media_row__section-media-row .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;
}

/* wrapper (source: .media-row_wrapper) — styles owned by css/atoms.css
   (atom atom_c_media_row_media_row_wrapper, WS-FE-1 lift); embedded in .twig. */

/* hidden Webflow embed slot (source: .hide.w-embed) — never renders visually */
.c-media_row__section-media-row .c-media_row__embed-hide {
  display: none;
}

/* ---------------- image filmstrip row (source: .media-row) -------------------
   The row has a FIXED height (so the caption row below sits at a stable offset);
   images keep NATURAL aspect (image 3 is portrait and overflows the row
   downward, visible next to the caption). The full-width filmstrip is CENTERED
   and clipped at the section edges at ≤991 (image 1 clips left, image 4 clips
   right) — justify-content: center is inert at 1440 where it fills exactly. */
.c-media_row__section-media-row .c-media_row__media-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-40);
  width: 100%;
  height: 213.328px;
}
/* .media-row-image-wrapper styles owned by css/atoms.css
   (atom atom_c_media_row_media_row_image_wrapper, WS-FE-1 lift); embedded in .twig. */
.c-media_row__section-media-row .c-media_row__media-row-image {
  display: block;
  width: 100%;
  height: auto; /* natural aspect — no crop; per-image heights vary (spec's uniform height was a capture generalization) */
}

/* Single-image media_row: a lone wide image (e.g. a full-width process/flow
   diagram mis-modelled as a one-cell filmstrip) must NOT be squeezed into the
   fixed 213px filmstrip height. Drop the fixed height and let the one image span
   the full container at natural aspect. Framework-general — keyed purely on the
   single-child count, so multi-image filmstrips are unaffected. */
.c-media_row__section-media-row .c-media_row__media-row:has(> *:only-child) {
  height: auto;
}
.c-media_row__section-media-row .c-media_row__media-row:has(> *:only-child) > * {
  /* override the atom's fixed `flex: 0 0 290px` filmstrip cell (css/atoms.css) —
     flex-basis, not width, governs the cell size in this flex row */
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  max-width: 1280px;
}
.c-media_row__section-media-row .c-media_row__media-row:has(> *:only-child) .c-media_row__media-row-image {
  width: 100%;
  height: auto;
}

/* ---------------- caption row (source: .banner-content-row) ------------------ */
.c-media_row__section-media-row .c-media_row__banner-content-row {
  display: flex;
  justify-content: center; /* mirrors the image row so the caption box (index 1) stays under image 2 */
  align-items: flex-start;
  gap: var(--space-40);
  margin-top: 57.6px;
  width: 100%;
}
/* .special-text-box styles owned by css/atoms.css
   (atom atom_c_media_row_special_text_box, WS-FE-1 lift); embedded in .twig.
   The .box-w-0 modifier below stays inline — its rules are style-divergent. */
/* index-0 zero-width spacer (source: .box-w-0) — height 0, offsets the caption */
.c-media_row__section-media-row .c-media_row__box-w-0 {
  height: 0;
}

/* caption text — section-root type inherited (spec: no override; Plus Jakarta Sans) */
.c-media_row__section-media-row .c-media_row__caption-text {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  text-transform: uppercase; /* source renders the caption uppercase (Phase A screenshot); case is not typography-locked */
}
/* decorative underline flourish (source: Vectors-Wrapper.svg, decorative_only) */
.c-media_row__section-media-row .c-media_row__caption-underline {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: var(--space-8);
  background-image: url('underline.svg');
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
}

/* trailing spacer (source: .spacer-huge--custom — about_index; section−padding-global delta) */
.c-media_row__section-media-row .c-media_row__spacer-huge-custom {
  height: 96px;
}

/* ============================ Tablet: 768 band ============================== */
@media (max-width: 991px) {
  .c-media_row__section-media-row .c-media_row__media-row {
    gap: var(--space-20);
    height: 180px;
  }
  /* .media-row-image-wrapper + .special-text-box @991 owned by css/atoms.css (WS-FE-1 lift) */
  .c-media_row__section-media-row .c-media_row__banner-content-row {
    gap: var(--space-20);
    margin-top: 30.72px;
  }
  .c-media_row__section-media-row .c-media_row__box-w-0 {
    width: 240px;
    min-width: 240px;
  }
  .c-media_row__section-media-row .c-media_row__spacer-huge-custom {
    height: var(--space-64);
  }
}

/* ============================ Mobile: 375 band ============================== */
@media (max-width: 479px) {
  .c-media_row__section-media-row .c-about_info__heading-wrap-5 {
    padding: 0 var(--space-16);
  }
  .c-media_row__section-media-row .c-media_row__media-row {
    gap: var(--space-20);
    height: 120px;
  }
  /* .media-row-image-wrapper @479 (160px) owned by css/atoms.css (WS-FE-1 lift) */
  .c-media_row__section-media-row .c-media_row__banner-content-row {
    gap: var(--space-20);
    margin-top: var(--space-15);
  }
  /* caption slot stays 240px wide even though images are 160px — the
     .special-text-box @479 (240px) rule is owned by css/atoms.css (WS-FE-1 lift) */
  /* index-0 spacer fully collapses (spec 375: width/max-width/min-width all 0) */
  .c-media_row__section-media-row .c-media_row__box-w-0 {
    flex: 0 0 0;
    width: 0;
    max-width: 0;
    min-width: 0;
  }
  .c-media_row__section-media-row .c-media_row__spacer-huge-custom {
    height: 56px;
  }
}