/*** ---------- Algemeen ---------- ***/
.wpb-block, .wpb-header {
    &.text-light { color: var(--clr-light); }

    .has_bg_asset { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .4; z-index: -1;
        &::after {
            --url: url('/app/themes/wuxnl-theme-nove/assets/img/svg/bg-asset-1.svg');
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: -50%;
            left: 0;
            background: currentColor;
            -webkit-mask-image: var(--url);
            mask-image: var(--url);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: cover;
            mask-size: cover;
        }

        /* Positionering via translate property */
        &.wpb-bg-asset--left::after  { left: 0; translate: 0% 50%; }
        &.wpb-bg-asset--right::after { right: 0; left: auto; translate: 0% 50%; }

        /* Rotatie via rotate property — conflicteert NIET met translate */
        &.wpb-bg-asset--shape-1::after { --url: url('/app/themes/wuxnl-theme-nove/assets/img/svg/bg-asset-1.svg'); }
        &.wpb-bg-asset--shape-2::after { --url: url('/app/themes/wuxnl-theme-nove/assets/img/svg/bg-asset-2.svg'); }
        &.wpb-bg-asset--shape-3::after { --url: url('/app/themes/wuxnl-theme-nove/assets/img/svg/bg-asset-3.svg'); }
        &.wpb-bg-asset--shape-4::after { --url: url('/app/themes/wuxnl-theme-nove/assets/img/svg/bg-asset-4.svg'); }

        /* Kleuren blijven hetzelfde */
        &.wpb-bg-asset--primary { color: var(--clr-primary); }
        &.wpb-bg-asset--secondary { color: var(--clr-secondary); }
        &.wpb-bg-asset--tertiary { color: var(--clr-tertiary); }
        &.wpb-bg-asset--blue { color: #8FAED3; }
        &.wpb-bg-asset--beige { color: var(--clr-beige); }

        @media (min-width: 992px) {
            &.wpb-bg-asset--left::after { left: -40%; }
            &.wpb-bg-asset--right::after { right: -40%; }
        }
    }
}

/*** ---------- Block: Header ---------- ***/
.wpb-header {--pb: 4.8rem; padding-block: var(--pb);
    &.wpb-header--home { margin-top: var(--nav-h);
        .container {position: unset; height: 40dvw; max-height: calc(80dvh - var(--pb) * 2); min-height: 54vh;
            .row {height: 100%;}
            .wpb-header__inner {height: 100%;
                .wpb-image {z-index: 0; width: 54vw; margin: 0; padding: 0; position: absolute; top: -25%; left: 0; transform: translateY(25%); aspect-ratio: 858 / 1344; -webkit-mask-image: url('/app/themes/wuxnl-theme-nove/assets/img/svg/header-1.svg'); mask-image: url('/app/themes/wuxnl-theme-nove/assets/img/svg/header-1.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
                    img { height: 100%; object-fit: cover;}
                    &::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); }
                }
                .wpb-text {z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;}
            }
        }

        .gradient {
            &::after { content: ''; position: absolute; top: -10%; right: -10%; width: 100vw; height: 150vh; background-color: var(--clr-secondary); -webkit-mask-image: url('/app/themes/wuxnl-theme-nove/assets/img/svg/bg-asset-4.svg'); mask-image: url('/app/themes/wuxnl-theme-nove/assets/img/svg/bg-asset-4.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; z-index: 100; opacity: 0.15; rotate: -130deg; mix-blend-mode: multiply;}
            &.gradient--primary::after { background-color: var(--clr-primary); }
            &.gradient--secondary::after { background-color: var(--clr-secondary); }
            &.gradient--tertiary::after { background-color: var(--clr-tertiary); }
            &.gradient--blue::after { background-color: #8FAED3; }
            &.gradient--beige::after { background-color: var(--clr-beige); }
            &.gradient--dark::after { background-color: var(--clr-dark); }
            &.gradient--light::after { background-color: var(--clr-light); }
        }
    }

    &.wpb-header--subpage {padding-top: 0;
        .wpb-header__top { position: relative;
            -webkit-mask-image: url('/app/themes/wuxnl-theme-nove/assets/img/svg/header-2.svg');
            mask-image: url('/app/themes/wuxnl-theme-nove/assets/img/svg/header-2.svg');
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-position: bottom;
            mask-position: bottom;
            -webkit-mask-size: 100%;
            mask-size: 100%;
            aspect-ratio: 1920 / 953;
            width: 100%;

            .wpb-image {
                img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        .wpb-header__inner {margin-top: -6vw;
            .wpb-text {max-width: 80%;}
        }

        .gradient {
            &::after { content: ''; position: absolute; bottom: -10vw; right: -5%; width: 100vw; height: 130vh; background-color: var(--clr-secondary); -webkit-mask-image: url('/app/themes/wuxnl-theme-nove/assets/img/svg/bg-asset-3.svg'); mask-image: url('/app/themes/wuxnl-theme-nove/assets/img/svg/bg-asset-3.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; z-index: -1; opacity: 0.15; mix-blend-mode: multiply; }
            &.gradient--primary::after { background-color: var(--clr-primary); }
            &.gradient--secondary::after { background-color: var(--clr-secondary); }
            &.gradient--tertiary::after { background-color: var(--clr-tertiary); }
            &.gradient--blue::after { background-color: #8FAED3; }
            &.gradient--beige::after { background-color: var(--clr-beige); }
            &.gradient--dark::after { background-color: var(--clr-dark); }
            &.gradient--light::after { background-color: var(--clr-light); }
        }
    }

    @media (min-width: 680px) { 
        &.wpb-header--home {
            .container{ 
                .wpb-header__inner {
                    .wpb-image {top: -34%;}
                }
            }
        }

        /* &.wpb-header--subpage {
            .gradient {
                &::after { height: 80vw; }
            }
        } */
    }
    @media (min-width: 768px) { 
        &.wpb-header--home { --pb: 8rem;
            .container{ 
                .wpb-header__inner {
                    .wpb-image {width: 40vw; top: -60%; height: 150%; 
                        &::after { content: none; }
                    }
                    .wpb-text {grid-column: 6 / 12; }
                }
            }
        }
    }
}


/*** ---------- Block: Carousel ---------- ***/
.wpb-block--text-media {
    .container {position: unset;
        .wpb-block__inner {
            .wpb-text {z-index: 1;}
            .wpb-image {z-index: 0;
                img { height: 100%; object-fit: cover;}
                &.has_shape { padding: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center ; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;}
                &.has_shape.shape-1 { aspect-ratio: 1408 / 1146; -webkit-mask-image: url(/app/themes/wuxnl-theme-nove/assets/img/svg/shape-1.svg); mask-image: url(/app/themes/wuxnl-theme-nove/assets/img/svg/shape-1.svg); }
                &.has_shape.shape-2 { aspect-ratio: 772 / 665; -webkit-mask-image: url(/app/themes/wuxnl-theme-nove/assets/img/svg/shape-2.svg); mask-image: url(/app/themes/wuxnl-theme-nove/assets/img/svg/shape-2.svg); }
            }

            .wpb-access { list-style: none; padding: 0; margin: 0;
                .wpb-access__item {display: flex; align-items: flex-start; gap: 0.8rem; padding: 2.4rem 0; line-height: 1.6;
                    .wpb-image {width: auto; height: auto; max-width: 6rem; max-height: 6rem; margin-top: 1.2rem;}
                }
            }
        }
    }

    &.has_shape { 
        .wpb-image { padding: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center ; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;}
        &.shape-1 .wpb-image { aspect-ratio: 1408 / 1146; -webkit-mask-image: url(/app/themes/wuxnl-theme-nove/assets/img/svg/shape-1.svg); mask-image: url(/app/themes/wuxnl-theme-nove/assets/img/svg/shape-1.svg); }
        &.shape-2 .wpb-image { aspect-ratio: auto; -webkit-mask-image: url(/app/themes/wuxnl-theme-nove/assets/img/svg/shape-2.svg); mask-image: url(/app/themes/wuxnl-theme-nove/assets/img/svg/shape-2.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: right; mask-position: right;}
    }


    @media (min-width: 992px) {
        .container {position: unset;
            .wpb-block__inner {
                .wpb-image {z-index: 0;}

                .wpb-access {
                    .wpb-access__item {gap: 1.6rem; padding: 2.4rem 0;
                        .wpb-image {max-width: 8rem; max-height: 8rem; margin-top: 2.4rem;}
                    }
                }
            }
        }
        
        &.has_shape { 
            &.shape-1 .wpb-image { position: absolute; top: -20%; left: auto; right: -10%; height: 140%; max-width: 50%;}
            &.shape-2 .wpb-image {z-index: 1; max-width: 40vw;}
            &.shape-2 .wpb-image.order-lg-0 { position: absolute; top: 0; left: 0; height: 110%; }
            &.shape-2 .wpb-image.order-lg-1 { position: absolute; top: 0; right: 0;height: 110%; transform: scaleX(-1);}
            &.shape-2 .wpb-text.order-lg-1 { grid-column: 6 / 13; }
        }
    }
}


/*** ---------- Block: Carousel ---------- ***/
.wpb-block--carousel {
    .wpb-image { position: relative; 
        img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        &::after { content: ''; display: block; width: 100%; padding-top: 75%; }
    }
}


/*** ---------- Block: Image ---------- ***/
.wpb-block--image {
    .wpb-image { height: 60rem;
        img { object-fit: cover; height: 100%; }
    }
}


/*** ---------- Block: Featured ---------- ***/
.wpb-block--featured {
    .wpb-section__body { --gc: 1; 
        .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 2rem; }
    }
}

@media (min-width: 768px) {
    .wpb-block--featured .wpb-section__body { --gc: 2; }
}

@media (min-width: 992px) {
    .wpb-block--featured .wpb-section__body { --gc: 3; }
}

@media (min-width: 1200px) {
    .wpb-block--featured .wpb-section__body { --gc: 4; }
}


/*** ---------- Block: Text Shortcode ---------- ***/
.wpb-block--text-gravityform .container { column-gap: 2rem; row-gap: 2rem; }

@media (min-width: 992px) {
    .wpb-block--text-gravityform .container { column-gap: 3.2rem; }
}

@media (min-width: 1200px) {
    .wpb-block--text-gravityform .container { column-gap: 6.4rem; }
}

@media (min-width: 1200px) {
    .wpb-block--text-gravityform .container { column-gap: 9.8rem; }
}


/*** ---------- Block: Youtube embed ---------- ***/
.wpb-block--text-video {
    .container { column-gap: 2rem; row-gap: 2rem; }
    .wpb-ratio {
        iframe, img { border-radius: .5rem; }
        .youtube-play { border: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; cursor: pointer; transition: opacity var(--ts-35) ease;
            img { object-fit: cover; width: 100%; height: 100%; }
            .play-icon { position: absolute; top: calc(50% - 3.2rem); left: calc(50% - 3.2rem); display: grid; place-items: center; z-index: 2; background-color: var(--clr-primary); border-radius: 50%; width: 6.4rem; height: 6.4rem; transition: .25s ease; 
                i { color: rgb(255,255,255); }
            }
        }
        &:hover .youtube-play .play-icon { transform: scale(1.065); }
    }
}

@media (min-width: 992px) {
    .wpb-block--text-video {
        .container { column-gap: 3.2rem; }
    }
}

@media (min-width: 1200px) {
    .wpb-block--text-video .container { column-gap: 6.4rem; }
}

@media (min-width: 1400px) {
    .wpb-block--text-video .container { column-gap: 9.8rem; }
}


/*** ---------- Block: Meili archive ---------- ***/
.wpb-block--meili-archive {
    .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

@media (min-width: 992px) {
    .wpb-block--meili-archive {
        .container { grid-template-columns: 25rem 1fr; }
        .btn--filter-toggle { display: none; }
    }
}