/* ============================================================
   PREMIUM WEB - RESOURCES PAGE
============================================================ */


/* ============================================================
   ROOT
============================================================ */

:root {

    --admin-bg:
        #f6f6f4;

    --admin-surface:
        #ffffff;

    --admin-surface-soft:
        #fafafa;

    --admin-surface-dark:
        #111111;

    --admin-text:
        #171717;

    --admin-text-soft:
        #5f5f5f;

    --admin-muted:
        #8a8a8a;

    --admin-border:
        #e8e8e5;

    --admin-border-dark:
        #d8d8d3;

    --admin-gold:
        #d4ad2c;

    --admin-gold-dark:
        #9b7605;

    --admin-gold-soft:
        #fff8df;

    --admin-success:
        #18864b;

    --admin-success-soft:
        #eaf8f0;

    --admin-danger:
        #c64141;

    --admin-danger-soft:
        #fff0f0;

    --admin-warning:
        #b77a08;

    --admin-warning-soft:
        #fff7dd;

    --admin-blue:
        #315ec9;

    --admin-blue-soft:
        #eef3ff;

    --admin-radius-xs:
        8px;

    --admin-radius-sm:
        10px;

    --admin-radius-md:
        14px;

    --admin-radius-lg:
        18px;

    --admin-radius-xl:
        24px;

    --admin-shadow-sm:
        0 3px 12px
        rgba(
            0,
            0,
            0,
            0.045
        );

    --admin-shadow-md:
        0 10px 30px
        rgba(
            0,
            0,
            0,
            0.07
        );

    --admin-transition:
        0.2s ease;

}



/* ============================================================
   RESET
============================================================ */

* {

    margin:
        0;

    padding:
        0;

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    min-height:
        100vh;

    background:
        var(
            --admin-bg
        );

    color:
        var(
            --admin-text
        );

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        14px;

    line-height:
        1.6;

    overflow-x:
        hidden;

}


body.menu-open {

    overflow:
        hidden;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
input {

    font:
        inherit;

}


button {

    border:
        0;

}


img {

    display:
        block;

    max-width:
        100%;

}


.hidden {

    display:
        none !important;

}



/* ============================================================
   CONTAINER
============================================================ */

.resources-container {

    width:
        min(
            1180px,
            calc(
                100% - 40px
            )
        );

    margin:
        0 auto;

}



/* ============================================================
   HEADER
============================================================ */

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    width:
        100%;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

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

    backdrop-filter:
        blur(
            14px
        );

    -webkit-backdrop-filter:
        blur(
            14px
        );

}


.header-container {

    width:
        min(
            1180px,
            calc(
                100% - 40px
            )
        );

    min-height:
        76px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

}



/* ============================================================
   BRAND
============================================================ */

.brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    flex-shrink:
        0;

}


.brand-mark {

    width:
        38px;

    height:
        38px;

    border-radius:
        11px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(
            --admin-surface-dark
        );

    color:
        var(
            --admin-gold
        );

    font-size:
        15px;

}


.brand-text {

    font-size:
        17px;

    font-weight:
        800;

    letter-spacing:
        -0.04em;

    color:
        var(
            --admin-text
        );

}



/* ============================================================
   DESKTOP NAVIGATION
============================================================ */

.desktop-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

}


.desktop-nav > a,
.nav-dropdown-trigger {

    min-height:
        42px;

    padding:
        0 14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        var(
            --admin-radius-sm
        );

    background:
        transparent;

    color:
        var(
            --admin-text-soft
        );

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background
        var(
            --admin-transition
        ),
        color
        var(
            --admin-transition
        );

}


.desktop-nav > a:hover,
.nav-dropdown-trigger:hover {

    background:
        var(
            --admin-surface-soft
        );

    color:
        var(
            --admin-text
        );

}


.desktop-nav > a.active {

    color:
        var(
            --admin-text
        );

}



/* ============================================================
   NAV DROPDOWN
============================================================ */

.nav-dropdown {

    position:
        relative;

}


.nav-dropdown-trigger i {

    font-size:
        10px;

    transition:
        transform
        var(
            --admin-transition
        );

}


.nav-dropdown:hover
.nav-dropdown-trigger i {

    transform:
        rotate(
            180deg
        );

}


.nav-dropdown-menu {

    position:
        absolute;

    top:
        calc(
            100% + 10px
        );

    left:
        50%;

    width:
        230px;

    padding:
        8px;

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

    border-radius:
        var(
            --admin-radius-md
        );

    background:
        var(
            --admin-surface
        );

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

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translate(
            -50%,
            8px
        );

    transition:
        opacity
        var(
            --admin-transition
        ),
        transform
        var(
            --admin-transition
        ),
        visibility
        var(
            --admin-transition
        );

}


.nav-dropdown:hover
.nav-dropdown-menu {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translate(
            -50%,
            0
        );

}


.nav-dropdown-menu a {

    width:
        100%;

    min-height:
        44px;

    padding:
        0 12px;

    border-radius:
        var(
            --admin-radius-sm
        );

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    color:
        var(
            --admin-text-soft
        );

    font-weight:
        600;

    transition:
        background
        var(
            --admin-transition
        ),
        color
        var(
            --admin-transition
        );

}


.nav-dropdown-menu a i {

    width:
        20px;

    color:
        var(
            --admin-gold-dark
        );

}


.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {

    background:
        var(
            --admin-gold-soft
        );

    color:
        var(
            --admin-text
        );

}



/* ============================================================
   HEADER ACTIONS
============================================================ */

.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    flex-shrink:
        0;

}


.header-login-btn,
.header-register-btn {

    min-height:
        42px;

    padding:
        0 16px;

    border-radius:
        var(
            --admin-radius-sm
        );

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        700;

    transition:
        all
        var(
            --admin-transition
        );

}


.header-login-btn {

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

    background:
        var(
            --admin-surface
        );

}


.header-login-btn:hover {

    background:
        var(
            --admin-surface-soft
        );

}


.header-register-btn {

    background:
        var(
            --admin-surface-dark
        );

    color:
        #ffffff;

}


.header-register-btn:hover {

    opacity:
        0.88;

}


.mobile-menu-btn {

    width:
        42px;

    height:
        42px;

    border-radius:
        var(
            --admin-radius-sm
        );

    background:
        var(
            --admin-surface-soft
        );

    color:
        var(
            --admin-text
        );

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;

}



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

.mobile-nav {

    display:
        none;

}



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

.resources-hero {

    padding:
        86px 0 64px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(
                --admin-bg
            ) 100%
        );

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

}


.resources-hero
.resources-container {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.15fr
        )
        minmax(
            320px,
            0.85fr
        );

    align-items:
        center;

    gap:
        70px;

}


.resources-hero-content {

    max-width:
        690px;

}


.section-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        16px;

    color:
        var(
            --admin-gold-dark
        );

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.resources-hero h1 {

    max-width:
        690px;

    font-size:
        clamp(
            42px,
            6vw,
            68px
        );

    line-height:
        1.03;

    letter-spacing:
        -0.06em;

    font-weight:
        800;

}


.resources-hero h1 span {

    color:
        var(
            --admin-gold-dark
        );

}


.resources-hero-content > p {

    max-width:
        620px;

    margin-top:
        22px;

    color:
        var(
            --admin-text-soft
        );

    font-size:
        17px;

    line-height:
        1.75;

}


.resources-hero-actions {

    margin-top:
        30px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

}



/* ============================================================
   GLOBAL BUTTONS
============================================================ */

.primary-btn,
.secondary-btn {

    min-height:
        46px;

    padding:
        0 18px;

    border-radius:
        var(
            --admin-radius-sm
        );

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all
        var(
            --admin-transition
        );

}


.primary-btn {

    background:
        var(
            --admin-surface-dark
        );

    color:
        #ffffff;

}


.primary-btn:hover {

    transform:
        translateY(
            -1px
        );

    opacity:
        0.9;

}


.secondary-btn {

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

    background:
        var(
            --admin-surface
        );

    color:
        var(
            --admin-text
        );

}


.secondary-btn:hover {

    background:
        var(
            --admin-surface-soft
        );

}



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

.resources-hero-card {

    min-height:
        330px;

    padding:
        34px;

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

    border-radius:
        var(
            --admin-radius-xl
        );

    background:
        var(
            --admin-surface
        );

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    overflow:
        hidden;

    position:
        relative;

}


.resources-hero-card::before {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    top:
        -100px;

    right:
        -70px;

    border-radius:
        50%;

    background:
        var(
            --admin-gold-soft
        );

}


.hero-resource-icon {

    position:
        relative;

    z-index:
        1;

    width:
        70px;

    height:
        70px;

    border-radius:
        20px;

    background:
        var(
            --admin-surface-dark
        );

    color:
        var(
            --admin-gold
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        25px;

}


.hero-resource-lines {

    display:
        grid;

    gap:
        12px;

}


.hero-resource-lines span {

    height:
        13px;

    border-radius:
        999px;

    background:
        #ededeb;

}


.hero-resource-lines span:nth-child(
    1
) {

    width:
        85%;

}


.hero-resource-lines span:nth-child(
    2
) {

    width:
        65%;

}


.hero-resource-lines span:nth-child(
    3
) {

    width:
        45%;

}


.hero-resource-tags {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

}


.hero-resource-tags span {

    min-height:
        34px;

    padding:
        0 11px;

    border-radius:
        999px;

    background:
        var(
            --admin-surface-soft
        );

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

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(
            --admin-text-soft
        );

    font-size:
        12px;

    font-weight:
        600;

}



/* ============================================================
   OVERVIEW
============================================================ */

.resources-overview {

    padding:
        26px 0;

    background:
        var(
            --admin-surface
        );

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

}


.resources-overview-grid {

    display:
        grid;

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

}


.overview-item {

    min-height:
        86px;

    padding:
        16px 28px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

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

}


.overview-item:last-child {

    border-right:
        0;

}


.overview-icon {

    width:
        44px;

    height:
        44px;

    flex-shrink:
        0;

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(
            --admin-gold-soft
        );

    color:
        var(
            --admin-gold-dark
        );

}


.overview-item strong {

    display:
        block;

    color:
        var(
            --admin-text
        );

    font-size:
        18px;

    line-height:
        1.2;

}


.overview-item span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(
            --admin-text-soft
        );

    font-size:
        12px;

}



/* ============================================================
   CATALOG
============================================================ */

.resources-catalog {

    padding:
        82px 0 94px;

}


.resources-section-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        26px;

}


.resources-section-header h2 {

    font-size:
        clamp(
            29px,
            4vw,
            40px
        );

    line-height:
        1.12;

    letter-spacing:
        -0.045em;

}


.resources-section-header p {

    margin-top:
        8px;

    color:
        var(
            --admin-text-soft
        );

}



/* ============================================================
   TOOLBAR
============================================================ */

.resources-toolbar {

    margin-top:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

}


.resources-search {

    width:
        min(
            100%,
            390px
        );

    height:
        48px;

    padding:
        0 15px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

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

    border-radius:
        var(
            --admin-radius-sm
        );

    background:
        var(
            --admin-surface
        );

    transition:
        border-color
        var(
            --admin-transition
        ),
        box-shadow
        var(
            --admin-transition
        );

}


.resources-search:focus-within {

    border-color:
        var(
            --admin-gold
        );

    box-shadow:
        0 0 0 3px
        rgba(
            212,
            173,
            44,
            0.12
        );

}


.resources-search i {

    flex-shrink:
        0;

    color:
        var(
            --admin-muted
        );

}


.resources-search input {

    width:
        100%;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        var(
            --admin-text
        );

}


.resources-search input::placeholder {

    color:
        #9a9a95;

}



/* ============================================================
   FILTER BUTTONS
============================================================ */

.resource-filter-buttons {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.resource-filter-btn {

    min-height:
        40px;

    padding:
        0 14px;

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

    border-radius:
        999px;

    background:
        var(
            --admin-surface
        );

    color:
        var(
            --admin-text-soft
        );

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all
        var(
            --admin-transition
        );

}


.resource-filter-btn:hover {

    border-color:
        var(
            --admin-border-dark
        );

    color:
        var(
            --admin-text
        );

}


.resource-filter-btn.active {

    border-color:
        var(
            --admin-surface-dark
        );

    background:
        var(
            --admin-surface-dark
        );

    color:
        #ffffff;

}



/* ============================================================
   RESULTS BAR
============================================================ */

.resources-results-bar {

    margin:
        24px 0 16px;

    padding-bottom:
        12px;

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

}


.resources-results-bar p {

    color:
        var(
            --admin-text-soft
        );

    font-size:
        12px;

    font-weight:
        600;

}



/* ============================================================
   RESOURCE GRID
============================================================ */

.resources-grid {

    display:
        grid;

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

    gap:
        18px;

}



/* ============================================================
   RESOURCE CARD
   JS CAN GENERATE THIS STRUCTURE
============================================================ */

.resource-card {

    min-height:
        300px;

    padding:
        22px;

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

    border-radius:
        var(
            --admin-radius-lg
        );

    background:
        var(
            --admin-surface
        );

    display:
        flex;

    flex-direction:
        column;

    position:
        relative;

    overflow:
        hidden;

    transition:
        transform
        var(
            --admin-transition
        ),
        border-color
        var(
            --admin-transition
        ),
        box-shadow
        var(
            --admin-transition
        );

}


.resource-card:hover {

    transform:
        translateY(
            -3px
        );

    border-color:
        var(
            --admin-border-dark
        );

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

}


.resource-card-top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        15px;

}


.resource-card-icon {

    width:
        52px;

    height:
        52px;

    flex-shrink:
        0;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(
            --admin-gold-soft
        );

    color:
        var(
            --admin-gold-dark
        );

    font-size:
        18px;

}


.resource-card-type {

    min-height:
        28px;

    padding:
        0 10px;

    border-radius:
        999px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(
            --admin-surface-soft
        );

    color:
        var(
            --admin-text-soft
        );

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

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

}


.resource-card h3 {

    margin-top:
        22px;

    font-size:
        18px;

    line-height:
        1.35;

    letter-spacing:
        -0.025em;

}


.resource-card-description {

    margin-top:
        10px;

    color:
        var(
            --admin-text-soft
        );

    font-size:
        13px;

    line-height:
        1.7;

    display:
        -webkit-box;



    -webkit-box-orient:
        vertical;

    overflow:
        hidden;

}


.resource-card-actions {

    margin-top:
        auto;

    padding-top:
        24px;

}


.resource-card-btn {

    width:
        100%;

    min-height:
        43px;

    padding:
        0 14px;

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

    border-radius:
        var(
            --admin-radius-sm
        );

    background:
        var(
            --admin-surface
        );

    color:
        var(
            --admin-text
        );

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background
        var(
            --admin-transition
        ),
        border-color
        var(
            --admin-transition
        );

}


.resource-card-btn:hover {

    background:
        var(
            --admin-surface-soft
        );

    border-color:
        var(
            --admin-gold
        );

}


.resource-card-btn i {

    color:
        var(
            --admin-gold-dark
        );

}



/* ============================================================
   LOADING
============================================================ */

.resources-loading {

    min-height:
        280px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    text-align:
        center;

    color:
        var(
            --admin-text-soft
        );

}


.resources-spinner {

    width:
        46px;

    height:
        46px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(
            --admin-gold-soft
        );

    color:
        var(
            --admin-gold-dark
        );

    font-size:
        18px;

}



/* ============================================================
   EMPTY / ERROR STATES
============================================================ */

.resources-state {

    min-height:
        310px;

    padding:
        46px 20px;

    border:
        1px dashed
        var(
            --admin-border-dark
        );

    border-radius:
        var(
            --admin-radius-lg
        );

    background:
        var(
            --admin-surface
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.resources-state-icon {

    width:
        58px;

    height:
        58px;

    border-radius:
        16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(
            --admin-surface-soft
        );

    color:
        var(
            --admin-muted
        );

    font-size:
        20px;

}


.resources-state h3 {

    margin-top:
        16px;

    font-size:
        19px;

}


.resources-state p {

    max-width:
        430px;

    margin-top:
        7px;

    color:
        var(
            --admin-text-soft
        );

}


.resources-state
.secondary-btn {

    margin-top:
        18px;

}



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

.resources-learning-cta {

    padding:
        0 0 92px;

}


.learning-cta-card {

    padding:
        44px;

    border-radius:
        var(
            --admin-radius-xl
        );

    background:
        var(
            --admin-surface-dark
        );

    color:
        #ffffff;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}


.learning-cta-content {

    max-width:
        650px;

}


.learning-cta-card
.section-eyebrow {

    color:
        var(
            --admin-gold
        );

}


.learning-cta-card h2 {

    font-size:
        clamp(
            28px,
            4vw,
            40px
        );

    line-height:
        1.12;

    letter-spacing:
        -0.045em;

}


.learning-cta-card p {

    margin-top:
        10px;

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

}


.learning-cta-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    flex-shrink:
        0;

}


.learning-cta-card
.primary-btn {

    background:
        var(
            --admin-gold
        );

    color:
        #111111;

}


.learning-cta-card
.secondary-btn {

    border-color:
        rgba(
            255,
            255,
            255,
            0.2
        );

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color:
        #ffffff;

}


.learning-cta-card
.secondary-btn:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.13
        );

}



/* ============================================================
   FOOTER
============================================================ */

.site-footer {

    padding:
        58px 0 24px;

    background:
        #ffffff;

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

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            260px,
            1.4fr
        )
        repeat(
            3,
            minmax(
                150px,
                1fr
            )
        );

    gap:
        42px;

}


.footer-brand {

    max-width:
        300px;

}


.footer-brand-link {

    margin-bottom:
        16px;

}


.footer-brand p {

    color:
        var(
            --admin-text-soft
        );

    font-size:
        13px;

}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        9px;

}


.footer-column h3 {

    margin-bottom:
        4px;

    font-size:
        12px;

    text-transform:
        uppercase;

    letter-spacing:
        0.07em;

}


.footer-column a {

    color:
        var(
            --admin-text-soft
        );

    font-size:
        13px;

    transition:
        color
        var(
            --admin-transition
        );

}


.footer-column a:hover {

    color:
        var(
            --admin-text
        );

}


.footer-bottom {

    margin-top:
        46px;

    padding-top:
        20px;

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.footer-bottom p {

    color:
        var(
            --admin-muted
        );

    font-size:
        12px;

}


.footer-socials {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.footer-socials a {

    width:
        34px;

    height:
        34px;

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

    border-radius:
        9px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(
            --admin-text-soft
        );

    transition:
        all
        var(
            --admin-transition
        );

}


.footer-socials a:hover {

    background:
        var(
            --admin-surface-dark
        );

    border-color:
        var(
            --admin-surface-dark
        );

    color:
        #ffffff;

}



/* ============================================================
   RESOURCE MODAL
============================================================ */

.resource-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        2000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

}


.resource-modal.active {

    display:
        flex;

}


.resource-modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            17,
            17,
            17,
            0.58
        );

    backdrop-filter:
        blur(
            4px
        );

}


.resource-modal-card {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            560px,
            100%
        );

    max-height:
        calc(
            100dvh - 40px
        );

    overflow-y:
        auto;

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

    border-radius:
        var(
            --admin-radius-xl
        );

    background:
        var(
            --admin-surface
        );

}


.resource-modal-header {

    padding:
        22px 22px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.resource-modal-icon {

    width:
        52px;

    height:
        52px;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(
            --admin-gold-soft
        );

    color:
        var(
            --admin-gold-dark
        );

    font-size:
        18px;

}


.resource-modal-close {

    width:
        40px;

    height:
        40px;

    border-radius:
        10px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(
            --admin-surface-soft
        );

    color:
        var(
            --admin-text-soft
        );

    cursor:
        pointer;

    transition:
        all
        var(
            --admin-transition
        );

}


.resource-modal-close:hover {

    background:
        var(
            --admin-danger-soft
        );

    color:
        var(
            --admin-danger
        );

}


.resource-modal-body {

    padding:
        22px;

}


.resource-modal-type {

    min-height:
        27px;

    padding:
        0 10px;

    border-radius:
        999px;

    display:
        inline-flex;

    align-items:
        center;

    background:
        var(
            --admin-surface-soft
        );

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

    color:
        var(
            --admin-text-soft
        );

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

}


.resource-modal-body h2 {

    margin-top:
        15px;

    font-size:
        26px;

    line-height:
        1.25;

    letter-spacing:
        -0.04em;

}


.resource-modal-description {

    margin-top:
        12px;

    color:
        var(
            --admin-text-soft
        );

    font-size:
        14px;

    line-height:
        1.75;

}


.resource-modal-actions {

    margin-top:
        25px;

}


.resource-modal-actions
.primary-btn {

    width:
        100%;

}



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

@media (
    max-width:
    1050px
) {

    .desktop-nav {

        display:
            none;

    }


    .mobile-menu-btn {

        display:
            inline-flex;

    }


    .resources-hero
    .resources-container {

        grid-template-columns:
            1fr 0.8fr;

        gap:
            40px;

    }


    .resources-grid {

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

    }


    .resources-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .resources-search {

        width:
            100%;

        max-width:
            none;

    }


    .resource-filter-buttons {

        justify-content:
            flex-start;

    }


    .footer-grid {

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

    }

}



/* ============================================================
   MOBILE NAVIGATION ACTIVE
============================================================ */

@media (
    max-width:
    1050px
) {

    .mobile-nav {

        position:
            fixed;

        top:
            77px;

        right:
            0;

        bottom:
            0;

        z-index:
            999;

        width:
            min(
                340px,
                90%
            );

        padding:
            18px;

        background:
            #ffffff;

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

        overflow-y:
            auto;

        display:
            flex;

        flex-direction:
            column;

        gap:
            4px;

        transform:
            translateX(
                105%
            );

        transition:
            transform
            0.25s ease;

    }


    .mobile-nav.active {

        transform:
            translateX(
                0
            );

    }


    .mobile-nav > a {

        min-height:
            48px;

        padding:
            0 13px;

        border-radius:
            10px;

        display:
            flex;

        align-items:
            center;

        gap:
            11px;

        color:
            var(
                --admin-text-soft
            );

        font-weight:
            650;

    }


    .mobile-nav > a i {

        width:
            20px;

        color:
            var(
                --admin-gold-dark
            );

    }


    .mobile-nav > a:hover,
    .mobile-nav > a.active {

        background:
            var(
                --admin-gold-soft
            );

        color:
            var(
                --admin-text
            );

    }


    .mobile-nav-actions {

        margin-top:
            14px;

        padding-top:
            14px;

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

        display:
            grid;

        gap:
            9px;

    }


    .mobile-login-btn,
    .mobile-register-btn {

        min-height:
            46px;

        border-radius:
            10px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        font-weight:
            700;

    }


    .mobile-login-btn {

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

    }


    .mobile-register-btn {

        background:
            var(
                --admin-surface-dark
            );

        color:
            #ffffff;

    }

}



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

@media (
    max-width:
    768px
) {

    .resources-container,
    .header-container {

        width:
            min(
                100% - 28px,
                1180px
            );

    }


    .header-container {

        min-height:
            68px;

    }


    .site-header {

        min-height:
            68px;

    }


    .mobile-nav {

        top:
            69px;

    }


    .brand-text {

        font-size:
            16px;

    }


    .header-login-btn,
    .header-register-btn {

        display:
            none;

    }


    .resources-hero {

        padding:
            60px 0 48px;

    }


    .resources-hero
    .resources-container {

        grid-template-columns:
            1fr;

        gap:
            36px;

    }


    .resources-hero-content {

        max-width:
            none;

    }


    .resources-hero h1 {

        font-size:
            clamp(
                40px,
                13vw,
                58px
            );

    }


    .resources-hero-content > p {

        font-size:
            15px;

    }


    .resources-hero-actions {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .resources-hero-actions
    .primary-btn,
    .resources-hero-actions
    .secondary-btn {

        width:
            100%;

    }


    .resources-hero-card {

        min-height:
            270px;

        padding:
            26px;

    }


    .resources-overview {

        padding:
            0;

    }


    .resources-overview-grid {

        grid-template-columns:
            1fr;

    }


    .overview-item {

        min-height:
            78px;

        padding:
            15px 4px;

        border-right:
            0;

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

    }


    .overview-item:last-child {

        border-bottom:
            0;

    }


    .resources-catalog {

        padding:
            64px 0 74px;

    }


    .resources-section-header {

        margin-bottom:
            22px;

    }


    .resources-section-header h2 {

        font-size:
            31px;

    }


    .resource-filter-buttons {

        width:
            100%;

        flex-wrap:
            nowrap;

        justify-content:
            flex-start;

        overflow-x:
            auto;

        padding-bottom:
            4px;

        scrollbar-width:
            none;

    }


    .resource-filter-buttons::-webkit-scrollbar {

        display:
            none;

    }


    .resource-filter-btn {

        flex-shrink:
            0;

    }


    .resources-grid {

        grid-template-columns:
            1fr;

    }


    .resource-card {

        min-height:
            270px;

        padding:
            19px;

    }


    .learning-cta-card {

        padding:
            30px 22px;

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            24px;

    }


    .learning-cta-actions {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .learning-cta-actions
    .primary-btn,
    .learning-cta-actions
    .secondary-btn {

        width:
            100%;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .footer-brand {

        max-width:
            none;

    }


    .footer-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}



/* ============================================================
   VERY SMALL DEVICES
============================================================ */

@media (
    max-width:
    420px
) {

    .resources-container,
    .header-container {

        width:
            calc(
                100% - 22px
            );

    }


    .brand-mark {

        width:
            35px;

        height:
            35px;

    }


    .brand-text {

        font-size:
            15px;

    }


    .resources-hero h1 {

        font-size:
            39px;

    }


    .resources-hero-card {

        min-height:
            245px;

    }


    .resource-modal {

        padding:
            10px;

    }


    .resource-modal-card {

        max-height:
            calc(
                100dvh - 20px
            );

        border-radius:
            18px;

    }


    .resource-modal-header,
    .resource-modal-body {

        padding-left:
            17px;

        padding-right:
            17px;

    }

}


/* ============================================================
   FOOTER
============================================================ */

.site-footer {

    margin-top:
        0;

    padding:
        68px 0 24px;

    background:
        #090909;

    color:
        #ffffff;

    border-top:
        1px solid
        rgba(
            212,
            173,
            44,
            0.25
        );

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        minmax(
            300px,
            1.5fr
        )
        repeat(
            3,
            minmax(
                150px,
                1fr
            )
        );

    gap:
        58px;

    align-items:
        start;

}



/* ============================================================
   FOOTER BRAND
============================================================ */

.footer-brand {

    max-width:
        430px;

}


.footer-logo {

    display:
        inline-block;

    color:
        #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        27px;

    font-weight:
        800;

    letter-spacing:
        0.06em;

}


.footer-logo span {

    color:
        var(
            --admin-gold
        );

}


.footer-brand-line {

    width:
        45px;

    height:
        2px;

    margin:
        8px 0 27px;

    background:
        var(
            --admin-gold
        );

}


.footer-brand p {

    margin-bottom:
        4px;

    color:
        #b9bcc3;

    font-size:
        13px;

    line-height:
        1.9;

}



/* ============================================================
   FOOTER LINKS
============================================================ */

.footer-links {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


.footer-links h4,
.footer-social h4 {

    margin-bottom:
        18px;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

}


.footer-links > a,
#homepagePolicyLinks a {

    display:
        block;

    margin-bottom:
        12px;

    color:
        #b9bcc3;

    font-size:
        13px;

    line-height:
        1.5;

    transition:
        color
        var(
            --admin-transition
        ),
        transform
        var(
            --admin-transition
        );

}


.footer-links > a:hover,
#homepagePolicyLinks a:hover {

    color:
        var(
            --admin-gold
        );

    transform:
        translateX(
            3px
        );

}



/* ============================================================
   BACKEND POLICY LINKS
============================================================ */

#homepagePolicyLinks {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


#homepagePolicyLinks a {

    width:
        fit-content;

}



/* ============================================================
   SOCIAL LINKS
============================================================ */

.footer-social {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


#footerSocialLinks {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        12px;

}


#footerSocialLinks a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    color:
        #b9bcc3;

    font-size:
        13px;

    transition:
        color
        var(
            --admin-transition
        ),
        transform
        var(
            --admin-transition
        );

}


#footerSocialLinks a:hover {

    color:
        #ffffff;

    transform:
        translateX(
            3px
        );

}


#footerSocialLinks a i {

    width:
        17px;

    color:
        var(
            --admin-gold
        );

    text-align:
        center;

}



/* ============================================================
   FOOTER BOTTOM
============================================================ */

.footer-bottom {

    margin-top:
        58px;

    padding-top:
        22px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.footer-bottom p {

    margin:
        0;

    color:
        #737780;

    font-size:
        11px;

    text-align:
        center;

    letter-spacing:
        0.01em;

}



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

@media (
    max-width:
    950px
) {

    .footer-grid {

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

        gap:
            44px;

    }

}



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

@media (
    max-width:
    620px
) {

    .site-footer {

        padding:
            52px 0 22px;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .footer-brand {

        max-width:
            none;

    }


    .footer-logo {

        font-size:
            24px;

    }


    .footer-brand-line {

        margin-bottom:
            22px;

    }


    .footer-bottom {

        margin-top:
            42px;

        justify-content:
            flex-start;

    }


    .footer-bottom p {

        text-align:
            left;

    }

}

/* ============================================================
   RESOURCES MOBILE MENU 
============================================================ */

@media (max-width: 1050px) {

    .site-header {
        overflow: visible !important;
    }


    .mobile-nav {
        position: fixed !important;
        top: 69px !important;
        right: 0 !important;
        bottom: 0 !important;
        width: min(340px, 92%) !important;
        height: calc(100dvh - 69px) !important;
        padding: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        background: #ffffff !important;
        border-left:
            1px solid
            var(--admin-border) !important;

        box-shadow:
            -12px 0 35px
            rgba(0, 0, 0, 0.08);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 9999 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform:
            translateX(105%) !important;
        pointer-events: none !important;

        transition:
            transform 0.25s ease,
            opacity 0.2s ease,
            visibility 0.2s ease !important;
    }


    /* ========================================================
       OPEN MENU
    ======================================================== */

    .mobile-nav.active {
        visibility: visible !important;
        opacity: 1 !important;
        transform:
            translateX(0) !important;
        pointer-events: auto !important;
    }


    /* ========================================================
       NAVIGATION LINKS
    ======================================================== */

    .mobile-nav > a {
        width: 100% !important;
        min-height: 49px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        border-radius: 10px !important;

        color:
            var(--admin-text-soft) !important;
        background: transparent !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: left !important;
    }


    .mobile-nav > a i {
        width: 20px !important;
        color:
            var(--admin-gold-dark) !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }


    .mobile-nav > a:hover,
    .mobile-nav > a.active {
        background:
            var(--admin-gold-soft) !important;

        color:
            var(--admin-text) !important;
    }


    /* ========================================================
       LOGIN / REGISTER
    ======================================================== */

    .mobile-nav-actions {
        width: 100% !important;
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top:
            1px solid
            var(--admin-border) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
    }


    .mobile-login-btn,
    .mobile-register-btn {
        width: 100% !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        font-weight: 700 !important;
    }


    .mobile-login-btn {
        background: #ffffff !important;

        color:
            var(--admin-text) !important;

        border:
            1px solid
            var(--admin-border-dark) !important;
    }


    .mobile-register-btn {
        background:
            var(--admin-surface-dark) !important;

        color: #ffffff !important;
    }

}