/*----------------------------------------*/
/*  HOME HERO                              */
/*  Banner + Featured Innovations panel    */
/*  Figma: Centaur Home 507-40411 / 40396  */
/*  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;
    padding: calc(var(--rd-hdr-h) + 77px) 0 313px;
}


/*--------------------*/
/* - HEADLINE         */
/*--------------------*/
/* the design's text box is 908px at 68px; a little headroom keeps the
   two-line break intact on narrower desktops */
.home-banner .banner-entry-info {
    max-width: 960px;
    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-head);
    font-size: clamp(34px, 3.55vw, 68px);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: 0;
    color: var(--rd-white);
    text-transform: none;
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
.home-banner .banner-entry-info .title * {
    font-family: inherit;
}

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

/* 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: 14px;
    line-height: 1;
    font-weight: 500;
    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-head);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 300;
    color: var(--rd-white);
    text-transform: none;
}

/* inline marks inside the heading (b, strong, span) keep its face —
   the section's universal `*` rule would reset them to the text font */
.product-sec .block-title .title * {
    font-family: inherit;
}

.product-sec .block-title .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 54px;
    /* the design fits "View All Products" + arrow into the 197px column */
    padding: 0 16px;
    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: 14px;
    line-height: 1;
    font-weight: 500;
    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;
    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 39px 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);
    }
}