/* =========================================================
   Sponsors
   ========================================================= */

.sponsors-section {
  display: flex;
  padding-top: var(--navbar-height);
  min-height: 100vh;
}
.sponsors-section .section-title {
  color: #f4f4f4;
}

.sponsors-title {
  position: relative;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}
.sponsors-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #877348;
}

.sponsor {
  margin-bottom: 1.5em;
}
.sponsors-title-monsoon::after {
  background-color: var(--tier-monsoon);
}
.sponsors-title-tempest::after {
  background-color: var(--tier-tempest);
}
.sponsors-title-sandstorm::after {
  background-color: var(--tier-sandstorm);
}
.sponsors-title-dustdevil::after {
  background-color: var(--tier-dustdevil);
}
.sponsors-title-microburst::after {
  background-color: var(--tier-microburst);
}

.sponsors {
  display: flex;
  flex-wrap: wrap; /* allow wrapping to new lines */
  justify-content: center; /* center items horizontally */
  align-items: center; /* center items vertically in a row */
  gap: 2rem; /* space between sponsor blocks */
  margin: 2rem auto;
  max-width: 1200px; /* optional: keep them from stretching too wide */
}

.sponsor {
  flex: 0 1 auto; /* flexible width but don’t grow too large */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sponsor img {
  height: auto;
  width: auto;
  object-fit: contain;
}

/* Tier-based scaling */
.sponsors.monsoon img {
  max-height: 200px;
  max-width: 400px;
}
.sponsor.tempest img {
  max-height: 180px;
  max-width: 360px;
}
.sponsor.sandstorm img {
  max-height: 160px;
  max-width: 320px;
}
.sponsor.dustdevil img {
  max-height: 140px;
  max-width: 280px;
}
.sponsor.microburst img {
  max-height: 120px;
  max-width: 240px;
}
.sponsor-tier {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* On small screens: stack logos in a column */
@media (max-width: 600px) {
  .sponsors {
    flex-direction: column;
    gap: 1.5rem;
  }
}
/*
.sponsors {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.sponsor-image {
  max-width: 300px;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .sponsors {
    flex-direction: column;
  }
  .sponsor-image {
    max-width: 200px;
  }
}
*/