/* Shared client logo band. The repeated group is decorative; each group owns
   its trailing gap so translating half the track produces a seamless loop. */
.clients__heading {
  text-align: center;
  font-size: var(--font-size-heading-h3);
  margin-bottom: var(--space-scale-8);
}

.clients__bar {
  display: block;
  min-width: 0;
  overflow: clip;
}

.clients__bar:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-scale-sm);
}

.clients__track {
  display: flex;
  width: max-content;
  min-width: 200%;
}

.clients__group {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-scale-8);
  padding-inline-end: var(--space-scale-8);
}

.clients__logo {
  display: flex;
  flex: 0 0 var(--space-scale-32);
  align-items: center;
  justify-content: center;
  padding: var(--space-scale-2);
  min-width: 0;
}

.clients__logo img {
  max-height: var(--space-scale-10);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: var(--opacity-level-disabled);
  user-select: none;
  -webkit-user-drag: none;
  transition: filter var(--motion-duration-fast) var(--motion-easing),
              opacity var(--motion-duration-fast) var(--motion-easing);
}

.clients__logo img[src$=".svg"] { height: var(--space-scale-10); }
.clients__logo:hover img { filter: grayscale(0%); opacity: 1; }

@media (min-width: 1024px) {
  .clients__group {
    gap: var(--space-scale-12);
    padding-inline-end: var(--space-scale-12);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .clients__track {
    animation: clients-marquee var(--motion-duration-marquee) linear infinite;
  }

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

@media (prefers-reduced-motion: reduce) {
  .clients__bar { overflow-x: auto; overflow-y: hidden; }
  .clients__track { min-width: 100%; animation: none; transform: none; }
  .clients__group[aria-hidden="true"] { display: none; }
}

@media print {
  .clients__bar { overflow: visible; }
  .clients__track { width: 100%; min-width: 0; animation: none; transform: none; }
  .clients__group { flex-wrap: wrap; padding: 0; }
  .clients__group[aria-hidden="true"] { display: none; }
}