/* ============================================
   RESPONSIVE.CSS — All Media Queries
   ============================================ */

/* ---- Tablet (max 1024px) ---- */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-card,
    .project-card:nth-child(even) {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .project-img-panel {
        min-height: 300px;
    }

    .phone-mockup { width: 150px; }

    /* FIX: default project-info padding (3rem 2.5rem) felt heavy once
       cards go single-column at this breakpoint but before the 768px
       mobile tightening kicks in. */
    .project-info {
        padding: 2.25rem 2rem;
    }

    .project-number {
        font-size: 2.75rem;
        top: 1.25rem;
        right: 1.5rem;
    }
}

/* ---- Tablet (max 900px) ---- */
@media (max-width: 900px) {
    .container,
    .section {
        padding: 60px 1.5rem;
    }

    .about-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    .resume-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .resume-paper { padding: 1.5rem; }

    .resume-contact {
        flex-direction: column;
        gap: 0.5rem;
    }

    .main-image-frame { height: 380px; }
}

/* ---- Mobile (max 768px) ---- */
@media (max-width: 768px) {
    /* Header */
    .hamburger { display: flex; }

    .nav-links {
        position: fixed;
        top: var(--header-height);
        right: -100%;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: var(--card-bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        transition: right 0.3s ease;
        border-top: 1px solid var(--border-color);
    }

    .nav-links.active { right: 0; }

    /* Hero */
    .name { font-size: 2.8rem; }
    .title { font-size: 1.4rem; }

    .hero-btns {
        flex-direction: column;
        align-items: center;
    }

    /* Section titles */
    .section-title { font-size: 2rem; }

    /* Projects */
    .project-info {
        padding: 2rem 1.5rem;
    }

    .project-info h3 { font-size: 1.5rem; }

    .project-img-panel { min-height: 260px; padding: 1.5rem; }

    .phone-mockup { width: 130px; }

    .phone-mockup.secondary { display: none; }

    .project-number { display: none; }

    .project-platform { max-width: 100%; }

    /* Blog */
    .blog-grid { grid-template-columns: 1fr; }

    /* Stats */
    .stats { gap: 1.5rem; }

    /* Project detail page main image frame */
    .main-image-frame { height: 300px; }
}

/* ---- Small Mobile (max 480px) ---- */
@media (max-width: 480px) {
    .name { font-size: 2.2rem; }

    .section { padding: 50px 1rem; }

    .contact-form { padding: 1.5rem; }

    .project-cta { flex-direction: column; align-items: flex-start; }

    .browser-mockup { max-width: 100%; }

    .main-image-frame { height: 240px; }

    .gallery-preview img { height: 60px; }
}