/**
 * Companies Carousel Two-Line — стили карусели компаний (двухрядная).
 *
 * Шорткод: [ca_ms_display_companies_carousel_twoline]
 * Источник: modules/display/ca_ms_display_companies_carousel_twoline.php
 *
 * @package CA_Display
 * @version 2.5.0
 */

/* ==========================================================================
   1. CSS-переменные и контейнер
   ========================================================================== */
.ca-cc { --logo-h: 64px; --gap: 24px; --dur-top: 40s; --dur-bot: 50s; --row-gap: 16px; --loop: 400px; }
.ca-cc { position: relative; display: grid; gap: var(--row-gap); }
.ca-cc__row { overflow: hidden; }

/* ==========================================================================
   2. Трек и элементы
   ========================================================================== */
.ca-cc__track { display: flex; align-items: center; gap: 0; will-change: transform; animation-play-state: paused; /* пауза до инициализации */ }
.ca-cc.is-ready .ca-cc__track { animation-play-state: running; }
.ca-cc__list { display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.ca-cc__item { display: flex; align-items: center; }
.ca-cc__unit { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border: 1px solid rgba(0,0,0,.10); border-radius: 4px; line-height: 1; }
.ca-cc__name { white-space: nowrap; font-size: 16px; }
.ca-cc__logo { max-height: var(--logo-h); height: auto; width: auto; display: block; filter: var(--gray, none); }

/* ==========================================================================
   3. Ссылки
   ========================================================================== */
.ca-cc a { text-decoration: none; opacity: .5; color: #000; transition: opacity .15s ease-in; }
.ca-cc a:hover { opacity: 1; }
.ca-cc a:hover .ca-cc__logo { filter: none; }

/* ==========================================================================
   4. Анимации в px через --loop
   ========================================================================== */
@keyframes ca-cc-left {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--loop))); }
}
@keyframes ca-cc-right {
    from { transform: translateX(calc(-1 * var(--loop))); }
    to   { transform: translateX(0); }
}
.ca-cc__row--top .ca-cc__track { animation: ca-cc-right var(--dur-top) linear infinite; }
.ca-cc__row--bot .ca-cc__track { animation: ca-cc-left  var(--dur-bot) linear infinite; }

/* ==========================================================================
   5. Responsive
   ========================================================================== */
@media (max-width: 480px) {
.ca-cc { --logo-h: calc(var(--logo-h) * .8); --gap: calc(var(--gap) * .8); }
.ca-cc__name { font-size: 13px; }
}