/* ============================================================
   VENTACTIVE
   ARTICLE
   DISCOVER MORE
============================================================ */

.vcArticleDiscover {
    position: relative;
    padding:
        clamp(78px, 8vw, 125px)
        clamp(18px, 4vw, 70px)
        clamp(100px, 10vw, 155px);
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #f8f9fc 0%,
            #ffffff 100%
        );
}


.vcArticleDiscover::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -300px;
    right: -160px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(99, 116, 255, .07),
            transparent 70%
        );
    pointer-events: none;
}


.vcArticleDiscoverInner {
    position: relative;
    z-index: 2;
    width: min(1440px, 100%);
    margin: 0 auto;
}


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

.vcArticleDiscoverIntro {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    align-items: end;
    gap: 35px;
    margin-bottom:
        clamp(
            28px,
            3vw,
            42px
        );
}


.vcArticleDiscoverIntro > div {
    max-width: 760px;
}


/* ============================================================
   EYEBROW
============================================================ */

.vcArticleDiscoverEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6374ff;
}


.vcArticleDiscoverEyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            #6374ff,
            rgba(99, 116, 255, .15)
        );
}


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

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


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


/* ============================================================
   VIEW ALL
============================================================ */

.vcArticleDiscoverViewAll {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    color: #525a66;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    transition:
        color .22s ease,
        transform .22s ease;
}


.vcArticleDiscoverViewAll svg {
    width: 15px;
    height: 15px;
    transition:
        transform .22s ease;
}


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


.vcArticleDiscoverViewAll:hover svg {
    transform:
        translateX(4px);
}


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

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


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

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


.vcArticleDiscoverCard:hover {
    transform:
        translateY(-6px);
    border-color:
        rgba(99, 116, 255, .14);
    box-shadow:
        0 27px 65px
        rgba(15, 23, 42, .085);
}


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

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


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


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


.vcArticleDiscoverCard:hover
.vcArticleDiscoverImage img {
    transform:
        scale(1.045);
}


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

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


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


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

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


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

.vcArticleDiscoverContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding:
        22px
        22px
        20px;
}


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

.vcArticleDiscoverMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}


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


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


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

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


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


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

.vcArticleDiscoverContent > p {
    display: -webkit-box;
    overflow: hidden;
    margin:
        13px
        0
        0;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 12px;
    line-height: 1.65;
    color: #7a828e;
}


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

.vcArticleDiscoverRead {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: auto;
    padding-top: 21px;
    color: #343b46;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
}


.vcArticleDiscoverRead > span {
    width: 31px;
    height: 31px;
    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;
}


.vcArticleDiscoverRead svg {
    width: 13px;
    height: 13px;
}


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


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

.vcArticleDiscoverEmpty {
    padding:
        clamp(
            52px,
            6vw,
            80px
        )
        25px;
    border:
        1px solid
        rgba(15, 23, 42, .065);
    border-radius: 28px;
    background: #ffffff;
    text-align: center;
    box-shadow:
        0 16px 50px
        rgba(15, 23, 42, .045);
}


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


.vcArticleDiscoverEmpty h3 {
    margin: 0;
    font-size:
        clamp(
            29px,
            3vw,
            42px
        );
    line-height: 1.08;
    letter-spacing: -.045em;
    color: #171b23;
}


.vcArticleDiscoverEmpty p {
    margin:
        13px
        0
        20px;
    font-size: 13px;
    color: #7c8490;
}


.vcArticleDiscoverEmpty > a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 47px;
    padding:
        0
        19px;
    border-radius: 999px;
    background: #171b23;
    color: #ffffff;
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
    transition:
        transform .22s ease,
        background-color .22s ease;
}


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


.vcArticleDiscoverEmpty > a svg {
    width: 14px;
    height: 14px;
}


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

@media (max-width: 980px) {

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


    .vcArticleDiscoverCard:last-child {
        grid-column:
            1 / -1;
        display: grid;
        grid-template-columns:
            minmax(280px, .85fr)
            minmax(0, 1fr);
    }


    .vcArticleDiscoverCard:last-child
    .vcArticleDiscoverImage {
        height: 100%;
        min-height: 260px;
        aspect-ratio: auto;
    }

}


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

@media (max-width: 650px) {

    .vcArticleDiscover {
        padding:
            65px
            16px
            90px;
    }


    .vcArticleDiscoverIntro {
        grid-template-columns:
            1fr;
        align-items: start;
        gap: 20px;
        margin-bottom: 25px;
    }


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


    .vcArticleDiscoverViewAll {
        width: max-content;
    }


    .vcArticleDiscoverGrid {
        grid-template-columns:
            1fr;
        gap: 15px;
    }


    .vcArticleDiscoverCard,
    .vcArticleDiscoverCard:last-child {
        display: flex;
        grid-column: auto;
    }


    .vcArticleDiscoverCard {
        border-radius: 23px;
    }


    .vcArticleDiscoverCard:last-child
    .vcArticleDiscoverImage,
    .vcArticleDiscoverImage {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }


    .vcArticleDiscoverContent {
        padding:
            20px
            18px
            18px;
    }


    .vcArticleDiscoverTitle {
        font-size:
            clamp(
                23px,
                7vw,
                29px
            );
    }

}


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

@media (max-width: 430px) {

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


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


    .vcArticleDiscoverImage {
        aspect-ratio: 16 / 10;
    }

}


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

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

    .vcArticleDiscoverCard,
    .vcArticleDiscoverImage img,
    .vcArticleDiscoverTitle,
    .vcArticleDiscoverRead > span,
    .vcArticleDiscoverViewAll,
    .vcArticleDiscoverViewAll svg,
    .vcArticleDiscoverEmpty > a {
        transition: none;
    }

}

.vcArticleDiscoverImage img {
    will-change: transform;
}