/* css/responsive.css */

/* --- Tablet Styles --- */
@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
    .portfolio-showcase {
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }
    .portfolio-left, .project-list {
        flex-basis: auto;
        width: 100%;
        max-width: 600px;
    }
}


/* --- Mobile Styles --- */
@media (max-width: 768px) {
    section, header {
        padding: 4rem 0;
    }

    .container {
        padding: 0 1.5rem;
    }
    
    .hero-content .profile-image {
        width: 150px;
        height: 150px;
    }

    /* --- ABOUT SECTION MOBILE LAYOUT --- */
    .about-content {
        display: grid;
        grid-template-columns: 1fr; /* Set to a single column */
        /* Define the vertical stacking order */
        grid-template-areas: 
            "header"
            "image"
            "text";
        text-align: center;
        gap: 2rem; /* Add space between the stacked items */
    }
    .about-header { 
        display: block; /* Show the mobile-specific header */
        grid-area: header;
    }
    .about-image {
        grid-area: image;
    }
    .about-text { 
        grid-area: text;
        text-align: left; /* Keep text left-aligned for readability */
    }
    .desktop-only-h2 {
        display: none; /* Hide the desktop-specific header on mobile */
    }

    /* --- PORTFOLIO SECTION MOBILE LAYOUT --- */
    .portfolio-showcase {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .portfolio-left { order: 1; }
    .project-info { 
        order: 2;
        text-align: center;
    }
    .project-list { 
        order: 3;
        flex-direction: column;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 1rem;
    }
    .project-list-item {
        flex-shrink: 0;
        min-width: 200px;
    }
}