/* ================================================================
 * Block: Logo strip — logo_strip (nieskończony slider logotypów)
 * Design: Figma "Growston NEW" §3 Trust logos (node 15:115)
 * Tokens: assets/css/growston-tokens.css (--g-*)
 * ================================================================ */

.g-logos {
    background: var(--g-color-white);
    padding-block: var(--g-space-9); /* 100px */
    overflow: hidden;
}

.g-logos__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--g-space-6); /* 30px */
    padding-inline: var(--g-pad-x);
}

.g-logos__label {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-h3); /* 35px */
    line-height: 1;
    color: var(--g-color-ink);
    text-align: center;
    margin: 0;
}

.g-logos__label-accent {
    color: var(--g-color-cyan);
}

/* ── Slider (marquee) ── */
.g-logos__viewport {
    width: 100%;
    margin-top: var(--g-space-6); /* 30px — odstęp nagłówek → slider (Figma: gap-[30px]) */
    overflow: hidden;
}

.g-logos__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: g-logos-scroll var(--g-logos-speed, 30s) linear infinite;
    will-change: transform;
}

.g-logos__group {
    display: flex;
    align-items: center;
}

.g-logos__item {
    flex: 0 0 auto;
    width: var(--g-logo-card); /* 187px */
    aspect-ratio: 1;
    margin-inline: calc(var(--g-space-12) / 2); /* 48px odstep między kartami */
    background: var(--g-color-card); /* #FBFBFB */
    border-radius: var(--g-radius-tile); /* 20px */
    padding: var(--g-space-6); /* 30px */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.g-logos__item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.g-logos__wordmark {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-body);
    color: var(--g-color-ink);
}

@keyframes g-logos-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Dostępność: zatrzymaj animację dla użytkowników z preferencją redukcji ruchu. */
@media (prefers-reduced-motion: reduce) {
    .g-logos__track {
        animation: none;
    }
}