/*----------------------------------------*/
/*  HOME HERO                              */
/*  Banner + Featured Innovations panel    */
/*  Figma: Mask Group 470-2711 / 471-6191  */
/*  In the design these read as one block: */
/*  the panel floats over the banner foot. */
/*----------------------------------------*/

.home-banner {
    position: relative;
    font-family: var(--rd-ff);
}

.home-banner .banner-entry-content {
    position: relative;
    z-index: 10;
}

/* Banner reserves room at the bottom for the floating panel */
.home-banner .banner-entry-align {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
    width: auto;
    height: auto;
    min-height: 100vh;
    /* the design drops the headline 104px below the header */
    padding: calc(var(--rd-hdr-h) + 104px) 0 313px;
}


/* the headline sits on the same 1546 grid as the blocks below it (x=187 in
   the design); the banner's own grid centres a col-xl-10 instead, which
   lands 12px to the left */
.home-banner .banner-entry-align > .container {
    width: 100%;
    max-width: 1606px;
    margin-inline: auto;
    padding: 0 30px;
}

.home-banner .banner-entry-align > .container > .row {
    margin: 0;
}

.home-banner .banner-entry-align > .container > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}


/*--------------------*/
/* - HEADLINE         */
/*--------------------*/
/* the design's text box is 787px at 72px; a little headroom keeps the
   two-line break intact on narrower desktops */
.home-banner .banner-entry-info {
    max-width: 908px;
    padding-left: 0;
}

.home-banner .banner-entry-info > *:not(:last-child) {
    margin-bottom: 40px;
}

.home-banner .banner-entry-info .title {
    font-family: var(--rd-ff);
    font-size: clamp(36px, 3.55vw, 68px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-white);
    text-transform: none;
}

.home-banner .banner-entry-info .title b,
.home-banner .banner-entry-info .title strong {
    display: inline;
    font-weight: 900;
}

/* main.css drops the <br> on phones, which glues "SOLUTIONS" to "TO" —
   keep the two-line headline at every width */
.home-banner .banner-entry-info .title br {
    display: block;
}


/*--------------------*/
/* - BANNER CTA       */
/*--------------------*/
.home-banner .scroll-down {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 54px;
    padding: 0 20px;
    background: none;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--rd-radius);
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-white);
    text-transform: none;
    transition: background-color var(--rd-transition), border-color var(--rd-transition);
}

.home-banner .scroll-down b {
    font-weight: inherit;
    line-height: 1;
}

/* Replace the old chevron with the design's arrow glyph,
   turned down (the exported glyph points right) */
.home-banner .scroll-down i {
    position: static;
    transform: rotate(90deg);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url("../../img/redesign/icons/arrow-cta.svg") no-repeat center / contain;
}

.home-banner .scroll-down i::before,
.home-banner .scroll-down i::after {
    content: none;
}

.home-banner .scroll-down:hover i {
    animation: none;
}

@media (min-width: 1200px) {
    .home-banner .scroll-down:hover {
        background-color: var(--rd-glass);
        border-color: rgba(255, 255, 255, .45);
    }
}


/*--------------------*/
/* - FEATURED PANEL   */
/*--------------------*/
.product-sec.homepage-slider-animation {
    position: relative;
    z-index: 11;
    padding: 0;
    background: none;
}

/* Desktop: the panel shares the banner's grid cell and sits 30px above its
   foot whatever its height — a fixed negative margin lost that inset as
   soon as the slider's arrows added a row. */
@media (min-width: 1200px) {
    /* the column is pinned to the page width (minmax 0) — an auto track
       grows with its content, and Swiper sizes its slides from that width,
       so the slider kept widening itself */
    .bg-over:has(> .home-banner + .product-sec) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .bg-over:has(> .home-banner + .product-sec) > .home-banner,
    .bg-over:has(> .home-banner + .product-sec) > .product-sec {
        grid-area: 1 / 1;
        min-width: 0;
    }

    .bg-over > .home-banner + .product-sec.homepage-slider-animation {
        align-self: end;
        margin: 0 0 30px;
    }
}

.product-sec .container,
.product-sec .row {
    --bs-gutter-x: 0;
    max-width: none;
    width: 100%;
    margin: 0;
}

.product-sec .container {
    padding: 0 var(--rd-gutter);
}

.product-sec .row {
    display: block;
}

/* `.row > *` hands every child width:100%, so the panel must not add
   horizontal margins on top of it — the inset lives on .container above. */
.product-sec .product-swiper-wrapp {
    width: 100%;
    max-width: 100%;
}

.product-sec .product-swiper-wrapp {
    display: flex;
    align-items: center;
    gap: 100px;
    margin: 0;
    padding: 20px 20px 20px 40px;
    background-color: var(--rd-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--rd-radius);
    line-height: normal;
}

.product-sec .product-swiper-wrapp::before {
    content: none;
}

/* Left block: title + CTA */
.product-sec .product-swiper-wrapp > [class*="col-"]:first-child {
    flex: 0 0 197px;
    width: 197px;
    max-width: 197px;
    padding: 0;
}

.product-sec .block-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 37px;
    max-width: none;
    margin: 0;
}

.product-sec .block-title > *:not(:last-child) {
    margin-bottom: 0;
}

.product-sec .block-title .title {
    font-family: var(--rd-ff);
    font-size: 28px;
    line-height: 1.1;
    font-weight: 400;
    color: var(--rd-white);
    text-transform: none;
}

.product-sec .block-title .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 54px;
    padding: 0 20px;
    /* the design lets this CTA run wider than the 197px caption column */
    white-space: nowrap;
    background: none;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--rd-radius);
    font-family: var(--rd-ff);
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-white);
    text-transform: none;
    transition: background-color var(--rd-transition), border-color var(--rd-transition);
}

.product-sec .block-title .btn::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url("../../img/redesign/icons/arrow-cta.svg") no-repeat center / contain;
}

@media (min-width: 1200px) {
    .product-sec .block-title .btn:hover {
        background-color: var(--rd-glass);
        border-color: rgba(255, 255, 255, .45);
    }
}

/* Slider column */
.product-sec .product-swiper-wrapp > [class*="col-"]:last-child {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    padding: 0;
}

.product-sec .homepage-slider-wrapper {
    max-width: none;
    width: 100%;
    margin: 0;
}

.product-sec .homepage-slider-wrapper .swiper-slide {
    height: 211px;
    min-height: 0;
}


/*--------------------*/
/* - PRODUCT CARD     */
/*--------------------*/
.product-sec .homepage-slider-entry {
    height: 100%;
}

/* The listing card (.product-entry, css/style.css) is built for a taller,
   bordered tile: min-height 310px, a padding-bottom aspect hack on .preview
   and an absolutely placed cover image. Every one of those has to be undone
   here, or the image inflates the box and pushes the caption out of the card. */
.product-sec .homepage-slider-entry .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: 100%;
    min-height: 0;
    padding: 8px 8px 16px;
    background-color: var(--rd-white);
    border: 0;
    border-radius: var(--rd-radius);
}

.product-sec .homepage-slider-entry .preview {
    position: relative;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
}

.product-sec .homepage-slider-entry .preview .lz-image,
.product-sec .homepage-slider-entry .preview img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* the design gives the caption a fixed 44px slot, two lines then ellipsis */
.product-sec .homepage-slider-entry .title-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 39px;
    flex-shrink: 0;
    margin: 0;
    overflow: hidden;
}

.product-sec .homepage-slider-entry .title-wrapper .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-family: var(--rd-ff);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--rd-dark);
    text-align: center;
    text-transform: none;
}

/* Not part of the design's card.
   The subtitle also carries the `caption` class, and style.css has
   `.product-entry .title-wrapper .caption {display:block}` at the same
   specificity — and loads later — so this needs one class more to win. */
.product-sec .homepage-slider-entry .title-wrapper .subtitle,
.product-sec .homepage-slider-entry .content .description.animation {
    display: none;
}

/* desktop hover: accent frame (as on the other product tiles) and the
   product nudged forward */
@media (min-width: 1200px) {
    .product-sec .homepage-slider-entry .content {
        box-shadow: inset 0 0 0 2px transparent;
        transition: box-shadow var(--rd-transition);
    }

    .product-sec .homepage-slider-entry .preview img {
        transition: transform .5s ease;
    }

    .product-sec .homepage-slider-entry .title-wrapper .title {
        transition: color var(--rd-transition);
    }

    .product-sec .homepage-slider-entry:hover .content {
        box-shadow: inset 0 0 0 2px var(--rd-accent);
    }

    .product-sec .homepage-slider-entry:hover .preview img {
        transform: scale(1.06);
    }

    .product-sec .homepage-slider-entry:hover .title-wrapper .title {
        color: var(--rd-accent-hover);
    }
}

.product-sec .homepage-slider-wrapper .swiper-controls-wrapp {
    margin: 16px 0 0;
}

.product-sec .homepage-slider-wrapper .swiper-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
}

.product-sec .homepage-slider-wrapper .swiper-button-prev,
.product-sec .homepage-slider-wrapper .swiper-button-next {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 46px;
    height: 46px;
    margin: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--rd-radius);
    transition: background-color var(--rd-transition);
}

.product-sec .homepage-slider-wrapper .swiper-button-prev i,
.product-sec .homepage-slider-wrapper .swiper-button-next i {
    position: absolute;
    inset: 0;
    /* style.css centres this icon with translate(-50%,-50%); with inset:0 that
       would shove it half a button up and to the left */
    transform: none;
    width: auto;
    height: auto;
    background: url("../../img/redesign/icons/arrow-cta.svg") no-repeat center / 20px 20px;
}

.product-sec .homepage-slider-wrapper .swiper-button-prev i::before,
.product-sec .homepage-slider-wrapper .swiper-button-next i::before,
.product-sec .homepage-slider-wrapper .swiper-button-prev i::after,
.product-sec .homepage-slider-wrapper .swiper-button-next i::after {
    content: none;
}

.product-sec .homepage-slider-wrapper .swiper-button-prev {
    transform: rotate(180deg);
}

.product-sec .homepage-slider-wrapper .swiper-pagination {
    display: none;
}

@media (min-width: 1200px) {
    .product-sec .homepage-slider-wrapper .swiper-button-prev:hover,
    .product-sec .homepage-slider-wrapper .swiper-button-next:hover {
        background-color: var(--rd-glass);
    }
}


/*--------------------*/
/* - TABLET (<1200px) */
/*--------------------*/
@media (max-width: 1199px) {
    .home-banner .banner-entry-align {
        min-height: 640px;
        padding: calc(var(--rd-hdr-h) + 60px) 0 60px;
    }

    /* Panel drops below the banner instead of floating over it */
    .product-sec.homepage-slider-animation {
        margin-top: 0;
        padding: 40px 0;
        background-color: var(--rd-dark);
    }

    .product-sec .product-swiper-wrapp {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
        padding: 24px;
    }

    .product-sec .product-swiper-wrapp > [class*="col-"]:first-child {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }

    .product-sec .block-title {
        gap: 20px;
    }
}


/*--------------------*/
/* - PHONE (<768px)   */
/*--------------------*/
@media (max-width: 767px) {
    /* The video fills at least the screen and the headline sits over it, as
       on desktop — main.css would stack the video above a navy block (the
       .bg-over gradient in style.css). */
    body.home .bg-over::before,
    body.page-template-page-home .bg-over::before {
        background: var(--rd-dark);
    }

    .home-banner .banner-entry-media {
        position: absolute;
        inset: 0;
        padding: 0;
    }

    .home-banner .banner-entry-media .banner-entry-bg.mobile,
    .home-banner .banner-entry-media .video-wrapper,
    .home-banner .banner-entry-media video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* main.css centres the video with a -50% translate from top/left 50% */
    .home-banner .banner-entry-media video {
        top: 0;
        left: 0;
        min-width: 0;
        transform: none;
    }

    /* keeps the headline readable over any frame of the video */
    .home-banner::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(32, 32, 32, 0) 35%, rgba(32, 32, 32, .6) 100%);
        pointer-events: none;
    }

    .home-banner .banner-entry-align {
        justify-content: flex-end;
        min-height: 100vh;
        min-height: 100svh;
        padding: calc(var(--rd-hdr-h) + 30px) 0 var(--rd-gutter);
    }

    .home-banner .banner-entry-align > .container {
        padding: 0 var(--rd-gutter);
    }

    .home-banner .banner-entry-info {
        max-width: 100%;
        padding: 20px;
        background-color: rgba(32, 32, 32, .35);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border: 1px solid var(--rd-glass-border);
        border-radius: var(--rd-radius);
    }

    .home-banner .banner-entry-info > *:not(:last-child) {
        margin-bottom: 24px;
    }

    .home-banner .scroll-down {
        width: 100%;
    }

    .product-sec .product-swiper-wrapp {
        padding: 20px;
    }

    .product-sec .homepage-slider-wrapper .swiper-slide {
        height: 190px;
    }

    /* Dots read better than arrows on touch, and the design uses them for its
       product sliders (the Latest Products section). */
    .product-sec .homepage-slider-wrapper .swiper-button-prev,
    .product-sec .homepage-slider-wrapper .swiper-button-next {
        display: none;
    }

    .product-sec .homepage-slider-wrapper .swiper-controls {
        justify-content: center;
    }

    .product-sec .homepage-slider-wrapper .swiper-pagination {
        position: static;
        display: block;
        width: auto;
        margin: 0;
        line-height: 0;
        text-align: center;
    }

    .product-sec .homepage-slider-wrapper .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 5px;
        background-color: rgba(255, 255, 255, .35);
        border: 0;
        border-radius: 50%;
        opacity: 1;
        transition: background-color var(--rd-transition);
    }

    .product-sec .homepage-slider-wrapper .swiper-pagination-bullet-active {
        background-color: var(--rd-accent);
    }
}