/*** ---------- Block: Articles carousel ---------- ***/
.wpb-block--articles-carousel { overflow: hidden; 
    .wpb-section__header { padding-bottom: 2.4rem; }

    .blaze-slider { --slides-to-show: 1!important; --slide-gap: 1.6rem; 
        .blaze-nav-container { display: flex; align-items: center; position: absolute; top: calc(100% + 2.4rem); right: 0; z-index: 1;
            button { cursor: pointer; border: 1px solid var(--clr-border); background-color: #fff; width: 3.2rem; height: 2.8rem; border-radius: 3rem; display: inline-grid; place-items: center; transition: background-color var(--ts-15) ease, border-color var(--ts-15) ease; 
                i { font-size: 1rem; }
            
                &.blaze-prev { border-top-right-radius: 0; border-bottom-right-radius: 0; }
                &.blaze-next { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
                &:hover { background-color: var(--clr-blue); border-color: var(--clr-blue);
                    i { color: #fff; }
                }
            }
        }
        &.static .blaze-nav-container, &.start button.blaze-prev, &.end button.blaze-next { display: none; }
    }

    .wpb-card { min-height: 25rem; 
        .wpb-card__body { padding: 2rem; }
    }
    
    .wpb-section__footer { padding-top: 2.4rem; }

    @media (min-width: 768px) {
        .blaze-slider { --slides-to-show: 2!important; }
    }
    
    @media (min-width: 992px) {
        .blaze-slider { --slides-to-show: 3!important; --slide-gap: 2.4rem; }
        .wpb-card .wpb-card__body { padding: 2.4rem; }
    }

    @media (min-width: 1400px) {
        .blaze-slider {
            .blaze-nav-container { left: -6.4rem; width: calc(100% + 12.8rem); top: 50%; transform: translateY(-50%);
                button { border-radius: 50%!important; width: 3.6rem; height: 3.6rem;
                    i { font-size: 1.2rem; }
                    &.blaze-next { margin-left: auto; }
                }
            }
        }
        .wpb-card { min-height: 32rem; 
            .wpb-card__body { padding: 3.2rem; }
        }
    }
}

/*** ---------- Block: Product categorieën overzicht ---------- ***/
.wpb-block--about-transoplast {
    .wpb-image img, .wpb-card { --border-radius: 1.2rem; border-radius: var(--border-radius); }
    .wpb-image img { height: 100%; object-fit: cover; }
    
    .wpb-card {
        .wpb-card__body { padding: 1.6rem; }
        &:nth-of-type(3) .wpb-card__body { display: flex; flex-direction: column; justify-content: end; align-items: start; }
    }

    .wpb-block__body .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    
    @media (min-width: 768px) {
        .wpb-card {
            .wpb-card__body { padding: 2.4rem; }
            &:nth-of-type(1) { order: -1; }
            &:nth-of-type(1), &:nth-of-type(3) { grid-column: span 2; }
        }
        .wpb-block__body .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
    }
    
    @media (min-width: 1200px) {
        .wpb-block__body .container { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, auto)); gap: 2.4rem;
            > * { grid-row: span 2; }
        }

        .wpb-card {
            .wpb-card__body { padding: 2.8rem; }
            &:nth-of-type(1) { order: inherit; 
                .wpb-card__body { padding: 4rem; }
            } 
            &:nth-of-type(2) { grid-row: span 1; order: 2; }
            &:nth-of-type(3) .wpb-card__body { margin-top: auto; padding: 12rem 4rem 4rem 4rem; }
        }

        .wpb-image {
            &:nth-of-type(1) { grid-row: span 3; }
        }

    }
}

/*** ---------- Block: Text ---------- ***/
.wpb-block--text .inner + .btn-group { padding-top: 1.6rem; }

/*** ---------- Block: Youtube embed ---------- ***/
.wpb-youtube { --gc: 1; --gap: 2.2rem; }
.wpb-youtube .inner { display: grid; gap: var(--gap); grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); }
.wpb-youtube .wpb-ratio .youtube-play { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; transition: opacity var(--ts-35) ease; 
    img { object-fit: cover; width: 100%; height: 100%; z-index: 1; position: relative; }
    .play-icon { position: absolute; bottom: 3.2rem; left: 3.2rem; z-index: 3; display: flex; align-items: center; column-gap: .9rem; font-weight: 700;
        i { font-size: 2.7rem; color: #ffffff; }
        .play-icon__text { font-size: 1.8rem; color: #fff; }
    }
    &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 1.2rem; background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%); z-index: 2; }
}

@media (min-width: 992px) {
    .wpb-youtube { --gc: 2; --gap: 4.8rem; }
    .wpb-youtube.wpb-youtube__primary .wpb-ratio { order: -1; }
}

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

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

/*** ---------- Block: Accordion ---------- ***/
.wpb-block--accordion {
    .wpb-row { column-gap: clamp(3.2rem, 3.5vw, 6.4rem); row-gap: 3.2rem; }

    &.wpb-bg-color--white .wpb-accordion { background-color: var(--clr-light);
        .accordion__button { background-color: var(--clr-light); }
    }
}

/*** ---------- Block: Blurb ---------- ***/
.wpb-block--blurb {
    .wpb-block__header { padding-bottom: 1.6rem; }

    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr)); gap: clamp(.8rem, 2.5vw, 3.2rem); }

    @media (min-width: 768px) {
        .wpb-block__header { padding-bottom: 3.2rem; }
    }
}

/*** ---------- Block: Media ---------- ***/
.wpb-block--media {
    .wpb-block__header { padding-bottom: 1.6rem; }

    .wpb-block__body .container { display: grid; grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr)); gap: clamp(.8rem, 2.5vw, 3.2rem); }

    @media (min-width: 768px) {
        .wpb-block__header { padding-bottom: 3.2rem; }
    }
}

/*** ---------- Block: Text & Media ---------- ***/
.wpb-block--text-media { --gc: 1; --gap: 2.2rem; 
    .inner { display: -ms-grid; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); -ms-grid-columns: repeat(var(--gc), minmax(0, 1fr)); }

    @media (min-width: 992px) { 
        --gc: 2; --gap: 4.8rem;
    }
    
    @media (min-width: 1200px) {
        --gap: 6.4rem; 
    }
    
    @media (min-width: 1400px) {
        --gap: 9.8rem;
    }
}

/*** ---------- Block: Tabs ---------- ***/
.wpb-block--tabs .container .inner > .wpb-text { margin-bottom: 3.2rem; }
.wpb-tabs { display: grid; --padding: .85rem 1.25rem; --color: var(--clr-text); --bg-color: transparent; --border-radius: .5rem .5rem 0 0; --border: 1px solid transparent; --box-shadow: none; --active-color: var(--clr-text); --active-bg-color: #fff; --active-border: 1px solid var(--clr-border); 
    .tab__header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; z-index: 1; margin-bottom: -0.1rem;
        .tab__button { display: inline-block; padding: var(--padding); color: var(--color); background-color: var(--bg-color); border-radius: var(--border-radius); border: var(--border); box-shadow: var(--box-shadow); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; transition: color var(--ts-15) ease, background-color var(--ts-15) ease, border-color var(--ts-15) ease, box-shadow var(--ts-15) ease;
            &.is-active { color: var(--active-color); border-color: var(--active-color); background-color: var(--active-bg-color); border: var(--active-border); border-bottom: 1px solid #fff; }   
        }
    }
    .tab__content { display: grid; border: 1px solid var(--clr-border); border-radius: 0 0 .5rem .5rem; overflow: hidden;
        .tab__pane { background-color: #fff; grid-column: 1/-1; grid-row: 1/-1; pointer-events: none; opacity: 0;  padding: 1.6rem; transition: opacity 250ms ease;
            &.is-active { pointer-events: all; opacity: 1; }
        }
    }

    &.--secondary { --border-radius: .5rem; --gc: 15rem 1fr; display: grid; grid-template-columns: var(--gc); -ms-grid-columns: var(--gc); -webkit-box-align: start; -ms-flex-align: start; align-items: start; 
        .tab__header { margin-bottom: 0; margin-right: -0.1rem; 
            .tab__button { border-right: 0; margin: 0; width: 100%; border-radius: .5rem 0 0 .5rem; 
                &.is-active { border: var(--active-border); border-right: 0; }
            } 
        }
        .tab__content { border-radius: 0 .5rem .5rem 0; }
    }
}

/*** ---------- Block: Text Shortcode ---------- ***/
.wpb-block--text-shortcode { --gc: 1; --gap: 2.2rem; 
    .inner { display: -ms-grid; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); -ms-grid-columns: repeat(var(--gc), minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .wpb-block--text-shortcode { --gc: 1; --gap: 3.2rem;
        &:is(.--primary, .--secondary) { --gc: 2; }
        &.--primary .form { order: -1; }
    }
}