/**
 * Shared "Trusted by" brand marquee -- pairs with
 * igmarketplace/templates/igmarketplace/_shared/trusted_brands.html
 *
 * home_redesign.css and feature_page.css each still carry their own historical
 * copy of this block (pre-existing, since diverged slightly on mobile). This
 * file is the canonical copy for any new consumer of the shared template
 * partial, starting with the /hire/<slug> programmatic landing pages.
 *
 * The partial also wraps its content in .hr-container for width/padding;
 * home_redesign.css and feature_page.css each define their own page-specific
 * max-width for it. This file only provides a page-agnostic fallback for
 * pages (like the niche landing page) that already have their own outer
 * page-width wrapper (e.g. ds-container) and don't load either of those.
 */

.hr-container {
    width: 100%;
    box-sizing: border-box;
}

.hr-brands {
    background: var(--color-bg-primary);
    padding: var(--space-20) 0 0;
}

.hr-brands__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    width: 100%;
    flex-wrap: wrap;
}

.hr-brands__label {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    line-height: 24px;
    color: var(--color-text-default);
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
}

.hr-brands__marquee {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.hr-brands__logos {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    animation: hr-brands-marquee 25s linear infinite;
    width: max-content;
}

.hr-brands__logos img {
    height: 48px;
    max-height: 48px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

@keyframes hr-brands-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .hr-brands__inner {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    .hr-brands__marquee {
        width: 100%;
    }

    .hr-brands__logos {
        flex-wrap: nowrap;
        animation-duration: 20s;
    }
}