/* GRD Partners block — self-contained, no build step.
   Enqueued only where the block is used, in both the editor and the front end. */

.grd-partners {
  padding: 3.5rem 1.25rem;
  box-sizing: border-box;
}
.grd-partners *,
.grd-partners *::before,
.grd-partners *::after {
  box-sizing: border-box;
}

.grd-partners__wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.grd-partners__heading {
  margin: 0 0 1.75rem;
  text-align: center;
  /* Match the rest of the site's section headings, which are global <h2> styles:
     Mulish, weight 700, UPPERCASE, brand teal (--metallic-seaweed = #087399).
     font-size / line-height are intentionally left unset so the heading inherits
     the theme's own responsive <h2> sizing and scales exactly like every other
     section heading. The identity properties are pinned (with fallbacks) so it
     also renders correctly inside the block editor. */
  font-family: var(--font-primary, "Mulish", system-ui, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  color: rgb(var(--metallic-seaweed, 8 115 153));
}

.grd-partners__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}

.grd-partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grd-partners__logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 90px;
  max-width: 255px;
  object-fit: contain;
}

.grd-partners__placeholder {
  margin: 0;
  text-align: center;
  color: #8a8a8a;
  font-style: italic;
}

/* ---- Light variant (default): full-colour logos on a white band ---- */
.grd-partners--light {
  background: #ffffff;
}
/* Light band: heading keeps the site's brand-teal heading colour (set above). */

/* ---- Dark variant: white chips keep full-colour logos legible on a dark band ---- */
.grd-partners--dark {
  background: #00485d; /* astronaut-blue family */
}
.grd-partners--dark .grd-partners__heading {
  color: #ffffff;
}
.grd-partners--dark .grd-partners__item {
  background: #ffffff;
  border-radius: 14px;
  padding: 0.9rem 1.35rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* ---- Small screens ---- */
@media (max-width: 600px) {
  .grd-partners {
    padding: 2.25rem 1rem;
  }
  .grd-partners__grid {
    gap: 1.75rem 2rem;
  }
  .grd-partners__logo {
    max-height: 69px;
    max-width: 195px;
  }
}