/* media_row_2.css — Webflow CMS collection gallery: four-image filmstrip, no caption.
   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).
   All selectors scoped to [data-component="media_row_2"] so the shared canonical
   class names (owned by media_row / about_info / cs_banner / all_blogs) never bleed. */

/* ---------------- Section root (source: .section_media-row.py-96px.pb-0.pt-0) ----
   Computed padding is 0 40px 86.4px (pt-0 → top 0; pb-0's name is overridden by the
   captured 86.4px bottom padding — rule 1, computed value wins). The full-width
   filmstrip overflows its 688px/335px container at ≤991 and is CLIPPED at the
   section edges (source .overflow-x-clip, a dropped utility token). */
[data-component="media_row_2"] {
  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);
  padding: 0 var(--space-40) 86.4px;
  overflow-x: clip;
  /* SDC-preview UA body-margin neutraliser (Drupal resets body margin on composed pages) */
  margin: -8px;
}
.region-content [data-component="media_row_2"] {
  margin: 0;
  width: 100%;
}

/* ---------------- container-large (source: .container-large) ----------------- */
[data-component="media_row_2"] .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) is now a lifted atom
   (atom_c_media_row_media_row_wrapper) — its selector block lives in css/atoms.css. */

/* Webflow CMS-list wrapper (source: .w-dyn-list, dropped token) — pass-through box */
[data-component="media_row_2"] .c-media_row_2__list {
  display: block;
  width: 100%;
}

/* ---------------- image filmstrip row (source: .cs-media-row.w-dyn-items) -----
   LEFT-aligned filmstrip (justify-content: flex-start). At 1440 it fills the row
   exactly; at ≤991 it is wider than its container and clips at the RIGHT section
   edge (image 4 at 768, images 3-4 at 375 — confirmed from the source band).
   The row carries a FIXED layout height (349.094/180/120 — spec ## Computed Styles)
   that sets the section band height; the three landscape images (natural height)
   top-align inside it, and the taller portrait image (item 3) OVERFLOWS the row
   downward at its natural height (align-items: flex-start, no clip) — reproducing
   the source's ragged filmstrip bottom at every breakpoint. */
[data-component="media_row_2"] .c-media_row_2__cs-media-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--space-40);
  width: 100%;
  height: 349.094px;
}

/* Each gallery item box (source: .media-row-image-wrapper) is now a lifted atom
   (atom_c_media_row_media_row_image_wrapper) — its selector block, including the
   ≤991 / ≤479 responsive widths, lives in css/atoms.css. The <img> below keeps its
   height:auto so the portrait item keeps its intrinsic ratio. */
[data-component="media_row_2"] .c-media_row_2__image {
  display: block;
  width: 100%;
  height: auto;
}

/* Hidden Webflow plumbing (source: .w-dyn-empty empty-state + .hide.w-embed) —
   display:none at every breakpoint; never paints on this page. */
[data-component="media_row_2"] .c-media_row_2__empty,
[data-component="media_row_2"] .c-media_row_2__embed-hide {
  display: none;
}

/* ============================ Tablet: 768 band ============================== */
@media (max-width: 991px) {
  [data-component="media_row_2"] {
    padding: 0 var(--space-40) 111px;
  }
  [data-component="media_row_2"] .c-media_row_2__cs-media-row {
    gap: var(--space-20);
    height: 180px;
  }
  /* image-wrapper ≤991 width lives in css/atoms.css (lifted atom). */
}

/* ============================ Mobile: 375 band ============================== */
@media (max-width: 479px) {
  [data-component="media_row_2"] {
    padding: 0 var(--space-20) var(--space-40);
  }
  [data-component="media_row_2"] .c-media_row_2__cs-media-row {
    gap: var(--space-20);
    height: 120px;
  }
  /* image-wrapper ≤479 width lives in css/atoms.css (lifted atom). */
}