/*
 * Homepage data & infrastructure trust strip.
 *
 * The strip separates current live market-data sources from the wider research
 * and analysis ecosystem so visual trust never implies a partnership or a live
 * runtime feed that does not exist. Brand artwork ships locally with Bitmomo.
 */

.bm-home-infrastructure {
  padding: 24px 0 26px;
  background: var(--bm-bg, #0b1118);
}

.bm-home-infrastructure .bm-container {
  max-width: var(--bm-public-width, 1180px);
}

.bm-home-infrastructure__row {
  display: grid;
  grid-template-columns: minmax(150px, .42fr) minmax(0, 1.58fr);
  gap: 24px clamp(28px, 5vw, 64px);
  align-items: start;
}

.bm-home-infrastructure__eyebrow,
.bm-home-infrastructure__group-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  text-transform: uppercase;
}

.bm-home-infrastructure__eyebrow {
  margin: 2px 0 0;
  color: var(--bm-text-subtle, #7f8b98);
  font-size: var(--bm-type-micro, 11px);
  line-height: 1.4;
  letter-spacing: .14em;
}

.bm-home-infrastructure__content,
.bm-home-infrastructure__group {
  min-width: 0;
}

.bm-home-infrastructure__group + .bm-home-infrastructure__group {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bm-border, rgba(255,255,255,.10));
}

.bm-home-infrastructure__group-label {
  margin: 0 0 10px;
  color: var(--bm-text-subtle, #7f8b98);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .12em;
}

.bm-home-infrastructure__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-home-infrastructure__brand {
  position: relative;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(255,255,255,.018);
  color: var(--bm-text-secondary, #b7c0ca);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.bm-home-infrastructure__mark {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  opacity: .92;
  transition: opacity .16s ease;
}

/*
 * Keep provider artwork in its source colors. Multi-tone marks must not be
 * recolored by CSS. The local Binance, TradingView and Glassnode artwork is
 * monochrome dark, so those variants sit on a small neutral light surface
 * instead of being inverted or recolored.
 */
.bm-home-infrastructure__brand.is-on-light .bm-home-infrastructure__mark {
  box-sizing: content-box;
  padding: 3px;
  border-radius: 5px;
  background: #f4f6f8;
  opacity: 1;
}

.bm-home-infrastructure__brand.is-wordmark .bm-home-infrastructure__mark {
  width: 86px;
  height: 22px;
}

.bm-home-infrastructure__brand.is-wordmark.is-on-light .bm-home-infrastructure__mark {
  padding: 2px 5px;
}

.bm-home-infrastructure__brand.is-wordmark .bm-home-infrastructure__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bm-home-infrastructure__brand:hover .bm-home-infrastructure__mark {
  opacity: 1;
}

.bm-home-infrastructure__note,
.bm-home-infrastructure__legal {
  max-width: 920px;
  color: var(--bm-text-subtle, #7f8b98);
}

.bm-home-infrastructure__note {
  margin: 17px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
}

.bm-home-infrastructure__legal {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .bm-home-infrastructure {
    padding: 20px 0 22px;
  }

  .bm-home-infrastructure__row {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .bm-home-infrastructure__brands {
    gap: 8px;
  }

  .bm-home-infrastructure__brand {
    min-height: 36px;
    padding: 6px 9px;
  }
}

@media (max-width: 420px) {
  .bm-home-infrastructure__brands {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bm-home-infrastructure__brand {
    min-width: 0;
    justify-content: flex-start;
    white-space: normal;
  }

  .bm-home-infrastructure__brand.is-wordmark .bm-home-infrastructure__mark {
    width: min(86px, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm-home-infrastructure__mark { transition: none; }
}