/* =========================================================
   Home video slider — full-viewport 3-video hero slider.
   Layout modelled on the Stravise "banner-slider" block, rebuilt
   on Swiper 8 (already loaded site-wide) and the rr- design tokens.

   Everything is namespaced .video-slider__* . It shares no class
   with banner-section-4 (the previous hero), with .banner-slider__*
   (already bound in main.js) or with any other theme block, so this
   file cannot alter anything that is already on the page.

   Sizing is fluid: every type size and gap is a clamp() that scales
   continuously from a 320px phone to a 1920px monitor, so there are
   no jumps between breakpoints. Media queries below are reserved for
   *structural* changes only (what shows, how it stacks).
   ========================================================= */

.video-slider__area {
    /* Fluid scale tokens — one place to retune the whole block.
     Each clamp is: clamp(<value at 320px>, <intercept + slope*vw>, <value at 1920px>) */
    --vs-title: clamp(26px, 16px + 3.125vw, 76px);
    --vs-subtitle: clamp(12px, 10.8px + 0.375vw, 18px);
    --vs-text: clamp(14px, 13.2px + 0.25vw, 18px);
    --vs-num: clamp(46px, 26.4px + 6.125vw, 144px);
    --vs-arrow: clamp(42px, 34px + 2.5vw, 56px);
    --vs-gap-sm: clamp(10px, 8px + 0.625vw, 20px);
    --vs-gap-md: clamp(16px, 11.2px + 1.5vw, 40px);

    position: relative;
    width: 100%;
    /* svh, not vh: sized to the *smallest* viewport state, so mobile
     browser chrome appearing never crops the content or jumps the layout. */
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    overflow: hidden;
    background: var(--rr-heading-primary);
}

.video-slider__active {
    width: 100%;
    height: 100%;
}

.video-slider__slide {
    position: relative;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ---- Background video + legibility scrim ---- */
.video-slider__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Landscape footage in a tall portrait viewport crops hard; bias the
     crop slightly above centre so the subject survives on phones. */
    object-position: center 40%;
    z-index: 0;
}

.video-slider__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(180deg,
            rgba(1, 15, 28, 0.72) 0%,
            rgba(1, 15, 28, 0.5) 45%,
            rgba(1, 15, 28, 0.82) 100%);
}

/* ---- Oversized slide number, bottom-left ---- */
.video-slider__num {
    position: absolute;
    left: clamp(16px, 5vw, 90px);
    bottom: clamp(56px, 7vh, 110px);
    z-index: 2;
    font-family: var(--rr-ff-heading2);
    font-size: var(--vs-num);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.13);
    pointer-events: none;
    user-select: none;
}

/* ---- Slide content ---- */
.video-slider__content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    /* Keeps text off the screen edge on small phones and clear of the
     arrow stack on desktop, on top of .container's own gutters. */
    padding-inline: clamp(4px, 2vw, 40px);
    padding-top: 50px;
}

.video-slider__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--vs-gap-sm);
    margin-bottom: var(--vs-gap-sm);
    font-family: var(--rr-ff-heading2);
    font-size: var(--vs-subtitle);
    font-weight: 600;
    letter-spacing: clamp(1px, 0.25vw, 3px);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--rr-common-white);
}

.video-slider__subtitle img {
    width: clamp(13px, 1vw, 20px);
    height: auto;
    flex-shrink: 0;
}

.video-slider__title {
    margin-bottom: var(--vs-gap-sm);
    font-family: var(--rr-ff-heading2);
    font-size: var(--vs-title);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: clamp(0px, 0.06vw, 1px);
    text-transform: uppercase;
    color: var(--rr-common-white);
    /* Long single words (compound product names) must never punch out
     of the viewport on a 320px screen. */
    overflow-wrap: break-word;
}

.video-slider__text {
    max-width: 720px;
    margin: 0 auto var(--vs-gap-md);
    font-size: var(--vs-text);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
}

.video-slider__btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--vs-gap-sm);
}

/* ---- Entry animation: only the active slide animates in ---- */
.video-slider__subtitle,
.video-slider__title,
.video-slider__text,
.video-slider__btn {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.swiper-slide-active .video-slider__subtitle,
.swiper-slide-active .video-slider__title,
.swiper-slide-active .video-slider__text,
.swiper-slide-active .video-slider__btn {
    opacity: 1;
    transform: translateY(0);
}

.swiper-slide-active .video-slider__subtitle {
    transition-delay: 0.25s;
}

.swiper-slide-active .video-slider__title {
    transition-delay: 0.45s;
}

.swiper-slide-active .video-slider__text {
    transition-delay: 0.65s;
}

.swiper-slide-active .video-slider__btn {
    transition-delay: 0.85s;
}

/* ---- Vertical arrow stack, right edge ---- */
.video-slider__arrows {
    position: absolute;
    right: clamp(12px, 2.2vw, 45px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.9vw, 14px);
}

.video-slider__prev,
.video-slider__next {
    width: var(--vs-arrow);
    height: var(--vs-arrow);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: transparent;
    color: var(--rr-common-white);
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.video-slider__prev:hover,
.video-slider__next:hover,
.video-slider__prev:focus-visible,
.video-slider__next:focus-visible {
    background: var(--rr-theme-primary);
    border-color: var(--rr-theme-primary);
}

.video-slider__prev.swiper-button-disabled,
.video-slider__next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---- Pagination bullets, bottom centre ---- */
.video-slider__pagination {
    position: absolute;
    left: 0;
    bottom: 30px !important;
    z-index: 5;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, 0.7vw, 10px);
}

.video-slider__pagination .swiper-pagination-bullet {
    width: clamp(24px, 2.4vw, 34px);
    height: 3px;
    margin: 0;
    border-radius: 0;
    opacity: 1;
    background: rgba(255, 255, 255, 0.35);
    transition: all 0.3s ease-in-out;
}

.video-slider__pagination .swiper-pagination-bullet-active {
    width: clamp(40px, 4vw, 56px);
    background: var(--rr-theme-primary);
}

/* =========================================================
   Structural breakpoints — type already scales fluidly above,
   so these only change what is shown and how it stacks.
   ========================================================= */

/* Tablet portrait and below: the arrow stack crowds the text, and
   touch users swipe. Pagination stays and is clickable. */
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
    .video-slider__subtitle {
        font-size: 14px;
    }
    .video-slider__title {
        font-size: 48px;
    }
    .video-slider__content {
        padding-top: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .video-slider__arrows {
        display: none;
    }
}

/* Phones: let the headline wrap naturally instead of also obeying the
   hard <br> in the markup, which produced very short orphan lines. */
@media only screen and (max-width: 575px) {
    .video-slider__title br {
        display: none;
    }

    .video-slider__num {
        opacity: 0.8;
    }
}

/* Short viewports — landscape phones, split-screen, small laptops.
   min-height would otherwise push the hero taller than the screen and
   make the "full height" section scroll. */
@media only screen and (max-height: 620px) {
    .video-slider__area {
        min-height: 0;
    }
}

/* Landscape phones specifically: almost no vertical room. Drop the
   supporting paragraph and the oversized number so the subtitle,
   headline and button always fit without clipping. */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .video-slider__area {
        --vs-title: clamp(20px, 3.4vh + 8px, 34px);
        min-height: 0;
    }

    .video-slider__text {
        display: none;
    }

    .video-slider__num {
        display: none;
    }

    .video-slider__pagination {
        bottom: 12px;
    }
}

/* Coarse pointers get no hover state, so make the arrows' resting
   state readable rather than relying on hover to reveal them. */
@media (hover: none) {

    .video-slider__prev,
    .video-slider__next {
        border-color: rgba(255, 255, 255, 0.6);
    }
}

/* Respect a reduced-motion preference: show content, skip the slide-in */
@media (prefers-reduced-motion: reduce) {

    .video-slider__subtitle,
    .video-slider__title,
    .video-slider__text,
    .video-slider__btn {
        opacity: 1;
        transform: none;
        transition: none;
    }
}