/* algemene block styling */
.wpb-block {

    .wpb-section__header { margin-bottom: 3.2rem;
        .container { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 1.6rem; }
        .wpb-text { margin: 0; max-width: 90rem;
            h1, h2 {text-transform: uppercase; 
                strong {color: var(--clr-primary);}
            }
        }

        @media (min-width: 992px) { margin-bottom: 4.8rem; }
    }
    .wpb-section__body {}
    .wpb-section__footer {margin-top: 3.2rem;}
}


/*** ---------- Block: Header ---------- ***/
.wpb-header {
    &.wpb-header--home {display: flex; flex-direction: column; justify-content: end; height: 100dvh; max-height: 100vh; padding: 0 0 12rem 0;
        .wpb-header__body {
            .container {--max-w: 90vw; padding: 0; max-width: var(--max-w); margin-left: 0;
                .wpb-text {--p: 3.2rem 4rem; width: 100%; padding: var(--p);
                    background: linear-gradient(0deg, rgba(166, 72, 36, 0.7), rgba(166, 72, 36, 0.7)), linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));

                    h1 {font-size: clamp(4rem, 5vw, 8rem);}
                }
                .wpb-label {--p: 3.2rem 4rem; font-size: clamp(3rem, 4vw, 6rem); background: var(--clr-primary); color: var(--clr-light); padding: var(--p); border-bottom-right-radius: 8rem;
                    &:is(a){ font-size: clamp(3rem, 4vw, 5rem); text-decoration: none; font-weight: 600; display: block; line-height: 1.2; padding-right: 2rem; transition: background-color var(--ts-duration) ease;
                        &:hover { background-color: rgb(var(--clr-primary-rgb), .9); }
                    }
                }
            }
        }

        &::after {display: none;}
    }

    &.wpb-header--subpage {
        .wpb-header__image { position: relative;
            &::before { content: ''; display: block; padding-top: 34%; }  
            img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
        }
        .wpb-header__main {position: relative; padding: 4.8rem 0; 
            .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
            .wpb-text {
                h1 { font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: 0;
                    strong { color: var(--clr-primary); }
                }   
                * + .btn-group { --mt: 2em; }
            }
            .wpb-header__clr-bar { display: block; width: 100%; height: 8rem; border-radius: 0 0 4rem 0; position: relative;
                &::before { content: ''; position: absolute; top: 0; right: 100%; bottom: 0; width: 100%; background-color: inherit; }
                + * { --mt: 2em; }
            }
            .wpb-bg-assets {
                &.wpb-bg-asset--logo-pri {
                    &::after {
                        height: calc(var(--w) * (836 / 829));
                    }
                }
            }
        }

        &:not(:has(.wpb-header__image)) .wpb-header__main { padding-top: 12rem; 
            .wpb-bg-assets {top: 10rem; }
        } 


    }

    @media (min-width: 992px) {
        &.wpb-header--home {
            .wpb-header__body {
                .container { --max-w: 80vw; 
                    .wpb-text {--p: 6.4rem 8rem;}
                }
            }
        }
        &.wpb-header--subpage {
            .wpb-header__main { padding: 6.4rem 0; 
                .container { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6.4rem; }
            }
        }
    }
    
    @media (min-width: 1200px) {
        &.wpb-header--home {
            .wpb-header__body {
                .container { --max-w: 70vw; 
                    .wpb-text {--p: 8rem 20rem;}
                    .wpb-label {--p: 4.8rem 20rem;}
                }
            }
        }
        &.wpb-header--subpage {
            .wpb-header__main { padding: 10rem 0; 
                .container { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); column-gap: 12.8rem; }
                .wpb-header__clr-bar { height: 16.4rem; border-radius: 0 0 9rem 0; }
            }

            &:not(:has(.wpb-header__image)) .wpb-header__main { padding-top: 21rem; } 
        }
    }
    
    @media (min-width: 1400px) {
        &.wpb-header--home {
            .wpb-header__body {
                .container { --max-w: 60vw; 
                    .wpb-text {--p: 12rem 20rem;}
                    .wpb-label {--p: 4.8rem 12rem 4.8rem 20rem;}
                }
            }
        }
    }
    @media (min-width: 1600px) {
        &.wpb-header--home {
            .wpb-header__body {
                .container { --max-w: 50vw; 
                }
            }
        }
    }
}


/*** ---------- Block: Carousel ---------- ***/
.wpb-block--carousel {
    .wpb-section__header .wpb-text { max-width: 100%; }
    .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: USPS ---------- ***/
.wpb-block--usps {
    .wpb-usps { padding: 8rem 0; display: flex; flex-wrap: wrap; gap: 2.4rem;
        .wpb-usp { flex-basis: calc(25% - 1.2rem); flex-grow: 1; display: flex; gap: 1rem; align-items: center; color: var(--clr-light);
            .wpb-usp__icon {font-size: clamp(6.4rem, 6vw, 8rem);}
            .wpb-usp__text {font-size: clamp(2.4rem, 3vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: 10%; text-transform: uppercase;}
        }
    }
}


/*** ---------- Block: Planning ---------- ***/
.wpb-block--planning {
    .container {display: flex; flex-direction: column; gap: 2.4rem;
        .wpb-text {}
        .wpb-items { display: flex; flex-wrap: wrap; gap: 1.2rem;
            .wpb-item { flex-basis: calc(20% - 1.8rem); flex-grow: 1; flex-shrink: 1; min-width: 12rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; color: var(--clr-light);
                .wpb-item__icon {font-size: clamp(6.4rem, 6vw, 8rem); margin-bottom: 1.6rem;}
                .wpb-item__title {font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: 10%; text-transform: uppercase;}
                .wpb-item__label {font-size: 2rem;}
            }
        }
    }

    @media (min-width: 992px) {
        .container {display: grid; grid-template-columns: 48rem 1fr; gap: 2.4rem;}
    }
}

/*** ---------- Block: Blurb ---------- ***/
.wpb-block--blurb { overflow: hidden; position: relative;
    .wpb-section__header .wpb-text{ max-width: 100%; }
    .container {
        .wpb-blurbs-wrapper { display: flex; flex-wrap: wrap; gap: 2rem;
            .wpb-card--blurb {flex-basis: calc(33% - 1rem); flex-grow: 1; min-width: 32rem;}
        }
    }

    .wpb-bg-assets {top: -10vw; }

    .wpb-swiper-wrapper .wpb-card--blurb {  }
}


/*** ---------- Block: Featured ---------- ***/
.wpb-block--carousel {
    .swiper--reasons {padding: 0 4rem;}
}


/*** ---------- Block: Featured ---------- ***/
.wpb-block--featured {
    .wpb-section__header {
        .container {justify-content: center;}
    }
    .wpb-section__body { --gc: 1; 
        .container {display: flex; flex-wrap: wrap; gap: 2rem;
            .wpb-card--article {flex-basis: calc(33% - 1rem); flex-grow: 1; min-width: 32rem;}
        }
    }
    .wpb-section__footer {
        .btn-group {justify-content: center;}
    }
}

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

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

/*** ---------- 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-media { overflow: hidden;
    .wpb-content--text {
        .wpb-text {
            h2 {letter-spacing: 20%;}
        }
    }

    .wpb-bg-assets { left: 0; bottom: 0; top: unset; opacity: .1;
        .wpb-bg-asset {--w: 44vw; --clr: var(--clr-light);}
    }
}


/*** ---------- Block: Media ---------- ***/
.wpb-block--media { 
    .row {row-gap: 0 !important;}

    .wpb-column__top { display: flex; justify-content: space-between; align-items: center; gap: 3.2rem; flex-wrap: wrap;
        .wpb-text { max-width: 80rem; }
    }

    .wpb-image-wrapper { --offset: 1.8rem;
        .wpb-image {margin-left: calc(var(--offset) * -1); height:100%; max-height: 72dvh; border-radius: 0;
            img {height: 100%; object-fit: cover; object-position: center; border-radius: 0;}
        }
    }

    @media (min-width: 768px) {
        .wpb-image-wrapper {--offset: calc(((100vw - var(--container-width--md) + 3.6rem)) / 2);
            .wpb-image {margin-right: 0; width: calc(100% + var(--offset));}
        }
    }   

    @media (min-width: 992px) {        
        .wpb-image-wrapper {  --offset: calc(((100vw - var(--container-width--lg) + 3.6rem)) / 2); }
    }
    
    @media (min-width: 1200px) {        
        .wpb-image-wrapper {  --offset:calc(((100vw - var(--container-width--xl) + 3.6rem)) / 2); }
    }
    @media (min-width: 1400px) {        
        .wpb-image-wrapper {  --offset: calc(((100vw - var(--container-width--xxl) + 3.6rem)) / 2); }
    }
    
    @media (min-width: 1600px) {        
        .wpb-image-wrapper {  --offset:calc(((100vw - var(--container-width--xxxl) + 3.6rem)) / 2); }
    }
}


/*** ---------- Block: Call to Action ---------- ***/
.wpb-block--cta {
    .btn-group {justify-content: center;}
    .wpb-bg-assets {
        .wpb-bg-asset--logo-sec {height: 100%; align-items: flex-end;}
    }
} 


/*** ---------- 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: FAQ ---------- ***/
.wpb-block--faq { 
    .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }

    .wpb-faq-items {
        .wpb-faq-item {
            .wpb-faq-question { padding-right: 2rem; display: block; padding-bottom: .5rem; font-size: 2rem; font-weight: 700; border-bottom: .2rem solid var(--clr-primary); }
            .wpb-faq-answer { padding-bottom: 2rem; padding-right: 2rem; }
        }
    }   

    &.wpb-block--faq--fluid .wpb-faq-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 49rem)); }

    &.wpb-bg-clr--dark .wpb-faq-items {
        * { color: #fff; }
    }
}

@media (min-width: 992px) {
    .wpb-block--faq { 
        &.wpb-block--faq--text-left .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
}

@media (min-width: 1200px) {
    .wpb-block--faq { 

        .wpb-faq-items .wpb-faq-item {
            .wpb-faq-question, .wpb-faq-answer { padding-right: 4.8rem; }
        }   
        

        &.wpb-block--faq--text-left {
            .container { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); }

            .wpb-faq-items .wpb-faq-item:not(:last-child) .wpb-faq-answer { padding-bottom: 4.8rem; }
        }
    }
}


/*** ---------- Footer CTA ---------- ***/
.wpb-footer-cta { background-color: var(--clr-dark);
    .container { display: grid; grid-template-columns: minmax(0, 1fr); }
    .wpb-text-wrapper { display: flex; align-items: center; background-color: var(--clr-sand); padding: 4.8rem 2rem;
        h2 { font-size: clamp(2rem, 3vw, 3rem); }
        .logo { display: inline-flex; width: 10rem; --mt: 2em; }
    }
}

@media (min-width: 992px) {
    .wpb-footer-cta {
        .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        figure { height: 100%; 
            img { width: 100%; height: 100%; object-fit: cover; }
        }
    }
}

@media (min-width: 1200px) {
    .wpb-footer-cta .wpb-text-wrapper { padding: 6.4rem; }
}

@media (min-width: 1400px) {
    .wpb-footer-cta .wpb-text-wrapper { padding: 6.4rem 8rem 6.4rem 12rem; }
}


/*** ---------- Footer ---------- ***/
.wpb-footer { margin-top: auto; background-color: var(--clr-dark);
    .wpb-footer__main { --gc: 1; padding: 7.6rem 0; 
        .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 3.2rem; color: #fff; }
        h2 { font-size: clamp(2rem, 3vw, 3rem); color: #fff; }
        .logo { display: inline-flex; width: 100%;
            &.logo--bloq { max-width: 22.4rem }
            &.logo--latei { max-width: 14rem; margin-top: 2em; }
        }
    }
    .wpb-footer__bottom { padding: 5rem 0 10rem 0;
        hr { display: block; width: 100%; border: none; border-top: 1px solid var(--clr-primary); }
    }
    .wpb-footer__sub-links { --fs: 1.4rem; text-align: center;  display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 5rem;
       * { display: flex; color: #fff; column-gap: 1rem; text-decoration: none; }
       * + *::before { content: '|'; }
       .by-incombinatie + *::before { display: none; }
       a:hover { color: var(--clr-primary); } 
    }
} 

@media (min-width: 768px) {
    .wpb-footer {
        .wpb-footer__main { --gc: 2; }
        .wpb-footer__bottom .container { flex-direction: row; }
        .wpb-footer__sub-links .by-incombinatie { margin-right: auto; }
    }
}