/* Responsive styles for the Watercolor Portfolio Website */

/* Mobile: < 768px */
@media (max-width: 767px) {
    .site-header-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    .site-brand {
        font-size: 1.2rem;
    }

    .site-nav {
        width: 100%;
    }

    .hero {
        font-size: 1.5em;
        padding: 20px;
    }

    .gallery-grid {
        column-count: 1;
    }

    .lightbox-nav {
        width: 2.4rem;
        height: 2.4rem;
    }

    .lightbox-prev {
        left: 0.5rem;
    }

    .lightbox-next {
        right: 0.5rem;
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .social-links {
        flex-wrap: wrap;
    }

    .archive-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Tablet: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero {
        font-size: 2em;
        padding: 40px;
    }

    .gallery-grid {
        column-count: 2;
    }

    .archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop: > 1024px */
@media (min-width: 1025px) {
    .hero {
        font-size: 2.5em;
        padding: 60px;
    }

    .gallery-grid {
        column-count: 3;
    }

    .archive-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Large Desktop: > 1440px */
@media (min-width: 1441px) {
    .gallery-grid {
        column-count: 4;
    }

    .archive-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}