/* ==========================================================
   RUANG BESTARI — CATEGORY ARCHIVE
   ========================================================== */

body.rb-category-archive-page .post-archive-hero-section {
    display: none !important;
}

body.rb-category-archive-page #inner-wrap {
    padding-top: var(--rb-page-top-desktop, 32px) !important;
    padding-bottom: var(--rb-page-bottom-desktop, 32px) !important;
}

body.rb-category-archive-page #primary.content-area {
    width: calc(
        100%
        - var(--global-content-edge-padding, 24px)
        - var(--global-content-edge-padding, 24px)
    );

    max-width: var(--global-content-width, 1280px);

    margin: 0 auto !important;
    padding: 0 !important;
}

.rb-category-archive__inner {
    width: 100%;
}


/* HEADER */

.rb-category-header {
    padding: 24px 26px;

    border: 1px solid #F0E3C6;
    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #FFF8E9,
        #FFFCF5
    );
}

.rb-category-header__eyebrow {
    display: block;

    margin-bottom: 7px;

    color: #D98200;

    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .08em;

    text-transform: uppercase;
}

.rb-category-header__title {
    margin: 0;

    color: #191C1F;

    font-size: 32px;
    font-weight: 750;
    line-height: 1.2;
}

.rb-category-header__description {
    max-width: 700px;

    margin: 8px 0 0;

    color: #626A70;

    font-size: 13px;
    line-height: 1.55;
}

.rb-category-header__count {
    margin-top: 10px;

    color: #094C4E;

    font-size: 11px;
    font-weight: 700;
}


/* CATEGORY TABS */

.rb-category-tabs {
    display: flex;
    gap: 7px;

    margin-top: 18px;
    padding-bottom: 14px;

    overflow-x: auto;

    border-bottom: 1px solid #E5E9EA;

    scrollbar-width: none;
}

.rb-category-tabs::-webkit-scrollbar {
    display: none;
}

.rb-category-tabs__item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 7px 13px;

    border: 1px solid #E1E6E7;
    border-radius: 999px;

    background: #FFFFFF;

    color: #626A70;

    font-size: 11px;
    font-weight: 650;
    line-height: 1;

    text-decoration: none !important;
}

.rb-category-tabs__item.is-active {
    border-color: #094C4E;

    background: #094C4E;

    color: #FFFFFF;
}


/* GRID — DESKTOP 4 */

.rb-category-grid {
    display: grid;

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

    gap: 24px 18px;

    margin-top: 24px;
}


/* PAGINATION */

.rb-category-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 34px;
}

.rb-category-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;

    padding: 0 10px;

    border: 1px solid #E1E6E7;
    border-radius: 10px;

    background: #FFFFFF;

    color: #4F575B;

    font-size: 11px;
    font-weight: 650;

    text-decoration: none !important;
}

.rb-category-pagination .page-numbers.current {
    border-color: #094C4E;

    background: #094C4E;

    color: #FFFFFF;
}


/* TABLET */

@media (min-width: 768px) and (max-width: 1024px) {

    .rb-category-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 20px 12px;
    }

}


/* MOBILE — 2 COLUMNS */

@media (max-width: 767px) {

    body.rb-category-archive-page #inner-wrap {
        padding-top: var(--rb-page-top-mobile, 24px) !important;
        padding-bottom: var(--rb-page-bottom-mobile, 24px) !important;
    }

    .rb-category-header {
        padding: 18px;

        border-radius: 15px;
    }

    .rb-category-header__title {
        font-size: 26px;
    }

    .rb-category-header__description {
        font-size: 12px;
    }

    .rb-category-tabs {
        margin-top: 14px;
        padding-bottom: 12px;
    }

    .rb-category-tabs__item {
        min-height: 31px;

        padding: 6px 11px;

        font-size: 10px;
    }

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

        gap: 18px 10px;

        margin-top: 18px;
    }

    .rb-category-pagination {
        gap: 5px;

        margin-top: 28px;
    }

    .rb-category-pagination .page-numbers {
        min-width: 33px;
        height: 33px;

        padding: 0 8px;
    }

}

/* ==========================================================
   CATEGORY ARCHIVE — GLOBAL CONTAINER ALIGNMENT FINAL
   Same horizontal line as header / homepage.
   ========================================================== */

body.rb-category-archive-page #primary.rb-category-archive {
    width: 100% !important;
    max-width: var(--global-content-width, 1280px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: var(--global-content-edge-padding, 24px) !important;
    padding-right: var(--global-content-edge-padding, 24px) !important;

    box-sizing: border-box !important;
}

/* END CATEGORY ARCHIVE — GLOBAL CONTAINER ALIGNMENT FINAL */

/* ==========================================================
   CATEGORY ARCHIVE — CARD META ALIGNMENT FINAL
   Love + komentar sejajar pada setiap baris card.
   ========================================================== */

.rb-category-grid .rb-feed-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-width: 0 !important;
}

.rb-category-grid .rb-feed-card__body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
}

/*
 * Area engagement selalu turun ke dasar card,
 * sehingga love + komentar sejajar walaupun judul
 * terdiri dari 1 atau 2 baris.
 */
.rb-category-grid .rb-feed-card__engagement {
    margin-top: auto !important;
}

/* END CATEGORY ARCHIVE — CARD META ALIGNMENT FINAL */

/* ==========================================================
   CATEGORY ARCHIVE — CENTERED HERO + NAV FINAL
   ========================================================== */

.rb-category-header {
    text-align: center !important;
}

.rb-category-header__description {
    margin-left: auto !important;
    margin-right: auto !important;
}

.rb-category-header__count {
    text-align: center !important;
}

@media (min-width: 768px) {

    .rb-category-tabs {
        justify-content: center !important;
    }

}

@media (max-width: 767px) {

    .rb-category-tabs {
        justify-content: flex-start !important;
    }

}

/* END CATEGORY ARCHIVE — CENTERED HERO + NAV FINAL */

/* ==========================================================
   CATEGORY ARCHIVE — COMPACT TITLE FOR DENSE GRID
   ========================================================== */

@media (min-width: 768px) {

    .rb-category-grid .rb-feed-card__title {
        font-size: 13px !important;
        line-height: 1.32 !important;

        display: -webkit-box !important;
        overflow: hidden !important;

        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

}

/* END CATEGORY ARCHIVE — COMPACT TITLE */

/* ==========================================================
   CATEGORY ARCHIVE — MOBILE COMPACT TITLE FINAL
   ========================================================== */

@media (max-width: 767px) {

    .rb-category-grid .rb-feed-card__title {
        font-size: 12.5px !important;
        line-height: 1.3 !important;

        display: -webkit-box !important;
        overflow: hidden !important;

        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

}

/* END CATEGORY ARCHIVE — MOBILE COMPACT TITLE FINAL */

/* ==========================================================
   CATEGORY ARCHIVE — MOBILE 3 COLUMN FINAL
   ========================================================== */

@media (max-width: 767px) {

    .rb-category-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 16px 8px !important;
    }

}

/* END CATEGORY ARCHIVE — MOBILE 3 COLUMN FINAL */

/* ==========================================================
   ALL POSTS ARCHIVE — GLOBAL CONTAINER ALIGNMENT FINAL
   Same horizontal line as category / header / homepage.
   ========================================================== */

body.rb-all-posts-archive-page
.rb-all-posts-archive {
    width: 100% !important;
    max-width: var(--global-content-width, 1280px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: var(--global-content-edge-padding, 24px) !important;
    padding-right: var(--global-content-edge-padding, 24px) !important;

    box-sizing: border-box !important;
}

/* END ALL POSTS ARCHIVE — GLOBAL CONTAINER ALIGNMENT FINAL */

/* ==========================================================
   ALL POSTS ARCHIVE — WRAPPER NORMALIZATION ONLY
   Hero memakai rule kategori asli tanpa duplikasi.
   ========================================================== */

body.rb-all-posts-archive-page
.entry-content.single-content {
    margin: 0 !important;
    padding: 0 !important;
}

/* END ALL POSTS ARCHIVE — WRAPPER NORMALIZATION ONLY */


/* ==========================================================
   ALL POSTS ARCHIVE — CARD CATEGORY TO TITLE GAP FIX
   Neutralize Kadence h3 spacing inside .single-content.
   Match category archive card rhythm.
   ========================================================== */

body.rb-all-posts-archive-page
.entry-content.single-content
.rb-category-grid
.rb-feed-card__title {
    margin-top: 2px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    margin-block-start: 2px !important;
    margin-block-end: 0 !important;

    padding: 0 !important;
}

/* END ALL POSTS ARCHIVE — CARD CATEGORY TO TITLE GAP FIX */

/* ==========================================================
   ALL POSTS ARCHIVE — MOBILE HERO MATCH CATEGORY FINAL
   ========================================================== */

@media (max-width: 767px) {

    body.rb-all-posts-archive-page
    .rb-category-header {
        display: block !important;

        padding: 18px !important;

        text-align: center !important;

        border-radius: 15px !important;
    }

    body.rb-all-posts-archive-page
    .rb-category-header__eyebrow {
        display: block !important;

        margin: 0 0 7px !important;
        padding: 0 !important;

        font-size: 10px !important;
        line-height: 1 !important;

        text-align: center !important;
    }

    body.rb-all-posts-archive-page
    .rb-category-header__title {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 26px !important;
        line-height: 1.2 !important;

        text-align: center !important;
    }

    body.rb-all-posts-archive-page
    .rb-category-header__description {
        width: 100% !important;
        max-width: 700px !important;

        margin: 8px auto 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1.55 !important;

        text-align: center !important;
    }

    body.rb-all-posts-archive-page
    .rb-category-header__count {
        margin: 10px 0 0 !important;
        padding: 0 !important;

        font-size: 11px !important;

        text-align: center !important;
    }

    body.rb-all-posts-archive-page
    .rb-category-tabs {
        margin-top: 14px !important;
        padding-bottom: 12px !important;
    }

}

/* END ALL POSTS ARCHIVE — MOBILE HERO MATCH CATEGORY FINAL */

/* ==========================================================
   ALL POSTS ARCHIVE — DESKTOP HERO MATCH CATEGORY FINAL
   ========================================================== */

@media (min-width: 768px) {

    body.rb-all-posts-archive-page
    .rb-category-header {
        display: block !important;

        padding: 24px 26px !important;

        text-align: center !important;

        border-radius: 18px !important;
    }

    body.rb-all-posts-archive-page
    .rb-category-header__eyebrow {
        display: block !important;

        margin: 0 0 7px !important;
        padding: 0 !important;

        font-size: 10px !important;
        line-height: 1 !important;

        text-align: center !important;
    }

    body.rb-all-posts-archive-page
    .rb-category-header__title {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 32px !important;
        line-height: 1.2 !important;

        text-align: center !important;
    }

    body.rb-all-posts-archive-page
    .rb-category-header__description {
        width: 100% !important;
        max-width: 700px !important;

        margin: 8px auto 0 !important;
        padding: 0 !important;

        font-size: 13px !important;
        line-height: 1.55 !important;

        text-align: center !important;
    }

    body.rb-all-posts-archive-page
    .rb-category-header__count {
        margin: 10px 0 0 !important;
        padding: 0 !important;

        font-size: 11px !important;

        text-align: center !important;
    }

    body.rb-all-posts-archive-page
    .rb-category-tabs {
        margin-top: 18px !important;
        padding-bottom: 14px !important;
        justify-content: center !important;
    }

}

/* END ALL POSTS ARCHIVE — DESKTOP HERO MATCH CATEGORY FINAL */


/* ==========================================================
   RUANG BESTARI — ARCHIVE DESKTOP COMPACT TYPE V1

   FONT-SIZE ONLY.
   Archive grid sengaja tetap padat.
   ========================================================== */

@media (min-width: 768px) {

    .rb-category-header__title,
    body.rb-all-posts-archive-page
    .rb-category-header__title {
        font-size: var(--rb-type-h1-size) !important;
    }

}

/* END RUANG BESTARI — ARCHIVE DESKTOP COMPACT TYPE V1 */


/* ==========================================================
   RUANG BESTARI — ARCHIVE MOBILE COMPACT TYPE V1
   Dense archive cards intentionally stay smaller than H3.
   FONT-SIZE ONLY.
   ========================================================== */

@media (max-width: 767px) {

    .rb-category-header__eyebrow,
    body.rb-all-posts-archive-page
    .rb-category-header__eyebrow {
        font-size: var(--rb-type-mobile-label-size) !important;
    }

    .rb-category-header__title,
    body.rb-all-posts-archive-page
    .rb-category-header__title {
        font-size: var(--rb-type-mobile-h1-size) !important;
    }

    .rb-category-header__description,
    body.rb-all-posts-archive-page
    .rb-category-header__description {
        font-size: var(--rb-type-mobile-body-size) !important;
    }

    .rb-category-header__count,
    body.rb-all-posts-archive-page
    .rb-category-header__count {
        font-size: var(--rb-type-mobile-small-size) !important;
    }

    .rb-category-tabs__item,
    .rb-category-pagination .page-numbers {
        font-size: var(--rb-type-mobile-small-size) !important;
    }

    /*
     * Grid archive sangat padat.
     * 12.5px dipertahankan agar 3 kolom tidak pecah.
     */
    .rb-category-grid .rb-feed-card__title {
        font-size: 12.5px !important;
    }

}

/* END RUANG BESTARI — ARCHIVE MOBILE COMPACT TYPE V1 */

/* ==========================================================
   RUANG BESTARI — DESKTOP EMPHASIS V1
   Archive semantic finishing.
   ========================================================== */

@media (min-width: 768px) {

    .rb-category-header__eyebrow {
        font-weight:
            var(--rb-type-label-weight) !important;
    }

    .rb-category-header__title {
        font-weight:
            var(--rb-type-h1-weight) !important;
    }

    .rb-category-header__description {
        font-weight:
            var(--rb-type-body-weight) !important;
    }

    .rb-category-header__count {
        font-weight:
            var(--rb-type-small-weight) !important;
    }

    .rb-category-tabs__item,
    .rb-category-pagination .page-numbers {
        font-weight:
            var(--rb-type-ui-weight) !important;
    }

    .rb-category-grid
    .rb-feed-card__title {
        font-weight:
            var(--rb-type-h3-weight) !important;
    }

}

/* END RUANG BESTARI — DESKTOP EMPHASIS V1 */

/* ==========================================================
   RUANG BESTARI — MOBILE EMPHASIS V1
   Mobile only — font-weight normalization.
   Semantic strong/em inside article content is preserved.
   ========================================================== */

@media (max-width: 767px) {

.rb-category-header__eyebrow,
    body.rb-all-posts-archive-page
    .rb-category-header__eyebrow {
    font-weight: var(--rb-type-label-weight) !important;
}

.rb-category-header__title,
    body.rb-all-posts-archive-page
    .rb-category-header__title {
    font-weight: var(--rb-type-h3-weight) !important;
}

.rb-category-header__description,
    body.rb-all-posts-archive-page
    .rb-category-header__description {
    font-weight: var(--rb-type-body-weight) !important;
}

.rb-category-header__count,
    body.rb-all-posts-archive-page
    .rb-category-header__count {
    font-weight: var(--rb-type-small-weight) !important;
}

.rb-category-tabs__item,
    .rb-category-pagination .page-numbers {
    font-weight: var(--rb-type-ui-weight) !important;
}

.rb-category-grid
    .rb-feed-card__title {
        font-weight:
            var(--rb-type-h3-weight) !important;
    }

}

/* END RUANG BESTARI — MOBILE EMPHASIS V1 */


/* ==========================================================
   RUANG BESTARI — DESKTOP COLOR SYSTEM V1
   Archive.
   ========================================================== */

@media (min-width: 1025px) {

    html:not([data-rb-theme="dark"])
    .rb-category-header__eyebrow,
    html:not([data-rb-theme="dark"])
    .rb-category-grid .rb-feed-card__category {
        color: var(--rb-color-editorial) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-header__title,
    html:not([data-rb-theme="dark"])
    .rb-category-grid .rb-feed-card__title a {
        color: var(--rb-color-text-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-header__description {
        color: var(--rb-color-text-secondary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-grid .rb-feed-card__meta,
    html:not([data-rb-theme="dark"])
    .rb-category-grid .rb-feed-card__engagement-item {
        color: var(--rb-color-text-muted) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-header__count {
        color: var(--rb-color-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-tabs__item {
        color: var(--rb-color-text-secondary) !important;
        background: var(--rb-color-surface) !important;
        border-color: var(--rb-color-border) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-tabs__item:hover {
        color: var(--rb-color-primary) !important;
        background: var(--rb-color-surface-active) !important;
        border-color: var(--rb-color-accent) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-tabs__item.is-active {
        color: #FFFFFF !important;
        background: var(--rb-color-primary) !important;
        border-color: var(--rb-color-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-pagination .page-numbers {
        color: var(--rb-color-text-secondary) !important;
        background: var(--rb-color-surface) !important;
        border-color: var(--rb-color-border) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-pagination a.page-numbers:hover,
    html:not([data-rb-theme="dark"])
    .rb-category-pagination a.page-numbers:focus-visible {
        color: var(--rb-color-primary) !important;
        background: var(--rb-color-surface-active) !important;
        border-color: var(--rb-color-accent) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-pagination .page-numbers.current {
        color: #FFFFFF !important;
        background: var(--rb-color-primary) !important;
        border-color: var(--rb-color-primary) !important;
    }
}

/* END RUANG BESTARI — DESKTOP COLOR SYSTEM V1 */

/* ==========================================================
   RUANG BESTARI — MOBILE COLOR SYSTEM V1
   Archive.
   ========================================================== */

@media (max-width: 767px) {

    html:not([data-rb-theme="dark"])
    .rb-category-header__eyebrow,
    html:not([data-rb-theme="dark"])
    .rb-category-grid .rb-feed-card__category {
        color: var(--rb-color-editorial) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-header__title,
    html:not([data-rb-theme="dark"])
    .rb-category-grid .rb-feed-card__title a {
        color: var(--rb-color-text-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-header__description {
        color: var(--rb-color-text-secondary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-grid .rb-feed-card__meta,
    html:not([data-rb-theme="dark"])
    .rb-category-grid .rb-feed-card__engagement-item {
        color: var(--rb-color-text-muted) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-header__count {
        color: var(--rb-color-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-tabs__item {
        color: var(--rb-color-text-secondary) !important;
        background: var(--rb-color-surface) !important;
        border-color: var(--rb-color-border) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-tabs__item:hover {
        color: var(--rb-color-primary) !important;
        background: var(--rb-color-surface-active) !important;
        border-color: var(--rb-color-accent) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-tabs__item.is-active {
        color: #FFFFFF !important;
        background: var(--rb-color-primary) !important;
        border-color: var(--rb-color-primary) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-pagination .page-numbers {
        color: var(--rb-color-text-secondary) !important;
        background: var(--rb-color-surface) !important;
        border-color: var(--rb-color-border) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-pagination a.page-numbers:hover,
    html:not([data-rb-theme="dark"])
    .rb-category-pagination a.page-numbers:focus-visible {
        color: var(--rb-color-primary) !important;
        background: var(--rb-color-surface-active) !important;
        border-color: var(--rb-color-accent) !important;
    }

    html:not([data-rb-theme="dark"])
    .rb-category-pagination .page-numbers.current {
        color: #FFFFFF !important;
        background: var(--rb-color-primary) !important;
        border-color: var(--rb-color-primary) !important;
    }
}

/* END RUANG BESTARI — MOBILE COLOR SYSTEM V1 */