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


/*** ---------- Block: Media ---------- ***/
.wpb-block--text-media {
    .container.container--large {border-radius: var(--br); overflow: hidden;}

    .wpb-block__header {}
    .wpb-block__content { --p: 6.4rem;

        .row {
            &.align-top {--jc: flex-start;}
            &.align-center {--jc: center;}
            &.align-bottom {--jc: flex-end;}
        }

        .wpb-column { overflow: hidden;  height: 100%;
            &.column--left {
                .wpb-content { height: 100%; border-radius: var(--br); border-bottom-left-radius: var(--br-xl); padding: var(--p); display: flex; flex-direction: column; gap: 2.8rem; justify-content: var(--jc); } 
            }
            &.column--right { 
                .wpb-image { height: 100%;
                    img {border-radius: var(--br); border-top-right-radius: var(--br-xl); height: 100%; object-fit: cover;}
                }
            }
        }
    }


    .wpb-content { --border-clr: var(--clr-porcelain);
        &.wpb-bg-clr--secondary { --border-clr: #ffffff20; }
        &.wpb-bg-clr--transparent {--p: 0; }

        .wpb-text {
            :is(h3) {--fs: clamp(1.8rem, 2vw, 2rem); line-height: 150%;}
        }

        .btn-group {
            padding-top: 1.6rem;
            border-top: 2px solid var(--border-clr);

            [class*="btn--link"] {font-weight: 600;}
        }

        .wpb-logos-wrapper { display: flex; flex-wrap: wrap; gap: 2.4rem; align-items: center;
            .wpb-logo {max-width: 14rem;}
        }

        .wpb-numbers-wrapper { display: flex; flex-wrap: wrap; column-gap: 4rem;
            .wpb-number { --mt: 0;
                .number__value {display: flex; font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.1; font-weight: 800;
                    .wpb-number__value {color: var(--clr-primary) !important; }
                    .wpb-number__property {color: var(--clr-primary) !important; }
                }
                .number__label {}
            }
        }

        .wpb-usps-wrapper { 
            .usps__label {text-transform: uppercase; font-size: 1.2rem; font-weight: 700; color: var(--clr-blue-600);}
            .usps__list {--mr: 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem;
                .usps__item {list-style: none; position: relative; padding-left: 2.8rem;
                    i { position: absolute; left: 0; top: .2rem; background-color: var(--clr-primary); color: #fff; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1rem;}
                }
            }
        }
    }
}


/*** ---------- 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: cta ---------- ***/
.wpb-block--cta { background: linear-gradient(180deg, #4698CB 0%, #3ACFBD 166.94%); 
    &::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; 
        background-image: url("/app/themes/wuxnl-theme/assets/icons/default/icon_delft_circle.svg");
        background-repeat: space;
        background-size: 3.8rem;
        mask-image: linear-gradient(to top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 70%);
        -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 70%);
        pointer-events: none;
    }

    .container { display: grid; justify-content: space-between; grid-template-columns: 1fr; gap: 4rem; }
    .wpb-text {text-wrap: balance; color: #fff; 
        :is(h2, h3, p) { color: inherit; }
    }

    .wpb-quote-usps { border-top: 2px solid #ffffff50; padding-top: 4rem; color: #ffffff;
        .wpb-author {margin-bottom: 2.4rem;
            .content .quote p {max-width: 23rem;}
        }
        .label {text-transform: uppercase; letter-spacing: .1rem; font-weight: 700;}
        .usps { list-style: none; padding: 0; margin-top: 1.4rem; display: flex; flex-direction: column; gap: 1.2rem;
            .usp-item { padding-left: 3.2rem; position: relative; display: flex; align-items: center;
                i { width: 2.2rem; height: 2.2rem; aspect-ratio: 1 / 1; border-radius: 50%; position: absolute; left: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #176595 0%, #34BEAD 129.55%);}
            }
        }
    }
}

@media (min-width: 992px) {
    .wpb-block--cta .container { grid-template-columns: 1fr 52rem;}
    .wpb-quote-usps { border-left: 2px solid #ffffff50; padding-left: 4rem; border-top: none !important; padding-top: 0 !important;}
}


/*** ---------- Block: Blurb ---------- ***/
.wpb-block--blurb {
    .wpb-block__content {--m: 4.8rem;
        .align-left * { text-align: left; }
        .align-center * { text-align: center; }
        .align-right * { text-align: right; }
        .card-container {height: 100%;}
    }

    .wpb-block__footer { --mt: 3.2rem;
        .wpb-author {margin-top: var(--mt); padding-top: 2.4rem; border-top: 2px solid var(--clr-primary);
            & .content {
                .quote { font-size: 2.2rem;}
            }
        }
    }

    @media (min-width: 768px) {
        .wpb-block__footer {--mt: 6rem; }
    }
}


/*** ---------- Block: blurb pages ---------- ***/
.wpb-block--blurb-posts { 
    .container.container--large {border-radius: var(--br); overflow: hidden;}

    .wpb-block__content {--m: 4.8rem; margin-bottom: 6.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem; 
        .card-container { flex-basis: calc(25% - 1.8rem); flex-grow: 1; max-width: 64rem; min-width: 30rem;}
        .card-container:has(.wpb-card.wpb-card--download) { flex-basis: 40rem; }
    }
}


/*** ---------- 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: Header ---------- ***/
.wpb-header { --nav-height: 12.9rem; z-index: 1;

    .wpb-text h1 { font-weight: 400;
        strong { font-weight: 800; }
    }

    .wpb-header__crumbs { margin-bottom: 3.2rem; }

    .wpb-header__post { margin-top: 3.2rem; 
        background: linear-gradient(to top, #fff 20%, transparent 20%);
    }

    .wpb-header__assets { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; overflow: hidden; }

    &.has-background-image {
        .wpb-text *:not(.btn) { text-shadow: 0px 2px 20px #00000033; }
        &::after { background: linear-gradient(180deg, rgba(12, 27, 49, 0.8) 0%, rgba(12, 27, 49, 0.7) 7.35%, rgba(12, 27, 49, 0) 25.24%), linear-gradient(180deg, rgba(12, 27, 49, 0) 50%, rgba(12, 27, 49, 0.7) 85.44%, rgba(12, 27, 49, 0.8) 100%); }
    }

    &:has(.wpb-header__crumbs) { padding-top: calc(var(--nav-height) + 4.8rem); }

    .wpb-header__info { --gc: 2; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: .8rem; 
        .info-item { text-decoration: none; border-radius: var(--br); padding: 2.4rem 2rem; color: #fff; display: flex; flex-direction: column; gap: 1rem; justify-content: center; text-align: center; background-color: rgba(79, 104, 129, .8); backdrop-filter: blur(1.2rem); -webkit-backdrop-filter: blur(1.2rem); transition-property: color, background-color; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function);
            strong { display: block; width: 100%; font-size: clamp(1.8rem, 1.3vw, 2.2rem); line-height: 1.2; font-weight: 800; }
            span { text-transform: uppercase; font-size: 1.3rem; opacity: .65; font-weight: 700; }
            &:hover { background-color: #fff; color: var(--clr-text); }
        }
    }

    /* Background colors */
    &.wpb-bg-clr--white .wpb-breadcrumbs :is(span, a),
    &.wpb-bg-clr--light .wpb-breadcrumbs :is(span, a) { color: var(--clr-text); }
    
    /* Header variations */
    &.wpb-header--home { display: flex; align-items: end; min-height: 96dvh; padding: 0 0 4.8rem 0; 
        .wpb-text {display: flex; flex-direction: column;
            h1 { --fs: clamp(3.2rem, 5vw, 8rem); --lh: 1.05; font-weight: 400; grid-column: span 2; text-wrap: balance; }
            p { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
        }
    }

    &.wpb-header--subpage { padding-bottom: 4.8rem; display: flex; flex-direction: column; }

    &.wpb-header--archive { padding-bottom: 4.8rem;
        &:has(.wpb-header__post) { padding-bottom: 0; }   
    }

    &.wpb-header--resources { padding-bottom: 4.8rem; display: flex; flex-direction: column; min-height: 65.5rem; max-height: 75dvh;
        .wpb-header__body { margin-top: auto; 
            .container { display: grid; align-items: end; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
        }
    }

    
}

@media (max-width: 496px) {
    .wpb-header.wpb-header--home .wpb-text .btn-group .btn {width: 100%;}
}

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

        .wpb-header__crumbs { margin-bottom: 5.4rem; }

        .wpb-header__post { margin-top: 4.8rem; }

        &.wpb-header--home { min-height: 93rem;
            .wpb-text {--mt: 4rem; --gc: 2; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); align-items: end;
                .btn-group {margin-left: auto;}
            }
        }
    }
}

/*** ---------- Block: Text media tabs ---------- ***/
.wpb-block--media-tabs .container > .wpb-text { margin-bottom: 2rem; }
.wpb-block--media-tabs .inner { gap: 3.2rem; align-items: center; }
.wpb-block--media-tabs .tab__images { display: grid; overflow: hidden; } 
.wpb-block--media-tabs .tab__images > figure { grid-row: 1/-1; grid-column: 1/-1; opacity: 0; transition: opacity var(--ts-15) ease; transition-delay: var(--ts-35); }
.wpb-block--media-tabs .tab__images figure.active { opacity: 1; transform: scale(1); }
.wpb-block--media-tabs .tab__images figure img { height: 100%; width: 100%; object-fit: contain; }
.wpb-block--media-tabs .tab__content { display: grid; position: relative; gap: 2rem; }
.wpb-block--media-tabs .tab__item { display: grid; align-items: center; }
.wpb-block--media-tabs .tab__item.has-icon { grid-template-columns: 6.4rem 1fr; -ms-grid-columns: 6.4rem 1fr; gap: 1.6rem; }
.wpb-block--media-tabs .tab__item .icon { background-color: var(--wpb-primary); border-radius: 50%; width: 6.4rem; height: 6.4rem; padding: 1.4rem; transition: box-shadow var(--ts-15) ease; }
.wpb-block--media-tabs .tab__item .icon img { width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 992px) {
    .wpb-block--media-tabs .inner { gap: 8.2rem; }
}


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


/*** ---------- Block: Image ---------- ***/
.wpb-block--image { overflow: hidden; position: relative;
    .wpb-block__body {--h: 80vh; position: relative; margin: auto; height: var(--h); overflow: hidden;  border-radius: var(--br-lg);
        &::after { content: ''; position: absolute; top: 0;  left: 0; right: 0;  bottom: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(12, 27, 49, 0.8) 8.99%, rgba(12, 27, 49, 0) 30.42%, rgba(12, 27, 49, 0) 48.91%, rgba(12, 27, 49, 0.8) 66.52%, rgba(12, 27, 49, 0.8) 100%); }

        .container {--p: 4rem; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--p) var(--inline-spacing);
            .wpb-text.main-content {max-width: 88rem;}
            .wpb-text.btn-text {max-width: 42rem; font-size: clamp(2rem, 3vw, 3.6rem); font-weight: 800; line-height: 1.1;}
        }
        .wpb-bg__image { z-index: -1; content: '';position: absolute;top: 0; left: 0;right: 0; bottom: 0;width: 100%; height: 100%;
            img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
        }
    }
 }

@media (min-width: 768px) {
    .wpb-block--image .wpb-block__body .container {--p: 4rem; padding: var(--p);}
}
@media (min-width: 992px) {
    .wpb-block--image .wpb-block__body .container {--p: 5.6rem; 
        .wpb-text.main-content {text-align: right; margin-left: auto;}
    }
}
@media (min-width: 1200px) {
    .wpb-block--image .wpb-block__body { --h: 89rem; }
    .wpb-block--image .wpb-block__body .container {--p: 9rem 4rem; }
}
@media (min-width: 1600px) {
    .wpb-block--image .wpb-block__body .container {--p: 9rem var(--inline-spacing); }
}



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

@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: Featured ---------- ***/
.wpb-block--featured-product {
    .wpb-section__header {}
    .wpb-section__body {

        .wpb-usps { --mr: 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem;
            .usps__list { column-count: 2;
                .usps__item {list-style: none; position: relative; padding-left: 2.8rem;
                    i { position: absolute; left: 0; top: .2rem; background-color: var(--clr-primary); color: #fff; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1rem;}
                }
            }
        }

        .wpb-gallery {--mt: 4rem; --gc: 4; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 2rem; margin-top: var(--mt);
            .wpb-image img {
                aspect-ratio: 1/1;
            }
        }
    }

}


/*** ---------- Block: Case studies - grid ---------- ***/
.wpb-block--case-studies { position: relative; overflow: hidden;
    &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-image: url("/app/themes/wuxnl-theme/assets/img/world_map.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .1;}

    .case-study-grid {--gc: 1; display: grid; grid-template-columns: repeat(var(--gc), 1fr); gap: 2rem; margin: 5.4rem 0; align-items: stretch;
        .card-container .wpb-card.wpb-card--download  { background-color: var(--clr-dark); min-height: 32rem;}

        .featured-image { position: relative; width: 100%; height: 100%; max-height: 38rem; border-radius: var(--br); overflow: hidden;
            img { width: 100%; height: 100%; object-fit: cover; display: block; }
        }
    }

    .wpb-block__header {
        .wpb-text p {opacity: .8;}
    }

    @media (min-width: 768px) {
        .case-study-grid {--gc: 2; 
            .card-container:has(.wpb-card.wpb-card--download) {grid-column: span 2;}
            .featured-image { grid-column: span 2; }
        }
    }
    @media (min-width: 1200px) {
        .case-study-grid {--gc: 4; }
    }
}


/*** ---------- Block: Text usp ---------- ***/
.wpb-block--text-usp {
    .wpb-content { display: flex; flex-direction: column; gap: 3.6rem; height: 100%;
        .row { row-gap: 4.2rem;}
        .wpb-text {
            :is(h2) {--fs: clamp(2.8rem, 4vw, 4.8rem);}
            p { font-size: clamp(1.8rem, 2.6vw, 2.4rem); color: var(--clr-blue-700); text-wrap: auto;}
        }
        .wpb-author {margin-top: auto; padding-top: 3.6rem; border-top: 2px solid var(--clr-primary);}
    }
    .wpb-usps {
        display: flex; flex-direction: column; gap: 2rem;
    }
}


/*** ---------- Block: Text Shortcode ---------- ***/
.wpb-block--text-shortcode .container { column-gap: 2rem; row-gap: 2rem; 
    .wpb-content { display: flex; flex-direction: column; gap: 3.6rem; 
        .row { row-gap: 4.2rem;}
        .wpb-text {
            p {color: var(--clr-blue-700); text-wrap: auto;}
        }
        .wpb-author {margin-top: auto; padding-top: 3.6rem; border-top: 2px solid var(--clr-porcelain);}
    }
}


@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: 1400px) {
    .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; }
}



/*** ---------- Block: Timeframe ---------- ***/
.wpb-block--timeframe .wpb-text { margin-bottom: 2rem; }
.wpb-block--timeframe .wpb-timeframe__content { padding: 3.2rem 0; display: -ms-grid; display: grid; overflow-x: auto; }
.wpb-block--timeframe .wpb-timeframe__content::-webkit-scrollbar { height: 1rem; }
.wpb-block--timeframe .wpb-timeframe__content::-webkit-scrollbar-track { background: #ccc; border-radius: .35rem; }
.wpb-block--timeframe .wpb-timeframe__content::-webkit-scrollbar-thumb { background: #000; border-radius: .35rem; }

.wpb-block--timeframe .wpb-timeframe__content .wpb-timeframe__grid { grid-row: 1/-1; grid-column: 1/-1; position: relative; display: grid; grid-template-columns: repeat(99, minmax(0, 1fr)); gap: 1.5rem 0; } 
.wpb-block--timeframe .wpb-timeframe__content .wpb-timeframe__grid--items { z-index: 3; margin: 2.2rem 0; }
.wpb-block--timeframe .wpb-timeframe__content .wpb-timeframe__grid--indicators { z-index: 1; }

.timeframe-item { background-color: var(--clr-primary); display: inline-block; padding: 1rem 1.5rem; border-radius: .5rem; position: relative; margin-right: .5rem; margin-left: .5rem; }
.timeframe-item.timeframe-item--primary { background-color: var(--clr-primary); }
.timeframe-item.timeframe-item--striped :is(strong, span) { color: #fff; position: relative; z-index: 2; }
.timeframe-item.timeframe-item--striped::before { content: ''; border-radius: .8rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(-65deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1.25rem, transparent 1.25rem, transparent 2.5rem); }

.timeframe-item strong { display: block; font-size: 1.6rem; line-height: 1.4; color: #fff; }
.timeframe-item span { display: block; font-size: 1.4rem; line-height: 1.4; color: #fff;  }
.timeframe-item:first-child { margin-left: 0!important; }
.timeframe-item:last-child { margin-right: 0!important; }

.wpb-timeframe__indicator { position: relative; width: .1rem; background-color: var(--clr-border); }
.wpb-timeframe__indicator::before { content: attr(data-phase); color: var(--clr-text); position: absolute; bottom: calc(100% + 1rem); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 1.4rem; line-height: 1.4; }
.wpb-timeframe__indicator:first-of-type::before { left: 100%; transform: none; }
.wpb-timeframe__indicator:last-of-type::before { left: auto; right: 100%; transform: none; }



/*** ---------- 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; }
    .wpb-block--meili-archive .btn--filter-toggle { display: none; }
}