/* ===========================
   S.O.M.S. Case Study Theme
   v2 - adds capstone components
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#111827;

    color:#f8fafc;

    line-height:1.8;

}

/* ===========================
   Container
=========================== */

.container{
    width:min(1280px,92%);
    margin:0 auto;
    padding:60px 40px 100px;
}

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

.page-header{

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:18px;

    margin-bottom:36px;

    padding-bottom:35px;

    border-bottom:1px solid #374151;

}

.page-header h1{

    font-size:3rem;
    font-weight:700;
    line-height:1.2;

}

.page-header p{

    color:#94a3b8;
    font-size:1.1rem;

}

.industry{

    display:inline-block;

    background:#d4a373;

    color:white;

    padding:8px 18px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}

/* Row that holds multiple badges (industry + status + tool) */
.badges-row{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    align-items:center;

}

.status{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}

.status.completed{background:#198754;color:white;}
.status.ongoing{background:#eab308;color:#111827;}
.status.not-started{background:#374151;color:#cbd5e1;}

.tool-badge{

    display:inline-block;

    background:transparent;

    border:1px solid #374151;

    color:#cbd5e1;

    padding:7px 17px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}

/* ===========================
   Back Button
=========================== */

.back-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

margin-bottom:20px;

background:transparent;

border:1px solid #374151;

border-radius:10px;

color:#cbd5e1;

text-decoration:none;

font-weight:600;

transition:.25s;

}

.back-btn:hover{

background:#d4a373;

border-color:#d4a373;

color:white;

transform:translateY(-2px);

}

/* ===========================
   Sections
=========================== */

section{

    background:#1f2937;

    border:1px solid #374151;

    border-radius:18px;

    padding:34px;

    margin-bottom:35px;

}

section h2{

    color:#d4a373;

    margin-bottom:25px;

    font-size:1.7rem;

}

section h3{

    margin-top:25px;

    margin-bottom:10px;

}

/* ===========================
   Dashboard
=========================== */

section img{

    width:100%;

    border-radius:12px;

   box-shadow:0 18px 40px rgba(0,0,0,.45);

}

/* ===========================
   Lists
=========================== */

ul{

    padding-left:22px;

}

li{

    margin-bottom:12px;

}

/* ===========================
   Table
=========================== */

table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:10px;

}

th{

    background:#d4a373;

    color:white;

}

td,th{

    padding:15px;

    border-bottom:1px solid #374151;

    text-align:left;

}

tr:nth-child(even){

    background:#273244;

}

/* ===========================
   Footer
=========================== */

footer{

    margin-top:80px;

    padding-top:40px;

    border-top:1px solid #374151;

    text-align:center;

}

/* ===========================
   Hover Animation
=========================== */

section{

    transition:.3s;

}

section:hover{

    transform:translateY(-4px);

}

/* ===========================
   Responsive
=========================== */

@media(max-width:768px){

.page-header h1{

font-size:2rem;

}

.container{

width:92%;

}

section{

padding:25px;

}

}

/* =====================================================
   CASE STUDY LAYOUT
===================================================== */

.case-layout{

display:grid;

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

gap:50px;

align-items:start;

margin-top:20px;

}

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

.case-sidebar{

position:sticky;

top:30px;

align-self:start;

background:#1f2937;

border:1px solid #374151;

border-radius:18px;

padding:28px;

height:fit-content;

max-height:calc(100vh - 60px);

overflow-y:auto;

}

.case-sidebar h3{

    color:#d4a373;

    margin-bottom:25px;

}

.case-sidebar a{

display:block;

padding:9px 14px;
margin-bottom:4px;

text-decoration:none;

color:#cbd5e1;

font-size:.95rem;

border-left:3px solid transparent;

border-radius:8px;

transition:all .25s ease;

}

.case-sidebar a:hover{

    background:#2b3748;

    border-left:3px solid #d4a373;

    color:white;

    padding-left:22px;

}

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

.case-content{

min-width:0;

max-width:900px;

}

.case-content section{

    scroll-margin-top:90px;

}

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

@media(max-width:900px){

.case-layout{

grid-template-columns:1fr;

}

.case-sidebar{

position:relative;

top:0;

margin-bottom:35px;

max-height:none;

}

}
.project-navigation{

    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:25px;

}

.project-navigation a{

    text-decoration:none;

    color:#d4a373;

    font-weight:600;

    transition:.3s;

}

.project-navigation a:hover{

    color:white;

}

/* =====================================================
   KPI STAT STRIP (Executive Summary)
===================================================== */

.stat-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));

    gap:16px;

    margin-top:24px;

}

.stat-card{

    background:#111827;

    border:1px solid #374151;

    border-radius:14px;

    padding:20px 16px;

    text-align:center;

    transition:.25s;

}

.stat-card:hover{

    border-color:#d4a373;

    transform:translateY(-3px);

}

.stat-card .value{

    font-size:1.55rem;

    font-weight:700;

    color:#d4a373;

}

.stat-card .label{

    font-size:.8rem;

    color:#94a3b8;

    margin-top:6px;

}

/* =====================================================
   VIDEO WALKTHROUGH
===================================================== */

.video-wrap{

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 18px 40px rgba(0,0,0,.45);

    background:#000;

}

.video-wrap video{

    width:100%;

    display:block;

}

/* =====================================================
   DASHBOARD TAB GALLERY
===================================================== */

.dashboard-tabs{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:22px;

}

.dashboard-tabs button{

    background:#111827;

    border:1px solid #374151;

    color:#cbd5e1;

    padding:12px 20px;

    border-radius:10px;

    font-family:inherit;

    font-size:.9rem;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.dashboard-tabs button:hover{

    border-color:#d4a373;

    color:white;

}

.dashboard-tabs button.active{

    background:#d4a373;

    border-color:#d4a373;

    color:#111827;

}

.dashboard-gallery img{

    display:none;

}

.dashboard-gallery img.active{

    display:block;

}

/* =====================================================
   BUSINESS QUESTIONS
===================================================== */

.question-card{

    background:#111827;

    border:1px solid #374151;

    border-radius:14px;

    padding:20px 24px;

    margin-bottom:16px;

}

.question-card:last-child{

    margin-bottom:0;

}

.question-card h3{

    margin-top:0;

    color:#f8fafc;

    font-size:1.05rem;

}

.question-card p{

    color:#94a3b8;

    margin-top:8px;

}

/* =====================================================
   KEY INSIGHTS
===================================================== */

.insight-card{

    margin-bottom:30px;

    padding-bottom:30px;

    border-bottom:1px solid #374151;

}

.insight-card:last-child{

    margin-bottom:0;

    padding-bottom:0;

    border-bottom:none;

}

.insight-card h3{

    margin-top:0;

    color:#f8fafc;

}

.takeaway{

    background:#161b28;

    border-left:4px solid #d4a373;

    padding:14px 20px;

    border-radius:8px;

    margin-top:14px;

    color:#cbd5e1;

    font-size:.95rem;

}

.takeaway strong{

    color:#d4a373;

}

/* =====================================================
   RECOMMENDATIONS
===================================================== */

.recommendation-card{

    background:#111827;

    border:1px solid #374151;

    border-radius:14px;

    padding:24px;

    margin-bottom:18px;

}

.recommendation-card:last-child{

    margin-bottom:0;

}

.recommendation-head{

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-bottom:10px;

}

.recommendation-head h3{

    margin:0;

    color:#f8fafc;

}

.priority{

    display:inline-block;

    padding:5px 14px;

    border-radius:999px;

    font-size:.7rem;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    white-space:nowrap;

}

.priority.high{background:#dc2626;color:white;}
.priority.medium{background:#d97706;color:white;}
.priority.low{background:#374151;color:#cbd5e1;}

/* =====================================================
   IMPACT / VALUE GRID
===================================================== */

.impact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:22px;

    margin-top:10px;

}

.impact-col{

    background:#111827;

    border:1px solid #374151;

    border-radius:14px;

    padding:22px;

}

.impact-col h3{

    margin-top:0;

    color:#d4a373;

    font-size:1rem;

    text-transform:uppercase;

    letter-spacing:.03em;

}

.impact-col ul{

    margin-top:12px;

    padding-left:20px;

}

.impact-col li{

    color:#cbd5e1;

    font-size:.95rem;

}

/* =====================================================
   PORTFOLIO DESCRIPTION BOX
===================================================== */

.portfolio-desc{

    background:#111827;

    border:1px solid #374151;

    border-left:4px solid #d4a373;

    border-radius:12px;

    padding:24px;

    color:#cbd5e1;

}

/* =====================================================
   TECH / SKILL TAGS
===================================================== */

.tech-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:14px;

}

.tech-tags span{

    background:#111827;

    border:1px solid #374151;

    padding:8px 16px;

    border-radius:999px;

    font-size:.85rem;

    color:#cbd5e1;

}

/* =====================================================
   SQL QUERY CARDS
===================================================== */

.query-card{

    background:#111827;

    border:1px solid #374151;

    border-radius:14px;

    padding:24px;

    margin-bottom:20px;

}

.query-card:last-child{

    margin-bottom:0;

}

.query-head{

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-bottom:6px;

}

.query-head h3{

    margin:0;

    color:#f8fafc;

    font-size:1.05rem;

}

.query-file{

    font-family:'Courier New',monospace;

    font-size:.78rem;

    color:#94a3b8;

    background:#1f2937;

    border:1px solid #374151;

    padding:4px 12px;

    border-radius:999px;

    white-space:nowrap;

}

.query-card p{

    color:#94a3b8;

    margin-bottom:14px;

    font-size:.95rem;

}

.query-card pre{

    background:#0b0f19;

    border:1px solid #374151;

    border-radius:10px;

    padding:18px 20px;

    overflow-x:auto;

    margin-bottom:14px;

}

.query-card pre:last-child{

    margin-bottom:0;

}

.query-card code{

    font-family:'Fira Code','Courier New',monospace;

    font-size:.85rem;

    line-height:1.7;

    color:#e2e8f0;

    white-space:pre;
}

.sql-kw{color:#d4a373;font-weight:600;}
.sql-fn{color:#7dd3fc;}
.sql-com{color:#64748b;font-style:italic;}
.sql-str{color:#86efac;}

/* =====================================================
   DATA QUALITY / NOTE CALLOUT
===================================================== */

.note-box{

    background:#161b28;

    border-left:4px solid #eab308;

    padding:16px 20px;

    border-radius:8px;

    margin-top:16px;

    color:#cbd5e1;

    font-size:.95rem;

}

.note-box strong{

    color:#eab308;

}