/* ============================================
   OUR CLIENTS LOGO CAROUSEL
   Used on about.html. js/clients.js draws the logos twice so the loop has no jump.
============================================ */

.clients {
    background: #fff; /* pure white so the logos' white backgrounds blend in */
    border-block: 1px solid var(--line);
    text-align: center;
}

.clients .eyebrow {
    font: 600 .8rem var(--font-body);
    letter-spacing: .18em;
    color: #a50f16;
    margin: 0 0 .6rem;
    max-width: none;
}

.clients p.lead {
    margin-inline: auto;
    color: var(--stone);
}

.clients-marquee {
    margin-top: 2.5rem;
    overflow: hidden;
    touch-action: pan-y; /* page can still scroll vertically */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.clients-track {
    display: flex;
    width: max-content;
    animation: clients-slide var(--duration, 50s) linear infinite;
    will-change: transform;
}

.client-group {
    display: flex;
    flex: none;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Every logo gets the same height; width follows the logo's own proportions */
.client-logo {
    flex: none;
    padding: 0 clamp(1.2rem, 3vw, 2.4rem);
}

.client-logo img,
.client-logo a {
    display: block;
}

.client-logo img {
    height: 56px;
    width: auto;
    max-width: none;
    object-fit: contain;
    transition: transform .25s;
}

.client-logo:hover img {
    transform: scale(1.06);
}

/* The track holds two identical groups, so moving by -50% lands exactly where it started */
@keyframes clients-slide {
    to {
        transform: translateX(-50%);
    }
}

.clients-marquee:hover .clients-track,
.clients-marquee:focus-within .clients-track,
.clients-marquee.paused .clients-track {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .client-logo img {
        height: 46px;
    }
}

@media (max-width: 480px) {
    .client-logo img {
        height: 40px;
    }

    .client-logo {
        padding: 0 1rem;
    }
}

/* Reduced motion: no sliding. The strip becomes a normal swipeable row and the duplicate copy is hidden. */
@media (prefers-reduced-motion: reduce) {
    .clients-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
        touch-action: auto;
    }

    .clients-track {
        animation: none;
        width: auto;
    }

    .client-group[aria-hidden="true"] {
        display: none;
    }
}