/* ============================================================
   Service Hero — BANNERS visual
   The editor's own artwork, one banner at a time, sliding sideways.
   Loaded only when the service's Hero Visual is "banners".

   ONE banner fills the hero's visual column, the same footprint the
   orbit and metrics panels occupy. It rests there long enough to be
   read, then slides on to the next — a strip of small cards reads as
   a widget rather than as the page's artwork.

   Two crops per banner: 3:2 landscape here, 3:4 portrait on phones.
   The 720px switch below MUST stay in step with the <picture> media
   query in the partial, or a portrait upload lands in a wide box.

   The step keyframes are generated per page from the banner count —
   see yagas_svc_hero_banners_keyframes() — because the travel per
   step depends on how many banners there are.
   ============================================================ */

/*
 * This variant gets a wider visual column than its siblings. The CSS-drawn
 * panels are built to sit in half the row; a photograph needs the room or it
 * reads as a thumbnail parked next to the heading.
 *
 * Guarded to the two-column range on purpose. Below 981px _service-hero.css
 * collapses the hero to one column, and this selector is specific enough to
 * beat that rule from inside its own media query — which would strand the
 * banner in a squeezed second column on phones.
 */
@media (min-width: 981px) {
    .svc-hero--banners .svc-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    }
}

.svc-hero__visual--banners {
    --svc-bn-ratio: 3 / 2;
    --svc-bn-gap:   clamp(14px, 1.5vw, 20px);
    --svc-bn-radius: 20px;

    /* The strip runs the full width of the hero's visual column. */
    display: block;
    width: 100%;
}

/* Editor-only empty state — visitors get the orbit hero instead. */
.svc-banners__empty {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    border: 1px dashed rgba(255, 255, 255, 0.28);
    border-radius: var(--svc-bn-radius);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    line-height: 1.6;
}

.svc-banners__empty strong { color: #fff; font-size: 1rem; }
.svc-banners__empty em { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; font-style: normal; }

/* ── Viewport ─────────────────────────────────────────────── */
.svc-banners {
    position: relative;
    width: 100%;
    /*
     * The container query is load-bearing: it lets each banner be exactly one
     * column wide (100cqw below). A plain `width: 100%` cannot work inside a
     * max-content track — the item would size off the track that is sizing off
     * the item.
     */
    container-type: inline-size;
    /*
     * A hard clip, deliberately — no edge fade. A mask here reads as a smudge
     * down the left and right of the artwork rather than as depth, and the
     * other hero visuals all present their panel with clean edges.
     */
    overflow: hidden;
}

/* ── Track ────────────────────────────────────────────────── */
.svc-banners__track {
    display: flex;
    /*
     * max-content is load-bearing too. Without it the track would be 100% of
     * the column and -50% would mean half the COLUMN, not half the content —
     * the loop would tear. Deliberately no `gap` either: the track holds the
     * list twice and travels exactly -50%, which only stays exact while the
     * spacing belongs to the items themselves.
     */
    width: max-content;
    will-change: transform;
    /*
     * Name only — the keyframes are emitted per page (the travel per step is
     * 50/N% of the track, so they cannot be written once for every N). If they
     * ever fail to load the strip simply sits on the first banner.
     */
    animation: svcBannerStep var(--svc-bn-duration, 20s) ease-in-out infinite;
}

/* Let a visitor stop the loop to actually look at something. */
.svc-banners:hover .svc-banners__track,
.svc-banners:focus-within .svc-banners__track {
    animation-play-state: paused;
}

/* ── Banner ───────────────────────────────────────────────── */
.svc-banners__item {
    position: relative;
    flex: 0 0 auto;
    /* Exactly one column wide, so a banner at rest fills the visual and no
       neighbour peeks in beside it. */
    width: 100cqw;
    aspect-ratio: var(--svc-bn-ratio);
    margin-right: var(--svc-bn-gap);
    border-radius: var(--svc-bn-radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75);
}

.svc-banners__link,
.svc-banners__pic {
    display: block;
    width: 100%;
    height: 100%;
}

/* The global reset sets img{height:auto} — override so the art fills the box
   and an off-ratio upload is centre-cropped instead of letterboxed. */
.svc-banners__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform var(--transition);
}

.svc-banners__link:hover .svc-banners__img { transform: scale(1.03); }

/* Keyboard focus has to be visible through the overflow clip on the item. */
.svc-banners__link:focus-visible {
    outline: 2px solid var(--svc-b, var(--color-accent));
    outline-offset: -3px;
    border-radius: var(--svc-bn-radius);
}

/* ── Responsive ───────────────────────────────────────────── */
/*
 * Phones — portrait crop. This 720px edge is the same one the <picture> in
 * the partial switches at (its source is min-width:721px), so the 3:4 box
 * and the 3:4 upload always arrive together.
 */
@media (max-width: 720px) {
    .svc-hero__visual--banners {
        --svc-bn-ratio:  3 / 4;
        --svc-bn-gap:    14px;
        --svc-bn-radius: 16px;
    }
}

/* ============================================================
   Reduced motion
   The loop is the whole point of this visual, so it is not enough to
   freeze it — without scrolling, every banner past the first would be
   unreachable. Stop the travel and hand the strip back to the user.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .svc-banners__track {
        animation: none;
        /* A max-content track cannot scroll inside its parent; let it size
           normally again so the overflow below has something to work with. */
        width: auto;
    }

    .svc-banners {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .svc-banners__item { scroll-snap-align: center; }

    /* The clone is duplicate content once it is no longer a loop. */
    .svc-banners__item[aria-hidden="true"] { display: none; }

    .svc-banners__link:hover .svc-banners__img { transform: none; }
}