/* ============================================================
   logo-strip: "Trusted by", a slow continuous marquee.
   Figma: the Partners carousel, Desktop 955:12396, Mobile 955:12413
   (Home 1407:99123 / 1407:99361): the heading, 24 above a row of logos,
   each 146 x 36 with 20 between. The row runs edge to edge, so only the
   heading sits in the content column. The template owns the section's
   padding and background.
   ============================================================ */

.logo-strip__inner {
    max-width: 100%;
    margin: 0 auto;
}

/* ── Heading ──────────────────────────────────────────────────
   Desktop: Futura Medium 22.75 in Secondary, upper case. The frame has no
   text style for it (flagged), so H4, the nearest. Mobile: Mobile/Overline
   (the global eyebrow).
   ───────────────────────────────────────────────────────────── */
.logo-strip__head {
    margin: 0 auto 24px;
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
.logo-strip__heading {
    margin: 0;
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
}
@media (max-width: 1024px) {
    .logo-strip__heading {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }
}

/* ── Viewport ─────────────────────────────────────────────────
   One tab stop: keyboard focus pauses the marquee (under reduced motion it is
   a plain row and the arrow keys scroll it).
   ───────────────────────────────────────────────────────────── */
.logo-strip__viewport {
    width: 100%;
    overflow: hidden;
}
.logo-strip__viewport:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

/* ── Track ────────────────────────────────────────────────────
   Two identical groups; animating to -50% lands exactly on the start of the
   second group, so the loop is seamless.
   ───────────────────────────────────────────────────────────── */
.logo-strip__track {
    display: flex;
    width: max-content;
    animation: logo-strip-scroll var(--logo-strip-duration, 60s) linear infinite;
}
/* Paused only while a mouse is over it, or while keyboard focus is on it. A click
   or a tap doesn't stop it: it keeps moving, and the strip never turns into a
   hand-scrolled row (Alex, 7 Oct). :focus-visible, not :focus-within, so a
   mouse click that focuses the strip doesn't pause it, and the hover pause is
   for pointers that can hover, so a tap doesn't leave it paused on a phone. */
.logo-strip__viewport:focus-visible .logo-strip__track {
    animation-play-state: paused;
}
@media (hover: hover) {
    .logo-strip__viewport:hover .logo-strip__track {
        animation-play-state: paused;
    }
}

.logo-strip__group {
    display: flex;
    align-items: center;
    gap: 50px;
    margin: 0;
    padding: 0 50px 0 0;     /* the gap again at the seam */
    list-style: none;
    flex-shrink: 0;
    /* FlyingPress's lazy render puts an inline content-visibility: auto (with a
       guessed contain-intrinsic-size) on each group. A group scrolled off the
       side stays skipped at that guessed size and props the row open (396 tall
       on a phone, live 2 Nov), so it is always rendered. !important to beat the
       inline style */
    content-visibility: visible !important;
}
.logo-strip__item { flex-shrink: 0; }

/* Every logo occupies the same 146 x 36 box, whatever its aspect ratio */
.logo-strip__logo {
    display: block;
    width: auto;
    height: 36px;
    object-fit: contain;
}

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

/* Reduced motion: no scrolling at all. One group, as a plain row to scroll by hand. */
@media (prefers-reduced-motion: reduce) {
    .logo-strip__track { animation: none; }
    .logo-strip__viewport { overflow-x: auto; }
    .logo-strip__group[aria-hidden="true"] { display: none; }
}