/* ─── Marquee — auto-drifting horizontal strip ────────────────────────
   Infinite sideways drift for logo rows, badges, or card strips. The root is
   a REAL scroller (overflow-x) so touch users can always swipe it; marquee.js
   ([data-hzo-marquee]) clones the item set for the seamless wrap and drives
   the drift, pausing on hover/focus/touch/offscreen. Reduced motion → no
   clones, no drift: a plain swipeable row. Edge fades via mask-image;
   --marquee-fade sets their width (24px on mobile via the media query).
   Settings ride data-attributes on the root (speed/direction/paused — see
   marquee.js) or the [hzo_marquee] shortcode (marquee.php), which can also
   override --marquee-gap / --marquee-fade inline.
   --logos modifier applies the logo-strip treatment (muted grayscale,
   color on hover) to images inside the track. */
.hzo-marquee {
    overflow-x: auto;
    scrollbar-width: none;   /* Firefox */
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--marquee-fade, 64px), #000 calc(100% - var(--marquee-fade, 64px)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--marquee-fade, 64px), #000 calc(100% - var(--marquee-fade, 64px)), transparent 100%);
}
.hzo-marquee::-webkit-scrollbar { display: none; }
.hzo-marquee:active { cursor: grabbing; }
.hzo-marquee__track {
    display: flex;
    align-items: center;
    gap: var(--marquee-gap, var(--space-xl));
    width: max-content;
    padding: var(--space-xs) 0;   /* room for focus rings inside the scroller */
}
.hzo-marquee__track > * { flex-shrink: 0; }
.hzo-marquee--logos img {
    height: 36px;
    width: auto;
    opacity: 0.6;
    filter: grayscale(1);
    transition: opacity var(--transition-base), filter var(--transition-base);
}
.hzo-marquee--logos a:hover img,
.hzo-marquee--logos img:hover { opacity: 1; filter: grayscale(0); }

/* Explicit pause/play control emitted by [hzo_marquee toggle="…"] AND by the
   block pattern (marquee.html) — the WCAG 2.2.2 button. Styled here in the
   always-loaded marquee sheet (marquee un-gates itself), so a marquee-only page
   never shows an unstyled toggle. Same look as .hzo-carousel__toggle. */
.hzo-marquee__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-md);
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface, #fff);
    color: var(--text-body);
    font-size: 13px;
    cursor: pointer;
}
.hzo-marquee__toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* marquee.js sets hidden under reduced motion (nothing to pause) — make sure
   the display rule above doesn't override the [hidden] UA default. */
.hzo-marquee__toggle[hidden] { display: none; }

@media (max-width: 767.98px) {
    .hzo-marquee { --marquee-fade: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .hzo-marquee--logos img { transition: none; }
    .hzo-marquee__toggle { transition: none; }
    /* Reduced motion = no drift (the JS module exits): the strip sits at
       scrollLeft 0, so a left-edge fade would permanently dim the first
       logo. Keep only the right fade as the "more content" hint. */
    .hzo-marquee {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--marquee-fade, 64px)), transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--marquee-fade, 64px)), transparent 100%);
    }
}