/* ============================================================
   Partner logo marquee (home — index-1/Section3).

   Loaded after main.css. Spacing lives here rather than in the
   component's inline styles so media queries can actually reach it:
   inline gap/margin can't be overridden, which left phones showing
   ~1.5 logos in a sea of white space.

   Sources are pre-trimmed of their dead space (partners/trimmed/), and
   the artwork ranges from near-black to near-white, so it's flattened to
   one grey silhouette to keep the row even — inverted for dark mode.
   ============================================================ */

.at-brand-area .carouselTicker__list {
    gap: 0 2rem;
}

.at-brand-area .carouselTicker__item {
    margin: 0 1.5rem;
}

.at-brand-area .brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 52px;
    padding: 6px 12px;
}

.at-brand-area .brand-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
    filter: grayscale(1) brightness(0) opacity(0.55);
    transition: filter 0.3s ease;
}

.at-brand-area .brand-item:hover img {
    filter: grayscale(1) brightness(0) opacity(0.85);
}

[data-bs-theme=dark] .at-brand-area .brand-item img {
    filter: grayscale(1) brightness(0) invert(1) opacity(0.6);
}

[data-bs-theme=dark] .at-brand-area .brand-item:hover img {
    filter: grayscale(1) brightness(0) invert(1) opacity(0.9);
}

/* ---- tablets: tighten the run ------------------------------ */
@media (max-width: 991.98px) {
    .at-brand-area .carouselTicker__list {
        gap: 0 1rem;
    }

    .at-brand-area .carouselTicker__item {
        margin: 0 0.75rem;
    }

    .at-brand-area .brand-item {
        width: 132px;
        height: 46px;
    }
}

/* ---- phones: three logos in view at 390px ------------------- */
@media (max-width: 575.98px) {
    .at-brand-area .carouselTicker__list {
        gap: 0 0.5rem;
    }

    .at-brand-area .carouselTicker__item {
        margin: 0 0.5rem;
    }

    .at-brand-area .brand-item {
        width: 104px;
        height: 38px;
    }
}