/* ============================================
   Component: Clients Logos
   Extracted from design-system.css
   ============================================ */
.cl-section {
  padding-top: var(--dt-space-16);
  padding-bottom: var(--dt-space-16);
  background: var(--dt-bg-alt);
  overflow: hidden;
}
.cl-wrap {
  overflow: hidden;
  margin-top: var(--dt-space-10);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.cl-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--dt-space-12);
  animation: cl-scroll 36s linear infinite;
}
.cl-track:hover {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .cl-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}
.cl-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cl-item img {
  height: 36px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.3s ease;
}
.cl-item img:hover {
  filter: grayscale(0) opacity(1);
}
[data-theme="light"] .cl-item img {
  filter: grayscale(1) opacity(0.45) brightness(0.35);
}
[data-theme="light"] .cl-item img:hover {
  filter: grayscale(0) opacity(1) brightness(1);
}
@keyframes cl-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}