/* ─────────────────────────────────────────────────────────────────────────────
   Block: Nostomarquee  (.fp-marquee-block)

   Full-width infinite-scroll strip on brand-blue background.
   Animation duration is set via --fp-marquee-duration on .fp-marquee__track
   (written inline by PHP based on item count × speed preset).

   Seamless loop technique:
     Items are duplicated in the DOM (second set aria-hidden="true").
     The animation ends at calc(-50% - 21px) where 21px = gap/2 (42px ÷ 2).
     This accounts for the flex gap between the last item of copy-1 and the
     first item of copy-2, making the loop frame-perfect.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Outer wrapper ───────────────────────────────────────────────────────── */

.fp-marquee-block {
    /* Override any padding-top/padding-bottom inherited from page-block
       utility classes — this block manages its own vertical rhythm. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── Scrolling container ─────────────────────────────────────────────────── */

.fp-marquee {
    position: relative;
    background: var(--color-primary, #00388E);
    overflow: hidden;
    padding: 12px clamp(18px, 4vw, 56px);
}

/* Fade edges so items dissolve into the background rather than hard-clipping */
.fp-marquee::before,
.fp-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(36px, 8vw, 120px);
    pointer-events: none;
}

.fp-marquee::before {
    left: 0;
    background: linear-gradient(
        90deg,
        var(--color-primary, #00388E),
        rgba(0, 56, 142, 0)
    );
}

.fp-marquee::after {
    right: 0;
    background: linear-gradient(
        270deg,
        var(--color-primary, #00388E),
        rgba(0, 56, 142, 0)
    );
}

/* ── Track ───────────────────────────────────────────────────────────────── */

.fp-marquee__track {
    display: flex;
    gap: 42px;                        /* --fp-marquee-gap = 42px (hardcoded) */
    width: max-content;
    animation: fp-marquee-scroll
               var(--fp-marquee-duration, 49s)
               linear
               infinite;
}

/* Pause on hover — gives users a chance to read items */
.fp-marquee:hover .fp-marquee__track {
    animation-play-state: paused;
}

@keyframes fp-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 21px)); }
    /*                                         ↑ gap/2: corrects the half-gap
                                                 between the two copies so the
                                                 loop is pixel-perfect           */
}

/* ── Individual item ─────────────────────────────────────────────────────── */

.fp-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: #fff;
    white-space: nowrap;
}

/* ── Icon circle ─────────────────────────────────────────────────────────── */

.fp-marquee__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: #fff;
}

.fp-marquee__icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
}

/* ── Text stack ──────────────────────────────────────────────────────────── */

.fp-marquee__text {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

/* "Label / subtitle" inline layout matching the proto */
.fp-marquee__text strong {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}

.fp-marquee__text strong::after {
    content: ' / ';
    color: rgba(255, 255, 255, 0.50);
    font-weight: 400;
}

/* Hide the separator when there's no subtitle */
.fp-marquee__item:not(:has(span)) .fp-marquee__text strong::after {
    content: none;
}

.fp-marquee__text span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1;
}

/* ── Accessibility ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fp-marquee__track {
        animation: none;
        /* Wrap items so they're all visible without scrolling */
        flex-wrap: wrap;
        width: auto;
        gap: 16px 32px;
        justify-content: center;
    }

    /* Remove edge fades when static */
    .fp-marquee::before,
    .fp-marquee::after {
        display: none;
    }
}