/* =====================================================================
   pxl-logo-slider.css - BR Logo Slider (continuous marquee)
   Responsive per-view via container queries. No JS required.
   ===================================================================== */

.pxl-logo-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    container-type: inline-size;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.pxl-logo-slider .pxl-logo-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: pxl-logo-marquee var(--marquee-speed, 30s) linear infinite;
}
.pxl-logo-slider.dir-right .pxl-logo-track { animation-direction: reverse; }
.pxl-logo-slider.pause-on-hover:hover .pxl-logo-track { animation-play-state: paused; }

.pxl-logo-slider .pxl-logo-item {
    flex: 0 0 auto;
    width: calc(100cqw / var(--pv, 5));
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
}
.pxl-logo-slider.has-divider .pxl-logo-item::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background: currentColor;
    opacity: .12;
}
.pxl-logo-slider .pxl-logo-item > a { display: inline-flex; align-items: center; justify-content: center; }

.pxl-logo-slider .pxl-logo-img {
    max-height: 46px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: var(--logo-opacity, .7);
    transition: opacity .35s ease, filter .35s ease;
}
.pxl-logo-slider.is-grayscale .pxl-logo-img { filter: grayscale(100%); }
.pxl-logo-slider .pxl-logo-item:hover .pxl-logo-img { opacity: 1; filter: grayscale(0%); }

/* Dark-mode logo variant (only swaps when a dark image is provided) */
.pxl-logo-slider .logo-dark { display: none; }
body.dark-mode .pxl-logo-slider .pxl-logo-item:has(.logo-dark) .logo-light { display: none; }
body.dark-mode .pxl-logo-slider .logo-dark { display: inline-block; }

@keyframes pxl-logo-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Responsive per-view (based on the slider's own width) */
@container (max-width: 991px) {
    .pxl-logo-slider .pxl-logo-item { width: calc(100cqw / var(--pv-t, 3)); }
}
@container (max-width: 575px) {
    .pxl-logo-slider .pxl-logo-item { width: calc(100cqw / var(--pv-m, 2)); }
}

/* Fallback for browsers without container-query units */
@supports not (width: 1cqw) {
    .pxl-logo-slider .pxl-logo-item { width: 20%; }
    @media (max-width: 991px) { .pxl-logo-slider .pxl-logo-item { width: 33.333%; } }
    @media (max-width: 575px) { .pxl-logo-slider .pxl-logo-item { width: 50%; } }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .pxl-logo-slider .pxl-logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
    .pxl-logo-slider { -webkit-mask-image: none; mask-image: none; }
}