/*** ---------- Block: Assets ---------- ***/
*:has(> .wpb-bg-assets){ position: relative; }
*:has(> .wpb-bg-assets) .container{ z-index: 2; }
.wpb-bg-assets{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden }

.wpb-bg-asset{
    --src: ; --bg-clr: var(--clr-dark); --opacity: .05; --w: 50rem; --h: 50rem; --top: auto; --right: auto; --bottom: auto; --left: auto;
    background-color: var(--bg-clr); opacity: var(--opacity); width: var(--w); min-width: var(--w); height: var(--h); mask: var(--src) center/contain no-repeat; -webkit-mask: var(--src) center/contain no-repeat; position: absolute; top: var(--top); right: var(--right); bottom: var(--bottom); left: var(--left);
    
    &.wpb-bg-asset--halfcircle{ --src: url('/app/themes/wuxnl-theme/assets/img/mask/half-circle.svg'); --h: calc(var(--w) / 2); --top: calc(-1 * var(--h) / 3); --left: calc(-1 * var(--w) / 3); transform: rotate(-15deg); }
    &.wpb-bg-asset--monogram{ --src: url('/app/themes/wuxnl-theme/assets/img/mask/monogram.svg'); --h: var(--w); --bottom: calc(-1 * var(--h) / 10); --right: calc(-1 * var(--w) / 3); }
}
.wpb-bg-clr--dark .wpb-bg-asset{ --bg-clr: var(--clr-primary-120); --opacity: .6; }
.has-background-asset .wpb-bg-asset{ --bg-clr: #FFFF; --opacity: .3; }

@media (max-width: 767.98px){
    .wpb-bg-assets .wpb-bg-asset + .wpb-bg-asset{ display: none; }
}

@media (min-width: 992px){
    .wpb-bg-assets .wpb-bg-asset.wpb-bg-asset--halfcircle{ --w: 85rem; }
    .wpb-bg-assets .wpb-bg-asset.wpb-bg-asset--monogram{ --w: 90rem; }
}
@media (min-width: 1200px){
    .wpb-bg-assets .wpb-bg-asset.wpb-bg-asset--halfcircle{ --w: 110rem; }
    .wpb-bg-assets .wpb-bg-asset.wpb-bg-asset--monogram{ --w: 110rem; }
}


/*** ---------- Block: Divider ---------- ***/
.wpb-block--divider{ --height: 3.6rem; --border-width: 2px; position: relative; display: flex; align-items: center; height: var(--border-width); overflow-x: clip; z-index: 5;
    &::before{ content: ''; position: absolute; left: 0; right: 0; width: 100%; height: var(--border-width); background-color: var(--clr-primary); }
    & svg{ position: absolute; left: 0; right: 0; width: 100vw;}
    & svg path{ position: absolute; right: 0; left: 0; }
}
.wpb-divider-wave{ --clr-stroke: var(--clr-darkgray); }
.wpb-divider-wave path{ stroke: var(--clr-stroke); stroke-width: 2px; }


@media (max-width: 991.98px) { 
    .wpb-block--divider{
        & svg{ height: 2rem; width: auto;}
    }
}


/*** ---------- Block: Intro ---------- ***/
.wpb-block--intro .container > .wpb-text{ max-width: 81rem; }
.wpb-block--intro .container > .wpb-text p{ font-size: clamp(1.6rem, 2vw, 2.4rem); }
.wpb-block--intro .container{ --gap: 4rem; display: grid; gap: var(--gap); }

.wpb-block--intro .container .wpb-cta{ order: 5; }

@media (min-width: 768px){
    .wpb-block--intro .container{ grid-template-columns: 1fr auto; }
    .wpb-block--intro .container .row{ grid-column: span 2; }
    .wpb-block--intro .container .wpb-cta{ order: inherit; }
}
@media (min-width: 992px){
    .wpb-block--intro .container{ --gap: 5.6rem; }
}

/*** ---------- Block: Quote ---------- ***/
.wpb-block--quote .container{ display: flex; flex-direction: column; 
    &.container--align-center{ align-items: center; }
    &.container--align-end{ align-items: end; }
}
.wpb-block--quote .wpb-block__inner { max-width: 90rem; padding-block: 2rem; display: flex; flex-direction: column; gap: clamp(2.8rem, 3.5vw, 4rem);}
.wpb-block--quote .wpb-block__inner.quote-first { flex-direction: column !important; }
.wpb-block--quote .wpb-block__inner.person-first { flex-direction: column-reverse !important; }


/*** ---------- Block: Tekst & media ---------- ***/
.wpb-block--text-media{}

@media (max-width: 991.98px){
    .wpb-block--text-media{ overflow: hidden; }
    .wpb-block--text-media .wpb-image{ --br: 0; margin-top: calc(-1 * var(--pt)); width: 100vw; margin-left: calc((100vw - 100%) / -2); }
    .wpb-block--text-media .wpb-image.wpb-image--format{ padding-bottom: min(var(--aspect-ratio), 40rem); }
    .wpb-block--text-media .btn-group .btn {width: 100%;}
}


/*** ---------- Block: cta & media ---------- ***/
.wpb-block--cta-media{ }
.wpb-block--cta-media .wpb-text img {height: 5.3rem; width: auto; }

@media (max-width: 991.98px){
    .wpb-block--cta-media{ overflow: hidden; }
    .wpb-block--cta-media .wpb-image{ --br: 0; margin-top: calc(-1 * var(--pt)); width: 100vw; margin-left: calc((100vw - 100%) / -2); }
    .wpb-block--cta-media .wpb-image.wpb-image--format{ padding-bottom: min(var(--aspect-ratio), 40rem); }
}


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

@media (min-width: 992px) {
    .wpb-block--faq-primary, .wpb-block--faq-secondary { --gc: 2; align-items: start; }
    .wpb-block--faq-primary .container, .wpb-block--faq-secondary .container { column-gap: 3.2rem; }
    .wpb-block--faq-primary .container .wpb-accordion { order: -1; }
}

@media (min-width: 1200px) {
    .wpb-block--faq-primary .container, .wpb-block--faq-secondary .container { column-gap: 6.4rem; }
}



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


/*** ---------- Block: geschiedenis ---------- ***/
.wpb-block--geschiedenis .wpb-text { margin-bottom: 2rem; }
.wpb-block--geschiedenis .wpb-image { position: relative; }
.wpb-block--geschiedenis .wpb-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.wpb-block--geschiedenis .wpb-image::after { content: ''; display: block; width: 100%; padding-top: 75%; }

.wpb-block--geschiedenis { overflow: hidden;
    & .container {overflow: visible;}
    & .container--history {max-width: 47.2rem;}
    & .blaze-slider.blaze-slider--history .blaze-track-container {overflow: visible;}
    & .blaze-slider.blaze-slider--history .blaze-nav-container {justify-content: center; margin-top: 2.4rem;}
    & .blaze-slider.blaze-slider--history .blaze-track-container .blaze-track {margin: 3.8rem 0;}
}


/*** ---------- Block: Header ---------- ***/
.wpb-header.wpb-header--search form { position: relative; }
.wpb-header.wpb-header--search form [type="submit"] { display: inline-flex; cursor: pointer; user-select: none; padding: 0.25rem 1rem; border: none; background: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.wpb-header.wpb-header--search form [type="submit"] img { width: 1.5rem; }

.wpb-header .wpb-header__toolbar { display: flex; align-items: center; gap: 1.6rem; padding-bottom: 2.8rem; }
.wpb-header .wpb-header__toolbar .btn { white-space: nowrap; }
.wpb-header .wpb-header__toolbar .wpb-breadcrumbs .breadcrumb_last { margin: 0; --excerpt-line-clamp: 1; display: -webkit-box; -webkit-line-clamp: var(--excerpt-line-clamp); -webkit-box-orient: vertical; overflow: hidden; }

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

@media (min-width: 576px) and (max-width: 991.98px) {
    .wpb-block--projects .wpb-section__body .container >*:first-child{ grid-column: span 2; }
}
@media (min-width: 576px) {
    .wpb-block--projects .wpb-section__body { --gc: 2; }
}
@media (min-width: 992px) {
    .wpb-block--projects .wpb-section__body { --gc: 3; }
    .wpb-block--projects .wpb-section__body .container{ gap: 2.4rem; }
}

/*** ---------- Block: Vacancies ---------- ***/
.wpb-block--vacancies .wpb-section__body .container{ --gap: 1.4rem; --gc: 1; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); }
.wpb-block--vacancies .wpb-section__cta strong{ font-size: clamp(1.6rem, 2vw, 2rem); }

@media (min-width: 768px) {
    .wpb-block--vacancies .wpb-section__body .container{ --gc: 2; }
}
@media (min-width: 1200px) {
    .wpb-block--vacancies .wpb-section__body .container{ --gc: 3; }
}

@media (min-width: 768px) and (max-width: 1199.98px){
    .wpb-block--vacancies .wpb-section__body .container .wpb-card--featured{ grid-column: span 2; }
}

/*** ---------- Block: Archive ---------- ***/
.wpb-block--archive .wpb-filters:has(form > *){ padding-bottom: 2.4rem; }
.wpb-block--archive .container--results{ --gap: 1.2rem; --gc: 1; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); }

@media (min-width: 576px){
    .wpb-block--archive .container--results{ --gc: 2; }
}
@media (min-width: 768px){
    .wpb-block--archive .container--results{ --gap: 2.4rem; }
}
@media (min-width: 992px) {
    .wpb-block--archive .wpb-filters:has(form > *){ padding-bottom: 4.8rem; }
    .wpb-block--archive .container--results{ --gc: 3; }
}
@media (min-width: 1200px) {
    .wpb-block--archive--products .container--results{ --gc: 4; }
}

/*** ---------- Block: CTA ---------- ***/
.wpb-block--cta .wpb-text{ text-align: center; 
    .wpb-teamgrid{ justify-content: center; }
    & p{ font-size: clamp(1.8rem, 2vw, 2.4rem); }
    & .btn{ --mt: 3.2rem; }
}
.wpb-block--cta .wpb-bg-assets .wpb-bg-asset{ --w: 50rem; --h: calc(100% + 4.8rem); --bottom: -2.4rem; --top: -2.4rem;
    &:first-child{ --left: -20%; }
    &:last-child{ --right: -20%; }
}

@media (min-width: 992px){
    .wpb-block--cta .wpb-bg-assets .wpb-bg-asset{ --w: 75rem; }
}

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

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

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

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



/*** ---------- Block: Youtube embed ---------- ***/
.wpb-block--youtube .container { column-gap: 2rem; row-gap: 2rem; }
.wpb-block--youtube .wpb-ratio :is(iframe, img) { border-radius: .5rem; }
.wpb-block--youtube .wpb-ratio .youtube-play { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; cursor: pointer; transition: opacity var(--ts-35) ease; }
.wpb-block--youtube .wpb-ratio .youtube-play img { object-fit: cover; width: 100%; height: 100%; }
.wpb-block--youtube .wpb-ratio .youtube-play .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; }
.wpb-block--youtube .wpb-ratio .youtube-play .play-icon i { color: rgb(255,255,255); }
.wpb-block--youtube .wpb-ratio:hover .youtube-play .play-icon { transform: scale(1.065); }

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

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

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