/* =========================================
   PROJECT PAGE SPECIFIC STYLES
   ========================================= */

.project-mode-main {
    padding-top: 60px;
    min-height: 100vh;
}

.project-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- Navigation --- */
.back-link {
    display: inline-block;
    color: var(--md-primary);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 2rem;
    transition: transform 0.2s;
}

.back-link:hover {
    text-decoration: underline;
    transform: translateX(-5px);
}

/* --- Header --- */
.project-header {
    margin-bottom: 2.5rem;
}

.project-subtitle {
    color: var(--md-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.project-title {
    font-size: 3rem;
    line-height: 1.1;
    margin: 0;
    color: var(--md-on-surface);
}

/* =========================================
   LAYOUT STRUCTURE (Desktop Default)
   ========================================= */

.project-layout-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 4rem;
}

/* --- TOP ROW: Banner (70%) & Sidebar (30%) --- */
.project-top-row {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 2rem;
    align-items: stretch;
}

/* Banner Wrapper */
.project-banner-wrapper {
    margin-bottom: 0;
}

/* Banner Image (2:1 Aspect Ratio) */
.project-banner {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}

/* Sidebar styling */
.sidebar-card {
    background-color: var(--md-surface-variant);
    border: 1px solid var(--md-outline);
    border-radius: 16px;
    padding: 1.5rem;
    position: static;
    box-shadow: 0 4px 12px var(--md-shadow-color);
    display: flex;
    flex-direction: column;
}

.sidebar-card .sidebar-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sidebar-card .links-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
}

/* Tech Strip (below banner, spans full grid width) */
.tech-strip {
    grid-column: 1 / -1;
}

.tech-strip .tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- BOTTOM ROW: Content --- */
.project-bottom-row {
    width: 100%;
}


/* =========================================
   COMPONENT STYLES
   ========================================= */

/* --- Sidebar Components --- */
.sidebar-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--md-on-surface-variant);
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.sidebar-separator {
    height: 1px;
    background: var(--md-outline);
    margin: 1.5rem 0;
    opacity: 0.5;
}

/* Sidebar Buttons */
.sidebar-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    margin-bottom: 0;
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline);
    border-radius: 8px;
    color: var(--md-on-surface);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.sidebar-btn .btn-left-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-btn .btn-arrow {
    opacity: 0.5;
    font-size: 1.1em;
    transition: transform 0.2s;
}

.sidebar-btn:hover {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    border-color: var(--md-primary);
    transform: translateY(-2px);
}

.sidebar-btn:hover .btn-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}

.sidebar-btn svg {
    flex-shrink: 0;
}

/* Sidebar Action Buttons (Clone, Share) */
.sidebar-action-btn {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    width: 100%;
    text-align: left;
}

/* Tech Tags */
.project-container .tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Sidebar Badge Styling - colors come from .tech-* classes in index-base.css */
.sidebar-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- Main Content Area --- */
.content-section {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 1.5rem;
    color: var(--md-on-surface);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--md-outline);
}

.text-body {
    color: var(--md-on-surface-variant);
    line-height: 1.8;
    font-size: 1.05rem;
    white-space: pre-line;
}

/* --- Architecture Grid --- */
.arch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.arch-card {
    background-color: var(--md-surface-variant);
    border: 1px solid var(--md-outline);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.arch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--md-shadow-color);
    border-color: var(--md-primary);
}

.arch-card h4 {
    margin: 0 0 1rem 0;
    color: var(--md-primary);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.arch-card ul {
    padding-left: 1.25rem;
    margin: 0;
}

.arch-card li {
    margin-bottom: 0.75rem;
    color: var(--md-on-surface);
}

#p-arch-scalability {
    color: var(--md-on-surface-variant);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- Feature List --- */
.features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    padding: 0;
    margin: 0;
}

.features-list li {
    position: relative;
    background-color: var(--md-surface-variant);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    border: 1px solid transparent;
    list-style: none;
    border-left: 4px solid var(--md-primary);
    color: var(--md-on-surface);
    font-weight: 500;
    line-height: 1.5;
    font-size: 0.95rem;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.features-list li:hover {
    transform: translateY(-3px);
    background-color: var(--md-surface);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--md-outline);
    border-right: 1px solid var(--md-outline);
    border-bottom: 1px solid var(--md-outline);
}

/* =========================================
   TERMINAL / CODE BLOCK STYLING
   ========================================= */

/* --- OS Switcher Toolbar --- */
.terminal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    margin-left: 4px;
}

.toolbar-label {
    font-size: 0.75rem;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-right: 5px;
}

.os-btn {
    background: transparent;
    border: 1px solid var(--md-outline);
    color: var(--md-on-surface-variant);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.os-btn:hover {
    background: var(--md-surface-variant);
    color: var(--md-primary);
    border-color: var(--md-primary);
}

.os-btn.active {
    background: var(--md-primary);
    color: var(--md-on-primary);
    border-color: var(--md-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.code-block-wrapper {
    position: relative;
    margin-top: 1rem;
    background: #1e1e1e;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* --- Header Layout (Flexbox) --- */
.code-block-header {
    background: #2d2d2d;
    padding: 0 12px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #333;
}

/* Container for the dots/buttons */
.terminal-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

/* --- THEME: macOS (Default) --- */
/* Layout: Controls Left | Copy Right */
.theme-mac .code-block-header {
    flex-direction: row;
}

.theme-mac .terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.theme-mac .dot-red {
    background-color: #ff5f56;
}

.theme-mac .dot-yellow {
    background-color: #ffbd2e;
}

.theme-mac .dot-green {
    background-color: #27c93f;
}


/* --- THEME: Windows --- */
/* Layout: Copy Left | Controls Right */
.theme-windows .code-block-header {
    background: #181818;
    flex-direction: row-reverse;
}

.theme-windows .terminal-controls {
    gap: 0;
    margin-right: -12px;
}

.win-btn {
    width: 46px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: default;
    transition: background 0.2s;
}

.win-btn:hover {
    background: #333;
}

.win-btn.close-btn:hover {
    background: #e81123;
}


/* --- THEME: Linux (Ubuntu Style) --- */
/* Layout: Copy Left | Controls Right */
.theme-linux .code-block-header {
    background: #2c001e;
    flex-direction: row-reverse;
}

.theme-linux .terminal-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    background: #4e4e4e;
    font-weight: bold;
}

.theme-linux .dot-close {
    background: #e95420;
}

.theme-linux .linux-icon {
    color: #fff;
    margin-right: 4px;
}


/* --- Copy Button --- */
.copy-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 26px;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* --- Code Area & Highlighting --- */
.code-block {
    color: #e0e0e0;
    padding: 1.5rem;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}

.cmd-line {
    display: block;
    min-height: 1.5em;
}

.cmd-comment {
    color: #6a9955;
    font-style: italic;
}

.cmd-command {
    color: #d4d4d4;
}

.cmd-command::before {
    content: "$ ";
    color: #569cd6;
    opacity: 0.7;
    user-select: none;
}


/* =========================================
   FOOTER NAVIGATION (Projects)
   ========================================= */

/* DESKTOP DEFAULT: Side-by-Side (Grey Cards) */
.project-footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 6rem;
    padding-top: 2rem;
    border-top: 1px solid var(--md-outline);
    width: 100%;
    margin-bottom: 2rem;
}

.nav-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background-color: var(--md-surface-variant);
    border: 1px solid var(--md-outline);
    border-radius: 16px;
    padding: 1.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
    overflow: hidden;
}

.nav-card:hover {
    transform: translateY(-4px);
    border-color: var(--md-primary);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    background-color: var(--md-surface);
}

.nav-img {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.nav-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.nav-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.nav-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--md-primary);
    font-weight: 700;
}

.nav-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--md-on-surface);
    margin: 0 0 0.5rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-desc {
    font-size: 0.9rem;
    color: var(--md-on-surface-variant);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-arrow {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--md-primary);
    font-weight: 300;
}

.nav-badges {
    display: flex;
    gap: 6px;
}

.mini-badge {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}


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

@media (max-width: 900px) {

    /* --- LAYOUT STRUCTURE --- */
    .project-layout-wrapper {
        gap: 2rem;
    }

    /* TOP ROW: Stack Banner & Sidebar vertically */
    .project-top-row {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Banner: Controlled Height */
    .project-banner-wrapper {
        order: 1;
        width: 100%;
    }

    /* Badges between banner and sidebar on mobile */
    .tech-strip {
        order: 2;
        width: 100%;
    }

    .tech-strip .tech-tags {
        justify-content: center;
    }

    /* Sidebar: Fix "Offscreen" Issue */
    .sidebar-card {
        order: 3;
        width: 100%;
        /* This fixes the horizontal scroll/overflow issue */
        box-sizing: border-box;
        margin: 0;
    }

    /* Bottom Content */
    .project-bottom-row {
        order: 3;
    }

    /* --- FOOTER NAV (MOBILE) --- */
    /* Stack vertically: Previous above Next */
    .project-mode-main .project-footer-nav {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Compact Card Style for Mobile - keep horizontal layout */
    .nav-card {
        padding: 1rem;
        flex-direction: row;
        text-align: left;
        gap: 1rem;
    }

    /* Previous card: image on left (default row direction) */
    .nav-card.prev-card {
        flex-direction: row;
    }

    /* Next card: image on right (reverse row direction) */
    .nav-card.next-card {
        flex-direction: row-reverse;
        text-align: right;
    }

    .nav-card.next-card .nav-top-row {
        justify-content: flex-end;
    }

    .nav-card.next-card .nav-badges {
        margin-left: 0;
        margin-right: auto;
    }

    .nav-img {
        width: 80px;
        height: 80px;
        margin: 0;
        object-fit: cover;
        flex-shrink: 0;
    }

    .nav-info {
        width: 100%;
        min-width: 0;
        /* Fix flexbox overflow */
    }

    .nav-top-row {
        justify-content: flex-start;
        margin-bottom: 0.25rem;
    }

    .nav-badges {
        margin-left: auto;
    }

    .nav-title {
        font-size: 1rem;
        white-space: normal;
    }
}

/* =========================================
   PROJECT STATUS BANNERS
   ========================================= */

.project-status-banner {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid transparent;
    font-size: 0.95rem;
    line-height: 1.5;
}

.banner-icon {
    font-size: 1.25rem;
    line-height: 1;
    margin-top: 2px;
}

.banner-content strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

/* --- Status Variants --- */

/* WIP: Warning/Yellow */
.status-wip {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffb300;
}

.status-wip .banner-content {
    color: var(--md-on-surface);
}

.status-wip .banner-content strong {
    color: #ffb300;
}

/* BETA: Info/Blue */
.status-beta {
    background-color: rgba(66, 165, 245, 0.1);
    border-color: rgba(66, 165, 245, 0.3);
    color: #42a5f5;
}

.status-beta .banner-content {
    color: var(--md-on-surface);
}

.status-beta .banner-content strong {
    color: #42a5f5;
}

/* ARCHIVE: Error/Red or Muted/Grey */
.status-archive {
    background-color: rgba(244, 67, 54, 0.08);
    border-color: rgba(244, 67, 54, 0.25);
    color: #ef5350;
}

.status-archive .banner-content {
    color: var(--md-on-surface-variant);
}

.status-archive .banner-content strong {
    color: #ef5350;
}

/* =========================================
   RECOMMENDED PROJECT SECTION
   ========================================= */

.recommended-container {
    margin-top: 5rem;
    margin-bottom: -3rem;
    /* Pull footer nav up slightly or adjust spacing */
}

.recommended-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--md-primary);
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--md-outline);
    opacity: 0.9;
}

/* Container for the cards themselves */
.recommended-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
}

/* Ensure nav cards in the grid stretch to full height and have highlight */
.recommended-grid .nav-card {
    height: 100%;
    border: 1px solid var(--md-primary);
    /* RESTORED: Highlight border */
    position: relative;
    overflow: hidden;
}

.recommended-grid .nav-card::before {
    content: "";
    /* Glow effect */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(var(--md-primary-rgb), 0.05));
    pointer-events: none;
}

/* Responsive adjustment for recommended grid */
@media (max-width: 800px) {
    .recommended-grid {
        grid-template-columns: 1fr;
    }
}

/* On very small screens, ensure the recommended nav cards behave like mobile nav cards */
@media (max-width: 600px) {
    /* No overrides needed - let it inherit standard .nav-card row styles */
}