/* Media query for tablets and smaller devices (<= 768px wide) */
@media (max-width: 768px) {

    /* --- PROJECTS PAGE MOBILE LAYOUT --- */

    /* Make the whole page container scrollable vertically */
    #projects-page {
        overflow-y: auto;
        perspective: none;
        align-items: flex-start; /* Align to top */
        padding-top: 100px; /* Space for nav bar */
        padding-bottom: 100px; 
    }

    /* Hide the left/right arrows on mobile */
    .project-nav-arrow {
        display: none !important;
    }

    /* Convert the horizontal track to a vertical one */
    #projects-track {
        position: static;
        flex-direction: column; /* Stack cards vertically */
        gap: 2rem; /* Add space between cards */
        width: 100%;
        padding: 0 1rem;
        transform: none !important;
    }

    .project-item {
        transform: none !important;
    }

    .skill-map-container {
        display: none !important;
    }

    .project-card, .project-card.active {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
        height: auto;
        min-height: 220px;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
    
    /* --- CONTACT PAGE MOBILE FIX --- */
    #contact-terminal {
        width: 90vw; /* Use 90% of the viewport width */
        height: 90vw; /* Maintain a 1:1 aspect ratio */
        max-width: 380px; /* Don't let it get bigger than this */
        max-height: 380px;
    }
    
    /* --- VIRTUAL KEYBOARD MOBILE FIX --- */
    #virtual-keyboard {
        width: 100%;
        padding: 0.5rem;
        bottom: 1rem;
        left: 0;
        transform: translate(0, 150%);
        box-sizing: border-box;
    }

    #virtual-keyboard.visible {
        transform: translate(0, 0);
    }
    
    #keyboard-display {
        height: 36px;
        line-height: 36px;
        font-size: 1.25rem;
    }

    .keyboard-row {
        gap: 3px;
    }

    .key {
        flex: 1;
        width: auto;
        height: 44px;
        font-size: 1rem;
        min-width: 20px;
    }
    
    /* --- OTHER MOBILE IMPROVEMENTS --- */
    nav {
        gap: 1.5rem;
        padding: 1rem;
    }
    nav a {
        font-size: 1rem;
    }

    .dynamic-timeline::after {
        left: 20px;
    }
    .timeline-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 10px;
        text-align: left !important;
    }
    .timeline-item.left, .timeline-item.right {
        left: 0;
    }
    .timeline-item .timeline-icon {
        left: 0 !important;
    }
}