/*
    Block: Product Line Hero Banner
    Note: Selectors must start with .block-product-line-hero-banner
*/

@layer blocks {
    .block-product-line-hero-banner .main-wrapper {
        display: -ms-grid;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 43.93%);
        gap: 0;
    }
    
    .block-product-line-hero-banner .swiper {
        position: relative;
        aspect-ratio: 0.88;
        margin: 1.25rem 1.25rem 1.25rem 0;
    }
    
    .block-product-line-hero-banner .swiper-pagination {
        position: absolute;
        left: 2.5rem;
        bottom: 2.5rem;
        top: auto;
    }
    
    .block-product-line-hero-banner .swiper-pagination-progressbar-fill {
        background-color: var(--c-dark-blue);
    }
    
    .block-product-line-hero-banner .swiper-pagination-progressbar {
        background: var(--c-lighter-grey);
    }
    
    .block-product-line-hero-banner .swiper-navigation {
        position: absolute;
        right: 1.25rem;
        bottom: 1.25rem;
    }
    
    .block-product-line-hero-banner :is(.swiper-button-next, .swiper-button-prev) {
        border: 1px solid rgb(from var(--c-body-grey) r g b / 75%) !important;
        color: var(--c-body-grey) !important;
    }
    
    .block-product-line-hero-banner .swiper-button-disabled {
        border: var(--c-body-grey) !important;
        color: var(--c-body-grey) !important;
    }
    
    .block-product-line-hero-banner .swiper-slide img {
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        height: 100%;
    }
    
    .block-product-line-hero-banner .text-container {
        padding-inline: max(1.25rem, calc(50vw - var(--page-size) / 2) - var(--offset)) 5.6875rem;
    }
    
    .block-product-line-hero-banner .text-container .text-content > * {
        --gap: 2.8125rem;
        margin-block: 0 var(--gap);
    }
    
    .block-product-line-hero-banner .text-container .text-content p {
        max-width: 70%;
    }
    
    .block-product-line-hero-banner .buttons {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
    
    @media screen and (width <= 920px) {
        .block-product-line-hero-banner .swiper {
            aspect-ratio: auto;
            margin: 1.25rem 1.25rem 1.25rem 0;
            height: calc(100% - 2.5rem);
        }
        .block-product-line-hero-banner .text-container {
            padding: 1.5625rem;
        }
        .block-product-line-hero-banner .text-container .text-content > * {
            --gap: 1.875rem;
        }
        .block-product-line-hero-banner .buttons {
            gap: 1.375rem;
        }
        .block-product-line-hero-banner .swiper-pagination-progressbar {
            left: 50%;
            bottom: 1.5625rem;
            -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
        .block-product-line-hero-banner .swiper-navigation {
            display: none;
        }
    }
    
    @media screen and (width <= 620px) {
        .block-product-line-hero-banner .main-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
                -ms-flex-direction: column-reverse;
                    flex-direction: column-reverse;
            gap: 2.8125rem;
        }
        .block-product-line-hero-banner .swiper {
            margin: 0.9375rem 0.9375rem 0 0.9375rem;
            aspect-ratio: 0.868;
            height: auto;
            width: -webkit-fill-available;
            width: -moz-available;
            width: stretch;
        }
        .block-product-line-hero-banner .text-container {
            padding: 0 1.5rem 3.125rem;
        }
        .block-product-line-hero-banner .text-container .text-content p {
            max-width: 100%;
        }
    }
}