/* ==========================================================================
   Блок: 7 — Партнеры
   Figma: 43:592   — десктоп 1440 × 392 (лента логотипов уходит за правый край)
          270:3398 — мобильный 375 × 523
   Комментарий дизайнера: «Предлагаю сделать анимацию — бегущая строка».
   Реализовано на чистом CSS: лента продублирована и едет влево по кругу.
   ========================================================================== */

.partners {
    /* шаг ленты вынесен в переменную: от него зависит сдвиг в @keyframes */
    --partners-gap: 24px;
    --partners-card: 200px;
    --partners-speed: 40s;

    overflow: hidden;
    padding: 96px 0;
    background-color: var(--c-grey-200);
}

/* Строка растянута на всю ширину экрана, а не ограничена контейнером:
   иначе на широких мониторах лента обрывалась бы по правому краю
   контейнера. Роль контейнера играет левое поле — оно повторяет
   отступ обычной сетки, а правого поля у блока нет вовсе */
.partners__inner {
    display: flex;
    align-items: center;
    gap: var(--partners-gap);
    padding-left: max(
        var(--container-pad),
        calc((100% - var(--container-width)) / 2 + var(--container-pad))
    );
}

.partners__head {
    flex: 0 0 424px;
}

/* Как и в блоке «О компании», описание отбито от заголовка на 24px */
/* Заголовок этого блока в макете 48px и на десктопе, и на мобильном
   (в остальных блоках H2 на мобильном уменьшен до 28px). Поэтому он
   не участвует в общем уменьшении заголовков на узких экранах */
.partners .section-head__title {
    font-size: 48px;
}

.partners .section-head__desc {
    margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Бегущая строка
   -------------------------------------------------------------------------- */

/* overflow обязателен: карточки уезжают влево и без обрезки наползали бы
   на колонку с заголовком */
.partners__marquee {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* Левый край ленты растворяется в фоне блока — прямоугольник 114px из макета */
.partners__marquee::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 114px;
    height: 100%;
    background-image: linear-gradient(
        to left,
        rgba(245, 245, 245, 0) 0%,
        #f5f5f5 100%
    );
    pointer-events: none;
}

/* Дорожка из трёх одинаковых групп: пока первая уезжает влево, её место
   занимает следующая — стык незаметен. Трёх групп хватает, чтобы лента
   не кончалась даже на самых широких экранах.
   Шаг между группами задан не gap дорожки, а правым полем самой группы —
   тогда ширина группы вместе с отступом ровно треть дорожки, и сдвиг
   на -100%/3 возвращает ленту в исходное положение без погрешности */
.partners__track {
    display: flex;
    width: max-content;
    animation: partners-scroll var(--partners-speed) linear infinite;
}

.partners__group {
    display: flex;
    gap: var(--partners-gap);
    padding-right: var(--partners-gap);
}

@keyframes partners-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% / 3));
    }
}

/* Пользователям с отключёнными анимациями лента просто стоит на месте */
@media (prefers-reduced-motion: reduce) {
    .partners__track {
        animation: none;
    }
}

.partners__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--partners-card);
    /* iOS с width:max-content у дорожки иногда сжимает флекс-карточки —
       фиксируем минимум, чтобы они не наезжали */
    min-width: var(--partners-card);
    height: var(--partners-card);
    background-color: #ffffff;
    /* iOS Safari рисует SVG с overflow="visible" (экспорт из Figma) за пределами
       <img> и логотипы наползают друг на друга. Обрезаем по карточке. */
    overflow: hidden;
}

/* Площадка под логотип — 104 × 52 из макета.
   Логотип выводится фоном, а не <img>: SVG из Figma идут с overflow="visible"
   и preserveAspectRatio="none", и iOS Safari рисует такой <img> за пределами
   бокса (логотипы наезжали/обрезались). background-size:contain вписывает SVG
   в бокс одинаково во всех браузерах, включая iOS. */
.partners__logo-img {
    width: 104px;
    height: 52px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* --------------------------------------------------------------------------
   Мобильная версия — 375 × 523
   Лента уходит под колонку с текстом
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .partners {
        --partners-gap: 16px;
        --partners-card: 144px;

        padding: 80px 0;
    }

    .partners__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    /* у секции правого поля нет, поэтому его добирает сама колонка */
    .partners__head {
        flex: 0 0 auto;
        padding-right: var(--container-pad);
    }

}