/* =====================================================
   PSIX INVEST — CATEGORY PAGE
   STABLE VERSION
===================================================== */

.psix-category-page{
    min-height:600px;
    background:#f7f9fc;
}

.psix-category-container{
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:0 28px;
}


/* =====================================================
   HERO — ОТДЕЛЬНЫЙ ШИРОКИЙ БАННЕР 2048×682
===================================================== */

.psix-category-hero{
    padding:14px 10px 0;
    background:#ffffff;
}

.psix-category-hero-banner{
    position:relative;

    width:100%;
    max-width:none;

    aspect-ratio:2048 / 682;
    height:auto;

    margin:0 auto;

    overflow:hidden;

    border-radius:16px;

    background:#101828;

    box-shadow:
        0 18px 50px rgba(15,23,42,.12);
}

/*
 * Внутри категории используется отдельный файл 2048×682.
 * Он имеет ту же пропорцию, что и контейнер:
 * герой НЕ растягивается, ничего НЕ обрезается.
 */
.psix-category-hero-image{
    position:absolute;
    inset:0;
    z-index:1;

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;
}

.psix-category-hero-content{
    position:absolute;
    z-index:3;

    left:24px;
    bottom:24px;

    width:min(540px, calc(100% - 48px));

    padding:20px 22px 21px;

    border:1px solid rgba(255,255,255,.60);
    border-radius:18px;

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

    box-shadow:
        0 12px 34px rgba(15,23,42,.10);

    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.psix-category-breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:8px;

    margin-bottom:10px;

    color:#000000;

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

.psix-category-breadcrumbs a{
    color:#000000;
}

.psix-category-breadcrumbs a:hover{
    color:#2867ed;
}

.psix-category-kicker{
    margin-bottom:8px;

    color:#000000;

    font-size:13px;
    font-weight:900;

    letter-spacing:.08em;
}

.psix-category-about-kicker,
.psix-category-section-kicker,
.psix-category-sidebar-kicker{
    margin-bottom:8px;

    color:#2867ed;

    font-size:10px;
    font-weight:900;

    letter-spacing:.10em;
}

.psix-category-hero h1{
    margin:0 0 8px;

    color:#101828;

    font-size:37px;
    line-height:1.04;

    letter-spacing:-1px;

    font-weight:900;
}

.psix-category-description{
    margin:0;

    color:#000000;

    font-size:13px;
    font-weight:600;
    line-height:1.5;
}

.psix-category-stats{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;

    width:100%;

    gap:14px;

    margin-top:16px;
}

.psix-category-stat{
    width:145px;
    min-width:145px;

    padding:10px 14px;

    border:1px solid rgba(208,213,221,.88);
    border-radius:5px;

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

    text-align:center;
}

.psix-category-stat strong{
    display:block;

    margin-bottom:4px;

    color:#000000;

    font-size:14px;
    font-weight:900;
    line-height:1.2;
}

.psix-category-stat span{
    color:#000000;

    font-size:14px;
    font-weight:600;
    line-height:1.2;
}

.psix-category-telegram{
    position:absolute;
    z-index:5;

    right:24px;
    bottom:24px;

    min-height:46px;

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

    padding:0 22px;

    border-radius:999px;

    background:#2867ed;

    color:#ffffff;

    font-size:13px;
    font-weight:900;

    box-shadow:
        0 10px 28px rgba(40,103,237,.28);
}


/* =====================================================
   ABOUT
===================================================== */

.psix-category-about{
    padding:34px 0 0;
}

.psix-category-about-card{
    display:grid;

    grid-template-columns:
        minmax(260px,.8fr)
        minmax(0,1.7fr);

    gap:60px;

    align-items:center;

    padding:32px 38px;

    border:1px solid #e7ebf2;
    border-radius:24px;

    background:#ffffff;

    box-shadow:
        0 10px 32px rgba(15,23,42,.05);
}

.psix-category-about-card h2{
    margin:0;

    color:#101828;

    font-size:29px;
    line-height:1.2;
}

.psix-category-about-card p{
    margin:0;

    color:#667085;

    font-size:16px;
    line-height:1.7;
}


/* =====================================================
   SUBCATEGORIES
===================================================== */

.psix-investment-subcategories{
    padding:42px 0 6px;
}

.psix-investment-subcategories-head{
    max-width:760px;
    margin-bottom:26px;
}

.psix-investment-subcategories-head h2{
    margin:0 0 10px;

    color:#101828;

    font-size:38px;
    line-height:1.08;
}

.psix-investment-subcategories-head p{
    margin:0;

    color:#667085;

    font-size:15px;
    line-height:1.65;
}

.psix-investment-subcategories-grid{
    display:grid;

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

    gap:22px;
}

.psix-investment-subcategory-card{
    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:1px solid #dfe6f1;
    border-radius:24px;

    background:#ffffff;

    box-shadow:
        0 12px 34px rgba(15,23,42,.07);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.psix-investment-subcategory-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 20px 46px rgba(15,23,42,.11);
}


/*
 * 7 карточек:
 * 1–3 — первая строка,
 * 4–6 — вторая строка,
 * 7 — по центру третьей строки.
 */
.psix-investment-subcategory-card:nth-child(7){
    grid-column:2;
}

.psix-investment-subcategory-banner{
    position:relative;

    width:100%;
    height:auto;
    aspect-ratio:3 / 2;

    overflow:hidden;

    background:#e8eef8;
}

.psix-investment-subcategory-banner img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;
}

.psix-investment-subcategory-number{
    position:absolute;

    left:18px;
    bottom:18px;

    padding:7px 10px;

    border-radius:9px;

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

    color:#2867ed;

    font-size:12px;
    font-weight:900;

    box-shadow:
        0 6px 18px rgba(15,23,42,.14);
}

.psix-investment-subcategory-body{
    flex:1;

    display:flex;
    flex-direction:column;

    padding:23px 24px 22px;
}

.psix-investment-subcategory-eyebrow{
    margin-bottom:7px;

    color:#2867ed;

    font-size:10px;
    font-weight:900;

    letter-spacing:.09em;
}

.psix-investment-subcategory-body h3{
    margin:0 0 11px;

    color:#101828;

    font-size:29px;
    line-height:1.08;
}

.psix-investment-subcategory-body p{
    margin:0;

    color:#667085;

    font-size:14px;
    line-height:1.65;
}

.psix-investment-subcategory-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    margin-top:auto;
    padding-top:20px;

    color:#7c879d;

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

.psix-investment-subcategory-footer strong{
    color:#2867ed;

    font-size:13px;
}


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

.psix-category-content{
    padding:52px 0 90px;
}

.psix-category-section-heading{
    margin-bottom:27px;
}

.psix-category-section-heading h2{
    margin:0;

    color:#101828;

    font-size:38px;
    line-height:1.1;
}

.psix-category-layout{
    display:grid;

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

    gap:32px;

    align-items:start;
}

.psix-category-main{
    min-width:0;
}


/* =====================================================
   POSTS
===================================================== */

.psix-category-posts-grid{
    display:grid;

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

    gap:28px;
}

.psix-category-card{
    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:1px solid #e7ebf2;
    border-radius:24px;

    background:#ffffff;

    box-shadow:
        0 10px 32px rgba(15,23,42,.055);
}

.psix-category-card.is-featured{
    grid-column:span 2;
}

.psix-category-card-image{
    display:block;

    width:100%;

    overflow:hidden;

    background:#e8eef8;
}

.psix-category-card-image img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;
}

.psix-category-card-placeholder{
    min-height:280px;

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

    color:#ffffff;

    font-size:28px;
    font-weight:900;

    background:
        linear-gradient(
            135deg,
            #2867ed,
            #7555d9
        );
}

.psix-category-card-body{
    padding:27px;
}

.psix-category-card-meta{
    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:13px;

    color:#98a2b3;

    font-size:12px;
    font-weight:600;
}

.psix-category-card h3{
    margin:0 0 14px;

    color:#101828;

    font-size:25px;
    line-height:1.24;
}

.psix-category-card.is-featured h3{
    font-size:34px;
}

.psix-category-card h3 a:hover{
    color:#2867ed;
}

.psix-category-card p{
    margin:0 0 21px;

    color:#667085;

    font-size:15px;
    line-height:1.65;
}

.psix-category-card-button{
    display:inline-flex;

    color:#2867ed;

    font-size:14px;
    font-weight:900;
}


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

.psix-category-sidebar{
    position:sticky;

    top:110px;

    display:flex;
    flex-direction:column;

    gap:22px;
}

.psix-category-sidebar-card{
    padding:25px;

    border:1px solid #e7ebf2;
    border-radius:23px;

    background:#ffffff;

    box-shadow:
        0 10px 30px rgba(15,23,42,.045);
}

.psix-category-sidebar-card h3{
    margin:0 0 17px;

    color:#101828;

    font-size:23px;
    line-height:1.25;
}

.psix-category-sidebar-nav{
    display:flex;
    flex-direction:column;
}

.psix-category-sidebar-nav a{
    padding:12px 0;

    border-bottom:1px solid #edf0f5;

    color:#344054;

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

.psix-category-sidebar-nav a:last-child{
    border-bottom:0;
}

.psix-category-sidebar-nav a:hover{
    color:#2867ed;
}

.psix-category-sidebar-telegram{
    background:
        linear-gradient(
            145deg,
            #101828,
            #18243a
        );
}

.psix-category-sidebar-telegram
.psix-category-sidebar-kicker{
    color:#70a6ff;
}

.psix-category-sidebar-telegram h3{
    color:#ffffff;
}

.psix-category-sidebar-telegram p{
    margin:0 0 20px;

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

    font-size:14px;
    line-height:1.6;
}

.psix-category-sidebar-telegram a{
    min-height:46px;

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

    border-radius:999px;

    background:#2867ed;

    color:#ffffff;

    font-size:14px;
    font-weight:900;
}


/* =====================================================
   PAGINATION + EMPTY
===================================================== */

.psix-category-pagination{
    margin-top:38px;
}

.psix-category-pagination .nav-links{
    display:flex;
    flex-wrap:wrap;

    gap:8px;
}

.psix-category-pagination .page-numbers{
    min-width:43px;
    height:43px;

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

    padding:0 13px;

    border:1px solid #e3e8f1;
    border-radius:12px;

    background:#ffffff;

    color:#344054;

    font-size:13px;
    font-weight:800;
}

.psix-category-pagination .page-numbers.current,
.psix-category-pagination .page-numbers:hover{
    border-color:#2867ed;

    background:#2867ed;

    color:#ffffff;
}

.psix-category-empty{
    padding:70px 30px;

    border:1px solid #e7ebf2;
    border-radius:24px;

    background:#ffffff;

    text-align:center;
}

.psix-category-empty h1,
.psix-category-empty h2{
    margin:0 0 12px;

    color:#101828;
}

.psix-category-empty p{
    margin:0;

    color:#667085;
}


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

@media(max-width:1100px){

    .psix-investment-subcategories-grid{
        grid-template-columns:1fr;
    }

    .psix-investment-subcategory-card:nth-child(7){
        grid-column:auto;
    }

    .psix-category-layout{
        grid-template-columns:1fr;
    }

    .psix-category-sidebar{
        position:static;

        display:grid;

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

    .psix-category-hero-banner{
        aspect-ratio:2048 / 682;
        height:auto;
    }

    .psix-category-hero-content{
        left:18px;
        bottom:18px;

        width:min(500px, calc(100% - 36px));

        padding:17px 19px 18px;
    }

    .psix-category-hero h1{
        font-size:32px;
    }

    .psix-category-telegram{
        right:18px;
        bottom:18px;
    }

}


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

@media(max-width:760px){

    .psix-category-container{
        padding:0 18px;
    }

    .psix-category-hero{
        padding:8px 6px 0;
    }

    .psix-category-hero-banner{
        aspect-ratio:2048 / 682;
        height:auto;

        border-radius:10px;
    }

    .psix-category-hero-image{
        object-fit:cover;
        object-position:center center;
    }

    .psix-category-hero-content{
        left:10px;
        bottom:10px;

        width:min(76%, 360px);

        padding:11px 12px;

        border-radius:12px;

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

        backdrop-filter:blur(5px);
        -webkit-backdrop-filter:blur(5px);
    }

    .psix-category-breadcrumbs{
        display:none;
    }

    .psix-category-kicker{
        margin-bottom:5px;

        font-size:8px;
    }

    .psix-category-hero h1{
        margin-bottom:4px;

        font-size:20px;
    }

    .psix-category-description,
    .psix-category-stats,
    .psix-category-telegram{
        display:none;
    }

    .psix-category-about{
        padding-top:28px;
    }

    .psix-category-about-card{
        grid-template-columns:1fr;

        gap:18px;

        padding:25px;
    }

    .psix-investment-subcategories{
        padding-top:32px;
    }

    .psix-investment-subcategories-head h2,
    .psix-category-section-heading h2{
        font-size:32px;
    }

    .psix-investment-subcategory-banner{
        height:auto;
        aspect-ratio:3 / 2;
    }

    .psix-category-posts-grid{
        grid-template-columns:1fr;
    }

    .psix-category-card.is-featured{
        grid-column:span 1;
    }

    .psix-category-card.is-featured h3,
    .psix-category-card h3{
        font-size:24px;
    }

    .psix-category-sidebar{
        grid-template-columns:1fr;
    }

}