/* ================================================================
   Homepage Brands block — sec-num + h-display + бесконечный маркизный
   ряд логотипов
   ================================================================ */

.brands-block {
  background: var(--paper-2);
  padding-top: 96px;
  padding-bottom: 32px;
}

.brands-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1200px;
}
.brands-title { margin: 0; }

.brands-marquee {
  margin-top: 48px;
  background: transparent;
  overflow: hidden;
  position: relative;
}

.brands-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: brandsScroll 40s linear infinite;
}
.brands-marquee:hover .brands-track { animation-play-state: paused; }

.brand-cell {
  flex: 0 0 auto;
  width: 360px;
  height: 220px;
  padding: 32px 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.brand-cell:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}

/* Сдвиг на ширину одного «оригинального» сегмента ленты (n × 360px). */
@keyframes brandsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--brands-shift, 6) * -360px)); }
}

@media (max-width: 720px) {
  .brand-cell { width: 240px; height: 160px; padding: 22px 28px; }
  @keyframes brandsScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(var(--brands-shift, 6) * -240px)); }
  }
}

/* ── Editor adjustments ────────────────────────── */
.brands-marquee--editor { overflow: auto; }
.brands-marquee--editor .brands-track { animation: none; }