/* =========================================
   TABLET (Max Width 1024px)
========================================= */
@media (max-width: 1024px) {
    :root {
        --section-spacing: 80px;
    }

    .grid-2 {
        gap: 2rem;
    }

    .hero-visual {
        height: 60vh;
    }

    .portfolio-grid {
        display: flex;
        flex-direction: column;
    }

    .portfolio-item {
        height: 400px !important;
        width: 100%;
    }

    .nav-links {
        gap: 2rem;
    }
}

/* =========================================
   MOBILE (Max Width 768px)
========================================= */
@media (max-width: 768px) {
    :root {
        --section-spacing: 60px;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* Header & Nav */
    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: rgba(11, 15, 20, 0.98);
        backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 100;
    }

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

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .nav-links a {
        font-size: 1.5rem;
        font-family: var(--font-heading);
    }

    .nav-menu .btn {
        display: block;
    }

    .header-cta {
        display: none; /* Hide desktop CTA */
    }

    /* Hero */
    .hero {
        padding-top: 140px;
        flex-direction: column;
    }

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

    .hero-content {
        padding-right: 0;
        text-align: center;
    }

    .hero-content p {
        margin: 0 auto 1.5rem;
    }

    .hero-actions {
        justify-content: center;
        flex-direction: column;
    }

    .hero-visual {
        height: 50vh;
        border-radius: var(--radius-img);
    }

    .hero-visual::after {
        background: linear-gradient(to top, var(--bg-base) 0%, transparent 30%);
    }

    /* Contact */
    .contact-container {
        padding: 2rem;
    }

    /* Footer */
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}