/**
 * Logos: a row of client or partner logos, static or as an endless scroller.
 *
 * globalClass: logos   (the row; the logos are GB image blocks inside it)
 *
 * Variants:
 *   logos--scroller   endless horizontal scroll (marquee). js/blocks/logos.js
 *                     wraps the logos in a track, duplicates them once and
 *                     sets the speed from the track width; the animation is
 *                     pure CSS, pauses on hover and is off with
 *                     prefers-reduced-motion (the row wraps instead)
 *   logos--mono       logos in grayscale, color on hover
 *   logos--left       left aligned instead of centered (static row)
 *
 * Structure:
 *   .logos.gb-container [.logos--scroller]     GB: no display setting needed
 *     figure.gb-block-image > img              one per logo (link optional:
 *                                              wrap in a GB button or set the
 *                                              image block's link)
 *
 * Tuning: --logos-height (48px, 64px from 768px), --logos-gap (48px),
 *         --logos-speed (seconds per full loop, set by logos.js from the
 *         width; override on the row to make it slower or faster)
 *
 * Chain animations: the row is one chain; animate the row itself or leave it
 * static. Individual logos are not animated (the scroller moves anyway).
 *
 * Editor: the scroller is shown as a static wrapping row.
 */

:root {
    --logos-height: 48px;
    --logos-gap: 48px;
    --logos-speed: 40s;
}

/* Static row */
.logos,
.logos > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--logos-gap);
}

.logos > .block-editor-inner-blocks {
    width: 100%;
}

.logos figure {
    margin: 0;
    display: flex;
    align-items: center;
}

.logos img {
    display: block;
    height: var(--logos-height);
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.logos--left {
    justify-content: flex-start;
}

/* Grayscale until hover */
.logos--mono img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter var(--transition-speed) var(--transition-timing-function),
                opacity var(--transition-speed) var(--transition-timing-function);
}

.logos--mono figure:hover img {
    filter: none;
    opacity: 1;
}

/* ---- Scroller: the track holds the logos twice and moves by half its
   width, which is exactly one set, so the loop is seamless. ---- */
.logos--scroller {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
    /* Fade the edges */
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.logos-track {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--logos-gap);
    padding-right: var(--logos-gap);
    animation: logos-scroll var(--logos-speed) linear infinite;
    will-change: transform;
}

.logos-track > * {
    flex: 0 0 auto;
}

.logos--scroller:hover .logos-track {
    animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
    .logos-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }

    .logos-track > [aria-hidden="true"] {
        display: none;
    }

    .logos--scroller {
        mask-image: none;
        -webkit-mask-image: none;
    }
}

/* Editor: no track, no animation, wrapping row */
.editor-styles-wrapper .logos--scroller,
.logos--scroller > .block-editor-inner-blocks > .block-editor-block-list__layout {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--logos-gap);
    mask-image: none;
    -webkit-mask-image: none;
}

@media only screen and (min-width: 768px) {
    :root {
        --logos-height: 64px;
        --logos-gap: 64px;
    }
}