/*** ---------- Algemeen ---------- ***/
.wpb-block {--m: 1rem; --inline-margin: var(--m); --gap: 3.2rem; margin: 0 var(--inline-margin); border-radius: var(--br-lg); position: relative;
    &.wpb-bg-clr--transparent {margin: 0;}
    &.text-light {
        .wpb-block__header .wpb-text { color: #fff; }
        .wpb-label { --clr: var(--clr-primary-light); }
    }

    .wpb-block__header {display: flex; margin-bottom: var(--gap);
        .wpb-text {max-width: 80rem;}    
    }
    .wpb-block__footer {margin-top: var(--gap);}

    /* text position variables*/
    &.text--center {
        .wpb-block__header {justify-content: center; text-align: center;}
        .wpb-block__footer {
            .btn-group { justify-content: center;}
        }
    }

    @media (min-width: 992px) {--m: 1.8rem; --gap: 4.8rem;
        &:has(.container.container--large) {--inline-margin: calc(var(--m) * 2);}
    }
    @media (min-width: 1200px) {
        &:has(.container.container--large) {--inline-margin: calc(var(--m) * 3);}
    }
}


/*** ---------- Block: Header ---------- ***/
.wpb-header { padding-block: 4.8rem; border-radius: var(--br-lg); overflow: hidden;
    .is-background-image {pointer-events: none;}
    .header-assets { pointer-events: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0;
        &::before { 
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: var(--src) no-repeat left bottom / contain;
        }
        &::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: var(--src) no-repeat right bottom / contain;
        }
    }

    .wpb-text {
        /* p {--mt: 0;} */
        .btn-group{flex-direction: column;
            .btn {width: 100%;}
        }
    }

    &.wpb-header--home {--m: 1rem; --h: 56rem; margin: var(--m); height: var(--h); display: flex; align-items: flex-end; padding-block: 2.4rem;
        &::after {
            content: ''; 
            position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; 
            background: linear-gradient(180deg, transparent 50%, var(--clr-primary) 80%);
        }

        .wpb-label {font-size: clamp(2rem, 2.4vw, 3.2rem); color: inherit;
            &::before {content: none;}
        }
        .wpb-text {max-width: 64rem;}

        .header-assets {
            &::before { --src: url('/app/themes/wux-theme/assets/img/bg/hero-home-left.png');}
            &::after { --src: url('/app/themes/wux-theme/assets/img/bg/hero-right.png');}
        }
    }

    &.wpb-header--subpage { --m: 1rem; --h: 56rem; margin: var(--m); height: var(--h); display: flex; align-items: flex-end;
        &.has-background-image::after {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); z-index: -1; }
        .wpb-label { font-size: clamp(1.6rem, 2vw, 2.4rem); color: inherit; --clr: inherit; }
        .wpb-text {text-align: center; 
            .btn-group {justify-content: center;}
        }

        .header-assets {
            &::before { --src: url('/app/themes/wux-theme/assets/img/bg/hero-left.png');}
            &::after { --src: url('/app/themes/wux-theme/assets/img/bg/hero-right.png');}
        }
    }

    &.wpb-header--team { --m: 1rem; --h: 48rem; --min-h: 48rem; margin: var(--m); height: var(--h); min-height: var(--min-h); display: flex; align-items: flex-end; background-color: var(--clr-black);
        &.has-background-image::after {background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 100%);}
        .container { z-index: 2;
            .wpb-text {max-width: 64rem; font-size: clamp(1.8rem, 2vw, 2rem); line-height: 1.5; font-weight: 400;
                .wpb-label { --clr: var(--clr-primary-light); }
            }
        }

        .wpb-image {position: absolute; top: 0; right: -10vw; width: auto; height: 125%; pointer-events: none;
            img {object-fit: cover; width: 100%; height: 100%;}
        }

        .header-assets { z-index: 1;
            &::before {width: 70%; height: 70%; --src: url('/app/themes/wux-theme/assets/img/bg/hero-left.png');}
            &::after { --src: url('/app/themes/wux-theme/assets/img/bg/hero-right.png');}
        }
    }

    &.wpb-header--single {--p: 8rem; --m: 1rem; --gap: 4rem; padding-block: 6rem; padding-top: var(--p); margin: var(--m); display: flex; align-items: flex-end; background-color: var(--clr-white);
        .container {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); 
            > .wpb-text { font-size: var(--fs-xl); display: flex; flex-direction: column; gap: 2.4rem;
                .wpb-header__title {font-weight: 500; line-height: 1.2;}

                .written-by {--p: 2.4rem 3.2rem; padding: var(--p); margin-top: auto; display: flex; justify-content: space-between; align-items: center; text-decoration: none; border: 1px solid var(--clr-border); border-radius: var(--br-sm); position: relative;
                    .wpb-author {display: flex; align-items: center; gap: .8rem;}
                    .btn {
                        &::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
                    }
                }
            }
            .wpb-image {
                img {height: 100%; max-height: 40rem; object-position: center;object-fit: cover;}
            }
        }
    }

    &.wpb-header--text {--p: 12rem; padding-top: var(--p); 
        .container {display: flex; flex-direction: column; align-items: center; text-align: center;
            .wpb-text {max-width: 104rem;
                .btn-group {justify-content: center;}
            }
        }
    }

    &.wpb-header--archive {--p: 12rem; padding-top: var(--p); 
        .container {display: grid; flex-direction: column; 
            .wpb-text {max-width: 82rem;}
        }
    }


    @media (max-width: 767.98px) {
        &.wpb-header--home { position: relative;

        }
    }

    @media (min-width: 576px) {
        &.wpb-header--home {padding-block: 5.6rem; }
        .wpb-text {
            .btn-group {flex-direction: row; 
                .btn {width: fit-content;}
            }
        }
    }
    @media (min-width: 768px) {
        &.wpb-header--home {--h: 92dvh; min-height: 48rem; padding-block: 8rem;
            &.has-background-image::after { content: none; }
        }
        &.wpb-header--subpage {--h: 92dvh; padding-block: 8rem; }
        &.wpb-header--team {--h: 92dvh; --min-h: 60rem; padding-block: 8rem; }
    }
    @media (min-width: 992px) {
        &.wpb-header--home {--m: 2rem; padding-block: 12rem; border-radius: var(--br-xl);
            .wpb-text {
                .btn-group { --mt: 3rem; }
            }
        }
        &.wpb-header--subpage {--m: 2rem; padding-block: 9rem; border-radius: var(--br-xl);
            .wpb-text {
                .btn-group { --mt: 3rem; }
            }
        }
        &.wpb-header--team {--m: 2rem; --min-h: 72rem; padding-block: 9rem; border-radius: var(--br-xl);
            .wpb-text {
                .btn-group { --mt: 3rem; }
            }
        }
        &.wpb-header--text {--p: 16rem; }
        &.wpb-header--archive {--p: 16rem; }
        &.wpb-header--single {--p: 16rem; --m: 2rem;
            .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
        }
    }
    @media (min-width: 1200px) {
        &.wpb-header--home { padding-block: 15rem; }
        &.wpb-header--text {--p: 24rem; }
        &.wpb-header--team {
            .wpb-image {top: unset; bottom: -35%; right: 5vw;
            }
         }
        &.wpb-header--archive {--p: 24rem; }
        &.wpb-header--single {--p: 24rem; --gap: 6.4rem;
            .container { grid-template-columns: minmax(min(60rem, 100%), 80rem) minmax(min(40rem, 100%), 58rem);}
        }
    }

    /* Short viewport — scale down hero content so it doesn't run into the navigation */
    @media (min-width: 768px) and (max-height: 750px) {
        &.wpb-header--home {
            padding-block: 8rem;
            --fs-h1: clamp(3.2rem, 5.5svh, 5.4rem);
            .wpb-label { font-size: clamp(1.6rem, 2.2svh, 2.4rem); }
        }
        &.wpb-header--subpage { padding-block: 8rem; }
        &.wpb-header--team { padding-block: 8rem; }
    }
}


/*** ---------- Block: Carousel - Galerij ---------- ***/
.wpb-block--carousel-gallery { overflow: hidden;
    .wpb-block__body { 
        .swiper { overflow: visible;
            .swiper-wrapper { align-items: center;
                .swiper-slide {border-radius:  var(--br-lg); height: 60rem; overflow: hidden; transform: scaleY(0.8); transform-origin: center center; transition: transform var(--ts-duration) var(--ts-function);
                    img { height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; border-radius: var(--br-lg); transform: scaleY(1.25); transform-origin: center center; transition: transform var(--ts-duration) var(--ts-function); }
                    &.swiper-slide-active { transform: scaleY(1);
                        img { transform: scaleY(1); border-radius: var(--br-lg); }
                    }
                }
            }

            .swiper-buttons {--width: 4.8rem; justify-content: space-between; position: absolute; top: 50%; left: calc(-1 * var(--width) / 2); right: calc(-1 * var(--width) / 2); z-index: 1; width: calc(100% + var(--width));
                .btn {--min-h: var(--width);}
            }
        }
    }
}


/*** ---------- Block: Carousel - Posts ---------- ***/
.wpb-block--carousel-posts { overflow: hidden;
    .wpb-block__header { display: flex; gap: 2rem; justify-content: space-between; flex-direction: column;
        .wpb-navs { display: flex; align-items: center; gap: 2rem; flex-wrap: nowrap;
            .swiper-pagination {position: relative; height: .8rem; width: 100%; display: flex; flex-wrap: nowrap; bottom: 0;}
            .swiper-buttons {flex-wrap: nowrap;}
        }
    }
    .wpb-block__body { 
        .swiper {overflow: visible;
            .swiper-wrapper {
                align-items: stretch;

                .swiper-slide { height: auto; }
            }
        }
    }

    @media (min-width: 992px) {
        .wpb-block__header { flex-direction: row; align-items: flex-end;  }
        .wpb-block__body { 
            .wpb-navs { top: -10rem; }
        }
    }
}


/*** ---------- Block: Featured ---------- ***/
.wpb-block--featured {
    .wpb-block__body {--gap: 1.6rem; display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center;
        .card-container {flex-basis: calc(50% - (var(--gap) / 1.5)); flex-grow: 1; min-width: 26rem; 
            .wpb-card {
                .wpb-card__header {max-height: 32rem;}
                .wpb-card__footer {
                    .btn {--lh: 1.2; text-wrap: wrap;}
                }
            }
        }
    }
    @media (min-width: 768px) {
        .wpb-block__body { --gc: 2; 
            .card-container {max-width: 50%;}
        }
    }
    
    @media (min-width: 992px) {
        .wpb-block__body { --gc: 3; }
    }
    
    @media (min-width: 1200px) {
        .wpb-block__body { 
            .card-container {flex-basis: calc(33% - (var(--gap) / 1.5)); max-width: 50%;}
        }
    }
}



/*** ---------- Block: Featured ---------- ***/
.wpb-block--featured-podcasts {
    .wpb-block__body {--gap: 1.6rem; display: flex; flex-wrap: wrap; gap: var(--gap);
        .wpb-card {display: flex; flex-basis: calc(50% - (var(--gap) / 2)); flex-grow: 1; min-width: 28rem;}
    }

    @media (min-width: 768px) {
        .wpb-block__body {height: 100%;}
    }
}


/*** ---------- Block: Archive ---------- ***/
.wpb-block--archive {
    .wpb-block__body { --gc: 1;  display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 1rem; }
    
    @media (min-width: 380px) {
        .wpb-block__body {
            &:has(.wpb-card--team) { --gc: 2; }
        }
    }
    @media (min-width: 768px) {
        .wpb-block__body {
            &.is-columns--2 {--gc: 2;}
            &.is-columns--3 {--gc: 2;}
            &.is-columns--4 {--gc: 2;}
        }
    }
    @media (min-width: 992px) {
        .wpb-block__body {
            &.is-columns--3 {--gc: 3;}
            &.is-columns--4 {--gc: 3;}
        }
    }
    @media (min-width: 1200px) {
        .wpb-block__body {
            &.is-columns--4 {--gc: 4;}
        }
    }
}


/*** ---------- Block: specializations ---------- ***/
.wpb-block--specializations {--gc: 1; 
    .wpb-block__body {display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 1.6rem;
        .btn-group .btn {--p: 2rem; width: 100%;}
    }

    .wpb-block__footer {display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 2.4rem;
        .footer-cta {width: fit-content; position: relative; display: flex; align-items: center; gap: 2.4rem;
            .wpb-thumbnails {display: flex; align-items: center;
                .wpb-image {--size: 4.4rem; width: var(--size); height: var(--size); border-radius: 50%; overflow: hidden; background-color: var(--clr-black); border: 2px solid var(--block-bg);
                    margin-left: -0.8rem;
                    &:first-child {margin-left: 0;}
                }
            }
            .wpb-text {display: flex; flex-direction: column;
                .wpb-text__title {font-size: var(--fs-lg); font-weight: 600; font-family: var(--font-accent); margin: 0; line-height: 1;}
                .wpb-text__text  {font-size: var(--fs-md); margin: 0;}
            }
            .btn { --min-h: 2.4rem;
                &::after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
            }
        }
    }

    @media (max-width: 767.98px) {
        .wpb-block__footer {
            .footer-cta { flex-wrap: wrap; justify-content: space-between;
                .wpb-text {order: 2;}
            }
            .btn-group {width: 100%;
                .btn {width: 100%; min-height: 6.8rem !important; }
            }
        }
    }

    @media (min-width: 768px) {--gc: 2;
        .wpb-block__body {
            .btn-group .btn {--p: 3.2rem;}
        }
    }
    @media (min-width: 1200px) {--gc: 3;}
}


/*** ---------- Block: Text Media ---------- ***/
.wpb-block--books {--gc: 1; --p: 3.2rem;
    .wpb-block__inner {border-radius: var(--br-lg); overflow: hidden;
        display: grid;
        align-items: center;
        grid-template-columns: repeat(var(--gc), 1fr);

        .wpb-text { padding: var(--p); order: 0;}
        .wpb-image { height: 100%; order: 1;
            img { height: 100%; object-fit: cover; border-radius: 0;}
        }
    }
    @media (min-width: 992px) {--gc: 2; --p: 6rem;
        .wpb-block__inner {
            .wpb-text  {order: 1;}
            .wpb-image {order: 0;}
        }
    }
    @media (min-width: 1200px) {--gc: 2; --m: 9rem 12rem;}
}


/*** ---------- Block: Text Media ---------- ***/
.wpb-block--text-media {
    .container--large {
        @media (min-width: 1200px) {        
            .wpb-image {--offset: calc(1.8rem + max(0px, 100dvw - var(--container-width--xl) - var(--inline-margin) * 2) / 2); 
                &.order-lg-1 { margin-right: calc(var(--offset) * -1); height: 100%;
                    img {height: 100%; object-fit: cover; object-position: center; }
                }
            }
        }
        @media (min-width: 1400px) {        
            .wpb-image {--offset: calc(1rem + max(0px, 100dvw - var(--container-width--xxl) - var(--inline-margin) * 2) / 2); }
        }
        @media (min-width: 1600px) {        
            .wpb-image {--offset: calc(1rem + max(0px, 100dvw - var(--container-width--xxxl) - var(--inline-margin) * 2) / 2); }
        }
    }

}


/*** ---------- Block: Text memberships ---------- ***/
.wpb-block--memberships {--p: 2rem; --gc: 1;
    .container { background-color: var(--clr-white); border-radius: var(--br-lg); padding: var(--p);
        .wpb-block__body { display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 1.6rem;}
    }

    @media (min-width: 992px) {--p: 3.2rem; --gc: 2;}
    @media (min-width: 1200px) {--p: 4.8rem;}
}


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

@media (min-width: 992px) {
    .wpb-block--text-gravityform .container { column-gap: 3.2rem; }
}

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

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

/*** ---------- Block: Youtube embed ---------- ***/
.wpb-block--text-video {
    .container { column-gap: 2rem; row-gap: 2rem; }
    .wpb-ratio {
        iframe, img { border-radius: .5rem; }
        .youtube-play { border: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; cursor: pointer; transition: opacity var(--ts-35) ease;
            img { object-fit: cover; width: 100%; height: 100%; }
            .play-icon { position: absolute; top: calc(50% - 3.2rem); left: calc(50% - 3.2rem); display: grid; place-items: center; z-index: 2; background-color: var(--clr-primary); border-radius: 50%; width: 6.4rem; height: 6.4rem; transition: .25s ease; 
                i { color: rgb(255,255,255); }
            }
        }
        &:hover .youtube-play .play-icon { transform: scale(1.065); }
    }
}

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

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

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

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