/* Client logos band (home page), in the two colours of the old counters band:
   blue #067EBA on the left half, light blue #B7D0EE on the right half.
   js/tc-clients.js turns the static row into an endless scroll: it duplicates the
   logos and adds a second layer clipped to the right half, so each logo changes
   colour as it crosses the middle. Without JavaScript, or with reduced motion,
   the logos stay as a centred static row on the blue band. */
.tc-clients {
    margin: 45px 0;
}

.tc-clients .section-header {
    margin-bottom: 35px;
}

.tc-clients__band {
    --tc-gap: 34px;     /* half the space between two logos */
    --tc-scale: 1;
    --tc-pad: 42px;
    position: relative;
    overflow: hidden;
    padding: var(--tc-pad) 0;
    background: #067EBA;
    color: #ffffff;
}

.tc-clients__track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-clients__track li {
    flex: none;
    display: flex;
    padding: 0 var(--tc-gap);
}

/* Each logo is drawn in the text colour through its own shape (CSS mask),
   so one file gives a white logo on blue and a blue logo on light blue. */
.tc-clients__logo {
    display: block;
    height: calc(var(--tc-h) * var(--tc-scale));
    aspect-ratio: var(--tc-ratio);
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.tc-clients__logo--carrefour {
    --tc-h: 34px;
    --tc-ratio: 329.48 / 70.61;
    -webkit-mask-image: url(../img/clients/carrefour.svg);
    mask-image: url(../img/clients/carrefour.svg);
}

.tc-clients__logo--intermarche {
    --tc-h: 34px;
    --tc-ratio: 1019.73 / 189.9;
    -webkit-mask-image: url(../img/clients/intermarche.svg);
    mask-image: url(../img/clients/intermarche.svg);
}

.tc-clients__logo--mcdonalds {
    --tc-h: 52px;
    --tc-ratio: 272.7 / 238.5;
    -webkit-mask-image: url(../img/clients/mcdonalds.svg);
    mask-image: url(../img/clients/mcdonalds.svg);
}

.tc-clients__logo--kfc {
    --tc-h: 40px;
    --tc-ratio: 950 / 296.26;
    -webkit-mask-image: url(../img/clients/kfc.svg);
    mask-image: url(../img/clients/kfc.svg);
}

.tc-clients__logo--quick {
    --tc-h: 62px;
    --tc-ratio: 341.55 / 565.88;
    -webkit-mask-image: url(../img/clients/quick.svg);
    mask-image: url(../img/clients/quick.svg);
}

.tc-clients__logo--otacos {
    --tc-h: 30px;
    --tc-ratio: 205 / 35;
    -webkit-mask-image: url(../img/clients/otacos.svg);
    mask-image: url(../img/clients/otacos.svg);
}

.tc-clients__logo--jour {
    --tc-h: 32px;
    --tc-ratio: 500 / 91;
    -webkit-mask-image: url(../img/clients/jour.png);
    mask-image: url(../img/clients/jour.png);
}

/* Running (set by js/tc-clients.js) */
.tc-clients__band.is-running {
    background: linear-gradient(90deg, #067EBA 50%, #B7D0EE 50%);
}

.is-running .tc-clients__layer {
    clip-path: inset(0 50% 0 0);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.is-running .tc-clients__layer--alt {
    position: absolute;
    top: var(--tc-pad);
    right: 0;
    left: 0;
    color: #067EBA;
    clip-path: inset(0 0 0 50%);
}

.is-running .tc-clients__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    will-change: transform;
}

@media (max-width: 767.98px) {
    .tc-clients__band {
        --tc-gap: 22px;
        --tc-scale: 0.72;
        --tc-pad: 30px;
    }

    .tc-clients__track {
        row-gap: 20px;
    }
}