/* =========================================================
   SINGLE CASE STUDY
   Jizai ERP
========================================================= */

.case-study-single-page{
    background:#fff;
    overflow:visible;
}


/* =========================================================
   FEATURED IMAGE HERO
========================================================= */

.case-study-single-hero{
    position:relative;

    min-height:620px;

    display:flex;
    align-items:stretch;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 78% 32%,
            rgba(107,69,255,.28),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            #04112f 0%,
            #071b55 58%,
            #28106a 100%
        );

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}


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

.case-study-single-hero-overlay{
    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.84) 0%,
            rgba(2,11,35,.73) 38%,
            rgba(4,18,60,.48) 67%,
            rgba(4,18,60,.38) 100%
        ),
        linear-gradient(
            0deg,
            rgba(2,9,30,.70) 0%,
            rgba(2,9,30,.10) 42%,
            rgba(2,9,30,.08) 100%
        );

    pointer-events:none;
}


.case-study-single-hero-overlay::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 78% 48%,
            rgba(77,120,255,.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(155,0,245,.13),
            transparent 28%
        );

    pointer-events:none;
}


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

.case-study-single-hero-container{
    position:relative;

    z-index:2;

    min-height:620px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-top:82px;
    padding-bottom:0;
}


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

.case-study-single-hero-content{
    width:min(820px,100%);

    padding:70px 0 125px;
}


.case-study-single-hero-content .jizai-eyebrow{
    margin-bottom:20px;

    color:#8facff;
}


.case-study-single-hero-content h1{
    margin:0;

    max-width:850px;

    color:#fff;

    font-size:clamp(44px,2.3vw,72px);

    line-height:1.06;

    letter-spacing:-2.2px;

    font-weight:600;
}


.case-study-single-hero-content p{
    max-width:720px;

    margin:25px 0 0;

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

    font-size:14px;

    line-height:1.8;
}


/* =========================================================
   BREADCRUMBS
========================================================= */

.case-study-single-breadcrumbs{
    width:100%;

    min-height:76px;

    margin-top:auto;

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:10px;

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

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

    font-size:12px;
}


.case-study-single-breadcrumbs a{
    color:rgba(255,255,255,.78);

    text-decoration:none;

    transition:color .25s ease;
}


.case-study-single-breadcrumbs a:hover{
    color:#fff;
}


.case-study-breadcrumb-separator{
    color:rgba(255,255,255,.35);
}


.case-study-breadcrumb-current{
    max-width:520px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    color:#fff;
}


/* =========================================================
   BODY
========================================================= */

.case-study-single-body{
    position:relative;

    padding:40px 0 20px;

    background:#fff;

    overflow:visible;
}


.case-study-single-body > .container{
    position:relative;

    overflow:visible;
}


/* =========================================================
   ARTICLE + SIDEBAR LAYOUT
========================================================= */

.case-study-single-layout{
    position:relative;

    display:grid;

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

    gap:35px;

    align-items:start;

    overflow:visible;
}


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

.case-study-single-content{
    min-width:0;

    max-width:850px;

    color:#526581;
    background: var(--jizai-light);
    padding: 40px;
    border-radius: 20px;
}


.case-study-single-content > *:first-child{
    margin-top:0;
}


.case-study-single-content h2,
.case-study-single-content h3,
.case-study-single-content h4{
    color:#071b63;

    font-weight:600;

    letter-spacing:-.6px;
}


.case-study-single-content h2{
    margin:48px 0 18px;

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

    line-height:1.2;
}


.case-study-single-content h3{
    margin:38px 0 14px;

    font-size:26px;

    line-height:1.3;
}


.case-study-single-content h4{
    margin:30px 0 12px;

    font-size:20px;
}


.case-study-single-content p,
.case-study-single-content li{
    color:#5f718d;

    font-size:14px;

    line-height:1.9;
}


.case-study-single-content p{
    margin:0 0 24px;
}


.case-study-single-content ul,
.case-study-single-content ol{
    margin:0 0 28px;

    padding-left:22px;
}


.case-study-single-content li + li{
    margin-top:8px;
}


.case-study-single-content a{
    color:#4c78ff;

    text-decoration:underline;

    text-underline-offset:3px;
}


.case-study-single-content img{
    display:block;

    width:auto;

    max-width:100%;

    height:auto;

    margin:34px 0;

    border-radius:18px;
}


.case-study-single-content blockquote{
    margin:38px 0;

    padding:24px 28px;

    border-left:3px solid #4c78ff;

    border-radius:0 16px 16px 0;

    background:#f5f8fc;

    color:#30456d;
}


.case-study-single-content blockquote p:last-child{
    margin-bottom:0;
}


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

.case-study-single-sidebar{
    position:relative;

    align-self:stretch;

    min-width:0;

    overflow:visible;
}


/* =========================================================
   STICKY CATEGORY PANEL
========================================================= */

.case-study-category-panel{
    position:sticky;

    top:108px;

    width:100%;

    padding:28px;

    border:1px solid #e1e7f1;

    border-radius:18px;

    background:#f8faff;

    box-shadow:
        0 16px 38px
        rgba(18,39,89,.055);

    box-sizing:border-box;
}


.case-study-sidebar-eyebrow{
    margin-bottom:8px;

    color:#4c78ff;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.1px;
}


.case-study-category-panel h3{
    margin:0 0 22px;

    color:#071b63;

    font-size:25px;

    line-height:1.2;

    font-weight:600;
}


/* =========================================================
   CATEGORY LIST
========================================================= */

.case-study-category-list{
    display:flex;

    flex-direction:column;

    gap:8px;
}


.case-study-category-link{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    min-height:46px;

    padding:11px 13px;

    border:1px solid transparent;

    border-radius:11px;

    background:#fff;

    color:#526581;

    font-size:12px;

    font-weight:600;

    text-decoration:none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        color .25s ease,
        background .25s ease;
}


.case-study-category-link:hover{
    transform:translateX(3px);

    border-color:#cfd9f7;

    color:#416cff;
}


.case-study-category-link.active{
    border-color:#071b63;

    background:#071b63;

    color:#fff;
}


.case-study-category-arrow{
    flex:0 0 auto;

    transition:transform .25s ease;
}


.case-study-category-link:hover .case-study-category-arrow{
    transform:translateX(3px);
}


.case-study-no-categories{
    margin:0;

    color:#6b7b98;

    font-size:12px;
}


/* =========================================================
   CTA SECTION
========================================================= */

.case-study-single-cta{
    padding-top:35px;

    padding-bottom:35px;
}


/*
 IMPORTANT:
 Existing .blog-cta-box may contain decorative
 ::before / ::after elements.

 They must NEVER block clicks.
*/

.case-study-cta-box{
    position:relative;

    padding:55px 60px;
}


.case-study-cta-box::before,
.case-study-cta-box::after,
.blog-cta-box::before,
.blog-cta-box::after{
    pointer-events:none !important;
}


/* =========================================================
   CTA 70 / 30 LAYOUT
========================================================= */

.case-study-cta-content{
    position:relative;

    z-index:10;

    width:100%;

    display:grid;

    /*
     7fr + 3fr is better than 70% + 30%
     because gap is calculated separately.
    */

    grid-template-columns:
        minmax(0,7fr)
        minmax(220px,3fr);

    align-items:center;

    gap:40px;
}


/* CTA LEFT */

.case-study-cta-left{
    position:relative;

    z-index:10;

    min-width:0;
}

.case-study-cta-left {
    text-align: left !important;
}

.case-study-cta-left h2{
    margin:0;

    max-width:600px;

    color:#fff;

    font-size:clamp(30px,2.5vw,46px);

    line-height:1.15;

    letter-spacing:-1.2px;

    font-weight:600;
}


/* CTA RIGHT */

.case-study-cta-right{
    position:relative;

    z-index:20;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    pointer-events:auto;
}


/* CONTACT BUTTON */

.case-study-cta-right .jizai-btn{
    position:relative;

    z-index:30;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    cursor:pointer;

    pointer-events:auto !important;

    white-space:nowrap;
}


/*
 If text/span receives mouse,
 click should still belong to anchor.
*/

.case-study-cta-right .jizai-btn span{
    pointer-events:none;
}


/* =========================================================
   RELATED CASE STUDIES
========================================================= */

.case-study-related-section{
    padding:40px 0 40px;

    background:#f5f8fc;
}


.case-study-related-head{
    max-width:760px;

    margin-bottom:38px;
}


.case-study-related-head h2{
    margin:10px 0 0;

    color:#071b63;

    font-size:clamp(30px,3vw,46px);

    line-height:1.16;

    letter-spacing:-1.2px;

    font-weight:600;
}


/* =========================================================
   4 RELATED CARDS
========================================================= */

.case-study-related-grid{
    display:grid;

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

    gap:24px;
}


/* EXCERPT MAX 3 LINES */

.case-study-related-grid .blog-excerpt{
    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;

    line-clamp:3;

    overflow:hidden;
}


/* PLACEHOLDER */

.case-study-related-placeholder{
    width:100%;

    height:100%;

    min-height:220px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(151,40,255,.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #edf2ff,
            #e9edff
        );
}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media(max-width:1200px){

    .case-study-single-layout{
        grid-template-columns:
            minmax(0,1fr)
            300px;

        gap:60px;
    }


    .case-study-related-grid{
        gap:20px;
    }


    .case-study-cta-content{
        grid-template-columns:
            minmax(0,7fr)
            minmax(210px,3fr);

        gap:30px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media(max-width:991px){
    
    .case-study-cta-left {
    text-align: center !important;
}

    /* HERO */

    .case-study-single-hero,
    .case-study-single-hero-container{
        min-height:560px;
    }


    .case-study-single-hero-content{
        padding:60px 0 105px;
    }


    /* ARTICLE */

    .case-study-single-layout{
        grid-template-columns:1fr;

        gap:45px;
    }


    .case-study-single-content{
        max-width:none;
                border-radius: 0px !important;

    }
  

    /* SIDEBAR */

    .case-study-single-sidebar{
        align-self:auto;
        width: 93%;
        margin: auto;
    }


    .case-study-category-panel{
        position:relative;

        top:auto;
    }


    .case-study-category-list{
        display:grid;

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


    /* CTA */

    .case-study-cta-box{
        padding:45px 42px;
    }


    .case-study-cta-content{
        grid-template-columns:
            minmax(0,2fr)
            minmax(190px,1fr);

        gap:30px;
    }


    /* RELATED */

    .case-study-related-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:24px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media(max-width:767px){

    /* HERO */

    .case-study-single-hero,
    .case-study-single-hero-container{
        min-height:520px;
    }

   
    
.case-study-single-body > .container {
    width: 100% !important;
    border-radius: 0px !important;
}

    .case-study-single-hero-container{
        padding-top:40px;
    }


    .case-study-single-hero-content{
        padding:55px 0 85px;
    }


    .case-study-single-hero-content h1{
        font-size:38px;

        letter-spacing:-1.2px;
    }


    .case-study-single-hero-content p{
        font-size:13px;

        line-height:1.75;
    }


    /* BREADCRUMBS */

    .case-study-single-breadcrumbs{
        min-height:68px;

        gap:7px;

        font-size:10px;
    }


    .case-study-breadcrumb-current{
        max-width:175px;
    }


    /* BODY */

    .case-study-single-body{
        padding:0px;
    }


    /* CONTENT */

    .case-study-single-content p,
    .case-study-single-content li{
        font-size:14px;

        line-height:1.85;
    }


    .case-study-single-content h2{
        margin-top:38px;
    }


    .case-study-single-content h3{
        font-size:23px;
    }


    /* CATEGORIES */

    .case-study-category-panel{
        padding:22px;
    }


    .case-study-category-panel h3{
        font-size:22px;
    }


    .case-study-category-list{
        grid-template-columns:1fr;
    }


    /* CTA */

    .case-study-single-cta{
        padding-top:20px;

        padding-bottom:60px;
    }


    .case-study-cta-box{
        padding:38px 28px;
    }


    .case-study-cta-content{
        grid-template-columns:1fr;

        gap:26px;
    }


    .case-study-cta-right{
        justify-content:flex-start;
    }


    .case-study-cta-left h2{
        font-size:30px;
    }


    /* RELATED */

    .case-study-related-section{
        padding:60px 0 70px;
    }


    .case-study-related-grid{
        grid-template-columns:1fr;

        gap:22px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .case-study-single-hero-content h1{
        font-size:34px;
    }


    .case-study-single-hero-content{
        padding-bottom:70px;
    }


    .case-study-category-panel{
        padding:18px;
    }


    .case-study-cta-box{
        padding:32px 22px;
    }


    .case-study-cta-left h2{
        font-size:27px;
    }

}