/* =========================================================
   Tyre page image slider — 3-slide hero for /products/tyres.

   The page previously reused the home video slider markup. This is the
   image equivalent: same visual language (full-bleed art, scrim, centred
   copy, vertical arrows, bar pagination) so the two read as one system,
   but built for <img> instead of <video>.

   ADDITIVE FILE. Everything is namespaced .tyre-slider__* — grepped to
   zero hits across public/css, public/js and resources/views before it
   was written, and it shares no class with .video-slider__* (bound in
   video-slider.js) or .banner-slider__* / .banner-section__active (bound
   in main.js). So no existing slider can be double-bound or restyled.

   Height is deliberately NOT 100svh like the home hero. The source art
   is 16:9; at full viewport height a portrait phone crops it to a narrow
   central sliver and the outer subjects are lost. Instead the height
   scales with viewport width and is capped against the viewport height,
   so the framing stays close to the original on every device.

   Sizing is fluid: every type size and gap is a clamp() that scales
   continuously from 320px to 1920px. Media queries are reserved for
   structural changes only.
   ========================================================= */

.tyre-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>) */
    --ts-title: clamp(24px, 14.4px + 3vw, 62px);
    --ts-text: clamp(14px, 13.2px + 0.25vw, 18px);
    --ts-arrow: clamp(40px, 33px + 2.2vw, 54px);
    --ts-gap-sm: clamp(10px, 8px + 0.625vw, 20px);
    --ts-gap-md: clamp(16px, 11.2px + 1.5vw, 36px);

    /* Clears the transparent overlay header (see header-2026.css), which
       sits on top of this section rather than above it in the flow. */
    --ts-head-clear: clamp(70px, 5vw + 40px, 140px);

    position: relative;
    width: 100%;
    /* Grows with the viewport width so the 16:9 art keeps its framing,
       then is capped so the hero never exceeds the screen. */
    height: clamp(460px, 56vw, 100vh);
    /* vh first as the fallback for browsers without svh, same pattern as
       video-slider.css; svh is the smallest viewport state, so mobile
       browser chrome appearing never crops the slide. */
    max-height: 100vh;
    max-height: 100svh;
    overflow: hidden;
    background: var(--rr-heading-primary);
}

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

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

/* ---- Background image + legibility scrim ---- */
.tyre-slider__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.tyre-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.45) 45%,
            rgba(1, 15, 28, 0.82) 100%);
}

/* ---- Slide content ---- */
.tyre-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: var(--ts-head-clear);
}

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

.tyre-slider__text {
    max-width: 760px;
    margin: 0 auto var(--ts-gap-md);
    font-size: var(--ts-text);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

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

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

.swiper-slide-active .tyre-slider__title {
    transition-delay: 0.3s;
}

.swiper-slide-active .tyre-slider__text {
    transition-delay: 0.5s;
}

/* ---- Vertical arrow stack, right edge ---- */
.tyre-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);
}

.tyre-slider__prev,
.tyre-slider__next {
    width: var(--ts-arrow);
    height: var(--ts-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;
}

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

/* ---- Pagination bars, bottom centre ---- */
.tyre-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);
}

.tyre-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;
}

.tyre-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 and below: the arrow stack crowds the text, and touch users
   swipe. Pagination stays and is clickable. */
@media only screen and (max-width: 991px) {
    .tyre-slider__arrows {
        display: none;
    }
}

/* Phones: a portrait screen crops 16:9 art hardest, so give the hero a
   little more height to work with and let the headline wrap naturally
   instead of obeying the hard <br> in the markup. */
@media only screen and (max-width: 575px) {
    .tyre-slider__area {
        height: clamp(430px, 130vw, 560px);
    }

    .tyre-slider__title br {
        display: none;
    }
}

/* Landscape phones and other short viewports: almost no vertical room.
   Shrink the headline and drop the supporting paragraph so the slide
   never clips. */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .tyre-slider__area {
        --ts-title: clamp(20px, 3.4vh + 8px, 32px);
        --ts-head-clear: 56px;
        height: 100svh;
        max-height: none;
    }

    .tyre-slider__text {
        display: none;
    }

    .tyre-slider__pagination {
        bottom: 12px !important;
    }
}

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

    .tyre-slider__prev,
    .tyre-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) {

    .tyre-slider__title,
    .tyre-slider__text {
        opacity: 1;
        transform: none;
        transition: none;
    }
}