/* cs_banner.css — /work/* case-study metadata banner.
   Values from the spec ## Computed Styles: 1440 = base rules;
   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
   'Plus Jakarta Sans' already resolves through the frozen tokens).
   All selectors scoped under the component root
   .c-cs_banner__section-cs-banner (rule 9 — shared canonical classes
   c-about_info__heading-wrap / c-blog_hero__media / c-careers_jointeam__cta-wrap
   never leak; they are styled here only through cs_banner-owned hooks). */

/* ---------------- Section root (source: section.section_cs-banner.py-96px) -- */
.c-cs_banner__section-cs-banner {
  display: block;
  color: var(--color-text-primary);          /* rgb(51,51,51) */
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);           /* 16px */
  font-weight: var(--font-weight-body);       /* 400 */
  line-height: var(--line-height-body);       /* 24px */
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes body margin on composed pages) */
  margin: -8px;
}
.region-content .c-cs_banner__section-cs-banner {
  margin: 0;
  width: 100%;
}

/* ---------------- container-large (flex column, centres children) ----------- */
.c-cs_banner__section-cs-banner .c-cs_banner__align-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1280px;      /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

/* ---------------- hero cover image (source: img.media._2-1) ----------------- */
.c-cs_banner__section-cs-banner .c-cs_banner__media {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;    /* locked at every breakpoint (1280x640 / 688x344 / 335x167.5) */
  object-fit: cover;
}

/* ---------------- grid wrapper (source: div.grid-info-banner.mt-20) ---------- */
.c-cs_banner__section-cs-banner .c-cs_banner__grid {
  display: grid;
  grid-template-columns: minmax(0, 372px) minmax(0, 728px); /* placeholder | pairs row */
  gap: var(--space-40);   /* 40px */
  margin: var(--space-20) 0 0; /* 20px 0 0 */
  width: 100%;
  max-width: 1140px;      /* 372 + 728 + 40 gap; narrower than the 1280 image, centred */
}
.c-cs_banner__section-cs-banner .c-cs_banner__grid > * {
  min-width: 0;
}

/* ---------------- empty placeholder slot (source: div.info-grid-placeholder) - */
.c-cs_banner__section-cs-banner .c-cs_banner__info-grid-placeholder {
  display: block;
  width: 372px;
  height: 48px;           /* visible-but-empty box in the left track at desktop */
}

/* ---------------- pairs row (source: div.justify---between) ------------------ */
.c-cs_banner__section-cs-banner .c-cs_banner__pairs-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;        /* wraps taller only when the content exceeds the row (mobile) */
}

/* ---------------- engagement inner (content-fit box) ------------------------ */
/* NOTE: .c-cs_banner__pair display:block now lives in css/atoms.css
   (lifted atom atom_c_cs_banner_pair — framework-13 WS-FE-1). */
.c-cs_banner__section-cs-banner .c-cs_banner__engagement {
  display: block;
}

/* ---------------- label paragraphs (source: p.base---medium) ---------------- */
.c-cs_banner__section-cs-banner .c-cs_banner__body {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 500;       /* base---medium */
  line-height: var(--line-height-body);  /* 24px */
  letter-spacing: -0.32px;
  color: var(--color-text-secondary);    /* rgb(115,115,115) */
}

/* NOTE: .c-cs_banner__value paragraphs (source: p.text-size-regular.text-black)
   now live in css/atoms.css (lifted atom atom_c_cs_banner_value — WS-FE-1),
   including their 991/479 font-size steps. */

/* ============================ Tablet: 768 band ============================== */
@media (max-width: 991px) {
  .c-cs_banner__section-cs-banner {
    padding: 0 var(--space-40);  /* 0 40px — gutter moves from container margin to section padding */
  }
  /* grid collapses to a single column; placeholder track drops out */
  .c-cs_banner__section-cs-banner .c-cs_banner__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .c-cs_banner__section-cs-banner .c-cs_banner__info-grid-placeholder {
    display: none;
  }
  .c-cs_banner__section-cs-banner .c-cs_banner__pairs-row {
    gap: var(--space-20);  /* 20px — column + row gap once the row wraps */
  }
  .c-cs_banner__section-cs-banner .c-cs_banner__body {
    font-size: var(--font-size-a-md);  /* 15px — value's a-md step lives in atoms.css */
  }
}

/* ============================ Mobile: 375 band ============================== */
@media (max-width: 479px) {
  .c-cs_banner__section-cs-banner {
    padding: 0 var(--space-20);  /* 0 20px */
  }
  .c-cs_banner__section-cs-banner .c-cs_banner__body {
    font-size: var(--font-size-a-sm);  /* 14px — value's a-sm step lives in atoms.css */
  }
}