/* =====================================================================
   Woulfe's K9 — Media Carousel
   A continuously moving row of images and videos. Depends on tokens.css.

   The set is rendered twice and the track translates by exactly one set
   width on a linear loop, so the hand-off is invisible. --wk9-scale shrinks
   card height, gap AND the translate distance together at breakpoints, so
   the seam can never break.
   ===================================================================== */

.wk9-carousel {
    --wk9-card-h: 420px;
    --wk9-gap: 16px;
    --wk9-set-w: 4000px;
    --wk9-duration: 45s;
    --wk9-fade: 120px;
    --wk9-pad-y: 48px;
    --wk9-scale: 1;

    position: relative;
    box-sizing: border-box;
    font-family: var(--k9-font-body);
    background: var(--k9-surface-band);
    color: var(--k9-text);

    /* Full-bleed out of whatever container it's dropped into. */
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.wk9-carousel *,
.wk9-carousel *::before,
.wk9-carousel *::after {
    box-sizing: border-box;
}

.wk9-carousel__stage {
    position: relative;
    width: 100%;
    padding: var(--wk9-pad-y) 0;
    overflow: hidden;
}

.wk9-carousel__heading {
    margin: 0 0 var(--k9-space-8);
    text-align: center;
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-muted);
    line-height: 1.3;
}

/* Track ---------------------------------------------------------------- */

.wk9-carousel__viewport {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: calc(var(--wk9-card-h) * var(--wk9-scale));

    /* Soft dissolve into the section background at both ends. At --wk9-fade:0
       this is a no-op mask and the cards run hard to the edge.

       The #000 below is a mask stencil, not a colour — in a mask, opaque
       black means "keep this pixel". It is deliberately not a token. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--wk9-fade),
        #000 calc(100% - var(--wk9-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--wk9-fade),
        #000 calc(100% - var(--wk9-fade)),
        transparent 100%
    );
}

.wk9-carousel__track {
    display: flex;
    align-items: stretch;
    gap: calc(var(--wk9-gap) * var(--wk9-scale));
    /* Trailing gap keeps the set-1 → set-2 spacing even with the rest. */
    padding-right: calc(var(--wk9-gap) * var(--wk9-scale));
    width: max-content;
    will-change: transform;
    animation: wk9-marquee var(--wk9-duration) linear infinite;
}

.wk9-carousel--right .wk9-carousel__track { animation-direction: reverse; }

@keyframes wk9-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-1 * var(--wk9-set-w) * var(--wk9-scale)), 0, 0); }
}

/* Reduced motion: stop the loop and hand control to the user instead. */
@media (prefers-reduced-motion: reduce) {
    .wk9-carousel__track { animation: none; }
    .wk9-carousel__viewport {
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .wk9-carousel__card { scroll-snap-align: center; }
}

/* Cards ---------------------------------------------------------------- */

.wk9-carousel__card {
    flex: 0 0 auto;
    position: relative;
    height: calc(var(--wk9-card-h) * var(--wk9-scale));
    width: calc(var(--wk9-card-w, 480px) * var(--wk9-scale));
    border-radius: var(--k9-radius-md);
    background: var(--k9-surface-card);
    border: var(--k9-border-width) solid var(--k9-line);
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
}

/* The photography is the only colour on the page, so it stays full colour —
   the chrome around it is what carries the monochrome system. */
.wk9-carousel__card img,
.wk9-carousel__card video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* The card, not the media, owns the click. */
    pointer-events: none;
    background: var(--k9-surface-card);
}

/* An iframe can't be object-fit, so the player is grown to whichever size
   covers the card at its own aspect ratio and centred; the card's
   overflow:hidden does the cropping. */
.wk9-carousel__embed {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--k9-surface-card);
    pointer-events: none;
    --wk9-cw: calc(var(--wk9-card-w, 480px) * var(--wk9-scale));
    --wk9-ch: calc(var(--wk9-card-h) * var(--wk9-scale));
}

.wk9-carousel__embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    width: max(var(--wk9-cw), calc(var(--wk9-ch) * var(--wk9-embed-ar, 1.7778)));
    height: max(var(--wk9-ch), calc(var(--wk9-cw) / var(--wk9-embed-ar, 1.7778)));
}

/* Linked cards get the smallest acknowledgement of the pointer. The row
   itself never stops — a marquee that pauses on hover feels broken when the
   pointer is only crossing it on the way somewhere else. */
a.wk9-carousel__card img,
a.wk9-carousel__card video {
    transition: transform 600ms var(--k9-ease);
}

a.wk9-carousel__card:hover img,
a.wk9-carousel__card:hover video {
    transform: scale(1.04);
}

a.wk9-carousel__card:focus-visible {
    outline: none;
    box-shadow: var(--k9-focus-ring);
    border-color: var(--k9-white);
}

/* Smaller screens ------------------------------------------------------ */

@media (max-width: 1024px) {
    .wk9-carousel { --wk9-scale: 0.78; }
    .wk9-carousel__stage { padding: calc(var(--wk9-pad-y) * 0.8) 0; }
}

@media (max-width: 768px) {
    .wk9-carousel { --wk9-scale: 0.6; --wk9-fade: 40px; }
    .wk9-carousel__stage { padding: calc(var(--wk9-pad-y) * 0.65) 0; }
    .wk9-carousel__heading { margin-bottom: var(--k9-space-5); }
}

@media (max-width: 480px) {
    .wk9-carousel { --wk9-scale: 0.48; }
}

/* WPBakery leaves a stray <br> between full-width rows (wpautop turns the
   newline between shortcodes into one). It sits outside the row, on the page
   background, and shows as a pale band above and below this section. The page
   content is fixed too — this is here because re-saving in WPBakery puts the
   newline back. */
.vc_row-full-width + br,
.wk9-carousel + br {
    display: none;
}