/**
 * Logo Strip Module - Styles
 */

.cj-logostrip {
    --cj-logo-height: 58px;
    --cj-logo-gap: 56px;
    --cj-logo-row-gap: 34px;
    --cj-logo-padding-y: 34px;
    --cj-logo-global-width: 140px;
    --cj-logo-opacity: 1;
    --cj-logo-scroll-duration: 34s;
    --cj-logo-scroll-fade: 48px;
    color: #15130f;
}

.cj-logostrip--dark {
    color: #f5f2ec;
}

.cj-logostrip__title {
    margin: 0 0 34px;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 900;
    line-height: 0.9;
    text-transform: uppercase;
}

.cj-logostrip__title-accent {
    color: #eb5d0f;
}

.cj-logostrip--title-small .cj-logostrip__title {
    font-size: clamp(30px, 4vw, 48px);
}

.cj-logostrip--title-medium .cj-logostrip__title {
    font-size: clamp(40px, 5vw, 68px);
}

.cj-logostrip--title-large .cj-logostrip__title {
    font-size: clamp(52px, 6vw, 88px);
}

.cj-logostrip--align-left .cj-logostrip__title {
    text-align: left;
}

.cj-logostrip--align-center .cj-logostrip__title {
    text-align: center;
}

.cj-logostrip--align-right .cj-logostrip__title {
    text-align: right;
}

.cj-logostrip__list {
    display: flex;
    align-items: center;
    gap: var(--cj-logo-row-gap) var(--cj-logo-gap);
    padding-block: var(--cj-logo-padding-y);
}

.cj-logostrip--wrap-no .cj-logostrip__list {
    flex-wrap: nowrap;
    overflow-x: auto;
}

.cj-logostrip--wrap-yes .cj-logostrip__list {
    flex-wrap: wrap;
}

.cj-logostrip--layout-natural.cj-logostrip--align-left .cj-logostrip__list {
    justify-content: flex-start;
}

.cj-logostrip--layout-natural.cj-logostrip--align-center .cj-logostrip__list {
    justify-content: center;
}

.cj-logostrip--layout-natural.cj-logostrip--align-right .cj-logostrip__list {
    justify-content: flex-end;
}

.cj-logostrip--layout-distributed .cj-logostrip__list {
    justify-content: space-between;
}

.cj-logostrip--layout-grid .cj-logostrip__list {
    display: grid;
    grid-template-columns: repeat(var(--cj-logo-columns, 6), minmax(0, 1fr));
    align-items: center;
    justify-items: center;
}

.cj-logostrip__marquee {
    position: relative;
    overflow: hidden;
    padding-block: var(--cj-logo-padding-y);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--cj-logo-scroll-fade),
        #000 calc(100% - var(--cj-logo-scroll-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--cj-logo-scroll-fade),
        #000 calc(100% - var(--cj-logo-scroll-fade)),
        transparent 100%
    );
}

.cj-logostrip__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: cj-logo-scroll-left var(--cj-logo-scroll-duration) linear infinite;
}

.cj-logostrip--scroll-right .cj-logostrip__track {
    animation-name: cj-logo-scroll-right;
}

.cj-logostrip--pause-yes .cj-logostrip__marquee:hover .cj-logostrip__track {
    animation-play-state: paused;
}

.cj-logostrip--layout-scroll .cj-logostrip__list {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: var(--cj-logo-row-gap) var(--cj-logo-gap);
    padding-block: 0;
    padding-right: var(--cj-logo-gap);
}

@keyframes cj-logo-scroll-left {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes cj-logo-scroll-right {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cj-logostrip__track {
        animation: none;
        transform: none;
    }
}

.cj-logostrip__item {
    flex: 0 0 auto;
    min-width: 0;
}

.cj-logostrip__link,
.cj-logostrip__frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cj-logo-item-width, auto);
    text-decoration: none;
}

.cj-logostrip--image-fixed_width .cj-logostrip__link,
.cj-logostrip--image-fixed_width .cj-logostrip__frame {
    width: var(--cj-logo-global-width);
}

.cj-logostrip__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--cj-logo-item-height, var(--cj-logo-height));
    object-fit: contain;
    opacity: var(--cj-logo-opacity);
}

.cj-logostrip--image-fixed_width .cj-logostrip__image,
.cj-logostrip--image-per_item .cj-logostrip__image {
    width: 100%;
}

@media (max-width: 900px) {
    .cj-logostrip--layout-grid .cj-logostrip__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .cj-logostrip__list,
    .cj-logostrip--layout-grid .cj-logostrip__list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 28px 34px;
    }

    .cj-logostrip__image {
        max-height: min(var(--cj-logo-height), 52px);
    }
}