.wpb-header--single {
    .wpb-ratio { --wpb-aspect-ratio: 43%; border-radius: .8rem .8rem 8rem .8rem; overflow: hidden; }

    .wpb-header__body {
        .badge-group + h1 { margin-top: 1rem; }
    }

    .wpb-header__image { padding-top: 3.2rem;
        .wpb-asset { --w: clamp(30rem, 80cqw, 93rem); bottom: 2rem; left: 0; transform: translateX(-55%); }
    }

    .wpb-header__assets {
        &::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;  z-index: 1;
        
            background: linear-gradient(to bottom, #fff 0%, transparent 100%);


        } 
        .wpb-asset { position: absolute; top: 0; right: 0; transform: translate(60%, -50%); }   
    }

    &:has(+ .wpb-footer) { margin-bottom: 4rem; }
}

.wpb-single-content {
    .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }

    .wpb-content__sidebar .wpb-card { border-radius: 1.6rem 1.6rem 12rem 1.6rem; position: sticky; top: 8rem; border: 1px solid var(--clr-porcelain);
        .wpb-card__body { 
            + .wpb-card__body { padding-top: 0; padding-inline: 0; }
            .table-of-contents { list-style: none; padding-right: 3.2rem;
                .table-of-contents__item { padding: .9rem 0;
                    .table-of-contents__link { display: block; padding: 0 var(--p); font-size: 1.6rem; font-weight: 500; line-height: 1.14; color: var(--clr-blue-700); transition-property: color, box-shadow; transition-duration: var(--ts-duration); transition-timing-function: var(--ts-function);
                        &.is-active { color: var(--clr-blue); box-shadow: inset .4rem 0 0 0 var(--clr-primary); }
                    }
                }
            }
        }
        .card-title { font-size: 2.4rem; font-weight: 700; margin: 0; padding-bottom: 2rem; border-bottom: 1px solid var(--clr-porcelain); }
    }

    .wpb-content__main {
        .wpb-content__intro { padding-bottom: 2.4rem; border-bottom: 2px solid var(--clr-porcelain); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
        > * + * { margin-top: 3.2rem; }
        .wpb-content__info { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; 
            .share-links { display: flex; gap: 1rem; }
            a { font-size: 1.6rem; text-decoration: none; display: flex; align-items: center; column-gap: .6rem; font-weight: 700; white-space: nowrap;
                i { font-size: 1.8rem; color: var(--clr-primary); } 
            }
        }
    }

    .content-section {
        h2 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.15; }

        &.content-section--text--large { font-weight: 600; font-size: clamp(2rem, 4vw, 2.4rem); line-height: 1.4; }
        
        &.content-section--blockquote { 
            blockquote { position: relative; 
                .blockquote__content { padding-left: 1.5rem; position: relative;
                    &::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .3rem; background: linear-gradient(180deg, var(--clr-primary) 72%, transparent 100%); }
                    .blockquote__text { font-weight: 500; line-height: 1.4; }
                    .blockquote__name { font-size: 1.2rem; font-weight: 700; margin-top: 1em; color: var(--clr-blue-700); opacity: .8; }
                }

                .blockquote__image { position: relative;
                    &::before { border-radius: .6rem; content: ''; position: relative; display: block; padding-top: 59%; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(12, 27, 49, 0.7) 85.44%, rgba(12, 27, 49, 0.8) 100%); }
                    img { border-radius: .6rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }  
                }

                &:has(.blockquote__image) .blockquote__content { color: #fff; position: absolute; right: 2rem; bottom: 2rem; left: 2rem; z-index: 2;
                    .blockquote__name { color: #fff; }
                }
            }
        }

        &.content-section--images { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; 
            .wpb-ratio { border-radius: .6rem; overflow: hidden; }
        }

        &.content-section--page-links { display: flex; flex-direction: column; gap: 1.2rem; 
            .page-link { text-decoration: none; border: 1px solid var(--clr-porcelain); border-radius: .6rem .6rem 5.6rem .6rem; padding: 2rem 3.2rem 2rem 2rem; display: flex; align-items: center; justify-content: space-between; transition: background-color var(--ts-duration) var(--ts-function);
                .page-link__text {
                    strong { display: block; font-size: 2.2rem; font-weight: 800; }  
                    span { text-transform: uppercase; font-size: 1.4rem; font-weight: 700; color: var(--clr-blue-600); }
                }
                i { font-size: 2.4rem; color: var(--clr-primary); }

                &:hover { background-color: var(--clr-porcelain) }  
            }
        }
    }

    &:not(:has(+ .wpb-block--posts)) { padding-bottom: 4rem; }
}

.wpb-author { display: grid; grid-template-columns: 5.3rem 1fr; column-gap: 2rem; align-items: center;
    .wpb-author__image { position: relative; overflow: hidden; border-radius: 2rem .4rem .4rem .4rem;
        &::before { content: ''; display: block; width: 100%; padding-top: 121%; }
        img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }  
    }
    .wpb-author__text {
        small { display: block; width: 100%; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; color: var(--clr-blue); opacity: .8; }
        strong { font-size: 2rem; font-weight: 800; }
    }
}

.wpb-read-time { display: flex; align-items: center; column-gap: .6rem; font-weight: 700; white-space: nowrap;
    i { color: var(--clr-primary); }
}

@media (min-width: 768px) {
    .wpb-single-content {
        .content-section { 
            &.content-section--images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

    }
}

@media (min-width: 992px) {
    .wpb-header--single {
        .wpb-header__image { padding-top: 6.4rem; }

        &:has(+ .wpb-footer) { margin-bottom: 8rem; }
    }

    .wpb-single-content {
        &.wpb-single-content--sidebar .container { grid-template-columns: 1fr 2fr; }
        &:not(:has(+ .wpb-block--posts)) { padding-bottom: 8rem; }
    }

}

@media (min-width: 1200px) {
    .wpb-single-content.wpb-single-content--sidebar .container { column-gap: 3.2rem; }

    .wpb-single-content { 
        .wpb-content__main {
            > * + * { margin-top: 5.4rem; }
        }
        .content-section {
            &.content-section--blockquote blockquote:has(.blockquote__image) .blockquote__content { right: 3.2rem; bottom: 3.2rem; left: 3.2rem; }

            &.content-section--page-links { }
        }
    }
}

@media (min-width: 1400px) { 
    .wpb-single-content.wpb-single-content--sidebar .container { grid-template-columns: minmax(0, 36.1rem) 1fr; column-gap: 6.4rem; }

    .wpb-single-content {
        .wpb-content__sidebar .wpb-card { --p: 3.2rem; 
            .wpb-card__body { padding-bottom: 2.8rem; }
        }
    }

}