/* =========================================================
   BUZZERBAIK
   SINGLE POST
   Modern Gradient + Glassmorphism
   ========================================================= */


/* =========================================================
   POST HERO
   ========================================================= */

.bb-post-hero {
    position: relative;

    padding:
        90px 0
        95px;

    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(37, 99, 235, .14),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(124, 58, 237, .14),
            transparent 30%
        ),
        radial-gradient(
            circle at 75% 100%,
            rgba(6, 182, 212, .10),
            transparent 32%
        ),
        #f8fafc;

    overflow: hidden;
}


.bb-post-hero::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    top: -180px;
    right: -120px;

    background:
        rgba(124, 58, 237, .12);

    border-radius: 50%;

    filter:
        blur(80px);
}


.bb-post-hero::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -200px;
    left: -120px;

    background:
        rgba(6, 182, 212, .10);

    border-radius: 50%;

    filter:
        blur(80px);
}


.bb-post-hero-content {
    position: relative;

    z-index: 2;

    max-width: 900px;

    margin:
        0 auto;

    text-align: center;
}


.bb-post-hero-content h1 {
    max-width: 900px;

    margin:
        20px auto 22px;

    color:
        var(--bb-dark);

    font-size:
        clamp(38px, 5vw, 60px);

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -.055em;
}


.bb-post-description {
    max-width:
        760px;

    margin:
        0 auto;

    color:
        var(--bb-muted);

    font-size:
        16px;

    line-height:
        1.8;
}


.bb-post-meta {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        25px;

    padding:
        8px 15px;

    color:
        var(--bb-muted);

    font-size:
        12px;

    background:
        rgba(255, 255, 255, .72);

    border:
        1px solid
        rgba(226, 232, 240, .8);

    border-radius:
        999px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, .05);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);
}


.bb-post-meta strong {
    color:
        var(--bb-dark);

    font-weight:
        700;
}


/* =========================================================
   SINGLE POST SECTION
   ========================================================= */

.bb-single-post {
    background:
        #ffffff;
}


/* =========================================================
   POST LAYOUT
   70% ARTICLE
   30% SIDEBAR
   ========================================================= */

.bb-post-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 7fr)
        minmax(280px, 3fr);

    align-items:
        start;

    gap:
        35px;
}


/* =========================================================
   ARTICLE
   ========================================================= */

.bb-post-article {
    min-width:
        0;
}


/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.bb-post-featured-image {
    position:
        relative;

    padding:
        10px;

    background:
        rgba(255, 255, 255, .72);

    border:
        1px solid
        rgba(226, 232, 240, .8);

    border-radius:
        25px;

    box-shadow:
        0 20px 55px
        rgba(15, 23, 42, .08);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    overflow:
        hidden;
}


.bb-post-featured-image::before {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    inset:
        -20px;

    background:
        var(--bb-gradient);

    opacity:
        .12;

    filter:
        blur(30px);
}


.bb-post-featured-image img {
    display:
        block;

    width:
        100%;

    height:
        auto;

    border-radius:
        18px;
}


/* =========================================================
   TABLE OF CONTENT
   ========================================================= */

.bb-post-toc {
    margin:
        30px 0;

    padding:
        25px 28px;

    background:
        var(--bb-gradient-soft);

    border:
        1px solid
        rgba(226, 232, 240, .85);

    border-radius:
        var(--bb-radius);

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, .04);
}


.bb-post-toc-title {
    margin-bottom:
        15px;

    color:
        var(--bb-dark);

    font-size:
        16px;

    font-weight:
        800;
}


.bb-post-toc ol {
    display:
        grid;

    gap:
        8px;

    margin:
        0;

    padding-left:
        20px;
}


.bb-post-toc li {
    padding-left:
        3px;

    color:
        var(--bb-muted);

    font-size:
        13px;
}


.bb-post-toc a {
    color:
        var(--bb-text);

    transition:
        color .2s ease;
}


.bb-post-toc a:hover {
    color:
        var(--bb-primary);
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.bb-post-content {
    max-width:
        850px;

    color:
        var(--bb-text);

    font-size:
        15px;

    line-height:
        1.85;
}


.bb-post-content p {
    margin:
        0 0 20px;
}


.bb-post-content h2 {
    margin:
        48px 0 18px;

    color:
        var(--bb-dark);

    font-size:
        clamp(25px, 3vw, 34px);

    line-height:
        1.2;

    letter-spacing:
        -.035em;
}


.bb-post-content h3 {
    margin:
        35px 0 12px;

    color:
        var(--bb-dark);

    font-size:
        21px;

    line-height:
        1.3;
}


.bb-post-content strong {
    color:
        var(--bb-dark);
}


.bb-post-content a {
    color:
        var(--bb-primary);

    font-weight:
        700;

    text-decoration:
        none;

    border-bottom:
        1px solid
        rgba(37, 99, 235, .2);

    transition:
        color .2s ease,
        border-color .2s ease;
}


.bb-post-content a:hover {
    color:
        var(--bb-purple);

    border-color:
        var(--bb-purple);
}


/* =========================================================
   ARTICLE LIST
   ========================================================= */

.bb-post-content ul,
.bb-post-content ol {
    margin:
        0 0 25px;

    padding-left:
        25px;
}


.bb-post-content li {
    margin-bottom:
        8px;

    color:
        var(--bb-text);
}


/* =========================================================
   BLOCKQUOTE
   ========================================================= */

.bb-post-content blockquote {
    position:
        relative;

    margin:
        30px 0;

    padding:
        25px 28px;

    color:
        var(--bb-text);

    background:
        var(--bb-gradient-soft);

    border-left:
        4px solid
        var(--bb-primary);

    border-radius:
        0 18px 18px 0;
}


/* =========================================================
   VIDEO
   ========================================================= */

.bb-post-video {
    margin:
        50px 0;
}


.bb-post-video h2 {
    margin-top:
        0;
}


.bb-video-wrapper {
    position:
        relative;

    width:
        100%;

    padding-bottom:
        56.25%;

    height:
        0;

    margin-top:
        20px;

    background:
        #0f172a;

    border:
        1px solid
        rgba(226, 232, 240, .8);

    border-radius:
        22px;

    box-shadow:
        0 20px 50px
        rgba(15, 23, 42, .12);

    overflow:
        hidden;
}


.bb-video-wrapper iframe {
    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        100%;

    border:
        0;
}


/* =========================================================
   FAQ
   ========================================================= */

.bb-post-faq {
    margin-top:
        55px;
}


.bb-post-faq h2 {
    margin-top:
        0;
}


.bb-post-faq details {
    margin-bottom:
        12px;

    background:
        rgba(255, 255, 255, .78);

    border:
        1px solid
        rgba(226, 232, 240, .85);

    border-radius:
        16px;

    box-shadow:
        0 8px 25px
        rgba(15, 23, 42, .035);

    overflow:
        hidden;

    transition:
        box-shadow .25s ease,
        border-color .25s ease;
}


.bb-post-faq details:hover {
    border-color:
        rgba(37, 99, 235, .15);

    box-shadow:
        0 15px 35px
        rgba(15, 23, 42, .07);
}


.bb-post-faq summary {
    position:
        relative;

    padding:
        19px 50px 19px 20px;

    color:
        var(--bb-dark);

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    list-style:
        none;
}


.bb-post-faq summary::-webkit-details-marker {
    display:
        none;
}


.bb-post-faq summary::after {
    content:
        "+";

    position:
        absolute;

    top:
        50%;

    right:
        20px;

    color:
        var(--bb-primary);

    font-size:
        21px;

    font-weight:
        400;

    transform:
        translateY(-50%);

    transition:
        transform .25s ease;
}


.bb-post-faq details[open]
summary::after {
    transform:
        translateY(-50%)
        rotate(45deg);
}


.bb-post-faq details p {
    margin:
        0;

    padding:
        0 20px 20px;

    color:
        var(--bb-muted);

    font-size:
        13px;

    line-height:
        1.75;
}


/* =========================================================
   ARTICLE CTA
   ========================================================= */

.bb-post-cta {
    position:
        relative;

    margin-top:
        55px;

    padding:
        40px;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .95),
            rgba(124, 58, 237, .95),
            rgba(6, 182, 212, .90)
        );

    border:
        1px solid
        rgba(255, 255, 255, .15);

    border-radius:
        25px;

    box-shadow:
        0 25px 60px
        rgba(37, 99, 235, .20);

    overflow:
        hidden;
}


.bb-post-cta::after {
    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    right:
        -100px;

    bottom:
        -100px;

    background:
        rgba(255, 255, 255, .12);

    border-radius:
        50%;

    filter:
        blur(10px);
}


.bb-post-cta .bb-section-label {
    color:
        #ffffff;

    background:
        rgba(255, 255, 255, .12);

    border-color:
        rgba(255, 255, 255, .2);

    box-shadow:
        none;
}


.bb-post-cta h2 {
    position:
        relative;

    z-index:
        2;

    max-width:
        650px;

    margin:
        16px 0 12px;

    color:
        #ffffff;

    font-size:
        clamp(27px, 4vw, 40px);

    line-height:
        1.15;

    letter-spacing:
        -.04em;
}


.bb-post-cta p {
    position:
        relative;

    z-index:
        2;

    max-width:
        600px;

    margin:
        0 0 25px;

    color:
        rgba(255, 255, 255, .78);

    font-size:
        14px;
}


.bb-post-cta .bb-btn {
    position:
        relative;

    z-index:
        3;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.bb-post-sidebar {
    position:
        sticky;

    top:
        30px;

    display:
        grid;

    gap:
        20px;
}


/* =========================================================
   SIDEBAR PROMO
   ========================================================= */

.bb-sidebar-promo {
    position:
        relative;

    padding:
        28px;

    background:
        linear-gradient(
            145deg,
            #1d4ed8,
            #6d28d9 55%,
            #0891b2
        );

    border:
        1px solid
        rgba(255, 255, 255, .15);

    border-radius:
        var(--bb-radius);

    box-shadow:
        0 20px 50px
        rgba(37, 99, 235, .18);

    overflow:
        hidden;
}


.bb-sidebar-promo::after {
    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        -80px;

    bottom:
        -80px;

    background:
        rgba(255, 255, 255, .12);

    border-radius:
        50%;

    filter:
        blur(5px);
}


.bb-sidebar-promo .bb-section-label {
    position:
        relative;

    z-index:
        2;

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, .12);

    border-color:
        rgba(255, 255, 255, .2);

    box-shadow:
        none;
}


.bb-sidebar-promo h2 {
    position:
        relative;

    z-index:
        2;

    margin:
        18px 0 10px;

    color:
        #ffffff;

    font-size:
        27px;

    line-height:
        1.2;

    letter-spacing:
        -.035em;
}


.bb-sidebar-promo p {
    position:
        relative;

    z-index:
        2;

    margin:
        0 0 22px;

    color:
        rgba(255, 255, 255, .75);

    font-size:
        13px;

    line-height:
        1.7;
}


.bb-sidebar-promo .bb-btn {
    position:
        relative;

    z-index:
        3;

    width:
        100%;
}


/* =========================================================
   SIDEBAR LATEST
   ========================================================= */

.bb-sidebar-latest {
    padding:
        25px;

    background:
        rgba(255, 255, 255, .75);

    border:
        1px solid
        rgba(226, 232, 240, .85);

    border-radius:
        var(--bb-radius);

    box-shadow:
        0 12px 35px
        rgba(15, 23, 42, .05);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.bb-sidebar-title {
    margin-bottom:
        18px;

    color:
        var(--bb-dark);

    font-size:
        18px;

    font-weight:
        800;
}


.bb-latest-post {
    display:
        grid;

    grid-template-columns:
        82px
        minmax(0, 1fr);

    gap:
        12px;

    padding:
        14px 0;

    border-bottom:
        1px solid
        rgba(226, 232, 240, .8);
}


.bb-latest-post:last-child {
    padding-bottom:
        0;

    border-bottom:
        0;
}


.bb-latest-post:first-of-type {
    padding-top:
        0;
}


.bb-latest-image {
    width:
        82px;

    height:
        72px;

    border-radius:
        12px;

    overflow:
        hidden;

    background:
        #f1f5f9;
}


.bb-latest-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .3s ease;
}


.bb-latest-post:hover
.bb-latest-image img {
    transform:
        scale(1.06);
}


.bb-latest-post > div:last-child {
    min-width:
        0;
}


.bb-latest-post span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--bb-primary);

    font-size:
        9px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.bb-latest-post h3 {
    margin:
        0;

    color:
        var(--bb-dark);

    font-size:
        13px;

    line-height:
        1.4;

    transition:
        color .2s ease;
}


.bb-latest-post:hover h3 {
    color:
        var(--bb-primary);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .bb-post-layout {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            45px;
    }

    .bb-post-sidebar {
        position:
            static;

        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        align-items:
            start;
    }

}


@media (max-width: 700px) {

    .bb-post-hero {
        padding:
            70px 0 75px;
    }

    .bb-post-hero-content h1 {
        font-size:
            clamp(34px, 9vw, 46px);
    }

    .bb-post-description {
        font-size:
            14px;
    }

    .bb-post-meta {
        font-size:
            11px;
    }

    .bb-post-layout {
        gap:
            35px;
    }

    .bb-post-sidebar {
        grid-template-columns:
            1fr;
    }

    .bb-post-featured-image {
        padding:
            7px;

        border-radius:
            20px;
    }

    .bb-post-featured-image img {
        border-radius:
            15px;
    }

    .bb-post-toc {
        padding:
            22px;
    }

    .bb-post-content {
        font-size:
            14px;

        line-height:
            1.8;
    }

    .bb-post-content h2 {
        margin-top:
            38px;

        font-size:
            27px;
    }

    .bb-post-video {
        margin:
            40px 0;
    }

    .bb-video-wrapper {
        border-radius:
            17px;
    }

    .bb-post-cta {
        padding:
            30px 25px;

        border-radius:
            22px;
    }

    .bb-sidebar-promo,
    .bb-sidebar-latest {
        padding:
            22px;
    }

}


@media (max-width: 450px) {

    .bb-post-hero-content h1 {
        font-size:
            33px;
    }

    .bb-post-description {
        font-size:
            13px;
    }

    .bb-post-meta {
        flex-wrap:
            wrap;

        justify-content:
            center;

        text-align:
            center;
    }

    .bb-post-toc {
        padding:
            20px;
    }

    .bb-post-content h2 {
        font-size:
            25px;
    }

    .bb-post-cta h2 {
        font-size:
            28px;
    }

    .bb-latest-post {
        grid-template-columns:
            75px
            minmax(0, 1fr);
    }

    .bb-latest-image {
        width:
            75px;

        height:
            68px;
    }

}

/* =========================================================
   BREADCRUMB
   ========================================================= */

.bb-post-hero .bb-container {
    position: relative;

    z-index: 3;
}

.bb-breadcrumb {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    width: fit-content;

    max-width: 100%;

    margin:
        0 auto 38px;

    padding:
        9px 14px;

    background:
        rgba(255, 255, 255, .68);

    border:
        1px solid
        rgba(255, 255, 255, .85);

    border-radius:
        999px;

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, .06);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    font-size:
        11px;

    line-height:
        1.5;
}


/* =========================================================
   BREADCRUMB LINK
   ========================================================= */

.bb-breadcrumb a {
    display: inline-flex;

    align-items: center;

    color:
        var(--bb-primary);

    font-weight:
        700;

    transition:
        color .2s ease,
        transform .2s ease;
}

.bb-breadcrumb a:hover {
    color:
        var(--bb-primary-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   BREADCRUMB SEPARATOR
   ========================================================= */

.bb-breadcrumb > span:not(.bb-breadcrumb-current) {
    display: inline-flex;

    align-items: center;

    color:
        #94a3b8;

    font-size:
        12px;

    opacity:
        .75;
}


/* =========================================================
   CURRENT PAGE
   ========================================================= */

.bb-breadcrumb .bb-breadcrumb-current {
    display: block;

    max-width:
        360px;

    color:
        var(--bb-muted);

    font-weight:
        500;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}