/* ==========================================================
   mobile-fixes.css  — Applied to ALL pages
   Mobile-first responsive overrides targeting common layout issues
   Breakpoints: 1024px (tablet), 768px (small tablet), 480px (mobile)
   ========================================================== */

/* ── Header / Navigation ─────────────────────────────────── */
@media (max-width: 768px) {
    .header-container {
        padding: 0.75rem 1rem;
        position: relative;
    }

    .logo {
        font-size: 1.1rem;
    }

    .hamburger {
        display: flex !important;
        z-index: 1001;
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        padding: 4.5rem 1.5rem 2rem;
        transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
        overflow-y: auto;
        z-index: 999;
    }

    .nav.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
    }

    .nav-item {
        border-bottom: 1px solid #f0f0f0;
    }

    .nav-link {
        display: block;
        padding: 0.85rem 0;
        font-size: 1rem;
    }

    /* Mega menu: convert to simple dropdown on mobile */
    .mega-menu {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 0 0.5rem 1rem;
        max-height: 0;
        overflow: hidden;
        display: none;
    }

    .has-dropdown:hover .mega-menu,
    .has-dropdown.active .mega-menu {
        display: block;
        max-height: none;
    }

    .mega-menu-grid {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    .mega-menu-item {
        padding: 0.5rem 0;
        border: none;
    }

    .mega-menu-icon { display: none; }
}

/* ── Hero Slider ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero,
    .hero-slider-container {
        min-height: 420px;
    }

    .slide-content {
        padding: 1rem !important;
    }

    .slide-title {
        font-size: clamp(1.3rem, 5vw, 2rem) !important;
    }

    .slide-description {
        font-size: 0.9rem !important;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .slide-cta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .slide-btn {
        font-size: 0.85rem !important;
        padding: 0.6rem 1.2rem !important;
    }

    .slider-arrow {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.2rem !important;
    }
}

/* ── Grid Layouts ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr !important;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Statistics section ───────────────────────────────────── */
@media (max-width: 600px) {
    .stats .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }

    .stat-number {
        font-size: 2rem !important;
    }
}

/* ── Products Page ────────────────────────────────────────── */
@media (max-width: 900px) {
    .products-layout {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        padding: 1rem !important;
    }

    .category-sidebar {
        position: static !important;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5rem;
        padding: 1rem !important;
    }

    .sidebar-title {
        grid-column: 1 / -1;
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .category-group { margin: 0; }

    .category-btn {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.85rem !important;
        gap: 0.4rem !important;
    }
}

@media (max-width: 600px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .product-name { font-size: 0.9rem !important; }
    .order-material-btn { font-size: 0.8rem !important; padding: 0.4rem 0.7rem !important; }
}

@media (max-width: 400px) {
    .products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Product Detail on Mobile */
@media (max-width: 768px) {
    .product-detail-content {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 4.5rem 0 6rem !important;
    }

    .product-gallery { position: static !important; }

    .product-title { font-size: 1.3rem !important; }

    .product-price { font-size: 1.8rem !important; }

    .action-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .back-button {
        top: 70px !important;
        left: 1rem !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem;
    }

    .mobile-bottom-bar {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 900;
        background: #fff;
        padding: 0.75rem 1rem;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
        gap: 0.75rem;
    }

    .mobile-btn { flex: 1; padding: 0.75rem !important; font-size: 0.9rem; }
}

/* ── Blog Page ────────────────────────────────────────────── */
@media (max-width: 600px) {
    .blog-title {
        font-size: 1.1rem !important;
    }

    .blog-excerpt {
        font-size: 0.9rem;
    }

    .blog-badge {
        font-size: 0.7rem;
    }

    .blog-header {
        padding: 1rem !important;
    }
}

/* ── Service / Epoxy / PU detail pages ───────────────────── */
@media (max-width: 768px) {
    .service-detail-grid,
    .detail-grid,
    .content-grid {
        grid-template-columns: 1fr !important;
    }

    .section-title {
        font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
    }

    .lead {
        font-size: 1rem !important;
    }
}

/* ── Footer ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem;
    }

    .footer-grid > div:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Cards and Testimonials ───────────────────────────────── */
@media (max-width: 768px) {
    .card { margin-bottom: 1rem; }
    .card-img { height: 180px !important; object-fit: cover; }
    .card-content { padding: 1rem !important; }
    .card-actions { flex-wrap: wrap; gap: 0.5rem; }
    .card-actions .btn { flex: 1; min-width: 120px; text-align: center; }
}

/* ── Checkout / Forms ─────────────────────────────────────── */
@media (max-width: 768px) {
    .checkout-grid,
    .form-row {
        grid-template-columns: 1fr !important;
    }
}

/* ── General Utility Overrides for Mobile ─────────────────── */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .section {
        padding: 2.5rem 0 !important;
    }

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

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

    /* Prevent horizontal overflow on all pages */
    body { overflow-x: hidden; }
    * { max-width: 100%; }
    img { max-width: 100%; height: auto; }
}

/* ── About / Industries / FAQs Page Cards/Grids ──────────── */
@media (max-width: 768px) {
    .industries-grid,
    .about-grid,
    .team-grid,
    .faq-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
}

/* ── Mobile-Call-Bar spacing fix ─────────────────────────── */
@media (max-width: 768px) {
    /* Ensure bottom content not hidden behind mobile call bar */
    main { padding-bottom: 70px; }
}