/* ==================================================
   RCODE TAG PAGE
   ================================================== */


/* ==================================================
   TAG PAGE
   ================================================== */

.rcode-tag-page {

    color:
        var(--text);
}


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

.rcode-tag-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(--soft-blue-border),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--bg-card),
            var(--soft-bg)
        );

    box-shadow:
        var(--shadow-md);
}


.rcode-tag-hero::after {

    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -70px;

    bottom:
        -80px;

    border-radius:
        50%;

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


.rcode-tag-hero-content {

    position:
        relative;

    z-index:
        2;
}


/* ==================================================
   TAG LABEL
   ================================================== */

.rcode-tag-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;
}


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

.rcode-tag-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;
}


.rcode-tag-title strong {

    color:
        var(--primary);
}


/* ==================================================
   TAG DESCRIPTION
   ================================================== */

.rcode-tag-description {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.75;
}


/* ==================================================
   CURRENT TAG
   ================================================== */

.rcode-tag-current {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        16px;

    padding:
        7px 11px;

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

    border-radius:
        999px;

    background:
        var(--soft-primary);

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        700;
}


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

.rcode-tag-article {

    margin-bottom:
        16px;

    padding:
        16px;

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

    border-radius:
        17px;

    background:
        var(--bg-card);

    box-shadow:
        var(--shadow-sm);

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


.rcode-tag-article:hover {

    transform:
        translateY(-2px);

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

    box-shadow:
        var(--shadow-md);
}


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

.rcode-tag-thumb {

    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        16 / 9;

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

    border-radius:
        13px;

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


.rcode-tag-thumb img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .3s ease;
}


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

    transform:
        scale(1.025);
}


.rcode-tag-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-tag-article-content {

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


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

.rcode-tag-category {

    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-tag-category:hover {

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

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


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

.rcode-tag-article-title {

    margin:
        0 0 8px;

    font-size:
        17px;

    line-height:
        1.4;

    font-weight:
        800;

    letter-spacing:
        -.2px;
}


.rcode-tag-article-title a {

    color:
        var(--text-dark);

    text-decoration:
        none;
}


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

    color:
        var(--primary);
}


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

.rcode-tag-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;
}


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

.rcode-tag-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px 13px;

    color:
        var(--text-faint);

    font-size:
        10px;
}


.rcode-tag-meta span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;
}


.rcode-tag-meta i {

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


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

.rcode-tag-empty {

    padding:
        55px 25px;

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

    border-radius:
        18px;

    background:
        var(--soft-bg);

    text-align:
        center;
}


.rcode-tag-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-tag-empty h2 {

    margin:
        0 0 8px;

    color:
        var(--text-dark);

    font-size:
        19px;

    font-weight:
        800;
}


.rcode-tag-empty p {

    max-width:
        400px;

    margin:
        0 auto;

    color:
        var(--text-muted);

    font-size:
        12px;

    line-height:
        1.7;
}


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

.rcode-tag-pagination {

    display:
        flex;

    justify-content:
        center;

    margin:
        28px 0 10px;
}


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

@media (max-width: 991.98px) {

    .rcode-tag-hero {

        padding:
            26px 25px;
    }


    .rcode-tag-article-content {

        padding:
            2px 0;
    }

}


@media (max-width: 767.98px) {

    .rcode-tag-hero {

        padding:
            23px 20px;

        border-radius:
            18px;
    }


    .rcode-tag-title {

        font-size:
            1.65rem;
    }


    .rcode-tag-description {

        font-size:
            13px;
    }


    .rcode-tag-article {

        padding:
            12px;

        border-radius:
            15px;
    }


    .rcode-tag-thumb {

        aspect-ratio:
            16 / 9;
    }


    .rcode-tag-article-content {

        padding:
            3px 2px 5px;
    }


    .rcode-tag-article-title {

        font-size:
            15px;
    }


    .rcode-tag-excerpt {

        font-size:
            11px;
    }


    .rcode-tag-meta {

        font-size:
            9px;

        gap:
            6px 10px;
    }

}