/* ============================================
   RESPONSIVE DESIGN
   Breakpoints :
   - Desktop Large : > 1200px
   - Desktop : 992px - 1199px
   - Tablet : 768px - 991px
   - Mobile Large : 576px - 767px
   - Mobile : < 576px
   ============================================ */

/* ===== DESKTOP LARGE (> 1400px) ===== */
@media screen and (min-width: 1400px) {
    :root {
        --container-max: 1320px;
    }
    
    .hero__title {
        font-size: 5rem;
    }
}

/* ===== DESKTOP (992px - 1199px) ===== */
@media screen and (max-width: 1199px) {
    :root {
        --container-max: 960px;
    }
    
    .hero__title {
        font-size: var(--text-5xl);
    }
    
    .section__title {
        font-size: var(--text-3xl);
    }
    
    .about-preview__grid,
    .about-company__grid,
    .about-nelson__grid {
        gap: var(--spacing-xl);
    }
}

/* ===== TABLET (768px - 991px) ===== */
@media screen and (max-width: 991px) {
    :root {
        --container-max: 720px;
        --container-padding: 1.25rem;
    }
    
    html {
        font-size: 15px;
    }
    
    /* Navigation Mobile */
    .nav__toggle {
        display: flex;
    }
    
    .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background-color: var(--bg-primary);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-2xl);
        transition: right var(--transition-smooth);
        box-shadow: var(--shadow-xl);
    }
    
    .nav__menu.active {
        right: 0;
    }
    
    .nav__list {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xl);
    }
    
    .nav__link {
        font-size: var(--text-lg);
    }
    
    .theme-toggle {
        position: absolute;
        bottom: var(--spacing-2xl);
    }
    
    /* Hero */
    .hero__title {
        font-size: var(--text-4xl);
    }
    
    /* Sections */
    .section {
        padding: var(--spacing-2xl) 0;
    }
    
    .about-preview__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .about-preview__image .image-wrapper {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .about-preview__content {
        text-align: center;
    }
    
    .portfolio-preview__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .services-preview__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .service-card {
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* About Page */
    .about-company__grid,
    .about-nelson__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .about-company__image .image-wrapper,
    .about-nelson__image .image-wrapper--portrait {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .about-nelson__grid {
        flex-direction: column-reverse;
    }
    
    .about-nelson__image {
        order: -1;
    }
    
    /* Gallery */
    .gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Services Detail */
    .service-detail__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .service-detail__preview {
        order: -1;
        max-width: 500px;
    }
    
    /* Contact */
    .contact__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    
    .footer__brand {
        grid-column: 1 / -1;
        text-align: center;
    }
    
    .footer__description {
        max-width: 100%;
    }
    
    .footer__social {
        justify-content: center;
    }
    
    /* Lightbox */
    .lightbox__prev {
        left: 10px;
    }
    
    .lightbox__next {
        right: 10px;
    }
}

/* ===== MOBILE LARGE (576px - 767px) ===== */
@media screen and (max-width: 767px) {
    html {
        font-size: 14px;
    }
    
    .hero__title {
        font-size: var(--text-3xl);
    }
    
    .hero__buttons {
        flex-direction: column;
    }
    
    .section__title {
        font-size: var(--text-2xl);
    }
    
    .page-hero__title {
        font-size: var(--text-3xl);
    }
    
    .portfolio-preview__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .portfolio-card {
        aspect-ratio: 16/9;
    }
    
    /* Gallery */
    .gallery__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }
    
    .gallery__filters {
        gap: var(--spacing-xs);
    }
    
    .filter-btn {
        font-size: var(--text-xs);
        padding: 0.5rem 1rem;
    }
    
    /* Service Detail */
    .service-detail__list {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer__nav ul,
    .footer__contact ul {
        align-items: center;
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .cta__title {
        font-size: var(--text-3xl);
    }
}

/* ===== MOBILE (< 576px) ===== */
@media screen and (max-width: 575px) {
    :root {
        --container-padding: 1rem;
    }
    
    .hero {
        min-height: 100vh;
        height: auto;
        padding: 120px 0 60px;
    }
    
    .hero__title {
        font-size: var(--text-2xl);
    }
    
    .hero__subtitle {
        font-size: var(--text-sm);
    }
    
    .section__title {
        font-size: var(--text-xl);
    }
    
    .page-hero__title {
        font-size: var(--text-2xl);
    }
    
    /* Gallery */
    .gallery__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .gallery__filters {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Lightbox */
    .lightbox__prev,
    .lightbox__next {
        width: 36px;
        height: 36px;
        font-size: var(--text-sm);
    }
    
    .lightbox__prev {
        left: 5px;
    }
    
    .lightbox__next {
        right: 5px;
    }
    
    .lightbox__media iframe {
        width: 95vw;
        height: 40vh;
    }
    
    /* Contact */
    .social-link span {
        font-size: var(--text-xs);
    }
    
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: var(--text-sm);
    }
}