/*
* Logo Marquee Block
* "Trusted by leading talent teams" strip: two looping logo rows, as in the Home Hero Block.
* Uses the DM Sans face declared by demo-request-hero-block.css when that is on the page.
*/

.logo-marquee-block {
    /* Space above the title follows the design's strip artwork, which scales with the width:
       48px from the section above to the title text at 1440, 26px at 768 (the text starts ~6px into the title box) */
    padding: min(42px, calc(3.3333vw - 6px)) 0 49.5px;
    background: #fff;
    overflow: hidden;
}
.logo-marquee-block .logo-marquee-block__title {
    margin: 0 0 4px;
    padding: 0 16px;
    font-family: "BrightHire Demo DM Sans", "BrightHire Hero DM Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif;
    /* Matches the design's strip artwork (a Figma export: DM Sans text cut, i.e. optical size 14, SemiBold):
       28px at 1440 and up, 21px on mobile where the artwork is shown 200px high, in between it scales */
    font-size: clamp(21px, calc(16px + 0.8333vw), 28px);
    font-weight: 600;
    font-optical-sizing: none;
    font-variation-settings: "opsz" 14;
    line-height: 1.3;
    letter-spacing: -0.03em;
    text-align: center;
    color: #282B60;
}
.logo-marquee-block__row {
    overflow: hidden;
}
.logo-marquee-block__track {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: logo-marquee var(--lm-duration, 48s) linear infinite;
}
.logo-marquee-block__row.is-reverse .logo-marquee-block__track {
    animation-direction: reverse;
}
/* 62px between logos; the padding is the hover area, so no dead gaps */
.logo-marquee-block__logo {
    flex: none;
    display: flex;
    margin: 0;
    padding: 18.5px 31px;
}
.logo-marquee-block__logo::before {
    display: none;
}
.logo-marquee-block__mark {
    display: block;
    height: 32px;
    aspect-ratio: var(--ratio, 3);
    background-color: #081528;
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
    transition: opacity .3s ease;
}
/* Pause on the static rows box, not on the moving logos */
.logo-marquee-block__logos:hover .logo-marquee-block__track {
    animation-play-state: paused;
}
.logo-marquee-block__logos:has(.logo-marquee-block__logo:hover) .logo-marquee-block__mark {
    opacity: .2;
}
.logo-marquee-block__logos .logo-marquee-block__logo:hover .logo-marquee-block__mark {
    opacity: 1;
}

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

@media (prefers-reduced-motion: reduce) {
    .logo-marquee-block__track {
        animation: none;
    }
    .logo-marquee-block__row {
        overflow-x: auto;
    }
}

@media (max-width: 767px) {
    .logo-marquee-block {
        padding-bottom: 40px;
    }
}
/* Mobile: the design's strip is a fixed 200px high, 36px to the title text */
@media (max-width: 600px) {
    .logo-marquee-block {
        padding-top: 31px;
    }
}
@media (max-width: 767px) {
    .logo-marquee-block__logo {
        padding: 14px 22px;
    }
    .logo-marquee-block__mark {
        height: 26px;
    }
}