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

   Design Language v2 (MoreTech craftsmanship pass): a restrained trust
   rail -- a small centred kicker label, logos normalised to a single
   quiet grayscale weight that resolves to full colour on hover, and
   real rhythm between slots. Class hooks (.mt-brands-bar,
   .mt-brands-bar__header/__title/__subtitle/__logo/__name/__grid/__slot/
   __strip/__track, the --marquee modifier, the mt-brands-bar-scroll
   keyframes) are UNCHANGED.
   ============================================================ */

.mt-brands-bar {
    padding: var(--mt-section-py-sm) 0;
    background: var(--mt-surface-alt);
    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-8);
}

.mt-brands-bar__title {
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-weight-bold);
    letter-spacing: var(--mt-tracking-widest);
    text-transform: uppercase;
    color: var(--mt-text-muted);
    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: 34px;
    width: auto;
    max-width: 132px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: opacity var(--mt-duration-normal) var(--mt-ease-default),
                filter 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 {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-2px);
}

.mt-brands-bar__name {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-weight-semibold);
    letter-spacing: var(--mt-tracking-wide);
    color: var(--mt-text-muted);
    transition: color var(--mt-duration-normal) var(--mt-ease-default);
}

.mt-brands-bar__slot a:hover .mt-brands-bar__name,
.mt-brands-bar__slot div:hover .mt-brands-bar__name {
    color: var(--mt-text-strong);
}

/* ------------------------------------------------------------
   Composition: grid -- centred, evenly-spaced. v2: hairline dividers
   between slots on wider viewports read as one deliberate rail rather
   than logos floating in space.
   ------------------------------------------------------------ */

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

.mt-brands-bar__grid .mt-brands-bar__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 0 var(--mt-space-8);
    border-left: 1px solid var(--mt-border-light);
}

.mt-brands-bar__grid .mt-brands-bar__slot:first-child {
    border-left: none;
}

@media (max-width: 767px) {
    .mt-brands-bar__grid {
        gap: var(--mt-space-6) var(--mt-space-4);
    }
    .mt-brands-bar__grid .mt-brands-bar__slot {
        min-width: 120px;
        padding: 0 var(--mt-space-4);
        border-left: none;
    }
}

/* ------------------------------------------------------------
   Composition: marquee -- infinite auto-scrolling strip, pauses on
   hover. v2: a wider, calmer gap and a softer edge mask.
   ------------------------------------------------------------ */

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

.mt-brands-bar__track {
    display: flex;
    align-items: center;
    gap: var(--mt-space-16);
    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;
    }
}