.affiliations-bg {
  background-image: url("/imgs/training-award.webp");
}

.affiliations-programs,
.affiliations-next {
  background: var(--color-surface);
}

.affiliations-listed {
  background: var(--color-bg);
}

.affiliations-resources {
  background: var(--color-primary-soft);
}

.affiliations-logo-wall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.affiliation-card {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  min-width: 0;
}

.affiliation-card h3 {
  margin-bottom: 0;
  font-size: var(--font-size-md);
}

.affiliation-card p {
  margin-bottom: 0;
  max-width: 28ch;
}

.affiliation-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--space-3xl) * 2);
  padding: var(--space-md);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
}

/* Light plate so dark marks (e.g. BCSP) stay readable on dark page sections */
.affiliation-logo--on-light,
.affiliation-logo-wrap {
  background: #ffffff;
}

.affiliation-logo {
  width: auto;
  max-width: 100%;
  height: calc(var(--space-3xl) * 1.75);
  object-fit: contain;
}

.affiliations-links,
.affiliations-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 600px) {
  .affiliation-card {
    flex: 1 1 calc(50% - var(--space-md));
  }
}

@media (min-width: 900px) {
  .affiliation-card {
    flex: 1 1 calc(33.333% - var(--space-md));
  }
}