/* ==========================================================================
   Shree Morvinandan Ceramic (SMC) — Enhanced Responsive Stylesheet
   Strategy: Desktop-First with progressive mobile enhancements
   ========================================================================== */

/* Global Protective Resets */
html, body { overflow-x: hidden; width: 100%; }

p, h1, h2, h3, h4, h5, h6, a, span, .btn {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

img, iframe, video {
    max-width: 100%;
    object-fit: cover;
}

button, .btn, .nav-link, .fab-btn, .social-icon {
    min-height: 44px;
    min-width: 44px;
}

/* ==========================================================================
   1. Large Desktop — ≤ 1400px
   ========================================================================== */
@media (max-width: 1400px) {
    .container { padding: 0 40px; }
}

/* ==========================================================================
   2. Desktop — ≤ 1200px
   ========================================================================== */
@media (max-width: 1200px) {
    .container { padding: 0 28px; }

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

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
        gap: 2.5rem;
    }

    .gallery-masonry { grid-template-columns: repeat(3, 1fr); }

    .gallery-page-section .gallery-masonry { grid-template-columns: repeat(3, 1fr); }

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

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

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

/* ==========================================================================
   3. Laptop — ≤ 992px
   ========================================================================== */
@media (max-width: 992px) {
    :root {
        --section-padding: 80px;
        --header-height: 70px;
    }

    .hero-headline { font-size: clamp(2.5rem, 5vw, 3.8rem); }
    .section-title { font-size: clamp(2rem, 4vw, 2.8rem); }

    .layout-split {
        gap: 3rem;
    }

    /* Footer: 2 columns on laptop */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
        padding: 4rem 0 3rem;
    }

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

    /* Features: 2-col */
    .features-grid { grid-template-columns: repeat(2, 1fr); }

    /* Brands grid: 4 col still works */
    .brands-grid { grid-template-columns: repeat(4, 1fr); }

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

    /* Counter: 2-col */
    .counter-section .features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   4. Tablet — ≤ 768px
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --section-padding: 64px;
        --header-height: 66px;
    }

    /* ─── Header & Navigation ─── */
    .header-actions .cta-call { display: none; }

    .mobile-menu-toggle {
        display: flex !important;
        background: rgba(255,255,255,0.1);
    }

    .header.scrolled .mobile-menu-toggle {
        background: rgba(0,0,0,0.06);
    }

    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: -100%;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background: rgba(8, 8, 8, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 3rem 2.5rem;
        transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        z-index: 1000;
        border-top: 1px solid rgba(255,255,255,0.06);
    }

    .main-nav.active { left: 0; }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        width: 100%;
    }

    .nav-link {
        font-size: 1.5rem;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 500;
        letter-spacing: 0;
        color: rgba(255,255,255,0.8);
        padding: 0.85rem 0;
        display: block;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        text-transform: none;
    }

    .nav-link:hover, .nav-link.active { color: var(--luxury-gold-light); }

    .nav-link::after { display: none; }

    /* ─── Hero ─── */
    .hero-section {
        min-height: 90vh;
        padding-bottom: 5rem;
        align-items: center;
    }

    .hero-section::before {
        background:
            linear-gradient(rgba(8,8,8,0.65) 0%, rgba(8,8,8,0.75) 100%);
    }

    .hero-content { text-align: center; max-width: 100%; }
    .hero-tagline { display: inline-block; }
    .hero-subheadline { margin: 0 auto 2rem; }
    .hero-buttons { justify-content: center; }

    .page-hero { min-height: 44vh; }

    /* ─── Layout Splits ─── */
    .layout-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Keep natural order for left/right columns */
    .about-image-wrapper { order: -1; }
    .reveal-left, .reveal-right { transform: translateY(20px); }

    /* ─── Product Grid ─── */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

    /* ─── Brands ─── */
    .brands-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }

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

    .gallery-page-section .gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
    }

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

    /* ─── Testimonials ─── */
    .testimonial-card { min-width: 290px; padding: 2rem 1.8rem; }

    /* ─── Footer ─── */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        padding: 4rem 0 3rem;
    }
    .footer-about { grid-column: span 2; }

    /* ─── Counter ─── */
    .counter-section .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    /* ─── Features ─── */
    .features-grid { grid-template-columns: repeat(2, 1fr); }

    /* ─── Contact quick cards ─── */
    .quick-contact .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ─── CTA Buttons ─── */
    .cta-button-group {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .cta-button-group .btn { width: 100%; max-width: 360px; }

    /* ─── About actions ─── */
    .about-actions { flex-direction: column; }
    .about-actions .btn { width: 100%; text-align: center; justify-content: center; }

    /* ─── Contact actions ─── */
    .contact-actions { flex-direction: column; }
    .contact-actions .btn { width: 100%; text-align: center; justify-content: center; }

    /* ─── Hero buttons ─── */
    .hero-buttons { flex-direction: column; width: 100%; align-items: center; gap: 0.85rem; }
    .hero-buttons .btn { width: 100%; max-width: 340px; }

    /* ─── Serve section ─── */
    .serve-section .features-grid { grid-template-columns: 1fr !important; }

    /* ─── Interactive contact 3-col → 1-col ─── */
    .interactive-contact .features-grid { grid-template-columns: 1fr !important; }

    /* ─── Map ─── */
    .map-container iframe { height: 320px !important; }

    /* ─── Support section grid ─── */
    .support-section .layout-split {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* ─── Table ─── */
    .table-responsive { overflow-x: auto; }
    .brand-table td, .brand-table th { padding: 1rem; font-size: 0.85rem; }
}

/* ==========================================================================
   5. Large Mobile — ≤ 576px
   ========================================================================== */
@media (max-width: 576px) {
    :root { --section-padding: 54px; }

    /* ─── Typography ─── */
    .hero-headline { font-size: 2.2rem; line-height: 1.1; }
    .section-title { font-size: 1.85rem; }
    .hero-subheadline { font-size: 0.95rem; line-height: 1.65; }
    .cta-headline { font-size: 1.9rem; }
    .lead-text { font-size: 1.05rem; }

    .container { padding: 0 18px; }

    .section-header .section-title::after { margin: 0.8rem auto 0; }

    /* ─── Scroll indicator ─── */
    .scroll-indicator { display: none; }

    /* ─── Feature grid → single col ─── */
    .features-grid { grid-template-columns: 1fr; }

    /* ─── Feature cards: reduce padding ─── */
    .feature-card { padding: 1.75rem 1.5rem; }

    /* ─── Products → single col ─── */
    .products-grid { grid-template-columns: 1fr; }

    /* ─── Brands → 2-col ─── */
    .brands-grid { grid-template-columns: repeat(2, 1fr); }

    /* ─── Gallery → single col ─── */
    .gallery-masonry { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .gallery-page-section .gallery-masonry { grid-template-columns: 1fr; grid-auto-rows: 260px; }

    /* ─── Testimonials ─── */
    .testimonial-card { min-width: min(85vw, 300px); }

    /* ─── FAQ ─── */
    .faq-question { padding: 1.2rem 1.4rem; font-size: 0.93rem; }
    .faq-answer { padding: 0 1.4rem 1.3rem; }

    /* ─── Contact quick cards → single col ─── */
    .quick-contact .features-grid { grid-template-columns: 1fr !important; }

    /* ─── Section padding inside cards ─── */
    .p-xl { padding: 2rem 1.5rem; }
    .p-md { padding: 1.5rem; }

    /* ─── Footer → single col ─── */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2.5rem;
        padding: 3.5rem 0 2.5rem;
    }
    .footer-about { grid-column: span 1; }
    .widget-title { text-align: center; }
    .social-links { justify-content: center; }
    .footer-address { text-align: center; }
    .footer-contact-details { text-align: center; }

    /* ─── Process steps ─── */
    .process-step { padding: 1.5rem 1rem; }

    /* ─── Counter → 2-col ─── */
    .counter-section .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    .counter-number { font-size: 2.5rem !important; }

    /* ─── CTA buttons full width ─── */
    .cta-button-group .btn { max-width: 100%; }

    /* ─── Brand cards ─── */
    .brand-card { padding: 1.5rem 1rem; }

    /* ─── Hero section tweaks ─── */
    .hero-section { padding-bottom: 4rem; min-height: 88vh; }
    .page-hero { min-height: 38vh; padding-top: var(--header-height); }

    /* ─── Section CTA block ─── */
    .section-cta { padding-top: 2rem; margin-top: 2.5rem; }
    .section-cta .btn { width: 100%; }

    /* ─── Hero & CTA button groups ─── */
    .hero-buttons .btn,
    .about-actions .btn,
    .contact-actions .btn { padding: 0.9rem 1.6rem; font-size: 0.82rem; }

    /* ─── FAB ─── */
    .fab-container { bottom: 1.5rem; right: 1.5rem; }
    .fab-btn { width: 50px; height: 50px; }
    .fab-icon { width: 24px; height: 24px; }

    /* ─── Back to top ─── */
    #backToTop { right: 1.5rem; }

    /* ─── Filter buttons ─── */
    .filter-container { gap: 0.4rem; }
    .filter-btn { font-size: 0.7rem; padding: 0.4rem 1rem; }

    /* ─── Table ─── */
    .brand-table { min-width: 560px; }

    /* ─── Map ─── */
    .map-container { border-radius: 8px; }
    .map-container iframe { height: 260px !important; }

    /* ─── Layout split image wrapper ─── */
    .about-image-wrapper { border-radius: 12px; }
    .about-image { min-height: 280px; }

    /* ─── Counter section text ─── */
    .counter-text { font-size: 0.8rem !important; }

    /* ─── Breadcrumb ─── */
    .breadcrumb { font-size: 0.75rem; }

    /* ─── Badge ─── */
    .badge { font-size: 0.65rem; }

    /* ─── Lead text on hero ─── */
    .hero-section .lead-text { font-size: 1rem; }

    /* ─── Section title underline ─── */
    .section-header .section-title::after { width: 40px; }

    /* ─── Wider footer list links ─── */
    .footer-list { align-items: center; }
}

/* ==========================================================================
   6. Small Mobile — ≤ 375px
   ========================================================================== */
@media (max-width: 375px) {
    :root { --section-padding: 44px; }

    .container { padding: 0 14px; }

    .hero-headline { font-size: 1.85rem; }
    .section-title { font-size: 1.6rem; }
    .cta-headline { font-size: 1.7rem; }

    /* ─── Brands → single col ─── */
    .brands-grid { grid-template-columns: 1fr; }

    /* ─── Counter → single col ─── */
    .counter-section .features-grid { grid-template-columns: 1fr !important; }

    /* ─── Nav menu ─── */
    .nav-link { font-size: 1.3rem; }

    /* ─── Hero buttons ─── */
    .hero-buttons .btn { padding: 0.85rem 1.4rem; font-size: 0.8rem; }

    /* ─── Feature cards ─── */
    .feature-card { padding: 1.5rem 1.2rem; }

    /* ─── Products ─── */
    .product-card .product-content { padding: 1.25rem; }

    /* ─── Testimonial card ─── */
    .testimonial-card { min-width: 88vw; padding: 1.6rem 1.4rem; }
    .testimonial-card::before { font-size: 3.5rem; }

    /* ─── FAQ ─── */
    .faq-question { padding: 1rem 1.1rem; font-size: 0.875rem; }
    .faq-answer { padding: 0 1.1rem 1.1rem; font-size: 0.875rem; }

    /* ─── Footer ─── */
    .footer-list { gap: 0.5rem; }

    /* ─── Buttons ─── */
    .btn { font-size: 0.78rem; padding: 0.75rem 1.4rem; }
    .btn-large { padding: 0.9rem 1.8rem; font-size: 0.82rem; }

    /* ─── Section padding in cards ─── */
    .p-xl { padding: 1.5rem 1.2rem; }
    .p-md { padding: 1.2rem; }
}

/* ==========================================================================
   7. Touch Device Optimizations
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover transforms on touch to prevent sticky states */
    .product-card:hover { transform: none; box-shadow: var(--shadow-sm); }
    .feature-card:hover { transform: none; box-shadow: none; }
    .brand-card:hover { transform: none; }
    .gallery-item:hover img { transform: none; }
    .btn:hover { transform: none; }

    /* Show gallery captions always on touch */
    .gallery-item figcaption { transform: none; opacity: 1; }
}

/* ==========================================================================
   8. Print Styles
   ========================================================================== */
@media print {
    .header,
    .fab-container,
    #backToTop,
    #scrollProgress { display: none !important; }

    body { font-size: 12pt; }
    .section-padding { padding: 2rem 0; }
    .hero-section { min-height: auto; padding: 2rem 0; }
}

/* ==========================================================================
   9. 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-image { animation: none; }
    .scroll-arrow { animation: none; }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-up,
    .stagger-item {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   10. Focus / Accessibility Visible Focus
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--luxury-gold);
    outline-offset: 3px;
    border-radius: 3px;
}

.btn:focus-visible {
    outline: 2px solid var(--luxury-gold);
    outline-offset: 3px;
}