/*** ---------- Algemeen ---------- ***/
.wpb-block { overflow-x: hidden;
    &.text-light .wpb-section__header .wpb-text { color: #fff; }


    :is(.container, .wpb-block__inner, .row) > .wpb-text { padding-inline: var(--padding, 3rem); }

    @media (min-width: 576px) {
        :is(.container, .wpb-block__inner, .row) > .wpb-text { --padding: 3rem; }
    }
    @media (min-width: 992px) {
        :is(.container, .wpb-block__inner, .row) > .wpb-text { --padding: 6rem; }
    }
    @media (min-width: 1400px) {
        :is(.container, .wpb-block__inner, .row) > .wpb-text { --padding: 13rem; }
    }
}

/*** ---------- Block: Header ---------- ***/
.wpb-header {
    --image-h: 40rem;
    --pt: 9rem;
    --padding-bottom: calc(var(--pb, 1rem) + var(--image-h, 0));
    padding-bottom: var(--padding-bottom); padding-top: var(--pt, 0); position: relative; --p: 2.8rem; display: flex; flex-direction: column;
    min-height: 100vh;


    :is(.container, .wpb-block__inner, .row) > .wpb-text { padding: var(--padding, 3rem); }

    @media (min-width: 768px) {
        :is(.container, .wpb-block__inner, .row) > .wpb-text { --padding: 6rem; }
    }
    @media (min-width: 1400px) {
        :is(.container, .wpb-block__inner, .row) > .wpb-text { --padding: 13rem; }
    }
    
    .container .wpb-text * { color: #fff; }
    .is-background-image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; z-index: -1; }
    .is-background-image.is-highlighted { left: 0%; top: calc(100% - var(--image-h)); height: var(--image-h); }
    .is-background-image.is-highlighted::before { content: ''; width: 100%; height: 100%; position: absolute; background: linear-gradient(to bottom,#ffffff7a,transparent); }

    .wpb-signup { position: absolute; display: grid; place-content: center; bottom: 4rem; right: 4rem; border-radius: 100000px; width: 150px; aspect-ratio: 1/1; z-index: 1; padding: 2rem; text-decoration: none; font-size: clamp(2rem, 3.2vw, 2rem); font-weight: 700; text-align: center; color: var(--clr-dark); background-color: var(--clr-accent); transition: background-color var(--ts-duration) var(--ts-function);
        &:hover { background-color: var(--clr-primary); }
    }

    &.wpb-header--subpage { padding-block-end: 0;
        .container {
            .wpb-text {min-width: 60rem;}
        }
    }

    &.wpb-header--404 {
        .container {
            .wpb-text {min-width: 100%;}
        }
    }

    @media (min-width: 768px) { --pt: 9rem; }
    @media (min-width: 1200px) { 
        --pt: 17rem;
        --pb: 8rem;
        --image-h: unset;

        .container {
            .wpb-text { max-width: 50%;
                * {color: #fff;}
            }
        }
        .is-background-image { position: absolute; width: 50%; height: 100%; top: 0; left: 0; object-fit: cover; z-index: -1; }
        .is-background-image.is-highlighted { left: 50%; top: unset; height: 100%; }

        .wpb-signup { position: absolute; display: grid; place-content: center; bottom: var(--pb); right: var(--pb); border-radius: 100000px; width: 332px; aspect-ratio: 1/1; z-index: 1; padding: 2rem; text-decoration: none; font-size: clamp(2rem, 3.2vw, 3.6rem); font-weight: 700; text-align: center; color: var(--clr-dark); background-color: var(--clr-accent); transition: background-color var(--ts-duration) var(--ts-function);
            &:hover { background-color: var(--clr-primary); }
        }
    }
}


/*** ---------- Block: Media ---------- ***/
.wpb-block--media {
    &.text-light * { color: #fff; }
    .container + .container { margin-top: var(--p-y-large); }
    .wpb-image {  overflow: hidden; 
        img {width: 100%; height: 100%; object-fit: cover; border-radius: var(--br); }
    }
}


/*** ---------- Block: Image ---------- ***/
.wpb-block--image .container { min-height: 70rem; }


/*** ---------- Block: Archive ---------- ***/
.wpb-block--archive { 
    .container--results { display: grid; grid-template-columns: repeat(var(--gc, 1), minmax(25rem, 1fr)); gap: 2rem; }

    @media (min-width: 786px) {
        .container--results {--gc: 2; }
    }
    @media (min-width: 992px) {
        .container--results {--gc: 3; }
    }
}


/*** ---------- Block: Accessibility ---------- ***/
.wpb-block--accessibility {
    &.text-light * { color: #fff; }
    .wpb-content {
        h2 { padding-bottom: var(--p, 2rem); }
        .wpb-items { display: flex; flex-direction: column; gap: 4rem; margin-bottom: calc(var(--p) * -1.5);
            &::before {content: ''; width: 100vw; left: calc((var(--offset) + 1rem) * -1) !important;} 
            .wpb-item { display: grid; grid-template-columns: 10rem 1fr; gap: 1.6rem; align-items: center;
                .icon { background-color: var(--clr-dark); aspect-ratio: 1/1; border-radius: 50%; display: flex; justify-content: center; align-items: center; 
                    img { width: 6.4rem; height: 6.4rem; object-fit: contain; object-position: center; }
                }
            }
        }
    }
    .wpb-image { height: 100%;
        img {object-fit: cover; border-radius: var(--br); aspect-ratio: 1/1; }
    }
    
    @media (min-width: 1200px) {
        .wpb-content {
            h2 {--p: 8rem;}
            .wpb-items { gap: 8rem; margin-bottom: 0rem;
                &::before {content: ''; position: absolute; top: 0;  left: calc((var(--offset) + var(--offset) / 2) * -1) !important; height: 100%; width: 60vw; left: calc((var(--offset) + var(--offset) / 2) * -1) !important; background-color: var(--block-bg); z-index: -1; pointer-events: none;}
            }
        }
    }


    .wpb-content { padding-inline: var(--padding, 3rem); }

    @media (min-width: 576px) {
        .wpb-content { --padding: 3rem; }
    }
    @media (min-width: 992px) {
        .wpb-content { --padding: 6rem; }
    }
    @media (min-width: 1400px) {
        .wpb-content { --padding: 13rem; }
    }
}


/*** ---------- Block: Text & Media ---------- ***/
.wpb-block--text-media {
    &:has(.half-left, .half-right) {
        .row.gap--lg-128, .row.gap--xl-128 { --inline-spacing: calc(var(--inline-spacing) * 2); }
    }

    .wpb-image {height: 100%;
        img { height: 100%; object-fit: cover; border-radius: var(--br); aspect-ratio: 1/1; }
    }
}
    


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

    @media (min-width: 992px) { 
        .container { column-gap: 3.2rem;}
    }
    @media (min-width: 1200px) { 
        .container { column-gap: 6.4rem;}
    }
    @media (min-width: 1200px) { 
        .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; }
    }
}