/* Tablet: 768px and below */
@media (max-width: 768px) {
    .nav__menu,
    .nav__right {
        display: none;
    }

    .nav__hamburger {
        display: flex;
    }

    .portfolio__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--grid-gap) * 0.75);
    }

    .project-detail__grid {
        gap: calc(var(--grid-gap) * 0.75);
    }

    .carousel__slide {
        height: 70vh;
    }

    .site-banner__img {
        height: clamp(160px, 26vw, 260px);
    }

    .contact__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer__content {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .section-title {
        font-size: var(--font-size-xl);
    }

    .modal__content {
        width: 95vw;
    }

    .modal__close {
        top: -36px;
        right: -4px;
    }

    .modal__title {
        font-size: var(--font-size-lg);
    }

    .carousel__prev,
    .carousel__next {
        width: 36px;
        height: 36px;
    }

    .carousel__prev { left: 8px; }
    .carousel__next { right: 8px; }

    .carousel__prev svg,
    .carousel__next svg {
        width: 18px;
        height: 18px;
    }
}

/* Mobile: 480px and below */
@media (max-width: 480px) {
    .portfolio__grid,
    .project-detail__grid {
        grid-template-columns: 1fr;
    }

    .portfolio__filters {
        gap: var(--space-xs);
    }

    .portfolio__filter {
        font-size: 0.75rem;
        padding: var(--space-xs) calc(var(--space-sm) * 0.75);
    }

    .contact__submit {
        width: 100%;
        text-align: center;
    }
}

/* Large screens: 1440px+ */
@media (min-width: 1440px) {
    :root {
        --max-width: 1400px;
    }

    .portfolio__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}