/* CLIENT LOGO TRAIN — add logos in js/content.js */

.logo-rail {
  overflow: hidden;
  background: #ffffff;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.logo-rail .track {
  display: flex;
  width: max-content;
  animation: marquee-move 42s linear infinite;
}

.logo-rail .rail {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0.75rem;
}

.client-logo {
  display: grid;
  place-items: center;
  min-width: 140px;
  height: 72px;
  padding: 0.55rem 1rem;
  background: #ffffff;
  border: 1px solid #eee6d6;
  border-radius: 12px;
}

.client-logo img {
  max-width: 120px;
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
}

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

@keyframes marquee-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-rail .track {
    animation: none;
  }
}