/* ==================================================
   RCODE CATEGORY PAGE
   ================================================== */


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

.rcode-category-page {

    color:
        var(--text);
}


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

.rcode-category-hero {

    position:
        relative;

    overflow:
        hidden;

    margin-bottom:
        20px;

    padding:
        30px 32px;

    border:
        1px solid var(--border);

    border-radius:
        22px;

    background:
        radial-gradient(
            circle at 90% 10%,
            var(--category-hero-glow),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--bg-card),
            var(--soft-bg)
        );

    box-shadow:
        var(--category-hero-shadow);
}


.rcode-category-hero::after {

    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -70px;

    bottom:
        -80px;

    border-radius:
        50%;

    background:
        var(--category-hero-decoration);
}


.rcode-category-hero-content {

    position:
        relative;

    z-index:
        2;
}


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

.rcode-category-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        11px;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;
}


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

.rcode-category-title {

    margin:
        0 0 10px;

    color:
        var(--text-dark);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.35rem
        );

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -.8px;
}


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

.rcode-category-description {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.75;
}


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

.rcode-category-article {

    margin-bottom:
        16px;

    padding:
        16px;

    border:
        1px solid var(--border);

    border-radius:
        17px;

    background:
        var(--bg-card);

    box-shadow:
        var(--category-card-shadow);

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


.rcode-category-article:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--border-primary);

    box-shadow:
        var(--category-card-shadow-hover);
}


/* ==================================================
   THUMBNAIL
   ================================================== */

.rcode-category-thumb {

    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        16 / 9;

    border-radius:
        13px;

    background:
        var(--soft-bg);

    border:
        1px solid var(--border);
}


.rcode-category-thumb img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .3s ease;
}


.rcode-category-article:hover
.rcode-category-thumb img {

    transform:
        scale(1.025);
}


.rcode-category-thumb-empty {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    color:
        var(--text-faint);

    background:
        var(--soft-bg);
}


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

.rcode-category-article-content {

    padding:
        2px 4px 2px 2px;
}


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

.rcode-category-badge {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px 8px;

    margin-bottom:
        8px;

    border:
        1px solid var(--border-primary);

    border-radius:
        7px;

    background:
        var(--soft-primary);

    color:
        var(--primary);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .3px;

    text-decoration:
        none;

    text-transform:
        uppercase;
}


.rcode-category-badge:hover {

    background:
        var(--soft-primary-hover);

    color:
        var(--primary-dark);
}


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

.rcode-category-article-title {

    margin:
        0 0 8px;

    font-size:
        17px;

    line-height:
        1.4;

    font-weight:
        800;

    letter-spacing:
        -.2px;
}


.rcode-category-article-title a {

    color:
        var(--text-dark);

    text-decoration:
        none;
}


.rcode-category-article-title a:hover {

    color:
        var(--primary);
}


/* ==================================================
   ARTICLE EXCERPT
   ================================================== */

.rcode-category-excerpt {

    display:
        -webkit-box;

    overflow:
        hidden;

    margin:
        0 0 11px;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.65;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;
}


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

.rcode-category-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px 13px;

    color:
        var(--text-faint);

    font-size:
        10px;
}


.rcode-category-meta span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;
}


.rcode-category-meta i {

    color:
        var(--primary-light);
}


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

.rcode-category-empty {

    padding:
        55px 25px;

    border:
        1px dashed var(--text-soft);

    border-radius:
        18px;

    background:
        var(--soft-bg);

    text-align:
        center;
}


.rcode-category-empty-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        56px;

    height:
        56px;

    margin:
        0 auto 15px;

    border-radius:
        15px;

    background:
        var(--soft-primary);

    color:
        var(--primary);

    font-size:
        22px;
}


.rcode-category-empty h2 {

    margin:
        0 0 8px;

    color:
        var(--text-dark);

    font-size:
        19px;

    font-weight:
        800;
}


.rcode-category-empty p {

    max-width:
        400px;

    margin:
        0 auto;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.7;
}


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

.rcode-category-pagination {

    display:
        flex;

    justify-content:
        center;

    margin:
        28px 0 10px;
}


/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 991.98px) {

    .rcode-category-hero {

        padding:
            26px 25px;
    }


    .rcode-category-article-content {

        padding:
            2px 0;
    }

}


@media (max-width: 767.98px) {

    .rcode-category-hero {

        padding:
            23px 20px;

        border-radius:
            18px;
    }


    .rcode-category-title {

        font-size:
            1.65rem;
    }


    .rcode-category-description {

        font-size:
            13px;
    }


    .rcode-category-article {

        padding:
            12px;

        border-radius:
            15px;
    }


    .rcode-category-thumb {

        aspect-ratio:
            16 / 9;
    }


    .rcode-category-article-content {

        padding:
            3px 2px 5px;
    }


    .rcode-category-article-title {

        font-size:
            15px;
    }


    .rcode-category-excerpt {

        font-size:
            11px;
    }


    .rcode-category-meta {

        font-size:
            9px;

        gap:
            6px 10px;
    }

}