/* Логотипы клиентов (views/constructor/logos.php). Виды: grid (ячейки), marquee (бегущая строка на CSS). */
.cb-logos {--cb-logos-gap: clamp(12px, 1.6vw, 20px); --cb-logos-h: 60px}
.cb-logos__list {display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cb-logos-gap); margin: 0; padding: 0; list-style: none}
.cb-logos__item {display: flex; min-width: 0; margin: 0; padding: 0}
.cb-logos__item::before, .cb-logos__item::marker {content: none}

/* Ячейка: логотип по центру, одинаковая высота */
.cb-logos__cell {display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; min-height: 116px; padding: 24px 28px; border: 1px solid var(--cb-card-border); border-radius: var(--cb-radius); background: var(--cb-card-bg); transition: border-color var(--cb-transition), box-shadow var(--cb-transition), transform var(--cb-transition)}
.cb .cb-logos__cell picture {display: contents}
.cb .cb-logos__img {display: block; width: auto; height: auto; max-width: 100%; max-height: var(--cb-logos-h); object-fit: contain; transition: filter .3s ease, opacity .3s ease}
/* Белый фон jpg-логотипов сливается с ячейкой */
.cb-tone--light .cb-logos__img {mix-blend-mode: multiply}
.cb-logos__cell--link:hover {border-color: var(--cb-accent); box-shadow: var(--cb-shadow-hover); transform: translateY(-2px)}

/* Серые логотипы — цветные при наведении и фокусе */
.cb-logos--gray .cb-logos__img {filter: grayscale(1); opacity: .6}
.cb-logos--gray .cb-logos__cell:hover .cb-logos__img, .cb-logos--gray .cb-logos__cell:focus-visible .cb-logos__img {filter: none; opacity: 1}

/* Тёмный фон: логотипы на светлых плашках (у большинства логотипов тёмные буквы) */
.cb-tone--dark .cb-logos__cell {background: #fff; border-color: transparent}
.cb-tone--dark .cb-logos__cell--link:hover {border-color: transparent; box-shadow: 0 12px 30px rgba(0, 0, 0, .28)}
.cb-tone--dark .cb-logos__img {mix-blend-mode: multiply}
.cb-tone--dark .cb-logos--gray .cb-logos__img {opacity: .7}

/* Сетка: N в ряд, неполный ряд — по центру */
.cb-logos--grid .cb-logos__list {--cb-logos-per: 5}
.cb-logos--grid .cb-logos__list--3 {--cb-logos-per: 3}
.cb-logos--grid .cb-logos__list--4 {--cb-logos-per: 4}
.cb-logos--grid .cb-logos__list--6 {--cb-logos-per: 6}
.cb-logos--grid .cb-logos__item {flex: 0 0 calc((100% - (var(--cb-logos-per) - 1) * var(--cb-logos-gap)) / var(--cb-logos-per))}
.cb-logos--grid .cb-logos__list--6 .cb-logos__cell {padding-inline: 20px}

/* Бегущая строка: два одинаковых списка подряд едут на ширину одного */
.cb-logos--marquee {--cb-logos-gap: clamp(16px, 2.4vw, 32px); display: flex; gap: var(--cb-logos-gap); overflow: hidden; padding-block: 4px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)}
.cb-logos--marquee .cb-logos__list {flex: 0 0 auto; flex-wrap: nowrap; justify-content: space-around; min-width: 100%; animation: cb-logos-marquee var(--cb-logos-duration, 30s) linear infinite}
.cb-logos--marquee .cb-logos__item {flex: 0 0 auto}
.cb-logos--marquee .cb-logos__cell {width: clamp(150px, 15vw, 200px); min-height: 92px; padding: 16px 20px; border-color: transparent; background: transparent}
.cb-tone--dark .cb-logos--marquee .cb-logos__cell {background: #fff}
.cb-logos--marquee:hover .cb-logos__list, .cb-logos--marquee:focus-within .cb-logos__list {animation-play-state: paused}
@keyframes cb-logos-marquee {
    to {transform: translateX(calc(-100% - var(--cb-logos-gap)))}
}

@media (max-width: 1199px) {
    .cb-logos--grid .cb-logos__list--6 {--cb-logos-per: 5}
}
@media (max-width: 991px) {
    .cb-logos--grid .cb-logos__list--4, .cb-logos--grid .cb-logos__list--5, .cb-logos--grid .cb-logos__list--6 {--cb-logos-per: 3}
}
@media (max-width: 575px) {
    .cb-logos {--cb-logos-gap: 10px; --cb-logos-h: 44px}
    .cb-logos--grid .cb-logos__list {--cb-logos-per: 2}
    .cb-logos__cell {min-height: 88px; padding: 16px}
    .cb-logos--marquee .cb-logos__cell {width: 132px; min-height: 76px; padding: 12px}
}
@media (prefers-reduced-motion: reduce) {
    .cb-logos--marquee {display: block; overflow: visible; -webkit-mask-image: none; mask-image: none}
    .cb-logos--marquee .cb-logos__list {flex-wrap: wrap; justify-content: center; min-width: 0; animation: none}
    .cb-logos--marquee .cb-logos__list[aria-hidden="true"] {display: none}
}
@media print {
    .cb-logos--marquee .cb-logos__list {animation: none}
    .cb-logos--marquee .cb-logos__list[aria-hidden="true"] {display: none}
}