/**
 * Marquee Banner — CSS
 * Light-background logo-strip design (matches reference image)
 */

/* ── Banner container ────────────────────────────────────────────────────── */
.mb-banner {
    position: relative;
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ── Fade edges ──────────────────────────────────────────────────────────── */
.mb-has-fade::before,
.mb-has-fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.mb-has-fade::before {
    left: 0;
    background: linear-gradient( to right, #ffffff 0%, transparent 100% );
}

.mb-has-fade::after {
    right: 0;
    background: linear-gradient( to left, #ffffff 0%, transparent 100% );
}

/* ── Track ───────────────────────────────────────────────────────────────── */
.mb-track {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* ── Inner row (animated) ────────────────────────────────────────────────── */
.mb-inner {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    animation: mb-scroll-left var(--mb-duration, 20s) linear infinite;
    will-change: transform;
}

/* Direction variants */
.mb-banner[data-direction="right"] .mb-inner {
    animation-name: mb-scroll-right;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes mb-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes mb-scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ── Pause on hover ──────────────────────────────────────────────────────── */
.mb-banner.mb-pause .mb-inner,
.mb-banner.mb-pause-hover:hover .mb-inner {
    animation-play-state: paused;
}

/* ── Item ────────────────────────────────────────────────────────────────── */
.mb-item {
    display: inline-flex;
    align-items: center;
    margin-right: 64px;
    text-decoration: none;
    cursor: default;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

a.mb-item {
    cursor: pointer;
}

a.mb-item:hover {
    opacity: 0.7;
}

.mb-item-inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */
.mb-item-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    /* No filter — logos render in their original full colour */
    filter: none;
}

/* ── Text ────────────────────────────────────────────────────────────────── */
.mb-item-text {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    display: inline-block;
    font-family: inherit;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

/* ── Separator ───────────────────────────────────────────────────────────── */
.mb-separator {
    display: inline-flex;
    align-items: center;
    margin-right: 64px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    user-select: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
    .mb-banner     { height: 64px; }
    .mb-item-logo  { height: 28px; }
    .mb-item-text  { font-size: 15px; }
    .mb-item       { margin-right: 48px; }
    .mb-separator  { margin-right: 48px; }
}

@media ( max-width: 640px ) {
    .mb-banner     { height: 52px; }
    .mb-item-logo  { height: 22px; }
    .mb-item-text  { font-size: 13px; }
    .mb-item       { margin-right: 36px; }
    .mb-separator  { margin-right: 36px; }
    .mb-has-fade::before,
    .mb-has-fade::after { width: 40px; }
}