/* =====================================================================
   Home / Social Proof Banner  (slug: social-proof-banner)
   Figma UK desktop 10125:20630 · mobile 10125:20986
   Dusty-blue press-logo band. Token-only; BEM, prefix hp-social-proof-banner-.
   ===================================================================== */

.hp-social-proof-banner {
  background: var(--dusty-blue);
  padding-block: var(--home-bar-pad-y); /* 20px top/bottom */
}

/* Desktop: single centred row — label + logos, 80px gaps.
   Figma frame pads 100px side; the locked .container governs width inside. */
.hp-social-proof-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--hp-spb-gap-desktop); /* 80px */
}

.hp-social-proof-banner__label {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-0);
  white-space: nowrap;
}

.hp-social-proof-banner__sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--hp-spb-gap-desktop); /* 80px between logos on desktop */
}

.hp-social-proof-banner__source {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--hp-spb-row-h); /* 24px logo row */
}

/* Logo boxes are 100px wide in Figma; heights vary per mark and centre in the row. */
.hp-social-proof-banner__logo {
  width: var(--hp-spb-logo-w); /* 100px */
  height: auto;
  object-fit: contain;
}

/* Press logos that link to an article (opens in a new tab). */
.hp-social-proof-banner__link {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s ease;
}
.hp-social-proof-banner__link:hover { opacity: 0.8; }

/* Tablet: tighten gaps so logos wrap naturally (~3-up), no overflow. */
@media (max-width: 1023.98px) {
  .hp-social-proof-banner__inner {
    gap: 24px;
  }

  .hp-social-proof-banner__sources {
    gap: 24px;
  }
}

/* Mobile: stacked — label above, logos in one centred row, 20px gaps, 20px gutter. */
@media (max-width: 767.98px) {
  .hp-social-proof-banner__inner {
    flex-direction: column;
    gap: var(--hp-spb-gap-mobile); /* 10px label -> logos */
    padding-inline: var(--pad-mobile); /* 20px gutters @ 390 */
  }

  .hp-social-proof-banner__sources {
    width: 100%;
    flex-wrap: nowrap;
    gap: var(--hp-spb-logo-gap-mobile); /* 20px between logos */
  }
}