/* ============================================================
   VENTACTIVE
   BLOG ARTICLES
============================================================ */

.vcBlogArticles {
    position: relative;
    padding:
        clamp(78px, 8vw, 126px)
        clamp(18px, 4vw, 70px)
        clamp(90px, 9vw, 145px);
    background:
        linear-gradient(
            180deg,
            #fbfbfd 0%,
            #ffffff 45%,
            #fafbfe 100%
        );
}


.vcBlogArticlesInner {
    width: min(1560px, 100%);
    margin: 0 auto;
}


/* ============================================================
   INTRO
============================================================ */

.vcBlogArticlesIntro {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: 34px;
    margin-bottom: 30px;
}


.vcBlogArticlesIntroCopy {
    max-width: 850px;
}


.vcBlogArticlesIntro h2 {
    margin: 0;
    font-size:
        clamp(
            40px,
            4.5vw,
            68px
        );
    line-height: 1.01;
    letter-spacing: -.052em;
    font-weight: 500;
    color: #171b23;
}


.vcBlogArticlesIntro h2 strong {
    display: block;
    font-weight: 800;
}


.vcBlogArticlesIntro p {
    max-width: 680px;
    margin:
        18px
        0
        0;
    font-size: 16px;
    line-height: 1.7;
    color: #747c89;
}


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

.vcBlogArticlesCount {
    min-width: 142px;
    display: grid;
    gap: 3px;
    padding:
        16px
        18px;
    border:
        1px solid
        rgba(15, 23, 42, .07);
    border-radius: 20px;
    background:
        rgba(255,255,255,.9);
    box-shadow:
        0 15px 40px
        rgba(15, 23, 42, .05);
    text-align: right;
}


.vcBlogArticlesCount strong {
    font-size: 31px;
    line-height: 1;
    letter-spacing: -.05em;
    color: #171b23;
}


.vcBlogArticlesCount span {
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9ca3ae;
}


/* ============================================================
   FILTER BAR
============================================================ */

.vcBlogArticlesFilterBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
    padding:
        13px
        15px
        13px
        18px;
    border:
        1px solid
        rgba(99, 116, 255, .11);
    border-radius: 17px;
    background:
        linear-gradient(
            90deg,
            rgba(99, 116, 255, .055),
            rgba(255,255,255,.9)
        );
}


.vcBlogArticlesFilterBar > span {
    font-size: 11px;
    color: #737b87;
}


.vcBlogArticlesFilterBar > span strong {
    margin-left: 4px;
    color: #6374ff;
}


.vcBlogArticlesFilterBar > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding:
        8px
        11px;
    border-radius: 999px;
    background: #ffffff;
    color: #515966;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    box-shadow:
        0 7px 20px
        rgba(15, 23, 42, .05);
    transition:
        background-color .22s ease,
        color .22s ease,
        transform .22s ease;
}


.vcBlogArticlesFilterBar > a:hover {
    transform:
        translateY(-1px);
    background: #171b23;
    color: #ffffff;
}


.vcBlogArticlesFilterBar > a svg {
    width: 13px;
    height: 13px;
}


/* ============================================================
   GRID
============================================================ */

.vcBlogArticlesGrid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap:
        clamp(16px, 1.7vw, 25px);
}


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

.vcBlogArticleCard {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border:
        1px solid
        rgba(15, 23, 42, .065);
    border-radius: 28px;
    background: #ffffff;
    box-shadow:
        0 16px 45px
        rgba(15, 23, 42, .045);
    transition:
        transform .32s cubic-bezier(.2,.8,.2,1),
        box-shadow .32s ease,
        border-color .32s ease;
}


.vcBlogArticleCard:hover {
    transform:
        translateY(-6px);
    border-color:
        rgba(99, 116, 255, .14);
    box-shadow:
        0 28px 70px
        rgba(15, 23, 42, .09);
}


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

.vcBlogArticleImage {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #edf0f6,
            #f8f9fb
        );
    color: inherit;
    text-decoration: none;
}


.vcBlogArticleImage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            transparent 50%,
            rgba(10, 14, 22, .15)
        );
    pointer-events: none;
}


.vcBlogArticleImage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        filter .55s ease;
}


.vcBlogArticleCard:hover
.vcBlogArticleImage img {
    transform:
        scale(1.045);
    filter:
        saturate(1.03);
}


/* ============================================================
   NO IMAGE
============================================================ */

.vcBlogArticleNoImage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(99, 116, 255, .11),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #f1f3f8,
            #fafbfc
        );
    color: #9aa2ae;
}


.vcBlogArticleNoImage svg {
    width: 38px;
    height: 38px;
}


/* ============================================================
   NUMBER
============================================================ */

.vcBlogArticleNumber {
    position: absolute;
    right: 14px;
    bottom: 13px;
    z-index: 3;
    min-width: 36px;
    height: 32px;
    display: grid;
    place-items: center;
    padding:
        0
        7px;
    border:
        1px solid
        rgba(255,255,255,.16);
    border-radius: 10px;
    background:
        rgba(17, 22, 31, .68);
    backdrop-filter:
        blur(10px);
    color: #ffffff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
}


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

.vcBlogArticleContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding:
        23px
        23px
        21px;
}


/* ============================================================
   META
============================================================ */

.vcBlogArticleMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}


.vcBlogArticleMeta > span {
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #6374ff;
}


.vcBlogArticleMeta time {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 650;
    color: #a0a6b0;
}


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

.vcBlogArticleTitle {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size:
        clamp(
            22px,
            1.9vw,
            29px
        );
    line-height: 1.08;
    letter-spacing: -.038em;
    font-weight: 800;
    color: #1c2029;
    text-decoration: none;
    transition:
        color .22s ease;
}


.vcBlogArticleTitle:hover {
    color: #6374ff;
}


/* ============================================================
   SUMMARY
============================================================ */

.vcBlogArticleContent > p {
    display: -webkit-box;
    overflow: hidden;
    margin:
        14px
        0
        0;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 13px;
    line-height: 1.65;
    color: #78808c;
}


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

.vcBlogArticleFooter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 23px;
}


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

.vcBlogArticleRead {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #353b45;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
}


.vcBlogArticleRead > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        rgba(15, 23, 42, .055);
    color: #555e69;
    transition:
        transform .24s ease,
        background-color .24s ease,
        color .24s ease;
}


.vcBlogArticleRead > span svg {
    width: 13px;
    height: 13px;
}


.vcBlogArticleCard:hover
.vcBlogArticleRead > span {
    transform:
        translateX(3px);
    background: #171b23;
    color: #ffffff;
}


/* ============================================================
   PAGINATION
============================================================ */

.vcBlogPagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top:
        clamp(
            38px,
            5vw,
            65px
        );
}


/* ============================================================
   PAGINATION ARROWS
============================================================ */

.vcBlogPaginationArrow {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border:
        1px solid
        rgba(15, 23, 42, .075);
    border-radius: 50%;
    background: #ffffff;
    color: #555e69;
    text-decoration: none;
    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, .045);
    transition:
        transform .22s ease,
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease;
}


a.vcBlogPaginationArrow:hover {
    transform:
        translateY(-2px);
    border-color: #171b23;
    background: #171b23;
    color: #ffffff;
}


.vcBlogPaginationArrow svg {
    width: 16px;
    height: 16px;
}


.vcBlogPaginationArrow.is-disabled {
    opacity: .3;
    cursor: default;
}


/* ============================================================
   PAGINATION PAGES
============================================================ */

.vcBlogPaginationPages {
    display: flex;
    align-items: center;
    gap: 5px;
    padding:
        5px;
    border:
        1px solid
        rgba(15, 23, 42, .065);
    border-radius: 999px;
    background:
        rgba(255,255,255,.92);
    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, .04);
}


.vcBlogPaginationPages > a,
.vcBlogPaginationPages > span {
    min-width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding:
        0
        7px;
    border-radius: 50%;
    color: #707885;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color .22s ease,
        color .22s ease,
        transform .22s ease;
}


.vcBlogPaginationPages > a:hover {
    transform:
        translateY(-1px);
    background:
        rgba(99, 116, 255, .08);
    color: #6374ff;
}


.vcBlogPaginationPages > span.is-active {
    background: #171b23;
    color: #ffffff;
}


.vcBlogPaginationPages > span:not(.is-active) {
    min-width: 22px;
    color: #b0b5bd;
}


/* ============================================================
   EMPTY
============================================================ */

.vcBlogArticlesEmpty {
    padding:
        clamp(
            60px,
            8vw,
            100px
        )
        28px;
    border:
        1px solid
        rgba(15, 23, 42, .07);
    border-radius: 32px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(99, 116, 255, .075),
            transparent 35%
        ),
        #ffffff;
    box-shadow:
        0 20px 65px
        rgba(15, 23, 42, .05);
    text-align: center;
}


.vcBlogArticlesEmptyIcon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin:
        0
        auto
        18px;
    border-radius: 20px;
    background:
        rgba(99, 116, 255, .08);
    color: #6374ff;
}


.vcBlogArticlesEmptyIcon svg {
    width: 27px;
    height: 27px;
}


.vcBlogArticlesEmpty > span:nth-child(2) {
    display: block;
    margin-bottom: 9px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #6374ff;
}


.vcBlogArticlesEmpty h3 {
    margin: 0;
    font-size:
        clamp(
            34px,
            4vw,
            54px
        );
    line-height: 1.04;
    letter-spacing: -.05em;
    font-weight: 500;
    color: #181c24;
}


.vcBlogArticlesEmpty h3 strong {
    display: block;
    font-weight: 800;
}


.vcBlogArticlesEmpty p {
    margin:
        16px
        auto
        22px;
    font-size: 14px;
    color: #7a828d;
}


.vcBlogArticlesEmpty > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding:
        0
        20px;
    border-radius: 999px;
    background: #171b23;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition:
        transform .22s ease,
        background-color .22s ease;
}


.vcBlogArticlesEmpty > a:hover {
    transform:
        translateY(-2px);
    background: #6374ff;
}


.vcBlogArticlesEmpty > a svg {
    width: 15px;
    height: 15px;
}


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

@media (max-width: 1050px) {

    .vcBlogArticlesGrid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


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

@media (max-width: 800px) {

    .vcBlogArticlesIntro {
        grid-template-columns:
            1fr;
        align-items: start;
        gap: 20px;
    }


    .vcBlogArticlesCount {
        width: max-content;
        text-align: left;
    }

}


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

@media (max-width: 650px) {

    .vcBlogArticles {
        padding:
            64px
            16px
            82px;
    }


    .vcBlogArticlesIntro {
        margin-bottom: 24px;
    }


    .vcBlogArticlesIntro h2 {
        font-size:
            clamp(
                38px,
                11vw,
                50px
            );
    }


    .vcBlogArticlesIntro p {
        margin-top: 15px;
        font-size: 14px;
        line-height: 1.62;
    }


    .vcBlogArticlesCount {
        width: 100%;
    }


    .vcBlogArticlesFilterBar {
        align-items: flex-start;
        gap: 12px;
    }


    .vcBlogArticlesGrid {
        grid-template-columns:
            1fr;
        gap: 16px;
    }


    .vcBlogArticleCard {
        border-radius: 25px;
    }


    .vcBlogArticleImage {
        aspect-ratio: 16 / 9;
    }


    .vcBlogArticleContent {
        padding:
            21px
            19px
            19px;
    }


    .vcBlogArticleTitle {
        font-size:
            clamp(
                24px,
                7vw,
                31px
            );
    }


    .vcBlogArticleContent > p {
        font-size: 13px;
    }


    .vcBlogPagination {
        gap: 7px;
        margin-top: 38px;
    }


    .vcBlogPaginationArrow {
        width: 38px;
        height: 38px;
    }


    .vcBlogPaginationPages {
        gap: 2px;
    }


    .vcBlogPaginationPages > a,
    .vcBlogPaginationPages > span {
        min-width: 31px;
        height: 31px;
    }

}


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

@media (max-width: 430px) {

    .vcBlogArticles {
        padding-left: 14px;
        padding-right: 14px;
    }


    .vcBlogArticlesFilterBar {
        flex-direction: column;
    }


    .vcBlogArticlesFilterBar > a {
        align-self: flex-end;
    }


    .vcBlogArticleMeta {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }


    .vcBlogPagination {
        gap: 5px;
    }


    .vcBlogPaginationArrow {
        width: 36px;
        height: 36px;
    }


    .vcBlogPaginationPages {
        padding: 4px;
    }


    .vcBlogPaginationPages > a,
    .vcBlogPaginationPages > span {
        min-width: 29px;
        height: 29px;
        padding: 0 5px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .vcBlogArticleCard,
    .vcBlogArticleImage img,
    .vcBlogArticleTitle,
    .vcBlogArticleRead > span,
    .vcBlogPaginationArrow,
    .vcBlogPaginationPages > a,
    .vcBlogArticlesFilterBar > a,
    .vcBlogArticlesEmpty > a {
        transition: none;
    }

}

/* ============================================================
   BLOG ARTICLES
   JS STATES
============================================================ */

.vcBlogArticleImage img {
    will-change: transform;
}


.vcBlogArticleCard.is-keyboard-focus {
    border-color:
        rgba(99, 116, 255, .28);

    box-shadow:
        0 0 0 4px
        rgba(99, 116, 255, .07),
        0 26px 65px
        rgba(15, 23, 42, .08);
}


.vcBlogNavigationPending
.vcBlogArticles {
    pointer-events: none;
}