/* ============================================================
   Logo Slider (infinite scroll)
   HTML: .logo-slider > h2 + .logo-track > .logo-set > img
   Logos are duplicated in PHP for seamless loop.
   ============================================================ */

.logo-slider {
  overflow: hidden;
  contain: inline-size;
  text-align: center;
}

.logo-track {
  display: inline-flex;
  animation: logo-scroll var(--logo-speed, 20s) linear infinite;
}

.logo-track:hover {
  animation-play-state: paused;
}

.logo-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-set img {
  height: 2.5rem;
  width: auto;
  margin-inline: var(--space-8);
  opacity: 0.4;
  transition: opacity var(--transition), filter var(--transition);
  filter: grayscale(1);
}

.logo-set img:hover {
  opacity: 1;
  filter: grayscale(0);
}

.logo-track {
  /* scroll exactly one set: -100% / number of sets */
  --scroll: calc(-100% / var(--sets, 4));
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--scroll)); }
}