/* =========================================================
   BUZZERBAIK
   BLOG PAGE
   Modern Gradient + Glassmorphism
   Compatible with index.css
   ========================================================= */


/* =========================================================
   BLOG HERO
   ========================================================= */

.bb-blog-hero {
    position: relative;

    padding:
        95px 0
        100px;

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

    overflow: hidden;
}


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

    position: absolute;

    width: 420px;
    height: 420px;

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

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

    border-radius: 50%;

    filter:
        blur(80px);
}


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

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -180px;
    left: -120px;

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

    border-radius: 50%;

    filter:
        blur(80px);
}


/* =========================================================
   BLOG HERO CONTENT
   ========================================================= */

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

    z-index: 2;

    max-width:
        850px;

    margin:
        0 auto;

    text-align:
        center;
}


.bb-blog-hero-content h1 {
    margin:
        20px 0 20px;

    color:
        var(--bb-dark);

    font-size:
        clamp(40px, 5vw, 62px);

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -.055em;
}


.bb-blog-hero-content h1 strong {
    color:
        transparent;

    background:
        var(--bb-gradient);

    background-clip:
        text;

    -webkit-background-clip:
        text;
}


.bb-blog-hero-content p {
    max-width:
        680px;

    margin:
        0 auto;

    color:
        var(--bb-muted);

    font-size:
        16px;

    line-height:
        1.8;
}


/* =========================================================
   BLOG ARCHIVE
   ========================================================= */

.bb-blog-archive {
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );
}


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

.bb-blog-layout {
    display:
        grid;

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

    align-items:
        start;

    gap:
        30px;
}


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

.bb-blog-list {
    display:
        grid;

    gap:
        20px;
}


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

.bb-blog-list-card {
    position:
        relative;

    display:
        grid;

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

    gap:
        25px;

    padding:
        20px;

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

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

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

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

    overflow:
        hidden;

    backdrop-filter:
        blur(20px);

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

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


.bb-blog-list-card::before {
    content:
        "";

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    top:
        -70px;

    right:
        -60px;

    background:
        var(--bb-gradient);

    border-radius:
        50%;

    opacity:
        .06;

    transition:
        transform .4s ease;
}


.bb-blog-list-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(37, 99, 235, .18);

    box-shadow:
        var(--bb-shadow-hover);
}


.bb-blog-list-card:hover::before {
    transform:
        scale(1.5);
}


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

.bb-blog-list-image {
    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        190px;

    overflow:
        hidden;

    border-radius:
        16px;
}


.bb-blog-list-image::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .08),
            transparent 50%,
            rgba(124, 58, 237, .08)
        );

    pointer-events:
        none;
}


.bb-blog-list-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .45s ease;
}


.bb-blog-list-card:hover
.bb-blog-list-image img {
    transform:
        scale(1.06);
}


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

.bb-blog-list-content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    min-width:
        0;
}


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

.bb-blog-category {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        5px 10px;

    color:
        var(--bb-primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

    background:
        rgba(37, 99, 235, .08);

    border:
        1px solid
        rgba(37, 99, 235, .08);

    border-radius:
        999px;
}


.bb-blog-category::before {
    content:
        "";

    width:
        5px;

    height:
        5px;

    background:
        var(--bb-gradient);

    border-radius:
        50%;
}


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

.bb-blog-list-content h2 {
    margin:
        12px 0 10px;

    color:
        var(--bb-dark);

    font-size:
        22px;

    font-weight:
        750;

    line-height:
        1.3;

    letter-spacing:
        -.025em;
}


.bb-blog-list-content h2 a {
    color:
        var(--bb-dark);

    transition:
        color .25s ease;
}


.bb-blog-list-content h2 a:hover {
    color:
        var(--bb-primary);
}


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

.bb-blog-list-content p {
    margin:
        0;

    color:
        var(--bb-muted);

    font-size:
        13px;

    line-height:
        1.75;
}


/* =========================================================
   READ MORE
   ========================================================= */

.bb-blog-readmore {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        auto;

    padding-top:
        18px;

    color:
        var(--bb-primary);

    font-size:
        12px;

    font-weight:
        800;

    transition:
        color .25s ease;
}


.bb-blog-readmore span {
    display:
        inline-block;

    transition:
        transform .25s ease;
}


.bb-blog-readmore:hover {
    color:
        var(--bb-primary-dark);
}


.bb-blog-readmore:hover span {
    transform:
        translateX(5px);
}


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

.bb-blog-sidebar {
    position:
        sticky;

    top:
        100px;

    display:
        grid;

    gap:
        20px;
}


/* =========================================================
   PROMO BANNER
   ========================================================= */

.bb-blog-promo {
    position:
        relative;

    padding:
        30px;

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

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

    border-radius:
        25px;

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

    overflow:
        hidden;
}


.bb-blog-promo::before {
    content:
        "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    top:
        -90px;

    right:
        -70px;

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

    border-radius:
        50%;

    filter:
        blur(5px);
}


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

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    bottom:
        -80px;

    left:
        -60px;

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

    border-radius:
        50%;

    filter:
        blur(25px);
}


.bb-blog-promo > * {
    position:
        relative;

    z-index:
        2;
}


/* =========================================================
   PROMO LABEL
   ========================================================= */

.bb-blog-promo .bb-section-label {
    color:
        #ffffff;

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

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

    box-shadow:
        none;
}


.bb-blog-promo .bb-section-label::before {
    background:
        #ffffff;

    box-shadow:
        0 0 12px
        rgba(255, 255, 255, .6);
}


/* =========================================================
   PROMO TITLE
   ========================================================= */

.bb-blog-promo h2 {
    margin:
        18px 0 12px;

    color:
        #ffffff;

    font-size:
        27px;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        -.035em;
}


/* =========================================================
   PROMO DESCRIPTION
   ========================================================= */

.bb-blog-promo p {
    margin:
        0 0 25px;

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

    font-size:
        13px;

    line-height:
        1.7;
}


/* =========================================================
   PROMO BUTTON
   ========================================================= */

.bb-blog-promo .bb-btn {
    width:
        100%;
}


/* =========================================================
   CONTACT CARD
   ========================================================= */

.bb-blog-contact {
    padding:
        25px;

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

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

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

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

    backdrop-filter:
        blur(20px);

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

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.bb-blog-contact:hover {
    transform:
        translateY(-5px);

    box-shadow:
        var(--bb-shadow);
}


/* =========================================================
   CONTACT LABEL
   ========================================================= */

.bb-blog-sidebar-label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--bb-primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


/* =========================================================
   CONTACT TITLE
   ========================================================= */

.bb-blog-contact h3 {
    margin:
        0 0 8px;

    color:
        var(--bb-dark);

    font-size:
        19px;

    line-height:
        1.3;
}


/* =========================================================
   CONTACT DESCRIPTION
   ========================================================= */

.bb-blog-contact p {
    margin:
        0;

    color:
        var(--bb-muted);

    font-size:
        12px;

    line-height:
        1.7;
}


/* =========================================================
   CONTACT LINK
   ========================================================= */

.bb-blog-sidebar-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        18px;

    color:
        var(--bb-primary);

    font-size:
        12px;

    font-weight:
        800;
}


.bb-blog-sidebar-link span {
    display:
        inline-block;

    transition:
        transform .25s ease;
}


.bb-blog-sidebar-link:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   BLOG CTA
   ========================================================= */

.bb-blog-cta {
    position:
        relative;

    padding:
        80px 0;

    background:
        #0f172a;

    overflow:
        hidden;
}


.bb-blog-cta::before {
    content:
        "";

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    top:
        -250px;

    right:
        -120px;

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

    border-radius:
        50%;

    filter:
        blur(80px);
}


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

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    bottom:
        -220px;

    left:
        -120px;

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

    border-radius:
        50%;

    filter:
        blur(80px);
}


/* =========================================================
   BLOG CTA INNER
   ========================================================= */

.bb-blog-cta-inner {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        50px;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, .88),
            rgba(124, 58, 237, .88)
        );

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

    border-radius:
        28px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, .25);

    backdrop-filter:
        blur(20px);
}


.bb-blog-cta-inner h2 {
    max-width:
        680px;

    margin:
        16px 0 12px;

    color:
        #ffffff;

    font-size:
        clamp(28px, 4vw, 43px);

    line-height:
        1.15;

    letter-spacing:
        -.04em;
}


.bb-blog-cta-inner p {
    max-width:
        650px;

    margin:
        0;

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

    font-size:
        14px;
}


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

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

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

    box-shadow:
        none;
}


/* =========================================================
   CTA BUTTONS
   ========================================================= */

.bb-blog-cta-buttons {
    display:
        flex;

    flex-shrink:
        0;

    gap:
        10px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

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

        gap:
            25px;
    }


    .bb-blog-list-card {
        grid-template-columns:
            220px
            minmax(0, 1fr);

        gap:
            20px;
    }


    .bb-blog-list-content h2 {
        font-size:
            19px;
    }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 900px) {

    .bb-blog-layout {
        grid-template-columns:
            1fr;
    }


    .bb-blog-sidebar {
        position:
            static;

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


    .bb-blog-promo {
        height:
            100%;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .bb-blog-hero {
        padding:
            70px 0
            80px;
    }


    .bb-blog-hero-content h1 {
        font-size:
            clamp(35px, 10vw, 48px);
    }


    .bb-blog-hero-content p {
        font-size:
            14px;
    }


    .bb-blog-layout {
        grid-template-columns:
            1fr;

        gap:
            25px;
    }


    .bb-blog-list-card {
        grid-template-columns:
            1fr;

        gap:
            18px;

        padding:
            15px;
    }


    .bb-blog-list-image {
        width:
            100%;

        height:
            210px;

        min-height:
            auto;
    }


    .bb-blog-list-content {
        padding:
            3px 5px 8px;
    }


    .bb-blog-list-content h2 {
        margin:
            11px 0 9px;

        font-size:
            20px;
    }


    .bb-blog-list-content p {
        font-size:
            13px;
    }


    .bb-blog-readmore {
        margin-top:
            0;
    }


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


    .bb-blog-promo,
    .bb-blog-contact {
        padding:
            25px;
    }


    .bb-blog-cta-inner {
        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            35px 25px;
    }


    .bb-blog-cta-buttons {
        width:
            100%;

        flex-direction:
            column;
    }


    .bb-blog-cta-buttons .bb-btn {
        width:
            100%;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 450px) {

    .bb-blog-hero {
        padding:
            60px 0
            70px;
    }


    .bb-blog-hero-content h1 {
        font-size:
            34px;
    }


    .bb-blog-list-image {
        height:
            180px;
    }


    .bb-blog-list-content h2 {
        font-size:
            18px;
    }


    .bb-blog-promo,
    .bb-blog-contact {
        padding:
            22px;
    }


    .bb-blog-promo h2 {
        font-size:
            24px;
    }


    .bb-blog-cta-inner {
        padding:
            30px 20px;
    }


    .bb-blog-cta-inner h2 {
        font-size:
            29px;
    }

}