/*** ---------- Block: Hero ---------- ***/
.wpb-hero {
    &.wpb-hero--home { --gtc: minmax(0, 1fr); --gap: 2.4rem; padding-top: calc(var(--pt, 0rem) + var(--nav-height)); 
        .wpb-hero__main { z-index: 2; position: relative;
            .container { display: grid; grid-template-columns: var(--gtc); gap: var(--gap); align-items: center; }

            .wpb-text { --fs-h1: var(--fs-h1-xl);
                p { --fs: clamp(1.4rem, 1.6vw, 2rem); font-size: var(--fs); line-height: 1.7; }
                .btn-group { --mt: clamp(1.6rem, 2vw, 2.8rem); }
            }
            .wpb-hero__media { --br: 1rem; --ratio: min(81%, clamp(24rem, 50vw, 54rem)); position: relative; padding-bottom: var(--ratio); border-radius: var(--br); overflow: hidden;
                img, video, mux-video, mux-player, mux-background-video { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
            }
        }
        .wpb-hero__logos { z-index: 2; position: relative; }
        .wpb-hero__assets { position: absolute; top: 0; right: -24%; bottom: 0; pointer-events: none; z-index: 1; 
            .wpb-icon { --w: clamp(30rem, 50vw, 100rem); opacity: 1; }
        }
    }

    &.wpb-hero--subpage { position: relative; z-index: 1;
        .wpb-text { color: var(--clr-contrast-text, var(--clr-text)); }
        .wpb-hero__image { position: relative; height: 28rem; margin-top: -4.8rem; overflow: hidden;
            .wpb-icon { position: absolute; bottom: -20%; right: 0; transform: translateX(50%); z-index: 1; }
            img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0; mask-image: linear-gradient(to top, #000 50%, transparent 100%); }
        }

        .scroll-icon { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }
    }

    &.wpb-hero--showcase { --gtc: minmax(0, 1fr); --gap: 1.2rem;
        .wpb-hero__header {
            .container { display: grid; grid-template-columns: var(--gtc); gap: var(--gap); align-items: end; 
                .wpb-text {
                    h1 { --fs-h1: clamp(2.8rem, 4vw, 5.6rem); }
                    p { font-size: clamp(1.6rem, 1.8vw, 2rem); }
                }
            }
        }
        .wpb-hero__image { --inner-offset: clamp(1.2rem, 2.4vw, 4.8rem);
            .wpb-image { max-height: 66rem;
                &:has(.wpb-card--quote) { min-height: 38rem; }
                .wpb-card--quote { position: absolute; top: auto; left: auto; bottom: var(--inner-offset); right: var(--inner-offset); max-width: min(40rem, calc(100% - (2 * var(--inner-offset)))); height: fit-content; z-index: 2; }
            }
        }
    }

    &.wpb-hero--archive {
        .container--xsmall .wpb-text{ text-align: center; }
    }

    &.wpb-hero--single { --gtc: minmax(0, 1fr); --gap: 3.2rem; overflow: hidden; padding-top: calc(var(--pt) + var(--nav-height)); 
        .wpb-hero__main { position: relative; z-index: 2;
            .container { display: grid; grid-template-columns: var(--gtc); gap: var(--gap); align-items: center; }

            .wpb-text {
                h1 { --fs-h1: clamp(2.8rem, 4vw, 5.6rem); }
                .wpb-meta-info { --mt: clamp(1.4rem, 1.8vw, 2.4rem); 
                    > * { --mt: clamp(1rem, 1.3vw, 1.6rem); }
                }
            }

            .wpb-hero__media { --ratio: 67%; --br: 1rem; position: relative; padding-bottom: var(--ratio); border-radius: var(--br); overflow: hidden;
                img, video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

                .wpb-hero__video { cursor: pointer;
                    video { transition: transform var(--ts-duration) var(--ts-function); }
                    .badge-group { position: absolute; top: 0; left: 0; right: 0; padding: clamp(1.2rem, 1.2vw, 2.8rem); z-index: 2; }
                    .wpb-play-button { --size: clamp(6rem, 7vw, 8rem); --icon-size: 1.6rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; transition: transform var(--ts-duration) var(--ts-function), opacity var(--ts-duration) ease; }

                    &:hover {
                        video { transform: scale(1.1); }
                        .wpb-play-button { transform: translate(-50%, -50%) scale(0); opacity: 0; }
                    }
                }
            }

            .wpb-statistic {margin-left: unset;}
        }
        .wpb-hero__assets { position: absolute; top: -16%; right: -26%; bottom: 0; pointer-events: none; z-index: 1; 
            .wpb-icon { --w: clamp(30rem, 50vw, 100rem); opacity: 1; }
        }
    }

    &.wpb-hero--team {
        .wpb-hero__main .container{
            .wpb-text {
                h1 + .wpb-subtitle { --mt: clamp(.6rem, .8vw, 1.6rem); }
                h1 + .wpb-subtitle + p { --mt:clamp(.6rem, .8vw, 1.6rem); }
                .wpb-subtitle { --fs: clamp(1.6rem, 1.7vw, 1.8rem); }
                .btn-group { --mt: clamp(1.8rem, 2.4vw, 2.4rem); }
            }
            .wpb-hero__media {
                background-color: var(--clr-beige);
                img { object-fit: contain; }
            }

            &::after { content: ''; position: absolute; left: var(--inline-spacing); bottom: calc(-1 * var(--pb)); width: calc(100% - (var(--inline-spacing) * 2)); border-bottom: 1px solid var(--clr-border); }
        }
    }

    &.wpb-hero--simple-cta { --gtc: minmax(0, 1fr); --gap: 3.2rem;
        .container { display: grid; grid-template-columns: var(--gtc); gap: var(--gap); align-items: end; 
            .wpb-text { --max-width: 100%; max-width: clamp(56rem, 58vw, 64rem); 
                .btn--back + h1 { --mt: 2rem; }
                h1 { font-size: var(--fs-h1-lg); }
            }
        }
    }

    &.wpb-hero--contact { --gtc: minmax(0, 1fr); --gap: 2.4rem;
        .container { display: grid; align-items: start; grid-template-columns: var(--gtc); gap: var(--gap); }
        .wpb-hero__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: clamp(.8rem, 1.2vw, 1.6rem); }
    }

    &.wpb-hero--404 {
        .wpb-text { text-align: center; 
            p { font-size: clamp(1.6rem, 1.8vw, 1.8rem); }
            .btn-group { justify-content: center; }
        }
    }

    @media (max-width: 575.98px){
        &.wpb-hero--home {  
            .wpb-hero__main .wpb-text .btn-group .btn { width: 100%; }
            .wpb-hero__assets { display: none; }
        }
        &.wpb-hero--subpage { 
            .wpb-hero__body {
                .wpb-text .btn-group { flex-direction: column;
                    .btn { width: 100%;  }
                }
            }
        }
    }

    @media (min-width: 576px){
        &.wpb-hero--home { --gap: 3.2rem; }
    }
    @media (min-width: 768px){
        &.wpb-hero--home { --gap: 4.8rem; }
        &.wpb-hero--subpage {
            .wpb-hero__body {
                .wpb-text { max-width: 65rem; }
            }
            .wpb-hero__image { position: absolute; top: 0; right: 0; bottom: 0; left: 40%; z-index: -1; margin: 0; height: 100%; 
                img { mask-image: linear-gradient(to left, #000 0%, transparent 100%); }
            }

            &.wpb-hero--subpage--secondary { min-height: clamp(62.6rem, 64vw, 72rem); display: flex; align-items: end; justify-content: center;
                .wpb-hero__body {
                    .wpb-text { text-align: center; margin: auto;
                        .btn-group { justify-content: center; }
                    }
                }
                .wpb-hero__image { left: 0; 
                    img { mask-image: linear-gradient(to bottom, #000 0%, transparent 80%); }
                    .wpb-icon { --w: clamp(60rem, 67vw, 86rem); bottom: -5%; }
                }
            }
        }
        &.wpb-hero--showcase { --gtc: minmax(0, 1fr) 32rem; --gap: 2.4rem; }
        &.wpb-hero--single { --gtc: 40rem minmax(0, 1.1fr); --gap: 4.8rem; }
        &.wpb-hero--simple-cta { --gtc: minmax(0, 1fr) 32rem; --gap: 3.2rem; }
    }

    @media (min-width: 992px){
        &.wpb-hero--home { --gtc: repeat(2, minmax(0, 1fr));  
            .wpb-hero__main {
                .wpb-hero__media { order: 2; }
            }
        }
        &.wpb-hero--showcase { --gtc: minmax(0, 1fr) 40rem; --gap: 4.8rem; }
        &.wpb-hero--single { --gtc: minmax(0, 1fr) minmax(0, 1fr); --gap: 6.4rem; }
        &.wpb-hero--simple-cta { --gtc: minmax(0, 1fr) 40rem; --gap: 4.8rem; }
        &.wpb-hero--contact { --gtc: minmax(0, 1fr) 38rem; --gap: 4.8rem; }
    }
    @media (min-width: 1200px){
        &.wpb-hero--home { --gap: 8rem; }
        &.wpb-hero--showcase { --gtc: minmax(0, 1fr) 50rem; --gap: 6.4rem; }
        &.wpb-hero--single { --gtc: minmax(0, 1fr) minmax(0, 1.1fr); --gap: 9rem; }
        &.wpb-hero--simple-cta { --gap: 6rem; }
        &.wpb-hero--contact { --gtc: minmax(0, 1fr) 52rem; --gap: 6.4rem; }
    }
    @media (min-width: 1400px){
        &.wpb-hero--home { --gap: 12rem; }
        &.wpb-hero--subpage { 
            .wpb-text { --pt: 16rem; --pb: 16rem; }

            &.wpb-hero--subpage--secondary { 
                .wpb-text { --pb: 12rem; }
            }
        }
        &.wpb-hero--showcase { --gtc: minmax(0, 1fr) 60rem; --gap: 8rem; }
        &.wpb-hero--contact { --gtc: minmax(0, 1fr) 58rem; --gap: 7.2rem; }
    }
    @media (min-width: 1600px){
        &.wpb-hero--contact { --gtc: minmax(0, 1fr) 71rem; --gap: 9rem; }
    }
}





/*** ---------- Algemeen ---------- ***/
.wpb-block {
    &.text-light .wpb-block__header .wpb-text { color: #fff; }

    .wpb-block__assets { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden;
        .wpb-block:has(&) > *:not(&) { position: relative; z-index: 2; }
        & > * { --top: auto; --bottom: auto; --left: auto; --right: auto; --asset-clr: rgba(229, 238, 244, 1); position: absolute; top: var(--top); bottom: var(--bottom); left: var(--left); right: var(--right); 
            .wpb-bg-clr--light & { --asset-clr: #FFFF; }
        }

        .wpb-icon--brandmark-outline { --bottom: calc(-1 * var(--w) / 5); --right: -28%; --w: clamp(50rem, 60vw, 100rem); --clr: var(--asset-clr); opacity: 1; }
    }
}


/*** ---------- Block: USP accordion ---------- ***/
.wpb-block--usp-accordion { 
    .wpb-block__header .wpb-text { max-width: clamp(64rem, 72vw, 80rem); }
    .wpb-block__body { border: 1px solid var(--clr-border); border-radius: 1rem; overflow: hidden;
        .wpb-accordion { padding: 2rem; }

        .wpb-bg-clr--light & { border: none; background-color: #FFFF; }
    }

    @media (max-width: 767.98px) {
        .wpb-block__body .wpb-accordion-images .wpb-accordion-images__item {
            .wpb-image.wpb-ratio::before { padding-top: min(var(--wpb-aspect-ratio), 36rem); }
        }
    }

    @media (min-width: 768px) {
        .wpb-block__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center;
            .wpb-accordion { padding: 4.8rem; }
            .wpb-accordion-images {
                .wpb-accordion-images__item { height: 100%; 
                    .wpb-image { height: 100%; 
                        img { object-fit: cover; }
                    }
                }
            }
        }
    }
    
    @media (min-width: 1200px) {
        .wpb-block__body { 
            .wpb-accordion { padding: 6.4rem; }
        }
    }

    @media (min-width: 1400px) {
       .wpb-block__body { 
            .wpb-accordion { padding: 8rem; }
        }
    }
}  



/*** ---------- Block: Image ---------- ***/
.wpb-block--media { --max-width: 72rem;
    .wpb-block__header, .wpb-block__footer {
        .container { --wpb-width: min(var(--max-width), 100%); }
        .wpb-text { text-align: center; 
            .card-container { --mt: clamp(2rem, 2.4vw, 3.2rem); }
        }
    }

    figure { width: 100%;
        &.wpb-image--desktop { display: none; }
    }

    @media (min-width: 992px) {
        figure.wpb-image--desktop { display: block; }
        figure.wpb-image--mobile { display: none; }
    }
}


/*** ---------- Block: Download ---------- ***/
.wpb-block--download {
    .wpb-block__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; border-bottom: 1px solid var(--clr-border); padding: 4.4rem 0 2.8rem 0; }
    .wpb-block--download__info { text-wrap: balance; font-size: clamp(1.8rem, 4vw, 2rem); line-height: 1.3; font-family: var(--font-secondary); font-weight: 600; display: flex; align-items: center; align-items: center; gap: 1.6rem;
        .wpb-block--download__image { min-width: 8rem; width: 8rem; height: 6rem; object-fit: contain; }
    }
    .wpb-block--download__button .btn { width: 100%; }

    @media (min-width: 768px) {
        .wpb-block__body { grid-template-columns: 1fr auto; align-items: center; column-gap: 6rem; }
    }
}

/*** ---------- 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: Featured ---------- ***/
.wpb-block--featured {
    .wpb-block__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-block__body { --gc: 2; }
}

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

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

/*** ---------- Block: Youtube embed ---------- ***/
.wpb-block--text-video {
    .container { column-gap: 2rem; row-gap: 2rem; }
    .wpb-ratio {
        iframe, img { border-radius: 1rem; }
        .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;
            .wpb-play-button { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transition: transform var(--ts-duration) var(--ts-function); 
                i { transition: transform var(--ts-duration) var(--ts-function); }
            }
            img { object-fit: cover; width: 100%; height: 100%; }
        }
        &:hover .youtube-play .wpb-play-button { transform: scale(1.1); 
            i { transform: scale(.9);  }
        }
    }
}

@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: Text & usps ---------- ***/
.wpb-block--text-usps {
    .wpb-usps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

    .wpb-block__body .wpb-text:has(.wpb-image:first-child) { display: flex; flex-direction: column; height: 100%; 
        .wpb-image:first-child { margin-bottom: auto; }
    }

    @media (max-width: 575.98px) {
        .wpb-usps { grid-template-columns: minmax(0, 1fr); }
    }
}

/*** ---------- Block: Blurb / Kolommen ---------- ***/
.wpb-block--blurb {  
    .wpb-block__header {
        .container { display: flex; align-items: end; justify-content: space-between; row-gap: 1em; column-gap: 2.4rem; flex-wrap: wrap; }
        .wpb-text { --max-width: 100%; max-width: var(--max-width); }
    }
    .wpb-block__body {
        .row { --gap: .8rem; column-gap: var(--gap); row-gap: var(--gap); }
        .col > .card-container { height: 100%; }
    }
    @media (max-width: 575.98px) {
        .wpb-block__cta .container { padding-bottom: 0!important;
            &::after { display: none!important; }
        }
    }
}

@media (min-width: 992px) {
    .wpb-block--blurb {  
        .wpb-block__header {
            .wpb-text { --max-width: clamp(40rem, 38vw, 52rem);
                &.wpb-text--secondary { --max-width: clamp(44rem, 40vw, 64rem); }
            }
        }
    }  
}

/*** ---------- Block: Sectoren ---------- ***/
.wpb-block--sectors { --gc: 1; --gap: 1rem;
    .wpb-block__header {
        .container { display: flex; align-items: end; justify-content: space-between; row-gap: 1em; column-gap: 2.4rem; flex-wrap: wrap; }
        .wpb-text { --max-width: 100%; max-width: var(--max-width); }
    }
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
}
@media (min-width: 768px) {
    .wpb-block--sectors { --gc: 2; }
}
@media (min-width: 992px) {
    .wpb-block--sectors {
        .wpb-block__header {
            .wpb-text { --max-width: clamp(40rem, 38vw, 52rem);
                &.wpb-text--secondary { --max-width: clamp(44rem, 40vw, 64rem); }
            }
        }
    }  
}


/*** ---------- Block: Diensten ---------- ***/
.wpb-block--services { --gc: 1; --gap: 1rem;
    .wpb-block__header {
        .container .wpb-text { text-align: center; }
    }
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
}
@media (min-width: 768px) {
    .wpb-block--services { --gc: 2; }

    @media (max-width: 1199.98px) { 
        .wpb-block--services .wpb-block__body .card-container:first-child{ grid-column: span var(--gc); }
    }
}
@media (min-width: 1200px) {
    .wpb-block--services { --gc: 3; }
}

/*** ---------- Block: Artikelen ---------- ***/
.wpb-block--articles { --gtc: 1; --gap: 1rem;
    .wpb-block__header {
        .container { display: flex; align-items: end; justify-content: space-between; row-gap: 1em; column-gap: 2.4rem; flex-wrap: wrap; }
        .wpb-text { --max-width: 100%; max-width: var(--max-width); }
    }
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
}
@media (max-width: 575.98px) {
    .wpb-block--articles {
        .wpb-block__body .container { display: flex; scroll-snap-type: x mandatory; overflow-x: auto; -webkit-overflow-scrolling: touch; -webkit-scrollbar: none; scrollbar-width: none; scroll-padding-left: 1.8rem; 
            & > * { flex: 0 0 min(32rem, 85%); scroll-snap-align: start; }
        }
        .wpb-block__cta .container { padding-bottom: 0!important;
            &::after { display: none!important; }
        }
    }
}
@media (min-width: 576px) {
    .wpb-block--articles { --gc: 2; 
        .wpb-block__body .container > *:first-child { grid-column: span 2; }

    }
}
@media (min-width: 992px) { 
    .wpb-block--articles { --gap: 2rem;
        .wpb-block__header {
            .wpb-text { --max-width: clamp(40rem, 38vw, 52rem);
                &.wpb-text--secondary { --max-width: clamp(44rem, 40vw, 64rem); }
            }
        }
    }  
}
@media (min-width: 1200px) {
    .wpb-block--articles { --gc: 3; }
}

/*** ---------- Block: Statistieken grid ---------- ***/
.wpb-block--stats-grid { --gc: 1; --gap: 1rem; 
    .wpb-block__header .container .wpb-text { text-align: center; }
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); 
        .wpb-image { --br: 1rem; max-height: 35.2rem; 
            img { width: 100%; height: 100%; object-fit: cover; }
        }
    }

    @media (max-width: 575.98px) {
        .wpb-block__header .container .wpb-text { text-align: left; }
        .wpb-block__cta .container { padding-bottom: 0!important;
            &::after { display: none!important; }
        }
    }
}

@media (min-width: 576px) {
    .wpb-block--stats-grid { --gc: 2; 

        @media (max-width: 991.98px) {
            .wpb-block__body .container > *:first-child, .wpb-block__body .container > *:nth-child(2) { grid-column: span 2; }
        }
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .wpb-block--stats-grid { 
        .wpb-block__body .container > *:first-child { grid-column: span 1; grid-row: span 2; }
        .wpb-block__body .container > *:nth-child(2) { order: 9999; }
    }
}

@media (min-width: 992px) {
    .wpb-block--stats-grid { --gc: 4; 
        .wpb-block__body .container { grid-template-rows: 1fr 1fr;
            > *:first-child { grid-row: span 2; grid-column: span 2; }
            > *:nth-child(2) { grid-column: span 2; }
        }
    }
}

/*** ---------- Block: Tekst & media ---------- ***/
.wpb-block--text-media {
    .wpb-block__assets {
        .wpb-icon--brandmark-outline { --bottom: -45%; --right: -22%; --w: clamp(50rem, 60vw, 85rem); }
    }

    @media (max-width: 575.98px) {
        .btn { width: 100%; }
    }
}


/*** ---------- Block: Uitgelichte klantcase ---------- ***/
.wpb-block--featured-case { 
    .wpb-block__header {
        .container { display: flex; align-items: end; justify-content: space-between; row-gap: 1em; column-gap: 2.4rem; flex-wrap: wrap;  }
        .wpb-text { --max-width: clamp(46rem, 48vw, 60rem); max-width: var(--max-width); }
        .btn-group { display: none; }
    }    
}
@media (max-width: 575.98px) {  
    .wpb-block--featured-case {  
        .wpb-block__footer .btn-group .btn{ width: 100%; }
    }
}

@media (min-width: 768px) {  
    .wpb-block--featured-case {
        .wpb-block__header .btn-group { display: flex; }
        .wpb-block__footer { display: none; }
    }
}

/*** ---------- Block: Klantcases ---------- ***/
.wpb-block--cases { --gc: 1; --gap: 1rem;
    .wpb-block__header {
        .container{
            &:not(.container--xsmall) { display: flex; align-items: end; justify-content: space-between; row-gap: 1em; column-gap: 2.4rem; flex-wrap: wrap;  
                .wpb-text { --max-width: clamp(46rem, 48vw, 60rem); max-width: var(--max-width); }        
            }
            &.container--xsmall .wpb-text{ text-align: center; }
        }
    }    
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
    [class*="wpb-block__"]:not(.wpb-block__inner).wpb-block__cta .container { padding-bottom: 0;  
        &::after { display: none; }
    }
}
@media (max-width: 575.98px) {  
    .wpb-block--cases {  
        .wpb-block__header .btn-group .btn{ width: 100%; }
    }
}
@media (min-width: 576px) {  
    .wpb-block--cases { --gc: 2;
        &.wpb-block--cases--default {
            .wpb-block__body .container > *:first-child{ grid-column: span 2; }
        }
        &.wpb-block--cases--featured {
            .wpb-block__body .container > *:first-child{ grid-column: span 2; }
        } 
    }
}
@media (min-width: 768px) {  
    .wpb-block--cases {
        &.wpb-block--cases--default { --gc: 3;
            .wpb-block__body .container > *:first-child{ grid-column: span 1; }
        }
        &.wpb-block--cases--featured { --gc: 3;
            .wpb-block__body .container > *:first-child{ grid-column: span 1; }
        } 
    }
}
@media (min-width: 992px) {  
    .wpb-block--cases { --gc: 3;
        &.wpb-block--cases--featured { --gc: 7; 
            .wpb-block__body .container > *{ grid-column: span 2;
                &:first-child{ grid-column: span 3; }
            }
        }
    }
}
@media (min-width: 1200px) {  
    .wpb-block--cases { 
        &.wpb-block--cases--featured {--gc: 4; 
            .wpb-block__body .container > *{ grid-column: span 1;
                &:first-child{ grid-column: span 2; }
            }
        }
    }
}


/*** ---------- Block: CTA ---------- ***/
.wpb-block--cta { overflow: hidden; position: relative;
    .wpb-block__body { position: relative; z-index: 2;
        .container { display: flex; align-items: end; justify-content: space-between; gap: 3.2rem; flex-wrap: wrap; 
            .wpb-text { --max-width: 100%; max-width: var(--max-width); 
                h2 { --fs-h2: clamp(3rem, 4vw, 4.8rem); }
                .wpb-user { --mt: 1.8rem; }
                &.wpb-text--secondary { 
                    p { font-size: clamp(1.6rem, 1.8vw, 2rem); line-height: 1.7; }
                }
            }
        }
    }
    .wpb-asset.wpb-asset--droplet { --w: clamp(50rem, 80vw, 140rem); --right: calc(-1 * var(--w) / 3.2); --bottom: calc(-1 * var(--h) / 1.7); opacity: .8; }
}
@media (max-width: 575.98px) {  
    .wpb-block--cta .wpb-text.wpb-text--secondary .btn { width: 100%; }
}
@media (min-width: 768px) { 
    .wpb-block--cta {
        .wpb-block__body  .container { 
            .wpb-text { --max-width: 58rem;
                &.wpb-text--secondary { --max-width: 54rem; }
            }
        }
    }
}
@media (min-width: 992px) { 
    .wpb-block--cta {
        .wpb-block__body  .container { 
            .wpb-text { --max-width: clamp(40rem, 38vw, 64rem);
                &.wpb-text--secondary { --max-width: clamp(36rem, 36vw, 52rem); }
            }
        }
    }
}

/*** ---------- Block: CTA banner ---------- ***/
.wpb-block--cta-banner { --bg-clr: var(--clr-dark); --clr-contrast: #FFFF; --clr-contrast-text: var(--clr-contrast); --br: 1rem; --p: 2.4rem; --gtc: minmax(0, 1fr);
    .wpb-block__inner { display: grid; grid-template-columns: var(--gtc); background-color: var(--bg-clr); border-radius: var(--br); position: relative; overflow: hidden;
        .wpb-block__content { padding: var(--p); position: relative; z-index: 2; }
        .wpb-block__image { --ratio: 66%; position: relative; padding-bottom: var(--ratio); 
            img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; }
        }
        .wpb-block__assets { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; 
            .wpb-asset--droplet { --w: clamp(60rem, 80vw, 120rem); --bottom: calc(-1 * var(--h) / 2); --right: calc(-1 * var(--w) / 3.2); opacity: .9; }
            .wpb-icon--brandmark { --w: clamp(50rem, 130vw, 90rem); bottom: calc(-1 * var(--h) / 4); right: calc(-1 * var(--w) / 4); }
            .wpb-icon--brandmark-outline { --w: clamp(32rem, 80vw, 74rem); bottom: calc(-1 * var(--h) / 2); right: calc(-1 * var(--w) / 4); }
        }
    }


    &.wpb-block--cta-banner--full-image {
        .wpb-block__inner {
            .wpb-block__image { --ratio: 0; --overlay: linear-gradient(to right, var(--bg-clr) 5%, transparent); 
                &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay); }
                .wpb-image { width: 100%; height: 100%; 
                    img { object-fit: cover; }
                }
            }
        }
    }
    &.wpb-block--cta-banner--transparent-image { 
        .wpb-block__inner { 
            .wpb-block__content .wpb-text {
                p{ font-size: clamp(1.6rem, 1.8vw, 2rem); line-height: 1.7; }
                .btn-group { --mt: clamp(1.6rem, 2vw, 2.8rem); }
            }
            .wpb-block__image { --ratio: 80%; position: relative; padding-bottom: var(--ratio); z-index: 2; min-width: clamp(40rem, 40vw, 50rem);
                img { object-fit: contain; z-index: 2; }
                &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(rgb(var(--clr-primary-rgb), .3), transparent 50%); z-index: 1; transform: rotate(25deg) scale(1.4) translateY(10rem); pointer-events: none; }
            }
        }
    }
    &.wpb-block--cta-banner--simple {
        .wpb-block__inner { --bg-clr: var(--clr-dark);
            .wpb-block__content .wpb-text {
                .wpb-subtitle { color: var(--clr-contrast); }
            }
            .wpb-block__image { --overlay: linear-gradient(to bottom, var(--bg-clr), transparent 60%); --ratio: 0; margin-top: -40%; 
                &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay); }
                .wpb-image { --br: 0; }
            }
        }
    }
}

@media (max-width: 767.98px) {
    .wpb-block--cta-banner {
        &.wpb-block--cta-banner--full-image {
            .wpb-block__inner {
                .wpb-block__image { --overlay: linear-gradient(to bottom, var(--bg-clr), transparent); margin-top: -5rem; }
            }
        }
    }
}
@media (max-width: 575.98px) {
    .wpb-block--cta-banner {
        .wpb-block__inner .wpb-block__content .btn-group .btn { width: 100%; }
    }
}

@media (min-width: 576px) { 
    .wpb-block--cta-banner { --p: 3.2rem; }
}
@media (min-width: 768px) { 
    .wpb-block--cta-banner { --p: 4.8rem; --content-width: 35rem; --gtc: calc(var(--content-width) + var(--p)) minmax(0, 1fr);
        .wpb-block__inner { 
            .wpb-block__content { padding-right: 0; }
            .wpb-block__assets {
                .wpb-icon--brandmark { --w: clamp(60rem, 70vw, 100rem); bottom: calc(-1 * var(--h) / 2.2); right: calc(-1 * var(--w) / 10); }
                .wpb-icon--brandmark-outline { --w: clamp(50rem, 60vw, 86rem); bottom: calc(-1 * var(--h) / 6.4); right: calc(-1 * var(--w) / 1.8); }
            }
        }
        &.wpb-block--cta-banner--full-image .wpb-block__inner .wpb-block__image { --ratio: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
        &.wpb-block--cta-banner--simple { --gtc: minmax(0, 1fr);
            .wpb-block__inner {
                .wpb-block__image { --overlay: linear-gradient(to top right, #0005, transparent 70%); margin-top: 0; }
                .wpb-block__content { padding: var(--p); position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; max-width: calc(var(--content-width) + (2 * var(--p))); }
            }
        }
    }
}
@media (min-width: 992px) { 
    .wpb-block--cta-banner { --p: 7.2rem; --content-width: 44rem; 
        &.wpb-block--cta-banner--transparent-image { --p: 6.4rem; --content-width: 52rem; }
        &.wpb-block--cta-banner--simple { --content-width: 48rem; }
    }
}
@media (min-width: 1200px) { 
    .wpb-block--cta-banner { --p: clamp(8rem, 8vw, 12rem); 
        .wpb-block__inner { 
            .wpb-block__assets {
                .wpb-icon--brandmark-outline { right: calc(-1 * var(--w) / 3.2); }
            }
        }
        &.wpb-block--cta-banner--transparent-image { --p: 9rem; --content-width: 63.4rem; }
    }
}


/*** ---------- Block: Veelgestelde vragen ---------- ***/
.wpb-block--faq { --content-width: 100%; --gtc: minmax(0, 1fr); --gap: 3.2rem;
    .wpb-block__body .container{ display: grid; grid-template-columns: var(--gtc); gap: var(--gap); 
        .wpb-text--main p{ font-size: clamp(1.6rem, 1.8vw, 2rem); line-height: 1.7; }
    }
}

@media (min-width: 768px) { 
    .wpb-block--faq { --content-width: 36rem; --gtc: var(--content-width) minmax(0, 1fr); --gap: 4rem; 
        .wpb-block__body.wpb-block__body--faq-left { --gtc: minmax(0, 1fr) var(--content-width); 
            .wpb-accordion { order: -1; }
        }
    }
}
@media (min-width: 992px) { 
    .wpb-block--faq { --content-width: 40rem; --gap: 4.8rem; }
}
@media (min-width: 1200px) { 
    .wpb-block--faq { --content-width: 43.5rem; --gap: 6rem; }
}

/*** ---------- Productgroups ---------- ***/
.wpb-block--productgroups { --gc: 2;
    .wpb-block__header {
        .container--xsmall .wpb-text { text-align: center; }
        .container--cta { --gtc: minmax(0, 1fr); --gap: 3.2rem; display: grid; grid-template-columns: var(--gtc); gap: var(--gap); align-items: end; 
            .wpb-text { --max-width: 100%; max-width: clamp(56rem, 64vw, 72rem); }
        }
    }
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 1.4rem; }

    .card-container--hygiene-scan { grid-column: 1 / -1; }

    @media (min-width: 576px) { 
        --gc: 2;
    }
    @media (min-width: 768px) { 
        .wpb-block__header { 
            .container--cta { --gtc: minmax(0, 1fr) 32rem; --gap: 3.2rem; }
        }
        .wpb-block__body .container {gap: 2rem;}
    }
    @media (min-width: 992px) { 
        --gc: 3;
        
        .wpb-block__header { 
            .container--cta { --gtc: minmax(0, 1fr) 40rem; --gap: 4.8rem; }
        }
    }
    @media (min-width: 1200px) { 
        --gc: 4;

        .wpb-block__header { 
            .container--cta { --gap: 6rem; }
        }
    }
}

.wpb-block--productgroups-featured { 
    .wpb-block__header {
        .container { display: flex; align-items: end; justify-content: space-between; row-gap: 1em; column-gap: 2.4rem; flex-wrap: wrap; }
        .wpb-text { max-width: clamp(40rem, 38vw, 52rem); }
    }
    .wpb-block__body { --gc: 1; --gap: 1rem;
        .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
    }

    @media (min-width: 576px) { 
        .wpb-block__body { --gc: 2; 
            .card-container:first-child { grid-column: span 2; }
        }
    }
    @media (min-width: 768px) { 
        .wpb-block__body { --gc: 3; 
            .card-container:first-child { grid-column: span 1; }
        }
    }
}


/*** ---------- Block: Showcase ---------- ***/
.wpb-block--showcase { --gap: 2.4rem;
    .wpb-block__header .container { display: flex; justify-content: space-between; column-gap: var(--gap); row-gap: 1em; flex-wrap: wrap;
        .wpb-text { --max-width: 100%; max-width: var(--max-width); }
    }
    .wpb-block__body .wpb-image img{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}

@media (min-width: 768px) { 
    .wpb-block--showcase {
        .wpb-block__header .container .wpb-text{
            &.wpb-text--main { --max-width: clamp(32rem, 32vw, 46rem); }
            &.wpb-text--secondary { --max-width: clamp(32rem, 40vw, 64rem); }
        }
    }
}

/*** ---------- Block: Team overzicht ---------- ***/
.wpb-block--team-overview {
    .wpb-block__header { --gtc: minmax(0, 1fr); --gap: 3.2rem;
        .container--cta { display: grid; grid-template-columns: var(--gtc); gap: var(--gap); align-items: end; 
            .wpb-text { --max-width: 100%; max-width: clamp(56rem, 64vw, 72rem); 
                h1 { font-size: var(--fs-h1-lg); }
            }
        }
    }
    .wpb-block__body { --gc: 2; --row-gap: 1.2rem;
        .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); row-gap: var(--row-gap); column-gap: clamp(.4rem, .6vw, 1rem); 
            .wpb-card--work-at-elpress { aspect-ratio: 1 / 1; height: 100%; max-width: 100%; max-height: max-content; 
                .wpb-card__header {
                    .wpb-statistic strong { line-height: 1; }
                }
                .wpb-card__body{ padding-bottom: 1.8rem; flex-grow: 0; margin-top: auto; 
                    .wpb-card__text p { --fs: clamp(1.4rem, 1.4vw, 2rem); font-size: var(--fs); line-height: 1.2; }
                }
                .wpb-card__footer { margin-top: 0; 
                    .btn--link { padding-top: clamp(1.6rem, 1.2vw, 3.2rem); }
                }
            }
        }
    }
    @media (max-width: 500px) { 
        .wpb-block__body {
            .container {
                .card-container:has(.wpb-card--work-at-elpress) { order: 999; grid-column: span 2; }
            }
        }
    }
    @media (min-width: 576px) { 
        .wpb-block__body { --row-gap: 2.4rem; }
    }
    @media (min-width: 768px) { 
        .wpb-block__header { --gtc: minmax(0, 1fr) 32rem; --gap: 3.2rem; }
        .wpb-block__body { --gc: 3; --row-gap: 3.2rem; }
    }
    @media (min-width: 992px) {         
        .wpb-block__header { --gtc: minmax(0, 1fr) 40rem; --gap: 4.8rem; }
    }
    @media (min-width: 1200px) { 
        .wpb-block__header { --gap: 6rem; }
        .wpb-block__body { --gc: 4; --row-gap: 4.8rem; }
    }
    @media (min-width: 1400px) { 
        .wpb-block__body { --row-gap: 6rem; }
    }
}


/*** ---------- Block: Team quotes ---------- ***/
.wpb-block--team-quotes { --gc: 1; --gap: 1rem;
    .wpb-block__header .wpb-text { max-width: clamp(58rem, 60vw, 64rem); }
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
}

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

    @media (max-width: 991.98px) { 
        .wpb-block--team-quotes .wpb-block__body .card-container:last-child{ grid-column: span var(--gc); }
        @media (min-width: 768px) {
            .wpb-block--team-quotes .wpb-block__body .card-container:last-child .wpb-card { width: 50%; margin: 0 auto; }
        }
    }
}
@media (min-width: 992px) {
    .wpb-block--team-quotes { --gc: 3; }
}


/*** ---------- Block: Blogs ---------- ***/
.wpb-block--blogs { --gc: 1; --gap: 2rem;
    .wpb-block__header .wpb-text{ max-width: clamp(60rem, 70vw, 80rem); }
    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: var(--gap); }
}

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

    @media (max-width: 1199.98px) { 
        .wpb-block--blogs .wpb-block__body .card-container:first-child{ grid-column: span var(--gc); }
    }
}
@media (min-width: 1200px) {
    .wpb-block--blogs { --gc: 3; }
}

/*** ---------- Block: Recent blogs (used in archive-blog.php) ---------- ***/
.wpb-block--recent-blogs { --gtc: minmax(0, 1fr); --gap: 2rem;
    .wpb-block__header { --offset: clamp(2rem, 2.4vw, 3.2rem);
        .wpb-text{ max-width: clamp(60rem, 70vw, 80rem); 
            h2 { --fs-h2: clamp(2rem, 2.4vw, 3.2rem); }
        }
    }
    .wpb-block__body .container { display: grid; grid-template-columns: var(--gtc); gap: var(--gap); 
        .wpb-block__main .card-container { height: 100%; }
        .wpb-block__secondary { display: flex; flex-direction: column; gap: clamp(1.8rem, 2vw, 2.4rem); 
            .card-container:last-child .wpb-card { padding-bottom: 0; border-bottom: none; }
        }
    }
}

@media (min-width: 768px) {
    .wpb-block--recent-blogs { --gtc: minmax(0, 1fr) 32rem; }
}
@media (min-width: 992px) {
    .wpb-block--recent-blogs { --gtc: minmax(0, 1fr) 40rem; }
}
@media (min-width: 1200px) {
    .wpb-block--recent-blogs { --gtc: minmax(0, 1fr) 47rem; }
}

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

/*** ---------- Downloads overview ---------- ***/
.wpb-block--downloads-overview { --gc: 1;
    .wpb-block__header {
        .container--xsmall .wpb-text { text-align: center; }
        .container--cta { --gtc: minmax(0, 1fr); --gap: 3.2rem; display: grid; grid-template-columns: var(--gtc); gap: var(--gap); align-items: end; 
            .wpb-text { --max-width: clamp(56rem, 64vw, 72rem); max-width: var(--max-width); 
                h1 { font-size: var(--fs-h1-lg); }
            }
        }
    }
    .wpb-block__body .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 3.2rem; }
    .wpb-block__aside ul { list-style: none; 
        li {
            a { text-decoration: none; font-size: 1.6rem; line-height: 1; font-weight: 600; display: flex; align-items: center; justify-content: space-between; padding: 2.4rem 0; border-bottom: 1px solid rgba(var(--clr-dark-rgb), .15);
                i { font-size: .8em; color: var(--clr-primary); }
            }
        }
    }
    .wpb-block__main { display: flex; flex-direction: column; gap: 3.2rem; }
    .wpb-block__section {
        h2 { font-size: var(--fs-h3); margin-bottom: 2.4rem; }
        .wpb-block__cards { display: flex; flex-direction: column; gap: 1rem; }
    }


    @media (min-width: 768px) { 
        .wpb-block__header { 
            .container--cta { --gtc: minmax(0, 1fr) 32rem; --gap: 3.2rem; }
        }
        .wpb-block__aside ul { position: sticky; top: calc(var(--nav-height) + 2rem); }
        .wpb-block__body .container { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
    }
    @media (min-width: 992px) {         
        .wpb-block__header { 
            .container--cta { --gtc: minmax(0, 1fr) 40rem; --gap: 4.8rem; }
        }

        .wpb-block__body .container { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); }
    }
    @media (min-width: 1200px) { 
        .wpb-block__header { 
            .container--cta { --gap: 6rem; }
        }

        .wpb-block__body .container { column-gap: 6rem; }
    }
    @media (min-width: 1400px) {
        .wpb-block__body .container { column-gap: 9rem; }
            .wpb-block__main { display: flex; flex-direction: column; gap: 6rem; }
    }
}