/* ==========================================================================
   Блок «нам доверяют» — marquee-карусель логотипов клиентов.
   Контекст: код страницы (task-0047/0048). Все селекторы scoped по .sb-clients.
   Плитка: фикс. ширина/высота — размеры логотипов не влияют на высоту блока.
   ========================================================================== */

.sb-clients {
  overflow: hidden; /* маска-градиенты + бегущая лента не должны рождать скролл */
}

.sb-clients__head {
  margin-bottom: var(--space-10);
}

.sb-clients__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem); /* компактнее секционных гигантов: это служебный блок */
  font-weight: 650;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-align: left;
  color: var(--color-primary);
}

.sb-clients__note {
  margin: 0;
  font-size: var(--fs-md, 1.125rem);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
}

/* --- вьюпорт ленты: срезаем края градиентной маской ----------------------- */
.sb-clients__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}

/* --- трек: бесконечный ход, ровно -50% (каждая плитка несёт свой отступ) --- */
.sb-clients__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: sb-clients-run 44s linear infinite;
  will-change: transform;
}

@keyframes sb-clients-run {
  to { transform: translateX(-50%); }
}

/* --- плитка: фиксированная рамка, лого вписан внутрь ---------------------- */
.sb-clients__tile {
  flex: 0 0 auto;
  width: clamp(180px, 20vw, 252px);
  height: clamp(88px, 10vw, 116px);
  margin-right: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  transition: background 0.25s ease;
}

.sb-clients__tile:hover {
  background: var(--color-neutral-200);
}

.sb-clients__tile img {
  max-width: 72%;
  max-height: 56%;
  width: auto;
  height: auto;
}

/* --- пауза при наведении (только там, где есть hover) --------------------- */
@media (hover: hover) {
  .sb-clients__viewport:hover .sb-clients__track {
    animation-play-state: paused;
  }
}

/* --- доступность: reduced motion → обычная горизонтальная прокрутка ------- */
@media (prefers-reduced-motion: reduce) {
  .sb-clients__track {
    animation: none;
  }
  .sb-clients__viewport {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sb-clients__viewport::-webkit-scrollbar {
    display: none;
  }
  /* дубль набора не нужен: лента становится прокручиваемым списком */
  .sb-clients__tile--dup {
    display: none;
  }
}