/* blocks_customers — horizontal marquee of customer logos + bordered
   thumbnails. Hovering an item swaps the thumbnail for the rollover
   image and pauses the marquee so the user can dwell on it. */

/* Wrap the entire shortcode output. The two marquees inside extend
   their inner tracks past 100% width — `overflow-x: hidden` on the
   wrap stops that bleeding into page-level horizontal scroll, so the
   1M bar and the brands heading line above stay centered to the
   viewport instead of being pushed by the wider tracks. */
.blocks-customers__wrap {
    width: 100%;
    overflow-x: hidden;
}

/* === Brands marquee (upper row of small SVG logos) ===
   Mirrors the lower carousel's mechanic: render the figure list twice
   inside an overflow:hidden window and translate the track by 50% to
   loop seamlessly. The wp-block classes on the outer wrapper keep the
   theme's background/padding behaviour untouched. */
.blocks-customers__brands-window {
    width: 100%;
    overflow: hidden;
    /* No need to constrain max-width — the parent wp-block-group
       already centres us against its container. */
}
.blocks-customers__brands-track {
    display: flex;
    align-items: center;
    /* Half the visible whitespace between adjacent customer-card logos
       below: each 132px logo sits centered in a 313px card with a 6px
       card-gap, so the edge-to-edge gap between two customer logos is
       (313-132) + 6 = 187px. 50% ≈ 94px. */
    gap: 94px;
    width: max-content;
    /* Speed-matched to the customers carousel below. Cycle scales with
       the track width so pixels-per-second stays identical to the
       cards beneath. Both rows share the .blocks-customers__wrap parent
       so hovering anywhere pauses them together. */
    animation: bc-brands-scroll 50s linear infinite;
    animation-play-state: running;
}
.blocks-customers__wrap:hover .blocks-customers__brands-track,
.blocks-customers__wrap:hover .blocks-customers__track {
    animation-play-state: paused;
}
.blocks-customers__brand {
    flex: 0 0 auto;
    margin: 0;
    /* Some logos are taller than others — vertical centring keeps the
       optical baseline aligned across the row. */
    display: flex;
    align-items: center;
}

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

@media (max-width: 767px) {
    .blocks-customers__brands-track {
        /* Mobile customer logos: 110px in a 240px card with 6px gap →
           gap between adjacent logos = (240-110) + 6 = 136px. 50% = 68px. */
        gap: 68px;
        animation-duration: 42s;
    }
}


.blocks-customers {
    --bc-bg: #130041;
    --bc-line: #fdfbff;
    --bc-card: 313px;
    --bc-card-h: 312px;
    --bc-gap: 6px;
    --bc-hair: 6px;        /* visible white hairline above/below the cards */
    --bc-pad-top: 30px;
    --bc-logo-h: 44px;
    --bc-logo-w: 132px;
    --bc-item-gap: 30px;   /* space between logo and card */
    --bc-pad-bottom: 50px;
    --bc-cycle: 60s;

    position: relative;
    width: 100%;
    background: var(--bc-bg);
    padding: var(--bc-pad-top) 0 var(--bc-pad-bottom);
    overflow: hidden;
}

/* White slab behind the card row. The cards sit on top so the white
   shows through the gaps AND peeks out --bc-hair px above/below the
   cards as the framing hairlines. */
.blocks-customers__bg {
    position: absolute;
    left: 0;
    right: 0;
    height: calc(var(--bc-card-h) + var(--bc-hair) * 2);
    top: calc(var(--bc-pad-top) + var(--bc-logo-h) + var(--bc-item-gap) - var(--bc-hair));
    background: var(--bc-line);
    pointer-events: none;
    z-index: 0;
}
/* Dark purple slab over the TOP HALF of the card area — sits between
   the white slab and the cards, so the gaps between cards show purple
   in the top half and white in the bottom half. Inset --bc-hair from
   the top of the white slab so the white hairline above stays intact. */
.blocks-customers__bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--bc-hair);
    height: calc(var(--bc-card-h) / 2);
    background: var(--bc-bg);
    pointer-events: none;
}

.blocks-customers__track {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--bc-gap);
    width: max-content;
    animation: bc-scroll var(--bc-cycle) linear infinite;
    animation-play-state: running;
    z-index: 1;
}
/* Hover-pause is handled at the .blocks-customers__wrap level so both
   marquees freeze together. Kept here as a fallback in case the wrap
   isn't present (e.g. shortcode rendered directly). */

.blocks-customers__item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bc-item-gap);
    width: var(--bc-card);
}

.blocks-customers__logo {
    height: var(--bc-logo-h);
    width: var(--bc-logo-w);
    display: flex;
    align-items: center;
    justify-content: center;
}
.blocks-customers__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.blocks-customers__card {
    position: relative;
    width: var(--bc-card);
    height: var(--bc-card-h);
    background: var(--bc-bg);
    overflow: hidden;
}

.blocks-customers__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 350ms ease;
}
.blocks-customers__img--hover {
    opacity: 0;
}
.blocks-customers__item:hover .blocks-customers__img--hover {
    opacity: 1;
}

/* Translate by 50% of the track — the duplicated set keeps the visible
   row populated until the snap back to 0. */
@keyframes bc-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .blocks-customers__track {
        animation: none;
    }
}

/* Tighten on narrow screens — cards still scroll, just smaller. All
   slab/hairline math is variable-driven, so overriding the vars
   re-flows the layout without separate positional rules. */
@media (max-width: 767px) {
    .blocks-customers {
        --bc-card: 240px;
        --bc-card-h: 240px;
        --bc-gap: 6px;
        --bc-pad-top: 20px;
        --bc-pad-bottom: 36px;
        --bc-logo-h: 34px;
        --bc-logo-w: 110px;
        --bc-item-gap: 20px;
        --bc-cycle: 45s;
    }
}