/* ==========================================================================
   Logo marquee
   Without JS (and under reduced motion) logos sit in a still, centered,
   wrapping row. logo-marquee.js adds .is-ready, then .is-animated per row
   once it has measured the strip.
   ========================================================================== */

.logo-marquee {
    --lm-height: 48px;
    --lm-gap: 56px;
    --lm-fade: 4rem;
    position: relative;
}

.logo-marquee-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.logo-marquee-caption {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.logo-marquee-pause {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-bg);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.logo-marquee-pause:hover {
    color: var(--text-primary);
    border-color: var(--border-color-strong, var(--border-color));
}

.logo-marquee-pause:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(13, 110, 253, 0.35));
}

.logo-marquee-pause[hidden] {
    display: none;
}

/* Pause glyph (two bars) / play glyph (triangle) */
.logo-marquee-pause-icon {
    width: 0.6rem;
    height: 0.65rem;
    border-left: 0.2rem solid currentColor;
    border-right: 0.2rem solid currentColor;
}

.logo-marquee-pause[aria-pressed="true"] .logo-marquee-pause-icon {
    width: 0;
    height: 0;
    border-top: 0.35rem solid transparent;
    border-bottom: 0.35rem solid transparent;
    border-left: 0.55rem solid currentColor;
    border-right: 0;
}

.logo-marquee-row {
    position: relative;
    overflow: hidden;
}

.logo-marquee-row + .logo-marquee-row {
    margin-top: calc(var(--lm-gap) * 0.45);
}

.logo-marquee-track {
    display: flex;
    width: 100%;
}

.logo-marquee-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--lm-gap) * 0.5) var(--lm-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.logo-marquee-list[data-marquee-clone] {
    display: none;
}

/* Measured / animated layout */
.logo-marquee.is-ready .logo-marquee-track {
    width: max-content;
}

.logo-marquee.is-ready .logo-marquee-list {
    flex-wrap: nowrap;
    flex: 0 0 auto;
    width: max-content;
    justify-content: flex-start;
    padding-inline-end: var(--lm-gap);
}

.logo-marquee.is-ready .logo-marquee-row.is-static .logo-marquee-track {
    width: 100%;
}

.logo-marquee.is-ready .logo-marquee-row.is-static .logo-marquee-list {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    padding-inline-end: 0;
}

.logo-marquee-row.is-animated .logo-marquee-list[data-marquee-clone] {
    display: flex;
}

.logo-marquee-row.is-animated .logo-marquee-track {
    animation: logo-marquee-scroll var(--lm-duration, 30s) linear infinite;
    will-change: transform;
}

.logo-marquee-row.is-animated[data-direction="right"] .logo-marquee-track {
    animation-direction: reverse;
}

@keyframes logo-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--lm-distance, 50%))); }
}

.logo-marquee.is-paused .logo-marquee-track,
.logo-marquee.is-offscreen .logo-marquee-track,
.logo-marquee.pause-hover .logo-marquee-row:hover .logo-marquee-track,
.logo-marquee.pause-hover .logo-marquee-row:focus-within .logo-marquee-track {
    animation-play-state: paused;
}

.logo-marquee.has-fade .logo-marquee-row.is-animated {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--lm-fade), #000 calc(100% - var(--lm-fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--lm-fade), #000 calc(100% - var(--lm-fade)), transparent);
}

/* Logos */
.logo-marquee-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.logo-marquee-link {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm, 6px);
}

.logo-marquee-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(13, 110, 253, 0.35));
}

.logo-marquee .logo-marquee-img {
    display: block;
    height: calc(var(--lm-height) * var(--lm-scale, 1));
    width: auto;
    max-width: calc(var(--lm-height) * 4.5);
    object-fit: contain;
    transition: filter 0.2s ease, opacity 0.2s ease;
    user-select: none;
}

.logo-marquee-img.is-dark {
    display: none;
}

/* "Dark band" sections (.wb-tone-inverse) are dark in either site theme, so they use the dark-mode logos too. */
[data-theme="dark"] .logo-marquee-img.is-light,
.wb-tone-inverse .logo-marquee-img.is-light {
    display: none;
}

[data-theme="dark"] .logo-marquee-img.is-dark,
.wb-tone-inverse .logo-marquee-img.is-dark {
    display: block;
}

.lm-treat-grayscale .logo-marquee-img,
.lm-treat-grayscaleHover .logo-marquee-img {
    filter: grayscale(1);
    opacity: 0.75;
}

.lm-treat-grayscaleHover .logo-marquee-item:hover .logo-marquee-img,
.lm-treat-grayscaleHover .logo-marquee-link:focus-visible .logo-marquee-img {
    filter: none;
    opacity: 1;
}

.lm-treat-monochrome .logo-marquee-img {
    filter: grayscale(1) brightness(0);
    opacity: 0.65;
}

[data-theme="dark"] .lm-treat-monochrome .logo-marquee-img,
.wb-tone-inverse .lm-treat-monochrome .logo-marquee-img {
    filter: grayscale(1) brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee-row .logo-marquee-track {
        animation: none !important;
        transform: none !important;
    }

    .logo-marquee-row .logo-marquee-list[data-marquee-clone] {
        display: none !important;
    }
}

@media print {
    .logo-marquee-pause,
    .logo-marquee-list[data-marquee-clone] {
        display: none !important;
    }

    .logo-marquee-track {
        animation: none !important;
    }
}