/* ==========================================================================
   Mobile Responsive Styles (WAP)
   Consolidated from all CSS files
   ========================================================================== */

/* --- 1200px --- */
@media (max-width: 1200px) {
    /* Global */
    .container { padding: 0 20px; }
    
    /* about.css */
    .about-top-inner { gap: 40px; }
    
    /* honor.css */
    .honor-grid { grid-template-columns: repeat(3, 1fr); }
    
    /* product-detail.css */
    .pd-overview { flex-direction: column; }
    .pd-gallery { width: 60%; margin: 0 auto; }
    
    /* products.css */
    .prod-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 992px --- */
@media (max-width: 992px) {
    /* Global & Index */
    .header-inner { padding: 0 15px; }
    .nav { display: none; } /* Need a hamburger menu in real implementation */
    .header-actions { display: none; }
    .mobile-menu-toggle { display: block; color:#EF7721}
    
    .mobile-nav-overlay {
        display: flex; /* Overwrite desktop display:none */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);
        z-index: 9999; /* Highest priority */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .mobile-nav-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: transparent;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 10px;
        transition: transform 0.3s;
    }

    .mobile-nav-close:hover {
        transform: rotate(90deg);
        color: #EF7721;
    }
    
    .mobile-nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
        width: 100%;
    }
    
    .mobile-nav-list li {
        margin: 15px 0;
        transform: translateY(20px);
        opacity: 0;
        transition: all 0.4s ease;
    }
    
    .mobile-nav-overlay.active .mobile-nav-list li {
        transform: translateY(0);
        opacity: 1;
    }
    
    /* Staggered animation for menu items */
    .mobile-nav-overlay.active .mobile-nav-list li:nth-child(1) { transition-delay: 0.1s; }
    .mobile-nav-overlay.active .mobile-nav-list li:nth-child(2) { transition-delay: 0.2s; }
    .mobile-nav-overlay.active .mobile-nav-list li:nth-child(3) { transition-delay: 0.3s; }
    .mobile-nav-overlay.active .mobile-nav-list li:nth-child(4) { transition-delay: 0.4s; }
    .mobile-nav-overlay.active .mobile-nav-list li:nth-child(5) { transition-delay: 0.5s; }
    .mobile-nav-overlay.active .mobile-nav-list li:nth-child(6) { transition-delay: 0.6s; }
    
    .mobile-nav-list a {
        display: inline-block;
        font-size: 24px;
        color: #fff;
        font-weight: 500;
        text-decoration: none;
        padding: 10px 20px;
        transition: color 0.3s;
    }
    
    .mobile-nav-list a.active,
    .mobile-nav-list a:hover {
        color: #EF7721;
    }
    
    /* Toggle Icon Animation */
    .mobile-menu-toggle.active svg line:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
        transform-origin: center;
    }
    .mobile-menu-toggle.active svg line:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.active svg line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
        transform-origin: center;
    }
    .mobile-menu-toggle svg line {
        transition: all 0.3s ease;
    }

    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-brand { grid-column: 1 / -1; }
    .hero { height: auto; min-height: 80vh; padding: 120px 0 160px; }
    .hero-title { font-size: 36px; }
    .hero-bottom-bar .h-feature-item { flex: 1 1 45%; }
    .h-feature-divider:nth-child(4) { display: none; }
    .hero-features { flex-wrap: wrap; gap: 20px; }
    .about-inner { flex-direction: column; gap: 50px; }
    .about-right-stats { width: 100%; }
    .stats-grid { justify-content: center; }

    /* about.css */
    .about-top-inner { flex-direction: column; }
    .section-header-white { flex: 0 0 auto; }
    .about-content-grid { grid-template-columns: 1fr; }
    .culture-grid { grid-template-columns: 1fr; }
    .about-stats-bar { flex-wrap: wrap; gap: 40px; justify-content: center; }
    .a-stat-item { flex: 0 0 45%; }

    /* honor.css */
    .honor-grid { grid-template-columns: repeat(2, 1fr); }
    .honor-intro { text-align: center; margin-left: auto; margin-right: auto; }
    .honor-section-head { justify-content: center; }
    .honor-section-head__title::after { left: 50%; transform: translateX(-50%); }

    /* news-detail.css */
    .nd-layout { flex-direction: column; }
    .nd-sidebar { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    .nd-sidebar__box { margin-bottom: 0; }

    /* news.css */
    .news-layout { flex-direction: column-reverse; }
    .news-sidebar { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    .news-sidebar__box { margin-bottom: 0; }

    /* product-detail.css */
    .pd-layout { flex-direction: column; }
    .pd-sidebar { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    .pd-sidebar__box { margin-bottom: 0; }

    /* products.css */
    .prod-layout { flex-direction: column; }
    .prod-sidebar { width: 100%; }
    .prod-sidebar__box { margin-bottom: 20px; }
}

/* --- 768px --- */
@media (max-width: 768px) {
    /* Global & Index */
    .section-padding { padding: 60px 0; }
    .section-title { font-size: 28px; }
    .hero { min-height: 600px; padding: 100px 0 180px; }
    .hero-title { font-size: 30px; margin-bottom: 15px; }
    .hero-subtitle-main { font-size: 18px; margin-bottom: 25px; }
    .hero-desc { font-size: 16px; }
    .h-feature-icon { width: 44px; height: 44px; }
    .h-feature-icon svg { width: 32px; height: 32px; }
    /* products-innovative */
    .innovative-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .header-right { max-width: 100%; }
    .innovative-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .innovative-item { height: 400px; }
    .card-content { padding: 30px 20px; }
    .card-desc { -webkit-line-clamp: 2; }
    
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    /* side-service */
    .side-service { display: none; }
    .adv-modern-inner { flex-direction: column; gap: 40px; }
    .adv-modern-left { flex: 0 0 auto; width: 100%; }
    .adv-modern-item { padding: 20px; gap: 15px; }
    .adv-modern-icon { flex: 0 0 50px; height: 50px; }
    
    .advantages-grid { grid-template-columns: 1fr; gap: 30px; }
    /* about-new */
    .about-new-inner { flex-direction: column; gap: 40px; }
    .about-new-left { flex: 0 0 auto; width: 100%; padding-right: 0; }
    .about-image-stack { padding-right: 0; padding-bottom: 0; margin-bottom: 30px; }
    .image-sub { width: 200px; border-width: 4px; }
    .experience-badge { left: 0; top: 20px; padding: 15px; }
    .exp-num { font-size: 32px; }
    .about-content-new .section-title { font-size: 26px; }
    .about-stats-new { gap: 20px; flex-wrap: wrap; }
    .stat-number { font-size: 28px; }
    
    /* news-tech */
    .news-tech-layout { flex-direction: column; gap: 30px; }
    .news-tech-featured { flex: 0 0 auto; width: 100%; min-height: 400px; }
    .featured-card { min-height: 400px; }
    .featured-content { padding: 30px; }
    .featured-content .news-title { font-size: 22px; }
    .item-link { padding: 15px; gap: 15px; }
    .item-date { flex: 0 0 60px; height: 60px; }
    .item-date .day { font-size: 18px; }
    .item-arrow { display: none; }
    
    .news-grid { grid-template-columns: 1fr; gap: 20px; }
    .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
    .partner-card { height: 100px; padding: 15px; }
    .partner-card img { height: 100%; width: 100%; object-fit: contain; }
    .partner-card:hover img { transform: none; }
    .partner-name { display: none; } /* Hide name if present, as it might take up space and we want the image to fill the card */
    .footer-top { grid-template-columns: 1fr; gap: 30px; }
    .contact-cards { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 30px 20px; }
    .contact-info-bar { display: flex; flex-direction: column; gap: 20px; }

    /* CTA Banner */
    .cta-banner { flex-direction: column; text-align: center; padding: 40px 20px; gap: 30px; }
    .cta-content h2 { font-size: 26px; }
    .cta-content p { font-size: 14px; }
    .cta-banner .btn-outline-white { width: 100%; justify-content: center; }
    
    /* news-detail.css */
    .nd-article { padding: 30px 20px; }
    .nd-article__title { font-size: 24px; }
    .nd-article__meta { gap: 15px; }
    .nd-sidebar { grid-template-columns: 1fr; gap: 20px; }
    .nd-article__nav { flex-direction: column; gap: 15px; }
    .nd-nav-prev, .nd-nav-next { width: 100%; text-align: left; align-items: flex-start; }

    /* news.css */
    .news-item { flex-direction: column; }
    .news-item__img { width: 100%; height: auto; padding-top: 60%; position: relative; }
    .news-item__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .news-sidebar { grid-template-columns: 1fr; gap: 20px; }

    /* product-detail.css */
    .pd-sidebar { grid-template-columns: 1fr; gap: 20px; }
    .pd-gallery { width: 100%; }
    .pd-overview { padding: 20px; }
    .pd-info__specs ul { grid-template-columns: 1fr; }
    .pd-related__grid { grid-template-columns: 1fr; }
    .pd-tabs__nav { flex-direction: column; }
    .pd-tabs__nav span.active::before { width: 3px; height: 100%; left: 0; top: 0; }

    /* products.css */
    .prod-grid { grid-template-columns: 1fr; }
    .prod-filter { flex-direction: column; align-items: flex-start; gap: 10px; }
    .prod-pagination { flex-wrap: wrap; gap: 5px; justify-content: center; }
    .news-pagination { flex-wrap: wrap; gap: 5px; justify-content: center; }
    .prod-pagination a, .prod-pagination span,
    .news-pagination a, .news-pagination span {
        padding: 0 10px;
        min-width: 32px;
        font-size: 13px;
    }
}

/* --- 576px --- */
@media (max-width: 576px) {
    /* Global & Index */
    .hero { min-height: 550px; padding: 80px 0 200px; }
    .hero-title { font-size: 22px; }
    .hero-subtitle-main { font-size: 16px; margin-bottom: 20px; }
    
    .hero-features {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }
    
    .hero-bottom-bar .h-feature-item {
        flex: 0 0 50%;
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .hero-bottom-bar .h-feature-item:nth-child(even) {
        border-left: 1px solid rgba(255,255,255,0.1);
    }
    
    .hero-bottom-bar .h-feature-item:nth-last-child(-n+2) {
        border-bottom: none;
    }
    
    .h-feature-divider { display: none; }
    
    .h-feature-icon { width: 36px; height: 36px; }
    .h-feature-icon svg { width: 28px; height: 28px; }
    .h-feature-text h4 { font-size: 14px; margin-bottom: 2px; }
    .h-feature-text p { font-size: 12px; }
    
    /* products-innovative */
    .innovative-grid { grid-template-columns: 1fr; }
    .innovative-item { height: 350px; }
    
    .products-grid { grid-template-columns: 1fr; }
    .partners-grid { grid-template-columns: repeat(2, 1fr); }
    .partner-card { height: 80px; padding: 10px; }
    .cta-banner { padding: 30px 15px; gap: 20px; }
    .cta-content h2 { font-size: 22px; }
    .logo img { height: 36px; }
    .logo-title { font-size: 18px; }
    .logo-subtitle { font-size: 10px; }
    
    .banner-inner h1, .about-banner__content h1, .contact-banner__content h1, 
    .prod-banner__content h1, .pd-banner__content h1, .news-banner__content h1, 
    .nd-banner__content h1, .honor-banner__content h1 { font-size: 34px !important; }
    
    .about-banner, .contact-banner, .prod-banner, .pd-banner, 
    .news-banner, .nd-banner, .honor-banner { height: 240px !important; }
    
    .about-page, .contact-page, .prod-page, .pd-page, 
    .news-page, .nd-page, .honor-page { padding: 50px 0 !important; }

    /* about.css */
    .a-stat-item { flex: 0 0 100%; }
    .about-top-section { padding: 60px 0; }
    .about-bottom-section { padding: 60px 0; }
    .culture-card { padding: 30px; flex-direction: column; gap: 20px; }

    /* honor.css */
    .honor-grid { grid-template-columns: 1fr; }
    .honor-section-head__num { font-size: 36px; }
    .honor-section-head__title { font-size: 26px; }

    /* news-detail.css */
    .nd-banner { height: 240px; }
    .nd-banner__content h1 { font-size: 34px; }
    .nd-page { padding: 50px 0; }

    /* news.css */
    .news-banner { height: 240px; }
    .news-banner__content h1 { font-size: 34px; }
    .news-page { padding: 50px 0; }

    /* product-detail.css */
    .pd-banner { height: 240px; }
    .pd-banner__content h1 { font-size: 34px; }
    .pd-page { padding: 50px 0; }
    .pd-info__action { flex-direction: column; }

    /* products.css */
    .prod-banner { height: 240px; }
    .prod-banner__content h1 { font-size: 34px; }
    .prod-page { padding: 50px 0; }
}