/* ============================================================
   24-athletes: "Athletes We've Worked With" logo strip.
   Five team logos in the old site's order. Grayscale at rest, full
   color on hover/focus (and always full color on touch screens, where
   there is no hover). Wraps cleanly on small screens.
   Scoped under .sec-24-athletes.
   ============================================================ */

.sec-24-athletes {
  background: var(--white);
  border-top: 1px solid var(--line-bone);
  border-bottom: 1px solid var(--line-bone);
  padding-block: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  text-align: center;
}

.sec-24-athletes__title {
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem);
  margin-inline: auto;
}

.sec-24-athletes__logos {
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 0.75rem + 3vw, 3.5rem) clamp(1.75rem, 1rem + 4vw, 4.5rem);
  list-style: none;
  padding: 0;
}

/* every logo sits in the same box so wide marks (UMHB, Longhorns) and tall marks (Padres) carry similar weight */
.sec-24-athletes__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(92px, 62px + 8vw, 150px);
  height: clamp(54px, 40px + 4vw, 84px);
}

.sec-24-athletes__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 300ms var(--ease-out), opacity 300ms var(--ease-out), transform 300ms var(--ease-spring);
}

.sec-24-athletes__logo:hover img,
.sec-24-athletes__logo:focus-within img {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}

/* touch devices have no hover: show the logos in full color */
@media (hover: none) {
  .sec-24-athletes__logo img {
    filter: none;
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .sec-24-athletes__logos {
    gap: 1.25rem 1.75rem;
  }
  .sec-24-athletes__logo {
    width: 40%;
    max-width: 130px;
    height: 56px;
  }
}

html.reduced-motion .sec-24-athletes__logo img {
  transition: none;
}
html.reduced-motion .sec-24-athletes__logo:hover img,
html.reduced-motion .sec-24-athletes__logo:focus-within img {
  transform: none;
}