/* =========================================================
   Gilroy Font Setup
   Put font files here:
   /wp-content/plugins/vsx-elements/assets/fonts/
========================================================= */


html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.elementor-widget-vsx_article_list,
.elementor-widget-vsx_article_list .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgb(9, 9, 13) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.vsx-article-list {
    --vsx-site-container: 1320px;

    --vsx-al-bg: rgb(9, 9, 13);
    --vsx-al-heading: #ffffff;
    --vsx-al-text: rgba(255, 255, 255, 0.90);
    --vsx-al-muted: rgba(245, 242, 237, 0.56);
    --vsx-al-card: #0f0f14;
    --vsx-al-border: rgba(255, 255, 255, 0.1);
    --vsx-al-accent: oklch(70.5% 0.213 47.604);

    width: 100%;
    max-width: 100%;
    padding: 44px 0 96px;
    background: var(--vsx-al-bg) !important;
    color: var(--vsx-al-heading);
    overflow: hidden;
    box-sizing: border-box;
}

.vsx-article-list *,
.vsx-article-list *::before,
.vsx-article-list *::after {
    box-sizing: border-box;
}

/* =========================================================
   Main Container
   Same width logic as hero/widgets
========================================================= */

.vsx-article-list__container {
    width: min(calc(100% - 24px), var(--vsx-site-container)) !important;
    max-width: var(--vsx-site-container) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* =========================================================
   Header
========================================================= */

.vsx-article-list__header {
    max-width: 1221px;
    margin: 0 auto 70px;
    text-align: center;
}

.vsx-article-list__title {
    margin: 0 auto;
    max-width: 1221px;
    color: #ffffff;
     font-family: Gilroy !important;
    font-size: clamp(38px, 4.8vw, 60px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -1px;
    text-align: center;
}

.vsx-article-list__description {
    max-width: 1221px;
    margin: 20px auto 32px;
    color: #ffffff;
    opacity: 0.90;
    font-family: Gilroy !important;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
    text-align: center;
}

/* =========================================================
   Grid
========================================================= */

.vsx-article-list__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

/* =========================================================
   Card
========================================================= */

.vsx-article-list__card {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    border-radius: 28px;
    background: var(--vsx-al-card);
    border: 1px solid var(--vsx-al-border);
    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.vsx-article-list__card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--vsx-al-accent) 70%, transparent);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.32);
}

.vsx-article-list__link {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    color: inherit;
    text-decoration: none;
}

.vsx-article-list__link:hover,
.vsx-article-list__link:focus {
    color: inherit;
    text-decoration: none;
}

/* =========================================================
   Image
========================================================= */

.vsx-article-list__media {
    position: relative;
/*     aspect-ratio: 1.18 / 0.82; */
    overflow: hidden;
    background: #d7dce2;
}

.vsx-article-list__media img,
.vsx-article-list__placeholder {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
/*     object-fit: cover; */
    transition: transform 0.45s ease;
}

.vsx-article-list__card:hover .vsx-article-list__media img {
    transform: scale(1.05);
}

.vsx-article-list__placeholder {
    background:
        radial-gradient(circle at 30% 36%, rgba(255,255,255,0.94) 0 4%, transparent 4.5%),
        radial-gradient(circle at 67% 32%, rgba(255,255,255,0.96) 0 18%, transparent 18.5%),
        radial-gradient(circle at 14% 84%, rgba(255,255,255,0.9) 0 20%, transparent 20.5%),
        linear-gradient(180deg, #d7dce2 0%, #c8ced6 100%);
}

.vsx-article-list__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.42) 100%),
        linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.78) 100%);
}

.vsx-article-list__badge {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vsx-al-accent) 18%, rgba(0,0,0,0.35));
    border: 1px solid color-mix(in srgb, var(--vsx-al-accent) 42%, transparent);
    color: var(--vsx-al-accent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: Gilroy !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =========================================================
   Body
========================================================= */

.vsx-article-list__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 14px;
    padding: 28px 28px 30px;
}

.vsx-article-list__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: var(--vsx-al-muted);
    font-family: Gilroy !important;
    font-size: 13px;
    font-weight: 500;
}

.vsx-article-list__dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--vsx-al-accent);
}

.vsx-article-list__card-title {
    margin: 0;
    color: #ffffff;
    font-family: Gilroy !important;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -1px;
}

.vsx-article-list__excerpt {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-family: Gilroy !important;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}

.vsx-article-list__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-family: Gilroy !important;
    font-size: 16px;
    font-weight: 800;
    transition: color 0.25s ease;
}

.vsx-article-list__card:hover .vsx-article-list__cta {
    color: var(--vsx-al-accent);
}

.vsx-article-list__empty {
    padding: 28px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--vsx-al-muted);
    font-family: Gilroy !important;
    font-size: 15px;
}

/* =========================================================
   Laptop
========================================================= */

@media (max-width: 1200px) {
    .vsx-article-list__container {
        width: min(calc(100% - 20px), var(--vsx-site-container)) !important;
    }

    .vsx-article-list__grid {
        gap: 24px;
    }
}

/* =========================================================
   Tablet
========================================================= */

@media (max-width: 1024px) {
    .vsx-article-list {
        padding: 36px 0 76px;
    }

    .vsx-article-list__container {
        width: min(calc(100% - 16px), var(--vsx-site-container)) !important;
    }

    .vsx-article-list__header {
        margin-bottom: 48px;
    }

    .vsx-article-list__title {
        max-width: 100%;
        font-size: clamp(40px, 7vw, 64px);
    }

    .vsx-article-list__description {
        max-width: 100%;
        margin: 20px auto 32px;
        font-size: 16px;
    }

    .vsx-article-list__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {
    .vsx-article-list {
        padding: 28px 0 58px;
    }

    .vsx-article-list__container {
        width: min(calc(100% - 16px), var(--vsx-site-container)) !important;
    }

    .vsx-article-list__header {
        margin-bottom: 34px;
        text-align: left;
    }

    .vsx-article-list__kicker {
        margin-bottom: 18px;
        font-size: 10px;
    }

    .vsx-article-list__title {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        font-size: clamp(34px, 10vw, 46px);
        line-height: 1.04;
        text-align: left;
    }

    .vsx-article-list__description {
        margin: 20px 0 32px;
        max-width: 100%;
        font-size: 16px;
        line-height: 1.5;
        text-align: left;
    }

    .vsx-article-list__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vsx-article-list__card {
        border-radius: 22px;
    }

    .vsx-article-list__body {
        padding: 22px 20px 24px;
    }

    .vsx-article-list__card-title {
        font-size: 24px;
    }

    .vsx-article-list__excerpt {
        font-size: 14px;
    }

    .vsx-article-list__cta {
        font-size: 15px;
    }
}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 420px) {
    .vsx-article-list__container {
        width: min(calc(100% - 12px), var(--vsx-site-container)) !important;
    }

    .vsx-article-list {
        padding: 24px 0 50px;
    }

    .vsx-article-list__title {
        font-size: clamp(32px, 9.4vw, 40px);
    }

    .vsx-article-list__description {
        font-size: 15px;
    }

    .vsx-article-list__body {
        padding: 18px 16px 20px;
    }

    .vsx-article-list__card-title {
        font-size: clamp(22px, 6.2vw, 26px);
    }
}