/*** ---------- Block algemeen ---------- ***/
.wpb-block {
    .wpb-section__header { margin-bottom: 2.8rem; }

    &.rounded-corner:not(.rounded-corner--none) { --br: 3.2rem; z-index: 10;
        &.rounded-corner--top-left { border-top-left-radius: var(--br); }
        &.rounded-corner--top-right { border-top-right-radius: var(--br); }
        &.rounded-corner--bottom-left { border-bottom-left-radius: var(--br); }
        &.rounded-corner--bottom-right { border-bottom-right-radius: var(--br); }
    }

    .wpb-block__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;
        img, video { width: 100%; height: 100%; object-fit: cover; }
        .bg-asset { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-position: center; z-index: 2; }
    }
}

.wpb-block--archive.rounded-corner:not(.rounded-corner--none) { z-index: unset; }

@media (min-width: 768px) {
    .wpb-block {
        .wpb-section__header { margin-bottom: 3.2rem; }

        &.rounded-corner:not(.rounded-corner--none) { --br: 4.8rem; }
    }
}

@media (min-width: 992px) {
    .wpb-block {
        .wpb-section__header { margin-bottom: 4.8rem; }

        &.rounded-corner:not(.rounded-corner--none) { --br: 6.4rem; }
    }
}

@media (min-width: 1200px) {
    .wpb-block {
        &.rounded-corner:not(.rounded-corner--none) { --br: 8rem; }
    }
}

@media (min-width: 1400px) {
    .wpb-block {
        &.rounded-corner:not(.rounded-corner--none) { --br: 12rem; }
    }
}

/*** ---------- Block: Header ---------- ***/
.wpb-header { --pt: 3.6rem; --pb: 6.4rem; position: relative; padding-top: calc(var(--nav-height) + var(--pt)); padding-bottom: var(--pb);
    .wpb-header__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;
        img, video { width: 100%; height: 100%; object-fit: cover; }
        .bg-asset { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-position: top; z-index: 2; transform: translateY(6.4rem); }
    }

    .wpb-text h1 { font-family: var(--font-secondary); }

    .wpb-header__main { z-index: 3; position: relative; }

    .wpb-header__searchbar { background-color: var(--clr-secondary); padding: 2rem; border-radius: .4rem; }

    /* Variations */
    &.wpb-header--home { font-size: clamp(1.6rem, 3vw, 2.4rem); 
        .wpb-header__background {
            &::before { --gradient-start: 0%; --gradient-end: 40%; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(0deg,var(--clr-dark) var(--gradient-start), transparent var(--gradient-end)); }   
        }
        .wpb-header__searchbar, .wpb-header__usps { margin-top: 3.2rem; }
    }

    &.wpb-header--subpage { font-size: clamp(1.6rem, 3vw, 2.4rem); 
        .wpb-header__background {
            img:not(.bg-asset) { filter: grayscale(1); opacity: .3; }
            &::before { --gradient-start: 0%; --gradient-end: 40%; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background: linear-gradient(0deg,var(--clr-dark) var(--gradient-start), transparent var(--gradient-end)); }   
        }

        &.text-centered {
            .wpb-text { margin: auto; text-align: center;
                .wpb-breadcrumbs > span, .btn-group { justify-content: center; }
            }
        }
    }

    &.wpb-header--company { font-size: clamp(1.6rem, 3vw, 1.8rem); 
        .wpb-header__background {
            img:not(.bg-asset) { filter: grayscale(1); opacity: .3; }
            &::before { --gradient-start: 0%; --gradient-end: 40%; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background: linear-gradient(0deg,var(--clr-dark) var(--gradient-start), transparent var(--gradient-end)); }   
        }
        .wpb-header__text { display: flex; align-items: start; gap: 2rem; margin-top: 1em;
            .company-logo { --size: 8rem; width: var(--size); min-width: var(--size); height: var(--size); border-radius: .4rem; display: grid; place-items: center; padding: 2rem; background-color: #fff; }
        }
    }

    &.wpb-header--centered {
        .wpb-text { text-align: center; 
            .wpb-breadcrumbs > span, .btn-group, .badge-group { justify-content: center; }
        
            .wpb-breadcrumbs { margin-bottom: 0!important; 
                + * { --mt: 5.6rem; }
            }
            .badge-group + * { --mt: .5em; }
        }
        .wpb-header__image { margin-top: 4.8rem;
            img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        }
    }
}

@media (min-width: 576px) {
    .wpb-header { 
        &.wpb-header--home { --pt: 6.4rem; --pb: 6.4rem; }
    }
}
@media (min-width: 768px) {
    .wpb-header {
        &.wpb-header--home { --pt: 8rem; --pb: 8rem; }
    }
}
@media (min-width: 992px) {
    .wpb-header {
        &.wpb-header--home { --pt: 12rem; --pb: 12rem;
            .wpb-header__main .wpb-text { max-width: 58%; }
            .wpb-header__searchbar .wpb-searchbar__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .wpb-header__searchbar, .wpb-header__usps { margin-top: 5.6rem; }
            .wpb-header__background { text-align: right; 
                video { width: 60%; }
                &::before { --gradient-end: 25%; }
                &::after { --gradient-start: 40%; --gradient-end: 50%; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(90deg,var(--clr-dark) var(--gradient-start), transparent var(--gradient-end)); }   
            }
        }
        &.wpb-header--subpage { --pt: 3.6rem; --pb: 12rem;
            .wpb-header__main .wpb-text { max-width: 57%; }
            .wpb-header__background { text-align: right; 
                img:not(.bg-asset) { width: 60%; margin-left: auto; }
                &::before { --gradient-end: 25%; }
                &::after { --gradient-start: 40%; --gradient-end: 50%; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(90deg,var(--clr-dark) var(--gradient-start), transparent var(--gradient-end)); }   
            }
        }
        &.wpb-header--company { --pt:  3.6rem; --pb: 12rem;
            .wpb-header__background { text-align: right; 
                img:not(.bg-asset) { width: 60%; margin-left: auto; }
                &::before { --gradient-end: 25%; }
                &::after { --gradient-start: 40%; --gradient-end: 50%; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(90deg,var(--clr-dark) var(--gradient-start), transparent var(--gradient-end)); }   
            }
            .wpb-header__text { margin-top: 4.8rem;
                .company-logo { --size: 12rem; }
            }
        }
    }
}
@media (min-width: 1200px) {
    .wpb-header {
        &.wpb-header--home {
            .wpb-header__searchbar { padding: 3.2rem; margin-top: 10rem; }
        }
        &.wpb-header--company {
            .wpb-header__text { margin-top: 6.4rem;
                .company-logo { --size: 20rem; }
            }
        }
    }
}

@media (min-width: 1400px) {
    .wpb-header {
        &.wpb-header--company {
            .wpb-header__text { margin-top: 10rem; gap: 4rem;
                .company-logo { --size: 23rem; }
            }
        }
    }
}

/*** ---------- Block: Text & Media ---------- ***/
.wpb-image-wrapper { container: image-container / inline-size;  }

.wpb-block--text-media { 
    .wpb-image-wrapper { position: relative; padding-right: 2.6rem; padding-bottom: 3.6rem;
        .wpb-image-wrapper__text { position: absolute; bottom: 0; right: 0; background-color: var(--clr-secondary-80); border-radius: 0 20rem 20rem 20rem; padding: 4rem 4rem 10rem 4rem; max-width: 49%; box-shadow: 0 0 1.4rem 0 #000000;

            .wpb-image-wrapper__title { font-weight: 300; font-size: 1.4rem; margin-bottom: 1.4rem; padding-right: 1.6rem; }
            .wpb-image-wrapper__quote { font-weight: 700; }
            i.wpb-icon { position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); }
        }

        .circle-outline { --w: 16rem; position: absolute; top: calc(100% - 23.8rem); left: -4.6rem; }
    
    
        &.wpb-quote-align--left { padding-left: 2.6rem; padding-right: 0rem;
            .circle-outline { top: 0; left: auto; right: -4.6rem; }
            .wpb-image-wrapper__text { text-align: right; right: auto; left: 0; border-radius: 20rem 0 20rem 20rem; padding: 4rem 4rem 10rem 4rem;
                .wpb-image-wrapper__title { padding-left: 1.6rem; padding-right: 0; }
            }
        }
    }
}

@container image-container (max-width: 45rem) {
    .wpb-block--text-media { 
        .wpb-image-wrapper { 
            .wpb-image-wrapper__text { margin-top: -10rem; max-width: 75%; z-index: 2; margin-left: auto; position: relative; margin-right: -2.6rem; }
        }
    }
} 

/*** ---------- Block: Archive ---------- ***/
.wpb-block--archive { z-index: unset;
    .wpb-section__header { margin-bottom: 2.5rem; 
        .container { display: flex; justify-content: end; align-items: end; }
        select { min-height: 4.1rem; max-width: 21rem; }
    }
    .wpb-section__body .container { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 3.2rem; align-items: start; }
    .wpb-block--archive__results { --gc: 1; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 2.4rem 1.8rem; 
        .wux-no-results { grid-column: span var(--gc); }
    } 

    .wpb-offcanvas.wpb-offcanvas--filters {
        h3 { font-size: 2rem; padding-bottom: 2.4rem; } 
        form > * + * { margin-top: 3.2rem; }
    }

    .btn.btn--filter-toggle { position: fixed; bottom: 2rem; right: 1.8rem; z-index: 600; }

    &.wpb-block--archive--news { 
        form select { max-width: 100%; }
    }
}

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

@media (min-width: 992px) {
    .wpb-block--archive {
        .wpb-section__body:has(.wpb-block--archive__aside) .container { grid-template-columns: minmax(0, 31.8rem) minmax(0, 1fr); }
        
        .wpb-offcanvas.wpb-offcanvas--filters { --p: 0; display: flex!important; position: static; transform: none; z-index: 1; margin-top: -4.4rem; background: transparent;
            .wpb-offcanvas__header, .wpb-offcanvas__footer { display: none; }
        }
        .btn.btn--filter-toggle { display: none; }

        .wpb-block--archive__results { --gc: 3; } 
        &:has(.wpb-block--archive__aside) .wpb-block--archive__results { --gc: 2; } 


        &.wpb-block--archive--news { 
            .wpb-section__header {
                .container { justify-content: space-between; }
                .wpb-offcanvas--filters { margin-top: 0; max-width: 100%; }
            }
            form { display: flex; gap: 1.6rem; 
                > * + * { margin-top: 0!important; }
                select { width: 26rem; }
            } 
        }
    }
} 

@media (min-width: 1200px) {
    .wpb-block--archive {
        .wpb-block--archive__results { --gc: 4; } 
        &:has(.wpb-block--archive__aside) .wpb-block--archive__results { --gc: 3; } 
    }
} 

/*** ---------- Block: Media ---------- ***/
.wpb-block--media .wpb-text { margin-bottom: 2rem; }

/*** ---------- Block: FAQ ---------- ***/
.wpb-block--faq {
    .wpb-section__header .wpb-text { text-align: center; }
    .wpb-section__footer { margin-top: 4.8rem; 
        .btn-group { justify-content: center; }  
    }
}

/*** ---------- Block: Steps ---------- ***/
.wpb-block--steps {
    .wpb-section__header .container { display: flex; justify-content: space-between; align-items: center; }
    .swiper { 
        .swiper-wrapper { align-items: stretch; }
        .swiper-slide { height: auto; }
        .card-container, .wpb-card { height: 100%; }
    }
    .wpb-section__footer { margin-top: 4.8rem;
        .btn-group { justify-content: center; }  
    }
}

@media(min-width: 1400px) {
    .wpb-block--steps .wpb-swiper-wrapper {
        .swiper-button-prev, .swiper-button-next { --bg-clr: var(--clr-dark); }
    }
}

/*** ---------- Block: Blurb ---------- ***/
.wpb-block--blurb {
    .wpb-section__body .row { --inline-spacing: .4rem; row-gap: .8rem; }
    .card-container, .wpb-card { height: 100%; }

    &.wpb-bg-clr--gradient, &.wpb-bg-clr--transparent {
        .wpb-card { background-color: var(--clr-secondary); }
    }
}

/*** ---------- Block: Tabs ---------- ***/
.wpb-block--tabs {
    .wpb-text { margin-bottom: 2rem; }

    &.wpb-bg-clr--secondary .wpb-tabs { --body-bg-clr: var(--clr-secondary-120); --active-bg-clr: var(--clr-secondary-120); }
}

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

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

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

/*** ---------- Block: Featured ---------- ***/
.wpb-block--featured-blogs {
    &.wpb-bg-clr--secondary .wpb-card { border: 1px solid var(--clr-secondary-120); }
}

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

    &.wpb-bg-clr--secondary .wpb-card { border: 1px solid var(--clr-secondary-120); }
}

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

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

@media (min-width: 1200px) {
    .wpb-block--companies { --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; }
    .wpb-block--text-gravityform-primary .wpb-card { order: -1; }
}

@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.wpb-ratio--video :is(iframe, img) { border-radius: .5rem; overflow: hidden; }
.wpb-ratio.wpb-ratio--video .youtube-play { border: none; background: transparent; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; cursor: pointer; transition: opacity var(--ts-35) ease; }
.wpb-ratio.wpb-ratio--video .youtube-play img { object-fit: cover; width: 100%; height: 100%; }
.wpb-ratio.wpb-ratio--video .youtube-play .play-icon { position: absolute; top: calc(50% - 3.2rem); left: calc(50% - 3.2rem); display: grid; place-items: center; z-index: 2; border-radius: 50%; width: 6.4rem; height: 6.4rem; transition: .25s ease; }
.wpb-ratio.wpb-ratio--video .youtube-play .play-icon i { font-size: 2rem; color: #fff; }
.wpb-ratio.wpb-ratio--video:hover .youtube-play .play-icon { transform: scale(1.2); }

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

@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: References ---------- ***/
.wpb-block--references { 
    .wpb-section__body {
        .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }

        .wpb-card { --br: .4rem; position: relative;
            .card-title { font-size: 1.4rem; line-height: 1.3; font-weight: 300; }
            .card-excerpt { font-size: 1.8rem; font-weight: 700; }

            .style-asset { width: 17rem; z-index: 2; display: none; position: absolute; }
        }

        .wpb-card:nth-child(2) {
            .wpb-card__header { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--br); overflow: hidden;
                &::before { padding-top: 0; background: linear-gradient(180deg, rgba(46, 16, 40, 0) 38.46%, rgba(46, 16, 40, 0.5375) 59.13%, #2E1028 93.27%); }
            }
            .wpb-card__body { display: flex; flex-direction: column; justify-content: end; padding-top: 22rem; position: relative; z-index: 1; }
        }

        .wpb-card:nth-child(1), .wpb-card:nth-child(3) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; border: none; 
            .wpb-card__header { border-radius: var(--br); overflow: hidden; }
            .wpb-card__body { border-radius: var(--br); border: 1px solid var(--clr-secondary); position: relative; overflow: hidden; z-index: 1;
                &::before, &::after { content: ''; position: absolute; top: 50%; left: 50%; z-index: -1; }
                &::before { transform: translate(-50%, -50%) rotate(30deg); width: 90rem; height: 113rem; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(229, 0, 91, 0.5) 0%, rgba(229, 0, 91, 0) 100%); opacity: .3; }
                &::after { transform: translate(-50%, -50%); width: 90rem; height: 113rem; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, #1F0044 0%, rgba(31, 0, 68, 0) 100%); opacity: .3; }
            }
        }
    }
}

@media (min-width: 768px) {
    .wpb-block--references { 
        .wpb-section__body {
            .wpb-card .style-asset { display: block;
                &.style-asset-1 { left: 22%; top: 50%; }
                &.style-asset-2 { left: 57%; top: 55%; }
            }
            .wpb-card:nth-child(1), .wpb-card:nth-child(3) { grid-template-columns: repeat(3, minmax(0, 1fr));
                .wpb-card__header { grid-column: span 2; 
                    &::before { padding-top: 0; }  
                }
            }
            .wpb-card:nth-child(1) .wpb-card__header { order: 1; }
        }
    }
}

@media (min-width: 992px) {
    .wpb-block--references { 
        .wpb-section__body {
            .container { grid-template-columns: repeat(4, minmax(0, 1fr)); }

            .wpb-card:nth-child(1), .wpb-card:nth-child(3) { grid-column: span 3; }
            .wpb-card:nth-child(2) { grid-row: span 2; }
        }
    }
}

@media (min-width: 1200px) {
    .wpb-block--references { 
        .wpb-section__body .wpb-card { --p: 3.2rem; }
    }
}

@media (min-width: 1200px) {
    .wpb-block--references { 
        .wpb-section__body .wpb-card { min-height: 33.8rem; }
    }
}

/*** ---------- Block: Prices ---------- ***/
.wpb-block--prices {
    .wpb-section__body .container { display: grid; grid-template-columns: repeat(var(--gc, 1),  minmax(0, 1fr)); gap: 1.6rem; }
    .wpb-section__header .wpb-text { text-align: center; }
    .wpb-section__footer { margin-top: 4.8rem; text-align: center;
        .btn-group { justify-content: center; }
    }
}

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

@media (min-width: 992px) {
    .wpb-block--prices { --gc: 3;
        .wpb-block__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); 
            .price-block--primary { grid-column: span 1; grid-row: span 2; padding: 3.8rem; }
            .price-block--secondary { padding: 3.2rem; }
        }   
    }
}