/* ========================================
   MAHALAXMI AGARBATTI - Responsive Styles
   Mobile-First Breakpoints
   ======================================== */

/* ========== MOBILE (Base - up to 639px) ========== */

/* Mobile Navbar */
@media (max-width: 1023px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: rgba(26, 10, 0, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 5rem 2rem 2rem;
        gap: 0.5rem;
        transition: right 0.3s ease;
        z-index: 1000;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
        width: 100%;
    }

    .nav-cta-mobile {
        display: block;
        margin-top: 1rem;
        width: 100%;
    }

    .nav-cta-mobile .btn {
        width: 100%;
    }

    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .nav-overlay.active {
        display: block;
    }
}

@media (max-width: 639px) {
    /* Hero Mobile */
    .hero h1 {
        font-size: 2rem;
    }

    .hero-tagline {
        font-size: 1.05rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .hero-logo {
        max-width: 250px;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Section Headers Mobile */
    .section {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .section-subtitle {
        font-size: 0.95rem;
    }

    /* Quality Grid Mobile */
    .quality-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .quality-card {
        padding: 1.5rem 1.25rem;
    }

    /* CTA Banner Mobile */
    .cta-banner {
        padding: 3rem 0;
    }

    .cta-content h2 {
        font-size: 1.75rem;
    }

    .cta-content p {
        font-size: 0.95rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Gallery Mobile */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }

    .gallery-item-tall {
        grid-row: span 2;
    }

    .gallery-item-wide {
        grid-column: span 2;
    }

    /* Catalogue Mobile */
    .catalogue-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .catalogue-info h2 {
        font-size: 1.5rem;
    }

    .catalogue-form-wrapper {
        padding: 1.5rem;
    }

    /* Offers Mobile */
    .offers-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .offer-card {
        padding: 2rem 1.5rem;
    }

    .offer-card h3 {
        font-size: 1.25rem;
    }

    /* Contact Mobile */
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-form-wrapper {
        padding: 1.5rem;
    }

    /* Shop Photos Mobile */
    .shop-photos {
        grid-template-columns: 1fr;
    }

    .shop-photo img {
        height: 200px;
    }

    /* Social Mobile */
    .social-section {
        padding: 3rem 0;
    }

    .social-content h2 {
        font-size: 1.5rem;
    }

    .social-buttons {
        flex-direction: column;
        align-items: center;
    }

    .social-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    /* Footer Mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* Lightbox Mobile */
    .lightbox-prev,
    .lightbox-next {
        padding: 0.75rem;
        font-size: 1.2rem;
    }

    .lightbox-close {
        font-size: 2rem;
        top: 0.5rem;
        right: 1rem;
    }

    /* Floating WhatsApp Mobile */
    .floating-whatsapp {
        bottom: 16px;
        right: 16px;
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }

    /* Button Mobile */
    .btn-lg {
        padding: 0.85rem 1.75rem;
        font-size: 1rem;
    }
}

/* ========== TABLET (640px - 1023px) ========== */
@media (min-width: 640px) and (max-width: 1023px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-logo {
        max-width: 250px;
    }

    /* Quality Grid Tablet */
    .quality-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Gallery Tablet */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 200px;
    }

    /* Catalogue Tablet */
    .catalogue-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    /* Offers Tablet */
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact Tablet */
    .contact-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    /* Shop Photos Tablet */
    .shop-photos {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer Tablet */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-brand {
        grid-column: span 2;
    }
}

/* ========== DESKTOP (1024px+) ========== */
@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }

    .hero h1 {
        font-size: 3.25rem;
    }

    .hero-logo {
        max-width: 320px;
    }

    /* Quality Grid Desktop */
    .quality-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Gallery Desktop */
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 220px;
    }

    /* Catalogue Desktop */
    .catalogue-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    /* Offers Desktop */
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
        margin: 0 auto;
    }

    /* Contact Desktop */
    .contact-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

/* ========== LARGE DESKTOP (1280px+) ========== */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

    .section-header h2 {
        font-size: 2.5rem;
    }
}

/* ========== VERY SMALL SCREENS (320px) ========== */
@media (max-width: 359px) {
    .hero h1 {
        font-size: 1.75rem;
    }

    .hero-tagline {
        font-size: 0.95rem;
    }

    .section-header h2 {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }

    .gallery-item-tall,
    .gallery-item-wide {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    .navbar,
    .floating-whatsapp,
    .scroll-indicator,
    .smoke-container,
    .cta-banner,
    .social-section,
    .lightbox {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
        background: #fff;
        color: #000;
    }

    .hero-content {
        color: #000;
    }

    .section {
        padding: 2rem 0;
    }

    a {
        color: #000;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666;
    }
}