/* =========================================================
   JATAV HISTORY
   SC CASTE LIST DESIGN SYSTEM
   Pillar + State + UT Pages
========================================================= */


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

.sc-region-section,
.sc-state-page,
.sc-caste-section,
.sc-info-section {
    margin: 35px 0;
}


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

.sc-search-box {
    position: relative;
    max-width: 720px;
    margin: 25px auto 35px;
}

.sc-search-box input {
    width: 100%;
    box-sizing: border-box;
    padding: 17px 22px 17px 52px;
    border: 1px solid #dfe5ee;
    border-radius: 14px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    color: #222;
    outline: none;
    box-shadow: 0 6px 22px rgba(0,0,0,.07);
    transition: .25s ease;
}

.sc-search-box::before {
    content: "⌕";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    color: #555;
    z-index: 2;
}

.sc-search-box input:focus {
    border-color: #1d4ed8;
    box-shadow: 0 8px 28px rgba(29,78,216,.14);
}


/* =========================================================
   STATE GRID
========================================================= */

.sc-state-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 25px;
}


/* =========================================================
   STATE CARD
========================================================= */

.sc-state-card {
    position: relative;
    display: block;
    padding: 25px 24px;
    min-height: 170px;

    background: linear-gradient(
        145deg,
        #ffffff,
        #f8fbff
    );

    border: 1px solid #e4e9f1;
    border-radius: 17px;

    text-decoration: none !important;
    color: #172033 !important;

    box-shadow: 0 7px 25px rgba(16,24,40,.07);

    overflow: hidden;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


.sc-state-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;

    background: linear-gradient(
        180deg,
        #2563eb,
        #4f46e5
    );

    transition: width .25s ease;
}


.sc-state-card:hover {
    transform: translateY(-7px);
    border-color: #bfd0f5;

    box-shadow:
        0 15px 35px rgba(16,24,40,.13);
}


.sc-state-card:hover::before {
    width: 8px;
}


/* =========================================================
   STATE NUMBER
========================================================= */

.state-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 44px;
    height: 28px;

    padding: 0 9px;

    border-radius: 30px;

    background: #eef4ff;
    color: #2456c7;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}


/* =========================================================
   STATE CARD HEADING
========================================================= */

.sc-state-card h3 {
    margin: 15px 0 7px;

    font-size: 21px;
    line-height: 1.3;

    color: #172033;
}


.sc-state-card p {
    margin: 0;

    color: #667085;

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


/* =========================================================
   CARD LINK
========================================================= */

.sc-card-link {
    display: inline-block;

    margin-top: 18px;

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

    color: #1d4ed8;

    transition: .2s ease;
}


.sc-state-card:hover .sc-card-link {
    transform: translateX(5px);
}


/* =========================================================
   REGION SECTION
========================================================= */

.sc-region-section {
    padding: 28px 0;
}


.sc-region-section > h2 {
    position: relative;

    margin-bottom: 10px;
    padding-bottom: 12px;

    color: #172033;
}


.sc-region-section > h2::after {
    content: "";

    display: block;

    width: 65px;
    height: 4px;

    margin-top: 10px;

    border-radius: 20px;

    background: #2563eb;
}


/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.article-content .highlight,
.highlight {
    margin: 28px 0;
    padding: 20px 22px;

    border-left: 5px solid #2563eb;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #eff6ff,
        #f8fbff
    );

    color: #24324a;

    line-height: 1.75;

    box-shadow: 0 7px 22px rgba(37,99,235,.07);
}


/* =========================================================
   SOURCE NOTE
========================================================= */

.source-note {
    margin: 35px 0;

    padding: 25px;

    border: 1px solid #e3e8f0;

    border-radius: 15px;

    background: #f9fafc;
}


.source-note h2 {
    margin-top: 0;
}


/* =========================================================
   RELATED BOX
========================================================= */

.related-box {
    margin: 30px 0;

    padding: 24px;

    border: 1px solid #e4e9f1;

    border-radius: 16px;

    background: #fff;

    box-shadow: 0 7px 25px rgba(16,24,40,.06);
}


.related-box p {
    margin: 13px 0;
}


.related-box a {
    font-weight: 600;
}


/* =========================================================
   TABLE
========================================================= */

.table-responsive {
    width: 100%;

    margin: 25px 0;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    border-radius: 14px;

    box-shadow: 0 7px 25px rgba(16,24,40,.07);
}


.content-table {
    width: 100%;

    min-width: 620px;

    border-collapse: collapse;

    background: #fff;

    overflow: hidden;
}


.content-table th {
    padding: 15px 16px;

    text-align: left;

    background: #172554;

    color: #fff;

    font-size: 14px;

    white-space: nowrap;
}


.content-table td {
    padding: 14px 16px;

    border-bottom: 1px solid #e8edf3;

    color: #344054;

    font-size: 14px;

    line-height: 1.55;
}


.content-table tr:nth-child(even) td {
    background: #f8fafc;
}


.content-table tr:hover td {
    background: #eef4ff;
}


.content-table a {
    font-weight: 700;
    color: #1d4ed8;
}


/* =========================================================
   CASTE LIST TABLE
========================================================= */

.sc-caste-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 650px;

    background: #fff;
}


.sc-caste-table thead th {
    padding: 15px;

    background: #172554;

    color: #fff;

    text-align: left;

    font-size: 14px;
}


.sc-caste-table tbody td {
    padding: 13px 15px;

    border-bottom: 1px solid #e7ebf0;

    font-size: 14px;

    color: #344054;
}


.sc-caste-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}


.sc-caste-table tbody tr:hover td {
    background: #eef4ff;
}


/* =========================================================
   STATE PAGE HERO
========================================================= */

.sc-state-hero {
    position: relative;

    margin: 25px 0 35px;

    padding: 35px 30px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #eef2ff
        );

    border: 1px solid #dbe5f5;

    overflow: hidden;
}


.sc-state-hero::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    background: rgba(37,99,235,.08);
}


.sc-state-hero h1 {
    position: relative;
    z-index: 1;

    margin: 0 0 12px;

    color: #172554;
}


.sc-state-hero p {
    position: relative;
    z-index: 1;

    max-width: 850px;

    margin: 0;

    color: #475467;

    line-height: 1.75;
}


/* =========================================================
   QUICK FACTS
========================================================= */

.sc-quick-facts {
    display: grid;

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

    gap: 15px;

    margin: 25px 0 35px;
}


.sc-fact-card {
    padding: 18px;

    border: 1px solid #e4e9f1;

    border-radius: 14px;

    background: #fff;

    box-shadow: 0 5px 20px rgba(16,24,40,.05);
}


.sc-fact-card span {
    display: block;

    margin-bottom: 7px;

    color: #667085;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.sc-fact-card strong {
    color: #172033;

    font-size: 16px;
}


/* =========================================================
   STATE NAVIGATION
========================================================= */

.sc-page-navigation {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin: 35px 0;
}


.sc-page-navigation a {
    flex: 1;

    padding: 15px 18px;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    background: #fff;

    text-decoration: none;

    color: #1d4ed8;

    font-weight: 700;

    box-shadow: 0 5px 18px rgba(16,24,40,.05);

    transition: .25s ease;
}


.sc-page-navigation a:hover {
    transform: translateY(-3px);

    border-color: #bfd0f5;

    box-shadow: 0 9px 25px rgba(16,24,40,.09);
}


.sc-page-navigation a:last-child {
    text-align: right;
}


/* =========================================================
   FAQ
========================================================= */

.sc-faq {
    margin: 30px 0;
}


.sc-faq-item {
    margin-bottom: 12px;

    border: 1px solid #e4e9f1;

    border-radius: 12px;

    background: #fff;

    overflow: hidden;
}


.sc-faq-question {
    width: 100%;

    padding: 17px 20px;

    border: 0;

    background: #fff;

    text-align: left;

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    color: #172033;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.sc-faq-question::after {
    content: "+";

    font-size: 22px;

    color: #1d4ed8;
}


.sc-faq-item.active
.sc-faq-question::after {
    content: "−";
}


.sc-faq-answer {
    display: none;

    padding: 0 20px 18px;

    color: #475467;

    line-height: 1.7;
}


.sc-faq-item.active
.sc-faq-answer {
    display: block;
}


/* =========================================================
   BACK TO PILLAR
========================================================= */

.sc-back-pillar {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin: 20px 0;

    padding: 11px 17px;

    border-radius: 10px;

    background: #eef4ff;

    color: #1d4ed8 !important;

    text-decoration: none !important;

    font-weight: 700;

    transition: .25s ease;
}


.sc-back-pillar:hover {
    background: #e0eaff;

    transform: translateX(-3px);
}


/* =========================================================
   NO RESULT
========================================================= */

#scSearchMessage,
#scNoResult {
    padding: 14px 18px;

    border-radius: 10px;

    background: #fff4f4;

    color: #b42318;

    border: 1px solid #f3c7c7;

    text-align: center;
}


/* =========================================================
   MOBILE CARD GRID
========================================================= */

@media (max-width: 900px) {

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


    .sc-quick-facts {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 600px) {

    .sc-region-section {
        margin: 25px 0;
        padding: 15px 0;
    }


    .sc-state-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .sc-state-card {
        min-height: auto;

        padding: 21px;
    }


    .sc-state-card h3 {
        font-size: 19px;
    }


    .sc-search-box {
        margin: 20px 0 25px;
    }


    .sc-search-box input {
        padding: 15px 18px 15px 48px;

        font-size: 15px;
    }


    .sc-quick-facts {
        grid-template-columns: 1fr;
    }


    .sc-state-hero {
        padding: 25px 20px;

        border-radius: 15px;
    }


    .sc-page-navigation {
        flex-direction: column;
    }


    .sc-page-navigation a:last-child {
        text-align: left;
    }


    .highlight {
        padding: 17px;
    }


    .related-box,
    .source-note {
        padding: 18px;
    }


    .content-table,
    .sc-caste-table {
        min-width: 600px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sc-state-card,
    .sc-card-link,
    .sc-page-navigation a,
    .sc-back-pillar {
        transition: none;
    }

}


/* =========================================================
   SC LIST OVERVIEW CARDS
========================================================= */

.sc-list-overview{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin:30px 0;
}

.sc-overview-card{
    background:#fff;
    border:1px solid #e6eaf0;
    border-radius:16px;
    padding:24px 18px;
    text-align:center;
    box-shadow:0 6px 20px rgba(0,0,0,.07);
    transition:all .3s ease;
    position:relative;
    overflow:hidden;
}

.sc-overview-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#1565c0,#42a5f5);
}

.sc-overview-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 28px rgba(0,0,0,.11);
}

.sc-overview-card strong{
    display:block;
    font-size:32px;
    line-height:1.2;
    font-weight:800;
    color:#1565c0;
    margin-bottom:7px;
}

.sc-overview-card span{
    display:block;
    font-size:15px;
    font-weight:600;
    color:#555;
}


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

.sc-pillar-hero{
    background:linear-gradient(135deg,#0d47a1,#1976d2);
    border-radius:18px;
    padding:38px 32px;
    margin-bottom:30px;
    color:#fff;
    box-shadow:0 10px 30px rgba(13,71,161,.18);
}

.sc-pillar-hero h1{
    margin:10px 0 12px;
    font-size:36px;
    line-height:1.2;
    color:#fff;
}

.sc-pillar-hero p{
    max-width:850px;
    margin:0;
    font-size:17px;
    line-height:1.7;
    color:rgba(255,255,255,.94);
}

.sc-pillar-badge{
    display:inline-block;
    padding:7px 12px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:30px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
}

.sc-hero-stats{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
}

.sc-hero-stats span{
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.2);
    padding:9px 14px;
    border-radius:30px;
    font-size:14px;
}

.sc-hero-stats strong{
    color:#fff;
    margin-right:4px;
}


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

@media(max-width:768px){

    .sc-list-overview{
        grid-template-columns:repeat(3,1fr);
        gap:10px;
    }

    .sc-overview-card{
        padding:18px 8px;
        border-radius:12px;
    }

    .sc-overview-card strong{
        font-size:25px;
    }

    .sc-overview-card span{
        font-size:12px;
    }

    .sc-pillar-hero{
        padding:28px 20px;
        border-radius:14px;
    }

    .sc-pillar-hero h1{
        font-size:27px;
    }

    .sc-pillar-hero p{
        font-size:15px;
    }

    .sc-hero-stats{
        gap:8px;
    }

    .sc-hero-stats span{
        font-size:12px;
        padding:8px 10px;
    }

}


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

@media(max-width:480px){

    .sc-list-overview{
        grid-template-columns:1fr;
        gap:12px;
    }

    .sc-overview-card{
        padding:18px;
    }

    .sc-overview-card strong{
        font-size:28px;
    }

}