/* =========================================================
   Video banner for the seven tyre detail pages.

   Each page already had a breadcrumb banner with a static background
   image; this layers that page's own clip (public/imgs/tyre/slider/*.mp4)
   behind the same title and crumbs, so nothing about the page's structure,
   spacing or navigation changes — only what sits behind the text.

   ADDITIVE FILE. Everything hangs off the .tyre-banner class, which is
   added alongside .breadcrumb-section__wrapper on those seven pages only.
   Every other breadcrumb on the site is untouched, and main.css is not
   modified — the two rules below that mention theme classes are scoped
   under .tyre-banner and so cannot reach any other page.
   ========================================================= */

.tyre-banner {
    /* Space the transparent overlay header (header-2026.css) needs at the
       top, so the title is never tucked under the menu. Scales with the
       header's own fluid height. */
    --tb-head-clear: clamp(84px, 6vw + 44px, 150px);

    /* .breadcrumb-section__wrapper is already position:relative in
       main.css; this is restated so the block does not silently break if
       that ever changes, and to clip the video to the banner. */
    position: relative;
    overflow: hidden;

    /* Full screen height. vh first as the fallback for browsers without
       svh; svh is the *smallest* viewport state, so the banner never
       jumps or crops when mobile browser chrome slides in and out. */
    min-height: 100vh;
    min-height: 100svh;

    /* Centre the title in the space left below the header. The only
       in-flow child is .container — the video is absolute and
       .breadcrumb-section__border is display:none in main.css — so
       nothing else competes for the centring. */
    display: flex;
    align-items: center;
    padding-top: var(--tb-head-clear);
}

/* The theme sizes this banner with padding: 265px top / 115px bottom.
   Now that the banner is full height and centres its own content, that
   padding would shove the title far below centre and add 380px of dead
   space. Zeroing it is scoped to .tyre-banner, so every other breadcrumb
   on the site keeps the original spacing untouched. */
.tyre-banner .breadcrumb-section__space {
    padding-top: 0;
    padding-bottom: 0;
}

.tyre-banner__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bias the crop slightly above centre: these clips are shot wide with
       the subject high in frame, and a tall portrait viewport crops the
       sides hard. */
    object-position: center 45%;
    z-index: 0;
    pointer-events: none;
}

/* Layering. The theme's own scrim is .breadcrumb-section__wrapper::before,
   which is absolutely positioned at z-index auto — the same as the video —
   so painting order would fall back to tree order and put the video on
   top of the scrim, washing out the title. Giving each layer an explicit
   index fixes the order: video, then scrim, then content. */
.tyre-banner::before {
    z-index: 1;
}

/* width:100% because .container is now a flex item — without it, it
   shrink-wraps to the title instead of spanning the banner. */
.tyre-banner > .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.tyre-banner .breadcrumb-section__border {
    position: relative;
    z-index: 2;
}

/* =========================================================
   Where the video should not play
   ========================================================= */
/* @media only screen and (max-width: 767px) {
    .tyre-banner__video {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tyre-banner__video {
        display: none;
    }
} */

/* =========================================================
   Height behaviour across devices
   ========================================================= */

/* Short viewports — landscape phones, split screens, small laptops.
   A full 100svh here leaves very little room once the header is cleared,
   so trim the clearance and stop insisting on full height; the banner
   falls back to sizing itself around the title. */
@media only screen and (max-height: 620px) {
    .tyre-banner {
        --tb-head-clear: 76px;
        min-height: 420px;
    }
}

@media only screen and (max-height: 500px) and (orientation: landscape) {
    .tyre-banner {
        --tb-head-clear: 62px;
        min-height: 340px;
    }
}

/* Tall narrow phones: 100svh of a wide landscape still is mostly sky and
   tarmac. Capping the height keeps the banner in proportion with the page
   and gets the reader to the product sooner. */
@media only screen and (max-width: 575px) {
    .tyre-banner {
        min-height: 33vh;
        min-height: 33svh;
    }
}