/* 
======================================================================
RESPONSIVE DESIGN SYSTEM
======================================================================
*/

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

    .grid-split {
        gap: 4rem;
    }

    .journal-item {
        grid-template-columns: 150px 1fr 200px;
        gap: 2rem;
    }

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

/* Tablet Portrait (Max 768px) */
@media (max-width: 768px) {
    /* Header & Nav */
    .mobile-toggle {
        display: block;
    }
    
    .nav-actions .btn {
        display: none; /* Hide button on small mobile header, keep clean */
    }

    .desktop-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--color-base);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-smooth);
        z-index: 100;
    }

    .desktop-nav.active {
        opacity: 1;
        visibility: visible;
    }

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

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

    /* Mobile Toggle Animation */
    .mobile-toggle.active .line:first-child {
        transform: translateY(9px) rotate(45deg);
    }
    .mobile-toggle.active .line:last-child {
        transform: translateY(-10px) rotate(-45deg);
    }

    /* Hero */
    .hero {
        padding-top: 120px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .hero-background {
        width: 100%;
        height: 60%;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-image-wrapper {
        height: 50vh;
    }

    /* General Grids */
    .grid-split,
    .exhibition-grid {
        grid-template-columns: 1fr;
    }

    .about-visual {
        order: 2;
    }

    .about-text {
        order: 1;
    }

    /* Journal */
    .journal-item {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .journal-item-title {
        font-size: 1.5rem;
    }

    .journal-item-img {
        aspect-ratio: 16/9;
    }

    /* Header text alignment */
    .section-header.flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    /* Contact */
    .contact-form {
        padding: 3rem 1.5rem;
    }
}

/* Mobile Portrait (Max 480px) */
@media (max-width: 480px) {
    :root {
        --section-spacing: 60px;
    }

    .hero-cta {
        flex-direction: column;
    }

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

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

    .legal-links a {
        margin: 0 0.5rem;
    }
}