/**
 * [RS] Wiki category page styles.
 * The shared site hero is intentionally inherited from the same `wiki` page
 * stylesheet used by /wiki/index.php.
 */

.wiki-category-overview .category-summary {
    max-width: 760px;
}

.wiki-category-overview .category-summary-copy {
    max-width: 620px;
}

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

        .category-summary {

            position: relative;

            padding-left: 30px;

            border-left:
                1px solid
                rgba(189,0,0,.55);

        }

        .category-summary::before {

            content: "";

            position: absolute;

            top: 0;
            left: -1px;

            width: 1px;
            height: 70px;

            background:
                var(--red-bright);

        }

        .category-summary-icon {

            width: 46px;
            height: 46px;

            display: flex;
            align-items: center;
            justify-content: center;

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

            color:
                var(--red-bright);

            background:
                var(--red-soft);

            font-size: 1rem;

        }

        .category-summary-label {

            margin-top: 19px;

            color:
                rgba(255,255,255,.25);

            font-size: .55rem;
            font-weight: 800;

            letter-spacing: .13em;

            text-transform: uppercase;

        }

        .category-summary-count {

            margin-top: 7px;

            color: #fff;

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

            font-weight: 900;

            line-height: 1;

            letter-spacing: -.04em;

        }

        .category-summary-copy {

            margin-top: 14px;

            color:
                rgba(255,255,255,.37);

            font-size: .75rem;

            line-height: 1.68;

        }


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

        .category-search-wrap {

            position: relative;

            z-index: 5;

            margin-top: -34px;

        }

        .category-search {

            display: grid;

            grid-template-columns:
                62px
                minmax(0, 1fr)
                auto;

            min-height: 68px;

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

            background:
                rgba(12,12,12,.97);

            box-shadow:
                0 24px 70px
                rgba(0,0,0,.45);

        }

        .category-search-icon {

            display: flex;
            align-items: center;
            justify-content: center;

            color:
                var(--red-bright);

        }

        .category-search input {

            width: 100%;

            border: 0;
            outline: 0;

            padding:
                0
                10px;

            background:
                transparent;

            color: #fff;

            font-size: .84rem;

        }

        .category-search input::placeholder {
            color:
                rgba(255,255,255,.22);
        }

        .category-search-button {

            min-width: 155px;

            border: 0;

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

            background:
                var(--red);

            color: #fff;

            font-size: .59rem;
            font-weight: 800;

            letter-spacing: .10em;

            text-transform: uppercase;

        }

        .category-search-button:hover {
            background:
                var(--red-bright);
        }


        /* =====================================================
           MAIN CATEGORY LAYOUT
        ====================================================== */

        .category-content-layout {

            display: grid;

            grid-template-columns:
                minmax(0, 1fr)
                310px;

            gap: 65px;

            align-items: start;

            margin-top: 48px;

        }


        /* =====================================================
           ARTICLE DIRECTORY
        ====================================================== */

        .article-directory {

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

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

        }

        .article-row {

            position: relative;

            display: grid;

            grid-template-columns:
                50px
                minmax(0, 1fr)
                auto
                25px;

            gap: 17px;

            align-items: center;

            min-height: 94px;

            padding:
                14px
                8px;

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

            transition:
                padding-left .18s ease,
                background .18s ease;

        }

        .article-row:last-child {
            border-bottom: 0;
        }

        .article-row::before {

            content: "";

            position: absolute;

            left: 0;
            top: 22%;
            bottom: 22%;

            width: 2px;

            background:
                var(--red-bright);

            transform:
                scaleY(0);

            transition:
                transform .18s ease;

        }

        .article-row:hover {

            padding-left: 14px;

            background:
                linear-gradient(
                    90deg,
                    rgba(189,0,0,.055),
                    transparent 55%
                );

        }

        .article-row:hover::before {
            transform:
                scaleY(1);
        }

        .article-icon {

            width: 42px;
            height: 42px;

            display: flex;
            align-items: center;
            justify-content: center;

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

            color:
                rgba(255,255,255,.36);

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

            transition:
                color .18s ease,
                border-color .18s ease,
                background .18s ease;

        }

        .article-row:hover
        .article-icon {

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

            color:
                var(--red-bright);

            background:
                var(--red-soft);

        }

        .article-title {

            color:
                rgba(255,255,255,.86);

            font-size: .83rem;
            font-weight: 750;

        }

        .article-description {

            max-width: 760px;

            margin-top: 5px;

            color:
                rgba(255,255,255,.32);

            font-size: .69rem;

            line-height: 1.58;

        }

        .article-meta {

            color:
                rgba(255,255,255,.20);

            font-size: .55rem;
            font-weight: 800;

            letter-spacing: .07em;

            text-transform: uppercase;

            text-align: right;

            white-space: nowrap;

        }

        .article-arrow {

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

            font-size: .72rem;

            transition:
                color .18s ease,
                transform .18s ease;

        }

        .article-row:hover
        .article-arrow {

            color:
                var(--red-bright);

            transform:
                translateX(3px);

        }


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

        .empty-state {

            padding: 40px;

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

            background:
                #0d0d0d;

        }

        .empty-state-icon {

            width: 46px;
            height: 46px;

            display: flex;
            align-items: center;
            justify-content: center;

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

            color:
                var(--red-bright);

            background:
                var(--red-soft);

        }

        .empty-state-title {

            margin-top: 20px;

            color: #fff;

            font-size: 1rem;
            font-weight: 800;

        }

        .empty-state-copy {

            margin-top: 8px;

            color:
                rgba(255,255,255,.36);

            font-size: .73rem;

            line-height: 1.65;

        }


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

        .category-sidebar {

            position: sticky;
            top: 110px;

        }

        .sidebar-panel {

            margin-bottom: 18px;

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

            background:
                #0d0d0d;

        }

        .sidebar-heading {

            display: flex;

            align-items: center;
            justify-content: space-between;

            gap: 15px;

            padding:
                17px
                18px;

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

            color:
                rgba(255,255,255,.29);

            font-size: .56rem;
            font-weight: 800;

            letter-spacing: .12em;

            text-transform: uppercase;

        }

        .sidebar-heading i {
            color:
                var(--red-bright);
        }

        .sidebar-link {

            display: grid;

            grid-template-columns:
                28px
                minmax(0, 1fr)
                auto;

            gap: 10px;

            align-items: center;

            min-height: 49px;

            padding:
                0
                16px;

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

            color:
                rgba(255,255,255,.43);

            font-size: .65rem;

            transition:
                background .18s ease,
                color .18s ease;

        }

        .sidebar-link:last-child {
            border-bottom: 0;
        }

        .sidebar-link:hover {

            color: #fff;

            background:
                rgba(189,0,0,.045);

        }

        .sidebar-link.active {

            color: #fff;

            background:
                rgba(189,0,0,.07);

        }

        .sidebar-link > i:first-child {
            color:
                var(--red-bright);
        }

        .sidebar-link-arrow {
            color:
                rgba(255,255,255,.16);
        }


        /* =====================================================
           POPULAR ARTICLES
        ====================================================== */

        .popular-item {

            display: block;

            padding:
                15px
                17px;

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

            transition:
                background .18s ease;

        }

        .popular-item:last-child {
            border-bottom: 0;
        }

        .popular-item:hover {

            background:
                rgba(189,0,0,.045);

        }

        .popular-title {

            color:
                rgba(255,255,255,.70);

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

            line-height: 1.45;

        }

        .popular-meta {

            margin-top: 5px;

            color:
                rgba(255,255,255,.19);

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

            text-transform: uppercase;

            letter-spacing: .07em;

        }


        /* =====================================================
           OTHER CATEGORIES
        ====================================================== */

        .other-category-link {

            display: grid;

            grid-template-columns:
                30px
                minmax(0, 1fr)
                auto;

            gap: 10px;

            align-items: center;

            min-height: 50px;

            padding:
                0
                16px;

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

            color:
                rgba(255,255,255,.42);

            font-size: .64rem;

        }

        .other-category-link:last-child {
            border-bottom: 0;
        }

        .other-category-link:hover {

            color: #fff;

            background:
                rgba(189,0,0,.045);

        }

        .other-category-link i:first-child {

            color:
                rgba(255,255,255,.25);

        }

        .other-category-link:hover
        i:first-child {

            color:
                var(--red-bright);

        }

        .other-category-count {

            color:
                rgba(255,255,255,.18);

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

        }


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

        .category-info-grid {

            display: grid;

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

            gap: 1px;

            margin-top: 48px;

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

            background:
                var(--border-soft);

        }

        .category-info-card {

            min-height: 210px;

            padding: 27px;

            background:
                #0d0d0d;

        }

        .category-info-card i {

            color:
                var(--red-bright);

            font-size: 1rem;

        }

        .category-info-title {

            margin-top: 20px;

            color: #fff;

            font-size: .86rem;
            font-weight: 800;

        }

        .category-info-copy {

            margin-top: 8px;

            color:
                rgba(255,255,255,.34);

            font-size: .71rem;

            line-height: 1.63;

        }


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

        .category-help {

            display: grid;

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

            gap: 45px;

            align-items: center;

            padding: 44px;

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

            background:

                radial-gradient(
                    circle at 88% 40%,
                    rgba(189,0,0,.14),
                    transparent 34%
                ),

                #0d0d0d;

        }

        .category-help-title {

            color: #fff;

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

            font-weight: 900;

            line-height: 1;

            letter-spacing: -.04em;

            text-transform: uppercase;

        }

        .category-help-copy {

            max-width: 700px;

            margin-top: 12px;

            color:
                rgba(255,255,255,.38);

            font-size: .75rem;

            line-height: 1.7;

        }


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

        @media (max-width: 1099.98px) {

            .category-hero-inner {

                grid-template-columns: 1fr;

            }

            .category-summary {
                max-width: 650px;
            }

            .category-content-layout {

                grid-template-columns: 1fr;

            }

            .category-sidebar {

                position: static;

                display: grid;

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

                gap: 18px;

            }

        }


        @media (max-width: 767.98px) {

            .section {
                padding:
                    82px
                    0;
            }

            .category-hero {
                min-height: auto;
            }

            .category-hero-inner {

                padding-top: 150px;
                padding-bottom: 70px;

            }

            .category-title {

                font-size:
                    clamp(
                        3.3rem,
                        16vw,
                        5rem
                    );

            }

            .category-search {

                grid-template-columns:
                    54px
                    minmax(0, 1fr);

            }

            .category-search-button {

                grid-column:
                    1 / -1;

                min-height: 48px;

                border-left: 0;

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

            }

            .article-row {

                grid-template-columns:
                    45px
                    minmax(0, 1fr)
                    22px;

                min-height: 82px;

                gap: 13px;

            }

            .article-meta {
                display: none;
            }

            .category-sidebar {

                grid-template-columns: 1fr;

            }

            .category-info-grid {

                grid-template-columns: 1fr;

            }

            .category-help {

                grid-template-columns: 1fr;

                padding: 30px;

            }

        }