/* Mobile First Breakpoints */
:root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

@media (max-width: 960px) {
    main {
        
    }

    nav:not(.mobile-nav) {
        /* cut off the majority of the right side of .nav-logo */
        .nav-logo {
            max-width: 30px;
            object-fit: cover;
            /* adjust the image position so it starts from the left */
            object-position: 0 0;
        }

        .socials {
            display: none !important;
        }
    }

    .footer-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;

        > :first-child {
            grid-column: span 2;
        }
    }
}

/* under 600px, make the gallery just a flex */

@media (max-width: 768px) {
    .hero {
        .hero-logo {
            max-width: 280px;
            top: 25%;
        }
    }

    .feature {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        margin: 0rem;
        gap: 1rem;

        .feature-media {
            max-width: 100%;
            width: 100%;

            max-height: 200px;
            height: 200px;

            img {
                max-width: 100%;
                max-height: 200px;
            }
        }

        &.shifted {
            flex-direction: column;
        }
    }

    .features-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .requirements {
        li {
            border-radius: calc(var(--rounded-md) / 2);
        }
    }

    .further-actions {
        flex-direction: column;

        a {
            display: flex;
            justify-content: center;
            width: 100%;
            text-align: center;
        }
    }

    .menu-toggle {
        display: block !important;
        z-index: 100;
    }

    nav {
        ul {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 100vh;
            background: var(--background);
            flex-direction: column;
            padding: 4rem 1rem 1rem;
            text-align: center;
            z-index: 90;
        }

        &.open ul {
            display: flex;
            transform: translateX(0%);

            .active {
                border-bottom: none;
            }
        }
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        padding: var(--space-sm);
        gap: var(--space-sm);
        margin: 0;
        box-sizing: border-box;

        .gallery-item {
            outline: var(--space-sm) solid var(--background);

            &:hover {
                transform: scale(1);
            }
        }
    }

    .image-viewer {
        img {
            max-width: 95%;
            max-height: 95vh;
        }
    }

    .mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--background-1);
        z-index: 100;
        padding: var(--space-sm);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

        width: 100vw;
        box-sizing: border-box;
    }

    .nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        a {
            display: flex;
            align-items: center;
        }
    }

    #nav-list {
        display: flex;
        flex-direction: column;
        padding: var(--space-md);
        background: var(--background-1);
        transition: transform 0.3s ease-in-out;
        position: fixed;
        top: 58px;
        left: 0;
        right: 0;
        height: calc(100vh - 58px);

        transform: none;
    }

    #nav-list.collapsed {
        transform: translateY(-100vh);
    }

    #nav-list li {
        margin: var(--space-sm) 0;
    }

    #nav-list a {
        display: block;
        padding: var(--space-md);
        text-align: center;
        font-size: 1.2rem;
        border-radius: var(--rounded-md);
    }

    #nav-list a.active {
        background: var(--primary);
        color: var(--text-light);
    }

    .menu-toggle {
        display: block;
        background: none;
        border: none;
        padding: var(--space-sm);
        cursor: pointer;
    }

    .menu-toggle svg {
        width: 24px;
        height: 24px;
        fill: var(--text-primary);
    }

    /* Adjust main content for fixed nav */
    main {
        padding-top: 60px;
    }

    
    .download-tiers {
        /* 2x2 grid */
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem 1rem;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .gallery-item {
        width: 100%;
    }
    .download-tiers {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .most-popular {
            margin-top: 2rem;
        }
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        margin: 0 var(--space-xs);
    }
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .hero {
        .hero-logo {
            max-width: 320px;
            top: 15%;
        }
    }

    .feature {
        flex-direction: row;
        max-width: 90%;

        &.shifted {
            flex-direction: row-reverse;
        }

        .feature-media {
            max-width: 33%;
        }
    }

    .further-actions {
        flex-direction: row;
    }

    .menu-toggle {
        display: none !important;
    }

    nav {
        ul {
            display: flex;
            flex-direction: row;
            background: none;
            padding: 0;
            height: auto;
            z-index: 1;
        }
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .hero {
        .hero-logo {
            max-width: 400px;
        }
    }
}

/* Large Desktop (1280px and up) */
@media (min-width: 1280px) {
    .feature {
        max-width: 80%;
    }
}