/* =========================================
   CASE STUDY: LOOP
   ========================================= */

:root {
    --color-black: #000000;
    --color-loop-grad: linear-gradient(to right, #D68D38 0%, #DA3C3B 100%);
    --color-loop-solid: #DA3C3B; /* Fallback for borders */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Georgia', serif;
    --line-color: #d1d1d1;
}

body.case-study-body {
    background-color: #ffffff;
    color: var(--color-black);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- LOOP SPECIFIC GRADIENT UTILITIES --- */
.gradient-text-loop {
    background: var(--color-loop-grad);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* --- LAYOUT GRID & SIDEBARS --- */
.cs-layout-grid {
    display: grid;
    /* By making both side columns exactly 250px, the 1fr middle is perfectly centered! */
    grid-template-columns: 250px 1fr 250px; 
    left: 1%; 
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
}

.cs-sidebar-left { 
    position: sticky; 
    top: 0; 
    height: 100vh; 
    padding: 80px 0 0 50px; 
    display: flex; 
    flex-direction: column; 
}

.cs-sidebar-right { 
    position: sticky; 
    top: 90px; 
    height: calc(100vh - 90px); 
    display: flex; 
    align-items: center; 
    /* This pushes the button to the right edge of its new, wider 250px column */
    justify-content: flex-end; 
    /* This balances the 50px left-padding of the Contents sidebar */
    padding-right: 50px; 
}

.cs-sidebar-left, .cs-sidebar-right {
    top: 40px; 
    height: calc(100vh - 90px);
}

.cs-main-content { 
    padding: 120px 40px 100px 40px; 
    max-width: 900px; 
    margin: 0 auto; 
    width: 100%; 
}

/* --- FIXED BUTTONS & SCROLLSPY --- */
.pill-btn, 
.circle-btn {
    border: 1px solid var(--color-black);
    color: var(--color-black);
    background: transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pill-btn { 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    padding: 8px 20px; 
    border-radius: 50px; 
    font-family: var(--font-body); 
    font-size: 0.85rem; 
    text-decoration: none; 
    width: max-content; 
}

.circle-btn { 
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--color-black);
    background: transparent;
    color: var(--color-black);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-top: 540px;
    margin-right: 30px;
}

.pill-btn:hover, 
.circle-btn:hover {
    background: var(--color-loop-grad);
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
}

.contents-wrapper { 
    margin-top: 80px; 
}

.contents-title { 
    font-size: 0.75rem; 
    letter-spacing: 1px; 
    font-weight: bold; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
}

.contents-nav { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.contents-nav a { 
    font-size: 0.85rem; 
    color: #888; 
    text-decoration: none; 
    transition: all 0.3s ease; 
}

.contents-nav a:hover, 
.contents-nav a.active { 
    color: var(--color-black); 
    font-weight: bold; 
}

/* --- TYPOGRAPHY --- */
.hero-text-center { 
    text-align: center; 
    margin-bottom: 50px; 
}

.hero-overline { 
    font-size: 0.95rem; 
    color: #555; 
    margin-bottom: 15px; 
    line-height: 1.5; 
}

.hero-title { 
    font-family: var(--font-heading); 
    font-style: italic; 
    font-size: 5rem; 
    font-weight: 400; 
    margin-bottom: 25px; 
    line-height: 1.1; 
    padding-bottom: 5px; 
}

.hero-subtitle { 
    font-size: 1.05rem; 
    color: #333; 
    max-width: 700px; 
    margin: 0 auto; 
    line-height: 1.6; 
}

.section-header-line { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    margin: 80px 0 40px 0; 
}

.section-header-line .line { 
    flex-grow: 1; 
    height: 1px; 
    background-color: var(--line-color); 
}

.section-heading { 
    font-family: var(--font-heading); 
    font-size: 2rem; 
    color: var(--color-black); 
    font-weight: 500; 
    white-space: nowrap; 
}

.accent-num { 
    font-style: italic; 
    font-weight: bold; 
    margin-right: 5px; 
}

.accent-italic-heading { 
    font-family: var(--font-heading); 
    font-style: italic; 
    font-size: 2.5rem; 
    font-weight: 500; 
    text-align: center; 
    margin-bottom: 10px; 
    padding-bottom: 5px; 
}

.accent-italic-heading.small { 
    font-size: 1.8rem; 
    margin-bottom: 30px; 
}

.italic-subheading { 
    font-family: var(--font-heading); 
    font-style: italic; 
    font-size: 1.3rem; 
    color: #222; 
    margin-bottom: 15px; 
}
.bold-subheading { 
    font-family: var(--font-body); 
    font-weight: bold; 
    font-size: 1.1rem; 
    color: #222; 
    margin-bottom: 15px; 
}

.section-intro, 
.standard-desc { 
    font-size: 0.95rem; 
    color: #444; 
    line-height: 1.6; 
    margin-bottom: 30px; 
}

.centered { 
    text-align: center; 
    max-width: 700px; 
    margin: 0 auto; 
}

.text-center { 
    text-align: center; 
}

.caption-desc { 
    font-size: 0.85rem; 
    color: #555; 
    line-height: 1.6; 
}

/* --- GRIDS & LISTS --- */
.project-meta-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px 20px; 
    margin-top: 60px; 
}

.meta-item h4 { 
    font-family: var(--font-heading); 
    font-size: 0.8rem; 
    text-transform: uppercase; 
    margin-bottom: 10px; 
    font-weight: bold; 
}

.meta-item p { 
    font-size: 0.85rem; 
    color: #444; 
    line-height: 1.6; 
}

.two-col-text { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 50px; 
    align-items: center; 
}

.two-col-text h4 { 
    font-size: 0.95rem; 
    font-weight: bold; 
    margin-bottom: 15px; 
}

.two-col-text p { 
    font-size: 0.9rem; 
    color: #444; 
    line-height: 1.6; 
}

.custom-list { 
    padding-left: 20px; 
    font-size: 0.9rem; 
    color: #444; 
    line-height: 1.7; 
}

.custom-list.bulleted { 
    list-style-type: disc; 
}

.custom-list li { 
    margin-bottom: 15px; 
}

.custom-list li strong { 
    color: var(--color-black); 
}


/* --- HCI TABLE --- */
.table-wrapper { 
    width: 100%; 
    overflow-x: auto; 
    border: 1px solid var(--line-color); 
    border-radius: 12px; 
}

.hci-table { 
    width: 100%; 
    border-collapse: collapse; 
    text-align: left; 
}

.hci-table th, 
.hci-table td { 
    padding: 20px; 
    border-bottom: 1px solid var(--line-color); 
}

.hci-table th { 
    font-family: var(--font-body); 
    font-weight: bold; 
    font-size: 1rem; 
    color: #222; 
    border-right: 1px solid var(--line-color); 
    background: #fdfdfd;
}

.hci-table td { 
    font-size: 0.95rem; 
    color: #444; 
    line-height: 1.5; 
}

.hci-table td:first-child { 
    border-right: 1px solid var(--line-color); 
    width: 30%; 
}

.hci-table tr:last-child td { 
    border-bottom: none; 
}

/* --- GIF CAPTION ALIGNMENT GRIDS --- */
.caption-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    max-width: 400px;
    margin: 20px auto 0 auto;
}

.caption-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 83%;
    max-width: 1000px;
    margin: 30px auto 0 auto;
}

.caption-block {
    text-align: center;
    padding: 0 10px;
}

.caption-block h5 {
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 0.95rem;
    color: #222;
    margin-bottom: 8px;
}

.caption-block p {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
}

/* --- IMPACT SECTION ALIGNMENT (Matches Screenshot) --- */
.what-i-learned-block {
    margin-top: 0px;
    text-align: center;
}

.left-align-heading {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 2.2rem;
    text-align: left;
    margin-bottom: 30px;
    padding-bottom: 5px;
}

.centered-indented {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.8;
}

/* --- KEEP EXPLORING CARDS (Widened & Height-Matched) --- */

/* 1. Widen the grid to break out of the center column */
.keep-exploring-section .projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Reduced gap gives cards more width */
    width: 110%; /* Expands past the default bounds */
    margin-left: -5%; /* Re-centers the wider grid */
}

/* 2. Equalize heights and structure the flex layout */
.keep-exploring-section .project-card {
    border: 1px solid #8d6b7b;
    border-radius: 12px;
    padding: 25px 20px; 
    background: #fff;
    box-shadow: none;
    display: flex; /* Turns the card into a flex container */
    flex-direction: column; /* Stacks items vertically */
    height: 100%; /* Ensures all cards stretch to the tallest one in the row */
}

.keep-exploring-section .project-card:hover {
    transform: translateY(-5px);
}

.keep-exploring-section .project-top-container {
    width: 100%;
    height: 220px; 
    margin: 0 0 25px 0;
    border: 1px solid #e1d2da; 
    border-radius: 8px;
    background: #fff;
}

.keep-exploring-section .project-top-container img {
    padding: 30px; 
}

/* Text Formatting */
.keep-exploring-section h3 {
    font-size: 1.8rem;
    padding: 0;
    margin-bottom: 8px;
}

.keep-exploring-section .subtitle {
    font-size: 0.85rem;
    padding: 0;
    margin-bottom: 20px;
}

/* 3. Force the description to fill empty space */
.keep-exploring-section .desc {
    font-size: 0.85rem;
    padding: 0;
    margin-bottom: 30px;
    line-height: 1.6;
    flex-grow: 1; /* This pushes the tags down to the bottom! */
}

/* 4. Lock tags to the bottom */
.keep-exploring-section .tags {
    padding: 0;
    margin-top: auto; /* Aligns flush to the bottom */
}

.keep-exploring-section .tag {
    background-color: #DA3C3B !important; 
    padding: 8px 16px;
    font-size: 0.65rem;
    border-radius: 20px;
}


/* --- IMAGES & VIDEO --- */
.full-width-img, 
.full-width-video { 
    width: 100%; 
    height: auto; 
    display: block; 
}

.contained-img { 
    max-width: 600px; 
    margin: 0 auto; 
    display: block;
}

.border-radius-lg { 
    border-radius: 12px; 
    overflow: hidden; 
}

.shadow-light { 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
}

/* Utility Margins */
.mt-s { 
    margin-top: 15px; 
}

.mt-m { 
    margin-top: 30px; 
}

.mt-l { 
    margin-top: 60px; 
}

.mt-xl { 
    margin-top: 100px; 
}

.mb-m { 
    margin-bottom: 30px; 
}

/* --- OUTRO & EXPLORE SECTION --- */
.cs-outro { 
    text-align: center; 
    padding-bottom: 60px; 
}

.thin-line { 
    border: 0; 
    height: 1px; 
    background-color: var(--line-color); 
    margin-bottom: 60px; 
}

.outro-links { 
    margin-top: 20px; 
    font-size: 0.85rem; 
    color: #555; 
}

.outro-links a { 
    color: var(--color-black); 
    text-decoration: underline; 
    text-underline-offset: 3px; 
}

.keep-exploring-section { 
    padding: 80px 0 120px 0; 
    border-top: 1px solid var(--line-color); 
    margin-top: 80px; 
    text-align: center;
}

.projects-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
} 

/* --- ANIMATIONS --- */
.pop-in { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
}

.pop-in.delay-1 { 
    transition-delay: 0.2s; 
}

.pop-in.delay-2 { 
    transition-delay: 0.4s; 
}

.pop-in.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* =========================================
   DARK MODE OVERRIDES (Perfect Contrast)
   ========================================= */

body.dark-mode.case-study-body {
    background-color: #1a1a1a; /* Dark charcoal, not pure black */
    color: #e0e0e0; /* Soft white for body text */
}

/* --- IMAGE SWAPPING LOGIC --- */
/* Hide the dark image by default */
.img-dark { 
    display: none; 
}
/* When dark mode is active, hide light image, show dark image */
body.dark-mode .img-light { 
    display: none; 
}
body.dark-mode .img-dark { 
    display: block; 
}

/* --- TEXT COLORS: PURE WHITE --- */
body.dark-mode .section-heading,
body.dark-mode .bold-heading,
body.dark-mode .italic-subheading,
body.dark-mode .bold-subheading,
body.dark-mode .restricted-title,
body.dark-mode .hero-subtitle,
body.dark-mode .caption-block h5,
body.dark-mode .meta-item h4,
body.dark-mode .two-col-text h4,
body.dark-mode .engineering-grid h4,
body.dark-mode .dark-serif-heading, /* Added */
body.dark-mode .ux-decisions h4,    /* Added */
body.dark-mode .outro-links a {     /* Outro Links Added */
    color: #ffffff; 
}

/* --- TEXT COLORS: SOFT WHITE/GREY --- */
body.dark-mode .section-intro,
body.dark-mode .standard-desc,
body.dark-mode .custom-list li,
body.dark-mode .meta-item p,
body.dark-mode .caption-desc,
body.dark-mode .caption-block p,
body.dark-mode .contents-nav a,
body.dark-mode .two-col-text p,
body.dark-mode .restricted-desc,
body.dark-mode .exact-intro,        /* Added */
body.dark-mode .italic-desc,        /* Added */
body.dark-mode .node p,             /* Added timeline text */
body.dark-mode .outro-links,        /* Added */
body.dark-mode .outro-links p {     /* Added */
    color: #cccccc;
}

body.dark-mode .custom-list li strong {
    color: #ffffff;
}

/* Sidebar Active State */
body.dark-mode .contents-nav a.active {
    color: #ffffff;
    font-weight: bold;
}

/* Structural Lines */
/* 1. Elements that use BACKGROUND-COLOR for their lines */
body.dark-mode .section-header-line .line,
body.dark-mode .thin-line,
body.dark-mode .timeline-line,
body.dark-mode .connector-s03-polished::after,
body.dark-mode .connector-s03-mobile::after,
body.dark-mode .connector-elbow-top,
body.dark-mode .connector-elbow-top::before,
body.dark-mode .connector-elbow-top::after,
body.dark-mode .connector-branch-bottom,
body.dark-mode .vertical-spacer-line {
    background-color: #555555;
}

/* 2. Elements that use BORDERS for their lines (Crucial Fix) */
body.dark-mode .connector-s03-polished,
body.dark-mode .connector-s03-mobile,
body.dark-mode .connector-branch-bottom::after {
    border-color: #555555;
    background-color: transparent !important; /* Ensures the box stays invisible */
}

/* Timeline Circles */
body.dark-mode .node .circle {
    background-color: #1a1a1a;
    border-color: #bababa;
}
body.dark-mode .node.active .circle {
    /* Uses whatever accent color is set for that specific case study */
    border-color: var(--color-accent-teal, var(--color-vibrant-pink, var(--color-loop-solid, #fff))); 
}

/* Floating Buttons */
body.dark-mode .pill-btn,
body.dark-mode .circle-btn {
    border-color: #e0e0e0;
    color: #e0e0e0;
}

body.dark-mode .pill-btn:hover,
body.dark-mode .circle-btn:hover {
    color: #ffffff;
    border-color: transparent;
}

/* Keep Exploring Cards */
body.dark-mode .keep-exploring-section .project-card {
    background-color: #2e2e2e;
    border-color: #595959;
}

body.dark-mode .keep-exploring-section .project-top-container {
    background-color: #2a2a2a;
    border-color: #444444;
}

body.dark-mode .keep-exploring-section h3 {
    color: #ffffff;
}

/* Tables (If applicable, like in Loop) */
body.dark-mode .hci-table th {
    background: #222222;
    color: #ffffff;
    border-color: #444444;
}
body.dark-mode .hci-table td {
    border-color: #444444;
    color: #cccccc;
}

/* Restricted Block (If applicable, like in Cocopan) */
body.dark-mode .restricted-block {
    background-color: #222222;
    border-color: #555555;
}
body.dark-mode .restricted-actions {
    background-color: #2a2a2a;
    border-color: #444444;
}
body.dark-mode .github-solid-btn {
    background-color: #ffffff;
    color: #000000;
}
body.dark-mode .github-solid-btn:hover {
    background-color: var(--color-accent-amber);
    color: #ffffff;
}

/* =========================================
   MASTER RESPONSIVE OVERRIDES (TABLET & MOBILE)
   ========================================= */

/* --- TABLET VIEW (Max 1100px) --- */
@media (max-width: 1100px) {
    /* Collapse the 3-column grid into 1 column */
    .cs-layout-grid {
        grid-template-columns: 1fr;
        width: 100%;
        left: 0;
    }

    /* Keep the back button, but remove fixed positioning */
    .cs-sidebar-left {
        position: relative;
        height: auto;
        padding: 100px 5% 20px 5%; /* Accounts for fixed navbar */
        top: 0;
    }

    /* Hide the Table of Contents & Floating Back to Top */
    .contents-wrapper, 
    .cs-sidebar-right {
        display: none; 
    }

    /* Expand main content */
    .cs-main-content {
        padding: 20px 5% 60px 5%;
        max-width: 100%;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    /* Convert specific 3-column elements to 2-columns on tablet */
    .project-meta-grid, 
    .mobile-grid-3,
    .caption-grid-3,
    .sdg-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .keep-exploring-section .projects-grid {
        width: 100%;
        margin-left: 0;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- MOBILE VIEW (Max 768px) --- */
@media (max-width: 768px) {
    /* Typography Scaling */
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 0.95rem; }
    .section-heading { font-size: 1.6rem; }
    .accent-italic-heading { font-size: 2.2rem; }
    .accent-italic-heading.small { font-size: 1.5rem; }
    .left-align-heading { font-size: 1.8rem; text-align: center; }

    /* Spacing Reductions */
    .mt-xl { margin-top: 60px; }
    .mt-l { margin-top: 40px; }
    .section-header-line { margin: 50px 0 30px 0; }
    
    /* Grid Stacking (Forces everything to 1 column) */
    .project-meta-grid, 
    .two-col-text, 
    .engineering-grid,
    .system-diagram-grid, 
    .user-flow-grid, 
    .wireframes-grid,
    .two-col-images,
    .mobile-grid-2,
    .mobile-grid-3,
    .sdg-grid,
    .caption-grid-2, 
    .caption-grid-3,
    .keep-exploring-section .projects-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        width: 100%;
    }

    .keep-exploring-section .project-card { padding: 20px 15px; }
    .caption-block { padding: 0; }

    /* Complex Layout Adjustments (Hide Desktop-only lines) */
    .connector-elbow-top,
    .connector-elbow-top::before,
    .connector-elbow-top::after,
    .connector-branch-bottom,
    .connector-branch-bottom::after,
    .connector-s03-polished,
    .connector-s03-polished::after,
    .connector-s03-mobile,
    .connector-s03-mobile::after,
    .vertical-spacer-line,
    .timeline-line {
        display: none !important; 
    }

    /* Turn the timeline nodes into a wrapped list instead of fixed line */
    .timeline-tracker {
        margin-bottom: 40px;
    }
    .timeline-nodes {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    /* Fix specific text paddings that look weird when stacked */
    .user-flow-grid .left-col, 
    .user-flow-grid .right-col,
    .diagram-text-col,
    .flow-col-left,
    .flow-col-right {
        padding-top: 0; 
    }

    /* Loop HCI Table Mobile View */
    .hci-table thead { display: none; }
    .hci-table td {
        display: block;
        width: 100% !important;
        border-right: none !important;
    }
    .hci-table td:first-child {
        font-weight: bold;
        font-size: 1.1rem;
        border-bottom: 1px dashed var(--line-color);
        padding-bottom: 5px;
        background: #fafafa;
    }
    body.dark-mode .hci-table td:first-child { background: #222; }
    .hci-table td:last-child {
        padding-top: 10px;
        border-bottom: 2px solid var(--line-color);
    }
}

/* --- SMALL MOBILE VIEW (Max 480px) --- */
@media (max-width: 480px) {
    .hero-title { font-size: 2.2rem; }
    .restricted-block { padding: 30px 20px; }
    .restricted-title { font-size: 1.5rem; }
    .cs-sidebar-left { padding-top: 80px; } 
    .pill-btn { padding: 8px 15px; font-size: 0.8rem; }
}