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

.v2-article-page {
    padding: .35rem 0 3rem;
    background: transparent;
}

.v2-article-container {
    width: min(calc(100% - 2rem), 1320px);
    margin: 0 auto;
}

.v2-article-hero + .v2-article-section,
.v2-article-section + .v2-article-section {
    margin-top: 1.4rem;
}


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

.v2-article-hero-shell {
    --hero-color: #315fda;

    position: relative;
    left: 50%;

    width: 100vw;
    margin-left: -50vw;

    overflow: hidden;

    background: var(--hero-color);
}

.v2-article-hero-shell.has-color {
    background: var(--hero-color);
}

.v2-article-hero-background {
    position: absolute;
    inset: 0;

    background-image: var(--hero-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.v2-article-hero-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(14, 31, 65, .72) 0%,
        rgba(14, 31, 65, .52) 38%,
        rgba(14, 31, 65, .18) 70%,
        rgba(14, 31, 65, .05) 100%
    );
}

.v2-article-hero-shell.has-color .v2-article-hero-overlay {
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(255, 255, 255, .12),
            transparent 22%
        ),
        radial-gradient(
            circle at 82% 18%,
            rgba(255, 255, 255, .08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .03),
            rgba(8, 27, 76, .14)
        );
}

.v2-article-hero-content {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    width: min(calc(100% - 2rem), 1320px);
    min-height: 24rem;

    margin: 0 auto;
    padding: 1.35rem 0;
}

.v2-article-hero-copy {
    max-width: 33rem;
}


/* Breadcrumb */
.v2-article-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .4rem;

    margin-bottom: .65rem;

    color: rgba(245, 248, 255, .76);

    font-size: .72rem;
}

.v2-article-breadcrumb a,
.v2-article-breadcrumb span,
.v2-article-breadcrumb i {
    color: inherit;
    text-decoration: none;
}


/* Hero text */
.v2-article-hero-copy h1 {
    max-width: 32rem;

    margin: 0;

    color: #fff;

    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.9rem);
    font-weight: 750;

    line-height: 1.1;
    letter-spacing: -.045em;
}

.v2-article-hero-copy > p {
    max-width: 30rem;

    margin: .6rem 0 0;

    color: rgba(245, 248, 255, .84);

    font-size: .86rem;
    line-height: 1.7;
}


/* =========================================================
   HERO SEARCH
   ========================================================= */

.v2-article-hero-search {
    display: flex;
    align-items: center;

    gap: .6rem;

    width: min(100%, 27rem);

    margin-top: .95rem;
    padding: .35rem .4rem .35rem .9rem;

    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;

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

    backdrop-filter: blur(12px);

    box-shadow:
        0 10px 24px rgba(8, 24, 58, .12);

    transition:
        background .15s ease,
        box-shadow .15s ease;
}

.v2-article-hero-search:focus-within {
    background: rgba(255, 255, 255, .22);

    box-shadow:
        0 12px 26px rgba(8, 24, 58, .16);
}

.v2-article-hero-search input {
    flex: 1;
    min-width: 0;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #fff;

    font-family: inherit;
    font-size: .84rem;
}

.v2-article-hero-search input::placeholder {
    color: rgba(245, 248, 255, .76);
}

.v2-article-hero-search button {
    display: grid;
    place-items: center;

    flex: 0 0 2.65rem;

    width: 2.65rem;
    height: 2.65rem;

    border: 0;
    border-radius: 50%;

    background: #fff;

    color: #315dde;

    cursor: pointer;

    box-shadow:
        0 7px 16px rgba(10, 28, 66, .12);

    transition: transform .15s ease;
}

.v2-article-hero-search button:hover {
    transform: translateY(-1px);
}



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

.v2-article-category-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .85rem;
}

.v2-article-category-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .4rem 1rem;
}

.v2-article-category-chip {
    display: inline-flex;
    align-items: center;

    gap: .4rem;

    padding: .2rem 0 .45rem;

    border: 0;
    border-bottom: 2px solid transparent;

    background: transparent;

    color: #687b95;

    cursor: pointer;

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

.v2-article-category-chip:hover,
.v2-article-category-chip.is-active {
    color: #355dde;
    border-bottom-color: #355dde;
}

.v2-article-category-chip-icon {
    display: grid;
    place-items: center;

    width: 1.55rem;
    height: 1.55rem;

    border-radius: 50%;

    background: #f1f5fd;

    color: #5877d7;

    font-size: .7rem;
}

.v2-article-category-chip-label {
    font-size: .78rem;
    font-weight: 600;
}

.v2-article-category-mobile {
    display: none;
}

.v2-article-category-sort {
    flex: 0 0 auto;
}

.v2-article-sort-field {
    gap: .25rem;
}


/* =========================================================
   CUSTOM SELECT
   ========================================================= */

.v2-article-category-select,
.v2-article-sort-select {
    position: relative;
}

.v2-article-sort-select {
    min-width: 9rem;
}

.v2-article-category-select {
    width: 100%;
}

.v2-article-category-select .v6-custom-select-trigger,
.v2-article-sort-select .v6-custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 2.5rem;

    padding: 0 .75rem;

    border: 1px solid #dfe7f1;
    border-radius: .7rem;

    background: #fff;

    color: #334860;

    font-family: inherit;
    font-size: .75rem;

    cursor: pointer;
}

.v2-article-category-select .v6-custom-select-menu,
.v2-article-sort-select .v6-custom-select-menu {
    position: absolute;

    top: calc(100% + .35rem);
    right: 0;
    left: 0;

    z-index: 30;

    padding: .25rem;

    border: 1px solid #e0e7f0;
    border-radius: .65rem;

    background: #fff;

    box-shadow:
        0 12px 26px rgba(27, 45, 75, .1);
}

.v2-article-category-select .v6-custom-select-option,
.v2-article-sort-select .v6-custom-select-option {
    width: 100%;

    padding: .5rem .6rem;

    border: 0;
    border-radius: .45rem;

    background: transparent;

    color: #53667f;

    font-family: inherit;
    font-size: .72rem;

    text-align: left;

    cursor: pointer;
}

.v2-article-category-select .v6-custom-select-option:hover,
.v2-article-sort-select .v6-custom-select-option:hover,
.v2-article-category-select .v6-custom-select-option.is-selected,
.v2-article-sort-select .v6-custom-select-option.is-selected {
    background: #f1f5fb;
    color: #355dde;
}


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

.v2-article-content-shell {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        19rem;

    align-items: start;

    gap: 1rem;
}

.v2-article-feed-list {
    display: grid;
    gap: .7rem;
}


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

.v2-article-list-card {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(11rem, 13.5rem)
        minmax(0, 1fr);

    align-items: stretch;

    gap: .7rem;

    padding: .55rem;

    border: 1px solid #e7edf5;
    border-radius: .9rem;

    background: #fff;

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

.v2-article-list-card:hover {
    transform: translateY(-2px);

    border-color: #cedaeb;

    box-shadow:
        0 10px 24px rgba(26, 43, 73, .06);
}

.v2-article-list-card-overlay {
    position: absolute;
    inset: 0;

    z-index: 3;

    border-radius: inherit;
}

.v2-article-list-card-media {
    position: relative;
    z-index: 1;

    display: block;

    overflow: hidden;

    aspect-ratio: 1.35 / 1;

    border-radius: .7rem;

    background: #e9eef7;
}

.v2-article-list-card-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}

.v2-article-list-card:hover .v2-article-list-card-media img {
    transform: scale(1.035);
}

.v2-article-list-card-body {
    position: relative;
    z-index: 1;

    display: grid;
    align-content: center;

    gap: .24rem;
}

.v2-article-tag {
    display: inline-flex;

    width: fit-content;

    padding: .12rem .35rem;

    border-radius: 999px;

    background: #eef3ff;

    color: #5878d3;

    font-size: .52rem;
    font-weight: 700;

    text-transform: uppercase;
}

.v2-article-list-card h3 {
    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(.95rem, 1.15vw, 1.1rem);
    font-weight: 680;

    line-height: 1.28;
    letter-spacing: -.025em;
}

.v2-article-list-card h3 a {
    color: #21375d;
    text-decoration: none;
}

.v2-article-list-card p {
    margin: 0;

    color: #70819a;

    font-size: .73rem;
    line-height: 1.55;
}

.v2-article-meta {
    display: flex;
    flex-wrap: wrap;

    gap: .35rem .65rem;

    margin-top: .1rem;

    color: #8191a7;

    font-size: .62rem;
}

.v2-article-meta span {
    display: inline-flex;
    align-items: center;

    gap: .3rem;
}


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

.v2-article-sidebar {
    position: sticky;
    top: calc(var(--header-height, 84px) + 1rem);

    display: grid;

    gap: .75rem;
}

.v2-article-sidebar-card,
.v2-article-cta-card {
    padding: .8rem;

    border: 1px solid #e4ebf4;
    border-radius: .9rem;

    background: #fff;
}

.v2-article-sidebar-head {
    margin-bottom: .7rem;
}

.v2-article-sidebar-head h2 {
    margin: 0;

    color: #24385d;

    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
}

.v2-article-sidebar-head::after {
    content: "";

    display: block;

    width: 1.2rem;
    height: 3px;

    margin-top: .4rem;

    border-radius: 999px;

    background: #ff654d;
}

.v2-article-popular-list {
    display: grid;

    gap: .7rem;
}

.v2-article-popular-item {
    display: grid;
    grid-template-columns:
        3.6rem
        minmax(0, 1fr);

    align-items: center;

    gap: .6rem;
}

.v2-article-popular-thumb {
    display: block;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    border-radius: .55rem;

    background: #e9eef7;
}

.v2-article-popular-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.v2-article-popular-body h3 {
    margin: 0;

    font-size: .74rem;
    font-weight: 650;

    line-height: 1.35;
}

.v2-article-popular-body h3 a {
    color: #2a3f65;
    text-decoration: none;
}

.v2-article-popular-body span {
    display: inline-flex;
    align-items: center;

    gap: .3rem;

    margin-top: .2rem;

    color: #8796aa;

    font-size: .6rem;
}


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

.v2-article-cta-card {
    position: relative;

    min-height: 15rem;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f3f7ff,
            #e9f0ff
        );
}

.v2-article-cta-copy {
    position: relative;
    z-index: 2;

    max-width: 12rem;
}

.v2-article-cta-copy h2 {
    margin: 0;

    color: #24385d;

    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;

    line-height: 1.05;
    letter-spacing: -.04em;
}

.v2-article-cta-copy h2 span {
    color: #eb5144;
}

.v2-article-cta-copy p {
    margin: .55rem 0 0;

    color: #617695;

    font-size: .7rem;
    line-height: 1.55;
}

.v2-article-cta-button {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    gap: .45rem;

    margin-top: .75rem;
    padding: .6rem .8rem;

    border-radius: .7rem;

    background: #ed5142;

    color: #fff;

    font-size: .72rem;
    font-weight: 700;

    text-decoration: none;
}

.v2-article-cta-illustration {
    position: absolute;
    inset: auto 0 0;

    height: 52%;

    pointer-events: none;
}

.v2-article-cta-illustration .is-cloud,
.v2-article-cta-illustration .is-route {
    display: none;
}

.v2-article-cta-illustration .is-pin,
.v2-article-cta-illustration .is-bus,
.v2-article-cta-illustration .is-ship {
    position: absolute;

    display: grid;
    place-items: center;
}

.v2-article-cta-illustration .is-pin {
    right: 2rem;
    bottom: 5.5rem;

    color: #ef5145;

    font-size: 1.8rem;
}

.v2-article-cta-illustration .is-bus,
.v2-article-cta-illustration .is-ship {
    bottom: 1rem;

    width: 3rem;
    height: 3rem;

    border-radius: .8rem;

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

    color: #5277dc;
}

.v2-article-cta-illustration .is-bus {
    right: 4.5rem;
}

.v2-article-cta-illustration .is-ship {
    right: 1rem;
}


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

.v2-pagination {
    display: flex;
    align-items: center;

    gap: .55rem;

    margin-top: 1.1rem;
}

.v2-pagination-pages {
    display: flex;
    gap: .4rem;
}

.v2-pagination-link,
.v2-pagination-page {
    display: grid;
    place-items: center;

    min-width: 2.35rem;
    height: 2.35rem;

    border: 1px solid #dfe7f1;
    border-radius: .7rem;

    background: #fff;

    color: #5e7290;

    font-size: .78rem;
    font-weight: 650;

    text-decoration: none;
}

.v2-pagination-page.is-active {
    border-color: #355dde;

    background: #355dde;

    color: #fff;
}

.v2-pagination-link.is-disabled {
    opacity: .45;
}


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

.v2-empty-state {
    display: grid;
    justify-items: center;

    gap: .7rem;

    padding: 3rem 1.5rem;

    border: 1px solid #e3eaf3;
    border-radius: 1rem;

    background: #fff;

    text-align: center;
}

.v2-empty-state-icon {
    display: grid;
    place-items: center;

    width: 3.5rem;
    height: 3.5rem;

    border-radius: .9rem;

    background: #eef4ff;

    color: #4d72da;

    font-size: 1.35rem;
}

.v2-empty-state h3 {
    margin: 0;

    color: #24395d;

    font-size: 1rem;
    font-weight: 700;
}

.v2-empty-state p {
    max-width: 28rem;

    margin: 0;

    color: #7486a0;

    font-size: .82rem;
    line-height: 1.6;
}


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

@media (max-width: 1180px) {
    .v2-article-page {
        padding-bottom: 2.6rem;
    }

    .v2-article-hero + .v2-article-section,
    .v2-article-section + .v2-article-section {
        margin-top: 1.15rem;
    }

    .v2-article-hero-content {
        min-height: auto;
        padding-block: 1.5rem;
    }

    .v2-article-hero-copy {
        max-width: 31rem;
    }

    .v2-article-content-shell {
        grid-template-columns: 1fr;
        gap: .95rem;
    }

    .v2-article-sidebar {
        position: static;

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

        gap: .85rem;
    }
}


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

@media (max-width: 760px) {
    .v2-article-page {
        padding: 0 0 2.1rem;
    }

    .v2-article-container {
        width: calc(100% - 1rem);
    }

    .v2-article-hero + .v2-article-section,
    .v2-article-section + .v2-article-section {
        margin-top: 1rem;
    }


    /* Hero */
    .v2-article-hero-shell {
        border-radius: 0 0 1rem 1rem;
    }

    .v2-article-hero-content {
        width: calc(100% - 1rem);

        min-height: 17.5rem;
        padding: 1rem 0 1.15rem;
    }

    .v2-article-hero-copy {
        max-width: none;
    }

    .v2-article-breadcrumb {
        gap: .32rem;
        margin-bottom: .5rem;
        font-size: .66rem;
    }

    .v2-article-hero-copy h1 {
        max-width: none;

        font-size: 1.48rem;
        line-height: 1.12;
    }

    .v2-article-hero-copy > p {
        max-width: none;

        margin-top: .45rem;
        font-size: .74rem;
        line-height: 1.55;
    }

    .v2-article-hero-search {
        width: 100%;
        max-width: none;
        margin-top: .8rem;
        padding: .32rem .34rem .32rem .72rem;
    }

    /* Category */
    .v2-article-category-bar {
        align-items: stretch;
        flex-direction: column;

        gap: .55rem;
    }

    .v2-article-category-grid {
        display: none;
    }

    .v2-article-category-mobile {
        display: block;
    }

    .v2-article-category-sort {
        width: 100%;
    }

    .v2-article-sort-field {
        gap: .18rem;
    }

    .v2-article-sort-select {
        width: 100%;
    }


    /* Article */
    .v2-article-list-card {
        grid-template-columns: 1fr;
        gap: .62rem;
        padding: .5rem;
    }

    .v2-article-list-card-media {
        aspect-ratio: 1.7 / 1;
    }

    .v2-article-list-card-body {
        gap: .22rem;
        padding: 0 .05rem .05rem;
    }

    .v2-article-list-card h3 {
        font-size: .96rem;
    }

    .v2-article-list-card p {
        font-size: .71rem;
        line-height: 1.52;
    }

    .v2-article-meta {
        gap: .3rem .55rem;
        font-size: .6rem;
    }

    .v2-pagination {
        justify-content: center;
        margin-top: .9rem;
    }


    /* Sidebar */
    .v2-article-sidebar {
        grid-template-columns: 1fr;
        gap: .7rem;
    }

    .v2-article-sidebar-card,
    .v2-article-cta-card {
        padding: .72rem;
    }

    .v2-article-cta-card {
        min-height: 13.5rem;
    }

    .v2-article-cta-copy {
        max-width: 100%;
    }
}


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

@media (max-width: 480px) {
    .v2-article-page {
        padding-bottom: 1.8rem;
    }

    .v2-article-container {
        width: calc(100% - .8rem);
    }

    .v2-article-breadcrumb {
        font-size: .62rem;
    }

    .v2-article-hero-copy h1 {
        font-size: 1.34rem;
    }

    .v2-article-hero-copy > p {
        font-size: .72rem;
    }

    .v2-article-hero-search {
        padding:
            .3rem
            .32rem
            .3rem
            .62rem;
    }

    .v2-article-hero-search input {
        font-size: .74rem;
    }

    .v2-article-hero-search button {
        flex-basis: 2.35rem;

        width: 2.35rem;
        height: 2.35rem;
    }

    .v2-article-category-bar {
        gap: .5rem;
    }

    .v2-article-list-card {
        padding: .46rem;
        border-radius: .82rem;
    }

    .v2-article-list-card-media {
        border-radius: .62rem;
    }

    .v2-article-list-card h3 {
        font-size: .92rem;
    }

    .v2-pagination-link,
    .v2-pagination-page {
        min-width: 2.15rem;
        height: 2.15rem;
    }
}