:root {
    --single-grid-columns: minmax(0, 1fr) 34rem;
    --single-grid-gap: 4.8rem;
    --single-grid-gap-lg: 6.4rem;
    --single-grid-gap-xl: 9rem;
}

.single-nieuws, .single-references { font-size: 1.4rem; --global-lh: 1.6; background-color: #fff; }

.wpb-pagewrapper { position: relative; overflow-x: hidden; 
    .wpb-icon--1, .wpb-icon--2 { z-index: -1; position: absolute; opacity: .3; }
    .wpb-icon--1 { left: 0; top: 2%; transform: translateX(-55%); }
    .wpb-icon--2 { right: 0; top: 50%; transform: translateX(55%); }
}

.wpb-single-navigation { background: #fff; border-bottom: 1px solid var(--clr-border); padding: 1rem 0; 
   .container { display: flex; justify-content: space-between; align-items: center; }
   span { font-size: 1.4rem; font-weight: 500; }
   .btn.btn--link { font-size: 1.2rem; --color: var(--clr-headings); font-weight: 600; 
        i { --width: 1rem; --height: 1rem; }
    }

    @media (max-width: 575.98px) {
       .container { display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; }
       span { text-align: center; grid-column: span 2; order: 1; }
       .badge-group { justify-content: end; }
    }
}

.wpb-header.wpb-header--single { padding: 2.8rem 0; 
    .container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); align-items: end; }
    h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
    summary { font-size: 1.6rem; opacity: .75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .social-share-icons { display: none; margin-left: auto; margin-bottom: 8rem; }
}

.social-share-icons { font-size: 1.4rem; font-weight: 600; white-space: nowrap; column-gap: 1rem;
    a { --size: 3.6rem; border: .1rem solid var(--clr-border); min-width: var(--size); width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; transition: var(--ts-15) ease; 
        i { font-size: 1.6rem; color: var(--clr-headings); }
        &:hover { border-color: var(--clr-blue); background-color: var(--clr-blue); 
            i { color: #ffffff; }
        }
    }
}

.post-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    .post-date { width: 100%; display: flex; align-items: center; column-gap: .5rem; margin-top: 1.8rem;
        span { display: block; width: 100%;}
        i { display: none; font-size: 1.4rem; opacity: .5; }
        * { font-size: 1.2rem; color: var(--clr-headings); }
        strong { text-decoration: underline; }
    }
    
    .post-author { display: flex; align-items: center; column-gap: 1.4rem;
        figure { min-width: 4.8rem; width: 4.8rem; height: 4.8rem; border-radius: 50%; overflow: hidden; background-color: #EDEDED; 
            img { width: 100%; height: 100%; object-fit: cover; }
        }
        p { line-height: 1.2;
            span { font-size: 1.3rem; opacity: .75; color: var(--clr-headings); }
            strong { font-size: 1.5rem; }
        }
    }
}

.post-thumbnail { border-radius: .8rem; overflow: hidden; margin-bottom: 2.8rem; }

.wpb-single-content {
    > .container { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));
        .container { padding-left: 0; padding-right: 0; }
    }

    .wpb-single-content__content {
        .wpb-align-y__top { align-items: start; }
        .wpb-align-y__center { align-items: center; }
        .wpb-align-y__bottom { align-items: end; }
    }

    .wpb-single-content__sidebar { display: none;
        .popular-news {
            .popular-news__title { display: block; width: 100%; font-size: 1.5rem; font-weight: 700; padding-bottom: 1.4rem; }
            
            .wpb-card { border-top: 1px solid var(--clr-border); padding-top: 2.4rem;
                + .wpb-card { margin-top: 2.4rem; }
            }
        }
    }
}

.wpb-single-footer {
    .wpb-single-footer__body { border-top: 1px solid var(--clr-border); padding-top: 1.8rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    p, a { font-size: 1.3rem; }
    p :is(strong, a) { font-weight: 500; text-decoration: underline; }
}

.blog-section {
    h2 { --fs: clamp(2rem, 3vw, 2.4rem); }

    &:is(.blog-section--text, .blog-section--features, .blog-section--faq, .blog-section--images, .blog-section--cta, .blog-section--products, .blog-section--featured_product_categories) {
        &[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) { padding: 1.6rem; margin-inline: -1.6rem; }
        &:is([class*="wpb-bg-color--"], [class*="wpb-wsb--"]):not(.wpb-bg-color--transparent) { margin-top: var(--wpb-wst); }
        &:is([class*="wpb-bg-color--"], [class*="wpb-wsb--"]):not(.wpb-bg-color--transparent) { margin-bottom: var(--wpb-wsb); }
    }

    &.blog-section--features {
        ul { padding-left: 0!important; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 3.2rem; 
            li { padding-left: 2.6rem; position: relative; 
                &::before { content: '+'; display: block; width: 1.8rem; height: 1.8rem; font-size: 2rem; text-align: center; line-height: 1.6rem; color: var(--clr-blue); border-radius: 50%; border: 1px solid var(--clr-blue); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } 
            }
        }
    }

    &.blog-section--text-media {
        .blog-section--body { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
        figure img { border-radius: 1.2rem; overflow: clip; height: 100%; object-fit: cover; }

        &[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) { gap: 0; padding: 0; border-radius: .8rem; 
            figure img { border-top-left-radius: 0; border-top-right-radius: 0; }
            .wpb-text { padding: 1.6rem; }
        }
    }

    &.blog-section--quote {
        .wpb-text { font-size: clamp(1.4rem, 4vw, 1.6rem); --global-lh: 1.4; color: var(--clr-headings); font-weight: 500; border-left: .4rem solid var(--clr-blue); padding-left: 2rem; 
            * { color: var(--clr-headings); }
            .name { font-size: 1.6rem; }
        }
    }

    &.blog-section--images {
        .blog-section--footer { font-size: clamp(1.4rem, 4vw, 1.6rem); font-weight: 600; border-bottom: 1px solid var(--clr-border); padding-block: 2rem; }
        .blog-section--body { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
    }

    &.blog-section--faq {
        .blog-section--header { margin-bottom: 1.6rem }
    }

    &.blog-section--youtube {
        .blog-section--body { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
    }

    &.blog-section--products {
        .blog-section--header { margin-bottom: 1.6rem }
        .products { --gc: 1; gap: 1.6rem; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); }
    }

    &.blog-section--cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
        .wpb-usps { padding: 0; flex-wrap: wrap; column-gap: 1.6rem; row-gap: 1rem;
            li { margin: 0; }
        }    
    }

    &.blog-section--featured_product_categories { container: productCategories / inline-size; 
        .wpb-text { margin-bottom: 3.2rem; }
        .blog-section--body { --gc: 1; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 1.6rem; }
    
        .wpb-card.wpb-card--category { border: 1px solid var(--clr-border);
            h3 { font-size: 1.8rem; }
        }

        &.is-secondary .blog-section--body { gap: 1.4rem; }
    }
}

@media (min-width: 576px) {
   .post-date { width: auto; margin-top: 0; }

    .blog-section {
        &:is(.blog-section--text, .blog-section--features, .blog-section--faq, .blog-section--images, .blog-section--cta, .blog-section--products, .blog-section--featured_product_categories) {
            &[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) { margin-inline: 0; padding: 2rem; border-radius: .8rem; }
        }

        &.blog-section--featured_product_categories .blog-section--body { --gc: 2; }
    }
}

@media (min-width: 768px) {
    .blog-section {

        &.blog-section--products {
            .products { --gc: 2; 
                &.products--1 { --gc: 1; }
            }
        }

        &.blog-section--cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    }
}

@media (min-width: 992px) {
    .wpb-header.wpb-header--single { padding: 3.2rem 0; 
        .social-share-icons { display: flex; }
        .container { grid-template-columns: var(--single-grid-columns); column-gap: var(--single-grid-gap); }
    }

    .post-thumbnail { margin-bottom: 4.8rem; }
    
    .wpb-single-content {
        .wpb-single-content__sidebar { display: block; padding-bottom: 4.8rem; }
        > .container { grid-template-columns: var(--single-grid-columns); column-gap: var(--single-grid-gap); }
    }

    .wpb-single-footer {
        .wpb-single-footer__body { grid-template-columns: minmax(0, 1fr) 34rem; column-gap: 4.8rem; }
        .social-share-icons { margin-left: auto; }
    }

    .blog-section {
        &:is(.blog-section--text, .blog-section--features, .blog-section--faq, .blog-section--images, .blog-section--cta, .blog-section--products, .blog-section--featured_product_categories) {
            &[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) { padding: 2.4rem; }
        }

        &.blog-section--text-media {
            .blog-section--body { gap: 2rem; 
                &:has(figure) { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); }
            }

            &[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) {
                .wpb-text { padding: 2.4rem; }
                figure img { border-radius: 0 .8rem .8rem 0; }
            }

            &.wpb-cols--reverse {
                &[class*="wpb-bg-color--"]:not(.wpb-bg-color--transparent) figure img { border-radius: .8rem 0 0 .8rem; }
                &.wpb-bg-color--transparent .wpb-text { padding-block: 2rem; }

                .blog-section--body {
                    &:has(figure) { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); }
                    > *:first-child { order: 1; }
                    figure { position: relative; width: 100%; height: 100%;
                        img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
                    }
                }
            }
        }

        &.blog-section--images {
            .blog-section--body { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem; 
                figure:first-child:not(:has(+ figure)) { grid-column: span 2; }
            }
            .blog-section--footer { padding-block: 2.4rem; }
        }

        &.blog-section--youtube {
            .blog-section--body:has(.wpb-text + .wpb-ratio) { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); }
            
            &.wpb-cols--reverse {
                .blog-section--body {
                    &:has(.wpb-text + .wpb-ratio) { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); }
                    > *:first-child { order: 1; }
                }
            }
        }
    }
}

@media (min-width: 1200px) {
    .wpb-header.wpb-header--single { padding: 5.6rem 0; 
        .container { column-gap: var(--single-grid-gap-lg); }
    }

    .wpb-single-content > .container { column-gap: var(--single-grid-gap-lg); }

    .wpb-single-footer .wpb-single-footer__body { column-gap: 6.4rem; }

    .blog-section {

        &.blog-section--cta { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: 4.8rem; }

    }
}

@media (min-width: 1400px) {
    .wpb-header.wpb-header--single {
        .container { column-gap: var(--single-grid-gap-xl); }
    }

    .post-info { margin-top: 2.2rem!important; 
        .post-date {
            i { display: block; }
            span { display: inline-block; width: auto; }
        }
    }

    .wpb-single-content > .container { column-gap: var(--single-grid-gap-xl); }

    .wpb-single-footer .wpb-single-footer__body { column-gap: 9rem; }

    .blog-section {

        &.blog-section--products .products { --gc: 3; 
            &.products--1 { --gc: 1; }
            &.products--2 { --gc: 2; }
        }

        &.blog-section--featured_product_categories .blog-section--body { --gc: 3; }

    }
}