/* ============================================================================
   BRAND LOGO MARQUEE — shared by the homepage and the features page.

   Markup: backend/documents/templates/components/logo_strip.html
   Link this file on any page that includes that partial.

   Selectors are scoped to .hp-strip only (no body class), so the same rules
   serve `body.homepage-black-white.hp-brand` and `body.…​.feat-page` alike.
   These class names appear in no other stylesheet, so plain class specificity
   is enough — but link this file AFTER marketing.css so generic element rules
   there can never win a tie.

   The --hb-* custom properties are defined by homepage-brand.css, which only
   the homepage loads; every var() below therefore carries the literal fallback
   so the strip renders identically on pages without that file.
   ========================================================================== */

.hp-strip {
    background: #ffffff;
    border-top: 1px solid var(--hb-g-100, #efefef);
    border-bottom: 1px solid var(--hb-g-100, #efefef);
    padding: 2rem 0 2.4rem;
}

/* The gap under the label scales with the logos — at 46px tall they need more
   breathing room beneath the caption than the old 26px marks did. */
.hp-strip .hp-strip-label {
    text-align: center;
    margin: 0 0 2.2rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--hb-g-400, #8c8c8c);
}

.hp-strip .hp-strip-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* Spacing lives on the items, NOT as `gap` on the track. With `gap`, 14 items
   have only 13 gaps, so the track's total width is half a gap short of two
   whole periods and translateX(-50%) stutters on every loop. Giving each item
   its own right margin makes the width exactly 14 x (item + margin), so half
   of it is exactly one period and the loop is seamless.

   For the same reason the partial's item count must stay EVEN. */
.hp-strip .hp-strip-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: hpStripScroll 45s linear infinite;
    will-change: transform;
}

.hp-strip .hp-strip-viewport:hover .hp-strip-track {
    animation-play-state: paused;
}

@keyframes hpStripScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.hp-strip .hp-strip-item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--hb-g-400, #8c8c8c);
    white-space: nowrap;
    margin-right: 3rem;
    flex: none;
}

/* Brand marks in their own colours. NOTE: this is the one deliberate exception
   to the pages' monochrome scheme — the logos carry each brand's official hex,
   at the owner's request. Everything else stays black and white.

   The artwork is free to use (Simple Icons, CC0; Wikimedia public domain) but
   the trademarks are not, and a logo row implies a working integration — keep
   that in mind before adding a mark for anything still in mock mode.

   The set mixes square glyph marks (Xero, Monzo, Chase) with wide wordmarks
   (Lloyds, NatWest, Bank of Scotland). Height is the shared constraint; width
   follows the aspect ratio, capped so the very wide wordmarks (Bank of
   Scotland is 12.9:1) cannot run away with the row. */
.hp-strip .hp-strip-logo {
    height: 40px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    display: block;
    opacity: 1;
    transition: transform .2s ease;
}

/* Wordmarks are 3:1 to 13:1. At the glyph height NatWest rendered 180px wide
   against a glyph's 38px, which is what made the row look lopsided. A shorter
   height plus a tighter cap brings the two families to a comparable optical
   weight. */
.hp-strip .hp-strip-logo--word {
    height: 26px;
    max-width: 130px;
}

.hp-strip .hp-strip-item:hover .hp-strip-logo {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .hp-strip .hp-strip-track {
        animation: none;
    }
}