﻿/* ============================================================
   Green Goold Herbs — Responsive Styles
   ============================================================ */

/* ===========================
   TABLET — max 1024px
   =========================== */
@media (max-width: 1024px) {
    :root {
        --section-pad: 72px;
        --nav-height: 72px;
    }

    /* Navigation */
    .nav-menu {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* Hero */
    .hero-stats {
        gap: 10px;
    }

    .hero-stat-card {
        padding: 12px 16px;
        min-width: 100px;
    }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-img-main {
        height: 420px;
    }

    .about-img-float {
        display: none;
    }

    .about-img-badge {
        right: 16px;
        bottom: -16px;
    }

    .about-pillars {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Categories */
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Products */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Why */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Certs */
    .certs-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Gallery */
    .gallery-grid {
        columns: 2;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    /* Products layout */
    .products-layout {
        grid-template-columns: 1fr;
    }

    .products-sidebar {
        position: static;
    }

    .products-full-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Product details */
    .product-details-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Quote */
    .quote-grid {
        grid-template-columns: 1fr;
    }

    /* Team */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Timeline */
    .timeline {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 16px;
    }

    .timeline-item {
        min-width: 120px;
    }

    /* Countries */
    .countries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Testimonials */
    .testimonial-slide {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================
   MOBILE LARGE — max 768px
   =========================== */
@media (max-width: 768px) {
    :root {
        --section-pad: 56px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .container, .container-sm {
        padding: 0 16px;
    }

    /* Top Bar */
    .top-bar {
        display: none;
    }

    .navbar.has-topbar {
        top: 0;
    }

    /* Hero */
    .hero {
        height: 100dvh;
        min-height: 600px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero h1 {
        font-size: clamp(1.7rem, 7vw, 2.6rem);
    }

    .hero p {
        font-size: 0.95rem;
    }

    .hero-actions {
        gap: 10px;
    }

    .hero-stats {
        gap: 8px;
    }

    .hero-stat-card {
        min-width: 90px;
        padding: 10px 12px;
    }

        .hero-stat-card .stat-value {
            font-size: 1.15rem;
        }

    .hero-dots {
        right: 16px;
        bottom: 20px;
    }

    /* Section header */
    .section-header {
        margin-bottom: 40px;
    }

    /* About */
    .about-grid {
        gap: 36px;
    }

    .about-img-main {
        height: 320px;
    }

    .about-img-badge {
        padding: 14px;
    }

        .about-img-badge .badge-icon {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }

        .about-img-badge .badge-text strong {
            font-size: 1.2rem;
        }

    .about-pillars {
        grid-template-columns: 1fr 1fr;
    }

    /* Categories */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .categories-grid .category-card:last-child {
            display: none;
        }

    /* Products */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Why */
    .why-grid {
        grid-template-columns: 1fr;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat-number {
        font-size: 2.2rem;
    }

    /* Certs */
    .certs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Certificates page */
    .certs-full-grid {
        grid-template-columns: 1fr;
    }

    /* Gallery */
    .gallery-grid {
        columns: 2;
        gap: 10px;
    }

    .gallery-item {
        margin-bottom: 10px;
    }

    /* Contact Form */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form-wrap {
        padding: 24px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-main {
        padding: 48px 0 32px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    /* Product details */
    .product-gallery-thumbs {
        grid-template-columns: repeat(4, 1fr);
    }

    .product-specs-quick {
        grid-template-columns: 1fr 1fr;
    }

    .product-actions {
        flex-direction: column;
    }

        .product-actions .btn {
            width: 100%;
        }

    /* Quote */
    .quote-form-wrap {
        padding: 24px;
    }

    /* Values */
    .values-grid {
        grid-template-columns: 1fr;
    }

    /* Team */
    .team-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Countries */
    .countries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Testimonials */
    .testimonial-slide {
        grid-template-columns: 1fr;
    }

    /* CTA */
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .cta-actions .btn {
            text-align: center;
        }

    /* Error */
    .error-number {
        font-size: 8rem;
    }

    /* Timeline horizontal to vertical */
    .timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 0 0 0 40px;
    }

        .timeline::before {
            top: 0;
            left: 35px;
            bottom: 0;
            right: auto;
            width: 2px;
            height: 100%;
        }

    .timeline-item {
        text-align: left;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 0;
    }

    .timeline-step {
        margin: 0;
        flex-shrink: 0;
    }

    /* Lightbox nav outside image on mobile */
    .lightbox-prev {
        left: 8px;
    }

    .lightbox-next {
        right: 8px;
    }

    /* Back to top */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/* ===========================
   MOBILE SMALL — max 480px
   =========================== */
@media (max-width: 480px) {
    :root {
        --section-pad: 48px;
    }

    .btn-lg {
        padding: 14px 28px;
        font-size: 0.9rem;
    }

    /* Hero */
    .hero-stat-card {
        min-width: 80px;
        padding: 8px 10px;
    }

        .hero-stat-card .stat-value {
            font-size: 1rem;
        }

        .hero-stat-card .stat-label {
            font-size: 0.6rem;
        }

    .hero-stats {
        gap: 6px;
    }

    /* Categories */
    .categories-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Products */
    .products-grid {
        grid-template-columns: 1fr;
    }

    .products-full-grid {
        grid-template-columns: 1fr;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Certs */
    .certs-grid {
        grid-template-columns: 1fr;
    }

    /* Gallery */
    .gallery-grid {
        columns: 1;
    }

    /* Team */
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* Countries */
    .countries-grid {
        grid-template-columns: 1fr;
    }

    /* About pillars */
    .about-pillars {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-social {
        justify-content: center;
    }

    /* About image badge */
    .about-img-badge {
        right: 8px;
        bottom: -12px;
    }

    /* Quote */
    .quote-sidebar {
        display: none;
    }

    .quote-grid {
        grid-template-columns: 1fr;
    }

    /* Spec quick */
    .product-specs-quick {
        grid-template-columns: 1fr;
    }

    /* Mobile menu */
    .mobile-menu {
        max-width: 100%;
    }

    /* Testimonial */
    .testimonial-card {
        padding: 20px;
    }
}

/* ===========================
   LARGE DESKTOP — min 1440px
   =========================== */
@media (min-width: 1440px) {
    :root {
        --section-pad: 120px;
    }

    .container {
        max-width: 1360px;
    }

    h1 {
        font-size: 5rem;
    }

    h2 {
        font-size: 3.2rem;
    }

    .products-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .certs-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ===========================
   PRINT
   =========================== */
@media print {
    .navbar, .top-bar, .back-to-top, .page-loader,
    .mobile-menu, .menu-overlay, .hero-dots,
    .hero-scroll, .footer {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .hero {
        height: auto;
    }
}
