/* "Nasi partnerzy": logo strip. Rendered wrapped (.is-static); the marquee controller turns it into an endless loop. */

.partners {
    --card-w: 232px;
    --card-h: 168px;
    --card-r: 52px;
    --gap: 36px;
    --fade: clamp(48px, 13vw, 240px);
    position: relative;
    z-index: 1;
    overflow-x: clip;
    padding: clamp(4px, 1vw, 16px) 0 clamp(20px, 2.6vw, 40px);
    background: var(--c-sand);
}

.partners > .eyebrow { gap: 18px; margin: 0 16px; }

.partners__viewport {
    position: relative;
    overflow: hidden;
    margin-top: clamp(2px, .6vw, 10px);
    padding: 30px 0 54px;
    -webkit-mask: linear-gradient(90deg, #0000 0, #000 var(--fade), #000 calc(100% - var(--fade)), #0000 100%);
    mask: linear-gradient(90deg, #0000 0, #000 var(--fade), #000 calc(100% - var(--fade)), #0000 100%);
}

.partners__track {
    display: flex;
    gap: var(--gap);
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    will-change: transform;
}

.partners__item { flex: none; will-change: transform; }

.partners.is-static .partners__viewport { overflow: visible; padding: 26px 16px 40px; -webkit-mask: none; mask: none; }

.partners.is-static .partners__track {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 28px;
    width: auto;
    max-width: 1240px;
    margin: 0 auto;
}

/* ---------- card: single-colour logo, original colours on hover ---------- */

.partner-card {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--card-w);
    height: var(--card-h);
    border-radius: var(--card-r);
    background: var(--c-white);
    text-decoration: none;
    box-shadow:
        0 26px 38px -22px rgba(110, 20, 35, .30),
        0 10px 20px -14px rgba(110, 20, 35, .18),
        0 1px 2px rgba(80, 30, 25, .05);
    transition: box-shadow .35s ease, transform .35s ease;
}

.partner-card:hover,
.partner-card:focus-visible {
    transform: translateY(-3px);
    box-shadow:
        0 32px 44px -22px rgba(110, 20, 35, .36),
        0 12px 22px -14px rgba(110, 20, 35, .2),
        0 1px 2px rgba(80, 30, 25, .05);
}

.partner-card:focus-visible { outline-offset: 4px; }

.partner-card__logo { position: relative; width: 80%; height: 70%; }

.partner-card__mono,
.partner-card__color {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity .35s ease;
}

/* the logo's shape (--logo, set inline) filled with the accent colour */
.partner-card__mono {
    background: var(--c-accent);
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
}

.partner-card__color { object-fit: contain; opacity: 0; }

.partner-card:hover .partner-card__mono,
.partner-card:focus-visible .partner-card__mono { opacity: 0; }

.partner-card:hover .partner-card__color,
.partner-card:focus-visible .partner-card__color { opacity: 1; }

@media (max-width: 560px) {
    .partners { --card-w: 164px; --card-h: 120px; --card-r: 38px; --gap: 18px; --fade: 44px; }
    .partners__viewport { padding: 22px 0 42px; }
}