/* ============================================================
   Greelak Industries — Responsive Stylesheet
   Mobile-first breakpoints
   ============================================================ */

/* Large Desktop: 1280px+ — already handled in main */

/* Desktop: ≤ 1024px */
@media (max-width: 1024px) {
    :root {
        --section-pad-y: 64px;
    }

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

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

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

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

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

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

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

    .about-grid {
        gap: 40px;
    }

    .product-layout {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

/* Navbar mobile: ≤ 991px — switch to hamburger */
@media (max-width: 991px) {
    .navbar-menu {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    .mobile-overlay {
       /* display: block;*/
    }

    .navbar-actions .btn-primary {
        display: none;
    }

    .navbar-actions {
        gap: 0;
    }

    /* Logo slightly smaller on tablet */
    .navbar-logo img {
        height: 48px;
    }
}

/* Tablet: ≤ 768px */
@media (max-width: 768px) {
    :root {
        --section-pad-y: 60px;
        --header-height: 64px;
    }


    /* Hero */
    .hero {
        min-height: 85vh;
    }

    .hero-stats {
        gap: 24px;
    }

    .hero-stat-number {
        font-size: 1.6rem;
    }

    /* Grids → single or 2 col */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

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

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

    .about-image {
        order: -1;
    }

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

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

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

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

    /* Product Page */
    .product-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .product-gallery {
        position: static;
    }

    .product-enquiry-form {
        padding: 28px 20px;
    }

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .contact-form-box {
        padding: 28px 20px;
    }

    /* Form */
    .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

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

    .footer-bottom .container {
        justify-content: center;
        text-align: center;
    }

    /* Section header */
    .section-title {
        font-size: 1.6rem;
    }

    /* Page hero */
    .page-hero {
        padding: 52px 0 44px;
    }
}

/* Mobile Large: ≤ 600px */
@media (max-width: 600px) {
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

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

    .cta-actions .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* Mobile: ≤ 480px */
@media (max-width: 480px) {
    :root {
        --section-pad-y: 52px;
    }

    .container {
        padding: 0 16px;
    }

    /* Single column everything */
    .categories-grid {
        grid-template-columns: 1fr;
    }

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

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

    /* Reduce font sizes further */
    .section-title {
        font-size: 1.4rem;
    }

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

    /* Product card actions */
    .product-card-actions {
        flex-direction: column;
    }

    .product-card-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Product CTA */
    .product-cta {
        flex-direction: column;
    }

    .product-cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* Gallery thumbs */
    .gallery-thumb {
        width: 64px;
        height: 48px;
    }

    /* Sticky WhatsApp */
    .sticky-whatsapp {
        bottom: 20px;
        right: 16px;
        width: 52px;
        height: 52px;
    }

    /* Mobile menu */
    .mobile-menu {
        width: 100%;
    }

    /* Hero stats */
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        width: 100%;
    }

    /* Footer */
    .footer-top {
        padding: 48px 0 32px;
    }

    /* Page hero */
    .page-hero h1 {
        font-size: 1.6rem;
    }

    /* Warranty years */
    .warranty-years {
        font-size: 2.4rem;
    }
}

/* Extra small: ≤ 360px */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.6rem;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }

}

/* 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;
    }

    html {
        scroll-behavior: auto;
    }

    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Print */
@media print {

    .site-header,
    .sticky-whatsapp,
    .site-footer,
    .mobile-menu,
    .mobile-overlay,
    .hero-actions,
    .product-cta,
    .cta-section {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a {
        color: #000;
    }
}

/* ── Testimonials ── */
@media (max-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .trust-bar {
        flex-wrap: wrap;
    }

    .trust-item {
        flex: calc(50% - 1px);
    }

    .trust-divider {
        display: none;
    }
}

/* ── Sticky CTA bar (mobile) ── */
@media (max-width: 768px) {
    .sticky-cta-bar {
        display: flex;
    }

    /* Push content above the sticky bar so it's not hidden behind it */
    body {
        padding-bottom: 72px;
    }

    /* Sticky WhatsApp — move up above the CTA bar */
    .sticky-whatsapp {
        bottom: 84px;
    }
}

/* ── Blog grid ── */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ── Article layout ── */
@media (max-width: 1024px) {
    .article-layout {
        grid-template-columns: 1fr 280px;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        position: static;
    }

    .article-body h2 {
        font-size: 1.25rem;
    }

    .article-cta-block {
        padding: 20px;
    }

    .article-hero-meta {
        font-size: 0.82rem;
        gap: 6px;
    }
}