/* logo_grid.css — "Trusted by" client-logo strip.
   Values from the spec ## Computed Styles + the frozen source crop:
   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' resolves through the frozen tokens).
   All selectors scoped under the component root (.c-logo_grid__section-logo-grid)
   so cross-component canonical classes (c-about_info__*, c-blog_body__*,
   c-hero__*) never leak (rule 9). */

/* ============================ Section root ================================= */
.c-logo_grid__section-logo-grid {
  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-logo_grid__section-logo-grid {
  margin: 0;
  width: 100%;
}

/* ---- Outer padding wrapper (padding-global + padding-section-xsmall) ------ */
.c-logo_grid__section-logo-grid .c-about_info__heading-wrap-5 {
  display: block;
  padding: 32px var(--space-40);
}

/* ---- Container (container-large cap) ------------------------------------- */
.c-logo_grid__section-logo-grid .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;
}

/* ---- Heading wrap (div-block-56) ----------------------------------------- */
.c-logo_grid__section-logo-grid .c-logo_grid__heading-wrap {
  display: block;
  margin: 0 0 var(--space-40);
  padding-left: var(--space-20);
}

/* ---- Eyebrow label (label-3 → c-hero__label-3) wrapping the "Trusted by" h2.
   Purple/uppercase eyebrow surface; the h2 inside carries its own grey/18px
   heading style and wins the cascade, while text-transform:uppercase inherits
   into it ("TRUSTED BY" in the source crop). No --color-* token this run for
   the raw purple (also inlined in icon_cards). ------------------------------ */
.c-logo_grid__section-logo-grid .c-hero__label-3 {
  display: inline-block;
  margin: 0 0 var(--space-20);
  padding: 0 var(--space-12) var(--space-4) 0;
  border-radius: var(--radius-20);
  font-size: 14px;
  text-transform: uppercase;
  color: rgb(105, 74, 213);
}
.c-logo_grid__section-logo-grid .c-hero__label-3 h2 {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-h2);      /* 18px */
  font-weight: var(--font-weight-h2);  /* 600 */
  line-height: var(--line-height-h2);  /* 36px */
  color: var(--color-text-h2);         /* rgb(115,115,115) */
}

/* ---- Logo grid (logo-grid-home → c-logo_grid__media-wrap) -----------------
   6 equal tracks at desktop; logos vertically centred, object-fit:contain.
   minmax(0,1fr) + child min-width:0 per grid-safety Patch D. -------------- */
.c-logo_grid__section-logo-grid .c-logo_grid__media-wrap {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-64) var(--space-40);
  align-items: center;
  width: 100%;
}
.c-logo_grid__section-logo-grid .c-logo_grid__media-wrap > * {
  min-width: 0;
}
.c-logo_grid__section-logo-grid .c-logo_grid__media {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
}

/* ============================ Tablet: 768 band ============================= */
@media (max-width: 991px) {
  .c-logo_grid__section-logo-grid .c-logo_grid__media-wrap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-64) var(--space-40);
  }
}

/* ============================ Mobile: 375 band ============================= */
@media (max-width: 479px) {
  .c-logo_grid__section-logo-grid .c-about_info__heading-wrap-5 {
    padding: var(--space-16);
  }
  .c-logo_grid__section-logo-grid .c-hero__label-3 h2 {
    font-size: var(--font-size-body); /* 16px at 375 */
  }
  .c-logo_grid__section-logo-grid .c-logo_grid__media-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 0;
  }
  .c-logo_grid__section-logo-grid .c-logo_grid__media {
    height: 30px;
  }
}