/* ============================================================
   HUAYI Electric — Responsive (mobile-first breakpoints)
   ============================================================ */

/* ===== Large desktop ===== */
@media (max-width: 1200px) {
    .container { padding: 0 var(--space-lg); }
    .nav { gap: var(--space-lg); margin-left: var(--space-xl); }
    .mega-menu { width: 640px; }
}

/* ===== Tablet landscape / small laptop ===== */
@media (max-width: 1024px) {
    :root { --header-main-h: 64px; }

    /* Collapse desktop nav into mobile drawer */
    .nav { display: none; }
    .mobile-toggle { display: flex; }
    .header-top-info span.hide-sm { display: none; }

    .hero-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .hero-visual { display: none; }
    .hero { min-height: auto; }

    /* Banner height is driven by per-page aspect-ratio (style.css) so the full
       image shows without cropping. No min-height here — it would force the box
       taller than the image ratio and make background-size:cover crop the sides. */

    .about-preview { grid-template-columns: 1fr; gap: var(--space-xl); }
    .about-visual { order: -1; }

    .product-detail-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .product-gallery { position: static; }

    .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .hl-panel { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-xl); }
    .split-row { grid-template-columns: 1fr; gap: var(--space-lg); }
    .split-row:nth-child(even) .split-visual { order: -1; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
    .footer-col:first-child { grid-column: 1 / -1; }

    .stat-band { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-lg); }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }

    .timeline::before { left: 8px; }
    .timeline-item, .timeline-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 var(--space-xl) var(--space-2xl); }
    .timeline-item::before, .timeline-item:nth-child(even)::before { left: 1px; right: auto; }
}

/* ===== Tablet / large phone ===== */
@media (max-width: 768px) {
    :root { --space-4xl: 4.5rem; --space-3xl: 3.5rem; --space-2xl: 2.5rem; }

    .section { padding: var(--space-3xl) 0; }
    h1 { font-size: 2.1rem; }
    h2 { font-size: 1.7rem; }

    .header-top .header-top-info:first-child { display: none; }
    .header-top .container { justify-content: flex-end; }

    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .hero-stat-num { font-size: 1.7rem; }

    .category-grid { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

    .form-row { grid-template-columns: 1fr; }
    .tab-headers { gap: var(--space-lg); overflow-x: auto; }
    .tab-header { white-space: nowrap; }

    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-md); }

    .solution-grid, .industry-grid, .teaser-grid { grid-template-columns: 1fr; }
    .value-grid, .process-grid, .doc-list { grid-template-columns: 1fr; }

    .cta-actions .btn, .hero-actions .btn { width: 100%; }

    /* Banner keeps its aspect-ratio (full image, no crop); text overlays via
       the absolute .container. No min-height / extra padding here. */
}

/* ===== Phone ===== */
@media (max-width: 480px) {
    .container { padding: 0 var(--space-md); }
    .header-top { display: none; }
    :root { --header-h: var(--header-main-h); }

    .hero h1 { font-size: 1.9rem; }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
    .hero-stat-num { font-size: 1.5rem; }

    .stat-band { grid-template-columns: 1fr 1fr; }

    .product-card-img { height: 180px; }
    .product-thumb { width: 64px; height: 64px; }

    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom-links { flex-wrap: wrap; gap: var(--space-md); }

    .scroll-top { bottom: 15rem; right: 16px; }
    .floating-contact { right: 16px; bottom: 16px; }
    .floating-contact-btn { width: 44px; min-height: 44px; padding: 7px; }
    .floating-contact-icon { width: 28px; height: 28px; font-size: 10px; }
    .floating-contact-btn:hover,
    .floating-contact-btn:focus-visible { width: 130px; }

    .contact-form, .contact-info-card { padding: var(--space-lg); }
    .hl-panel { padding: var(--space-lg); }
    .breadcrumb { margin-top: var(--header-h); }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}