/* ============================================================
   MORETECH -- BRANDS BAR
   First-party markup + CSS (see partials/brands_bar.php's own header for
   the full rationale) -- not derived from the shared platform's own
   brands-bar.css. Every recurring visual value is a real --mt-* token.
   One shared root (.mt-brands-bar), one shared slot/logo/name convention
   across both compositions.
   ============================================================ */

.mt-brands-bar {
    padding: var(--mt-section-py-sm) 0;
    background: var(--mt-surface-sunken);
    border-top: 1px solid var(--mt-border-light);
    border-bottom: 1px solid var(--mt-border-light);
    font-family: var(--mt-font-sans);
    overflow: hidden;
}

.mt-brands-bar__header {
    text-align: center;
    margin-bottom: var(--mt-space-6);
}

.mt-brands-bar__title {
    font-size: var(--mt-text-xl);
    font-weight: var(--mt-weight-bold);
    color: var(--mt-text-strong);
    letter-spacing: var(--mt-tracking-tight);
    margin: 0 0 var(--mt-space-2);
}

.mt-brands-bar__subtitle {
    font-size: var(--mt-text-sm);
    color: var(--mt-text-muted);
    margin: 0;
}

.mt-brands-bar__logo {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity var(--mt-duration-normal) var(--mt-ease-default),
                transform var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-brands-bar__slot a:hover .mt-brands-bar__logo,
.mt-brands-bar__slot div:hover .mt-brands-bar__logo {
    opacity: 1;
    transform: scale(1.05);
}

.mt-brands-bar__name {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    color: var(--mt-text-muted);
}

/* ------------------------------------------------------------
   Composition: grid -- centered, evenly-spaced logo grid. The
   right default for a typical, curated partner count.
   ------------------------------------------------------------ */

.mt-brands-bar__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--mt-space-8) var(--mt-space-10);
}

.mt-brands-bar__grid .mt-brands-bar__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

@media (max-width: 575px) {
    .mt-brands-bar__grid {
        gap: var(--mt-space-5) var(--mt-space-6);
    }
}

/* ------------------------------------------------------------
   Composition: marquee -- an infinite auto-scrolling logo strip,
   the real, commonly-used "trusted by" treatment for many logos.
   Pauses on hover. Track is the real items[] duplicated once for
   a seamless loop (the duplicate copy is aria-hidden).
   ------------------------------------------------------------ */

.mt-brands-bar--marquee .mt-brands-bar__strip {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mt-brands-bar__track {
    display: flex;
    align-items: center;
    gap: var(--mt-space-10);
    width: max-content;
    animation-name: mt-brands-bar-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.mt-brands-bar__track:hover {
    animation-play-state: paused;
}

.mt-brands-bar--marquee .mt-brands-bar__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@keyframes mt-brands-bar-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .mt-brands-bar__track {
        animation: none;
    }
}