/*
 * FlatPackCo — Responsive Stylesheet
 * Breakpoints: 1200px | 992px | 768px | 576px
 */

/* =====================
   LARGE DESKTOP (≤1200px)
   ===================== */
@media (max-width: 1200px) {
    :root { --container-max: 100%; }

    .hero-content { padding: 70px 24px; gap: 40px; }
    .hero-title { font-size: clamp(2.2rem, 4.5vw, 3.5rem); }

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

    .product-detail-layout { grid-template-columns: 1fr 380px; gap: 40px; }
    .blog-post-layout { grid-template-columns: 1fr 300px; gap: 44px; }

    .about-inner { gap: 50px; }
    .about-accent-img { right: -16px; bottom: -20px; width: 170px; height: 150px; }
    .about-badge { left: -12px; }

    .faq-inner { gap: 50px; }
}

/* =====================
   TABLET LANDSCAPE (≤992px)
   ===================== */
@media (max-width: 992px) {
    h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
    h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }

    .section { padding: 64px 0; }

    /* Header */
    .header-inner { padding: 0 20px; }
    .primary-nav { display: none; }
    .header-phone { display: none; }
    .mobile-toggle { display: flex; }
    .header-actions .btn { display: none; }

    /* Mobile Nav Overlay */
    .primary-nav.mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--primary-dark);
        z-index: 999;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 80px 24px;
        overflow-y: auto;
    }
    .primary-nav.mobile-open .nav-link {
        font-size: 1.3rem;
        color: rgba(255,255,255,0.8);
        padding: 12px 20px;
        text-align: center;
    }
    .primary-nav.mobile-open .nav-link:hover { color: var(--accent); }
    .primary-nav.mobile-open .nav-item { width: 100%; text-align: center; }
    .primary-nav.mobile-open .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: rgba(255,255,255,0.05);
        border-radius: var(--radius);
        margin-top: 4px;
        display: none;
    }
    .primary-nav.mobile-open .nav-item.open .nav-dropdown { display: block; }
    .primary-nav.mobile-open .nav-dropdown a { color: rgba(255,255,255,0.65); font-size: 0.95rem; text-align: center; border-color: rgba(255,255,255,0.06); }
    .mobile-close-btn {
        position: fixed;
        top: 20px;
        right: 24px;
        color: var(--white);
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 1000;
        display: none;
    }
    .primary-nav.mobile-open .mobile-close-btn { display: block; }

    /* Hero */
    .hero { min-height: auto; }
    .hero-content { grid-template-columns: 1fr; gap: 40px; padding: 60px 20px; }
    .hero-visual { display: none; }
    .hero-title { font-size: clamp(2rem, 5vw, 3rem); }
    .hero-desc { max-width: 100%; }
    .hero-mini-stats { gap: 24px; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.07); border-top: 1px solid rgba(255,255,255,0.07); }
    .stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.07); }

    /* Services */
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* About */
    .about-inner { grid-template-columns: 1fr; gap: 48px; }
    .about-img-wrap { max-width: 560px; margin: 0 auto; width: 100%; }
    .about-badge { left: 0; top: -16px; }
    .about-accent-img { right: 0; bottom: -16px; }

    /* FlatPackCo Advantage */
    .edge-grid { grid-template-columns: 1fr; gap: 36px; }
    .edge-image-single { height: 280px; }
    .edge-image { height: 200px; }

    /* Work grid */
    .work-grid { grid-template-columns: 1fr 1fr; }

    /* Testimonials */
    .testimonial-card { min-width: 300px; }

    /* FAQ */
    .faq-inner { grid-template-columns: 1fr; gap: 48px; }
    .faq-inner .section-header { margin-bottom: 0; }

    /* Newsletter */
    .newsletter-inner { flex-direction: column; text-align: center; align-items: center; }
    .newsletter-form { flex: 1 1 100%; max-width: 460px; }

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

    /* Blog post layout */
    .blog-post-layout { grid-template-columns: 1fr; gap: 40px; }
    .blog-sidebar { position: static; }
    .blog-sidebar .sidebar-widget:nth-child(n+3) { display: none; }

    /* Product detail */
    .product-detail-layout { grid-template-columns: 1fr; gap: 40px; }
    .product-gallery { position: static; }

    /* Portfolio */
    .portfolio-masonry { grid-template-columns: 1fr 1fr; }

    /* Process */
    .process-steps { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .process-steps::before { display: none; }

    /* Clients grid */
    .clients-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =====================
   TABLET PORTRAIT (≤768px)
   ===================== */
@media (max-width: 768px) {
    .section { padding: 52px 0; }
    .section-header { margin-bottom: 40px; }

    /* Hero */
    .hero-cta { flex-direction: column; align-items: flex-start; }
    .hero-mini-stats { flex-wrap: wrap; gap: 20px; }
    .hms-number { font-size: 1.7rem; }

    /* Stats */
    .stats-grid { grid-template-columns: 1fr 1fr; }

    /* Services / Products */
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }

    /* Work */
    .work-grid { grid-template-columns: 1fr; }

    /* Testimonials */
    .testimonial-card { min-width: calc(100vw - 60px); }

    /* Portfolio */
    .portfolio-masonry { grid-template-columns: 1fr; }

    /* Process */
    .process-steps { grid-template-columns: 1fr 1fr; }

    /* Clients */
    .clients-grid { grid-template-columns: repeat(2, 1fr); }

    /* FAQ */
    .faq-inner { grid-template-columns: 1fr; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links { flex-wrap: wrap; justify-content: center; }

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

    /* Blog featured */
    .blog-featured-img { height: 280px; }

    /* About badge */
    .about-badge { display: none; }

    /* CTA banner */
    .cta-banner { padding: 72px 20px; }
    .cta-banner h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }

    /* Product specs */
    .product-specs { grid-template-columns: 1fr; }
    .product-thumbs { grid-template-columns: repeat(4, 1fr); }

    /* Newsletter */
    .newsletter-form { flex-direction: column; }
    .newsletter-input { border-right: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; }
    .newsletter-form .btn { border-radius: 0 0 var(--radius) var(--radius); justify-content: center; }
}

/* =====================
   MOBILE (≤576px)
   ===================== */
@media (max-width: 576px) {
    .section { padding: 44px 0; }
    .container, .container-wide { padding: 0 16px; }

    .announcement-bar { font-size: 0.74rem; }

    .logo-tagline { display: none; }
    .logo-name { font-size: 1.15rem; }

    /* Hero */
    .hero-content { padding: 48px 16px; }
    .hero-title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
    .hero-desc { font-size: 0.96rem; }

    /* Stats */
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-number { font-size: 2.4rem; }

    /* Grid */
    .grid-4 { grid-template-columns: 1fr; }

    /* FlatPackCo Advantage */
    .edge-image-row { grid-template-columns: 1fr; }

    /* Testimonials */
    .testimonial-card { padding: 26px 22px; min-width: calc(100vw - 40px); }

    /* About accent image */
    .about-accent-img { display: none; }

    /* Clients */
    .clients-grid { grid-template-columns: 1fr 1fr; }

    /* Process */
    .process-steps { grid-template-columns: 1fr; }

    /* WhatsApp float */
    .whatsapp-btn span { display: none; }
    .whatsapp-btn { padding: 14px; border-radius: 50%; }
    .whatsapp-btn i { font-size: 1.4rem; }

    /* Blog layout */
    .blog-post-title { font-size: clamp(1.5rem, 5vw, 2rem); }

    /* Footer */
    .footer-social { flex-wrap: wrap; }

    /* Product thumbs */
    .product-thumbs { grid-template-columns: repeat(3, 1fr); }

    /* Buttons */
    .btn { padding: 12px 22px; font-size: 0.78rem; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .cta-banner-btns .btn { width: 100%; justify-content: center; }
}

/* =====================
   EXTRA SMALL (≤400px)
   ===================== */
@media (max-width: 400px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-item { border-right: none !important; border-top: 1px solid rgba(255,255,255,0.07); }
    .stat-item:first-child { border-top: none; }

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

    .hero-mini-stats { flex-direction: column; gap: 14px; }
}

/* =====================
   PRINT
   ===================== */
@media print {
    .announcement-bar,
    .site-header,
    .hero,
    .stats-section,
    .testimonials-section,
    .cta-banner,
    .newsletter-section,
    .site-footer,
    .whatsapp-float { display: none !important; }
    .section { padding: 30px 0; }
    body { color: #000; }
}