/* ==========================================================================
   LUXIDER INDUSTRIES — RESPONSIVE MEDIA QUERIES & BREAKPOINTS
   Mobile-First & Fluid Responsive Design
   Tested for: 320px, 375px, 430px, 768px, 1024px, 1440px, 1920px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LAPTOPS & DESKTOPS (<= 1200px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .contact-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .editorial-grid {
        gap: 40px;
    }
}

/* --------------------------------------------------------------------------
   2. TABLETS & SMALL LAPTOPS (<= 992px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
    :root {
        --header-height: 75px;
        --topbar-height: 34px;
    }

    .nav-menu {
        display: none; /* Handled via mobile drawer */
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .top-bar-left span {
        display: none;
    }

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

    .editorial-grid.reverse {
        direction: ltr;
    }

    .editorial-media img {
        height: 380px;
    }

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

    .gallery-masonry {
        columns: 2 280px;
    }

    /* Modal layout */
    .modal-body {
        grid-template-columns: 1fr;
        padding: 30px 24px;
        gap: 24px;
    }

    .modal-main-image {
        height: 300px;
    }

    /* Process Timeline */
    .process-timeline::before {
        left: 20px;
    }

    .timeline-step {
        width: 100%;
        left: 0 !important;
        text-align: left !important;
        padding-left: 60px !important;
        padding-right: 0 !important;
    }

    .timeline-step:nth-child(odd) .timeline-dot,
    .timeline-step:nth-child(even) .timeline-dot {
        left: 8px;
        right: auto;
    }

    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }

    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
}

/* --------------------------------------------------------------------------
   3. MOBILE PHONES (<= 768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .section-py {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .section-py-sm {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .categories-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .category-card {
        height: 360px;
        padding: 24px 20px;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

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

    .contact-cards-grid {
        grid-template-columns: 1fr;
    }

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

    .filter-controls-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-dropdowns {
        flex-direction: column;
    }

    .filter-select {
        width: 100%;
    }

    .form-luxury-card {
        padding: 28px 20px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .product-card-actions {
        grid-template-columns: 1fr;
    }

    .floating-whatsapp {
        bottom: 20px;
        right: 20px;
        width: 52px;
        height: 52px;
    }

    .back-to-top {
        bottom: 84px;
        right: 23px;
        width: 40px;
        height: 40px;
    }

    .contact-map-wrapper {
        height: 320px;
    }
}

/* --------------------------------------------------------------------------
   4. COMPACT MOBILE (<= 480px / 430px / 375px / 320px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .top-bar-right .top-bar-email {
        display: none; /* Keep number and Instagram on very small screens */
    }

    .brand-logo-text {
        font-size: 1.55rem;
    }

    .brand-logo-sub {
        font-size: 0.52rem;
        letter-spacing: 0.28em;
    }

    .header-actions .btn {
        display: none; /* Hide top "Get A Quote" button in navbar on mobile, retain WhatsApp and drawer CTA */
    }

    .hero-cinematic {
        min-height: 92vh;
        padding-bottom: 60px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .editorial-media img {
        height: 280px;
    }

    .editorial-highlights {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-card-image {
        height: 260px;
    }

    .category-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .category-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .gallery-masonry {
        columns: 1;
    }
}

/* --------------------------------------------------------------------------
   5. WIDE SCREENS (>= 1440px & 1920px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

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

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

    .category-card {
        height: 480px;
    }
}

@media screen and (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }

    .hero-cinematic {
        min-height: 85vh;
    }

    .hero-title {
        font-size: 5.0rem;
    }
}

/* --------------------------------------------------------------------------
   6. ACCESSIBILITY & REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-bg-media img {
        animation: none;
    }

    .floating-whatsapp {
        animation: none;
    }

    .hero-scroll-indicator .scroll-line {
        animation: none;
    }
}