/* "Home to Top Producers" logo slider (Paul 2026-10-26). Used on home/ and join/.
   The logos scroll left on their own, in a loop. The list is written twice so the loop has no gap;
   the second copy is hidden from screen readers. Hover pauses it. People who ask their device for
   less motion get a still row they can swipe instead.
   Logos + markup: scripts/producer-logos.py (edit the list there, then run it). */
.producers-row.has-slider {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 56px;
}
.producers-slider {
  overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.producers-track {
  display: flex; align-items: center; gap: 64px; width: max-content; padding: 6px 32px;
  animation: producers-scroll var(--producers-time, 40s) linear infinite;
}
.producers-slider:hover .producers-track { animation-play-state: paused; }
.producers-row.has-slider .producers-track img {
  flex: none; width: auto; height: 64px; max-width: 200px; max-height: none;
  object-fit: contain; margin: 0; opacity: 1;
}
/* Wide wordmarks would look huge at full height: cap by width instead. */
.producers-row.has-slider .producers-track img.is-wide { height: auto; max-height: 64px; width: 200px; }
/* Round and square marks read small at the same height: give them a bit more. */
.producers-row.has-slider .producers-track img.is-square { height: 84px; }
@keyframes producers-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 1100px) {
  .producers-row.has-slider { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .producers-row.has-slider .producers-title { text-align: center; }
}
@media (max-width: 820px) {
  .producers-track { gap: 44px; }
  .producers-row.has-slider .producers-track img { height: 50px; max-width: 150px; }
  .producers-row.has-slider .producers-track img.is-wide { width: 150px; max-height: 50px; }
  .producers-row.has-slider .producers-track img.is-square { height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .producers-slider { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .producers-track { animation: none; }
  .producers-track [aria-hidden="true"] { display: none; }
}