/* =============================================
   移动端响应式样式
   断点：768px（手机）/ 1024px（平板）
   ============================================= */

/* =====================
   平板端 ≤ 1024px
   ===================== */
@media (max-width: 1024px) {

    .container { padding: 0 20px; }

    /* 导航 */
    .header-top { display: none; }
    .header-main { padding: 12px 0; }
    .main-nav { display: none; }
    .mobile-menu-toggle { display: flex; }

    /* Hero */
    .hero-section { height: 480px; }
    .hero-content { padding: 0 0 0 40px; max-width: 560px; }
    .hero-title { font-size: 36px; }
    .hero-desc { font-size: 16px; }
    .hero-controls { left: 40px; }

    /* 分类导航 */
    .category-nav-inner { justify-content: flex-start; }
    .category-nav-item { padding: 16px 20px; font-size: 12px; }

    /* Section */
    .section { padding: 60px 0; }
    .section-title { font-size: 30px; }
    .section-header { margin-bottom: 40px; }

    /* 产品网格 */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .related-products-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    /* 解决方案 */
    .solutions-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    /* 关于 */
    .about-intro-inner { grid-template-columns: 1fr; gap: 40px; }
    .about-intro-image::before { display: none; }

    /* 数据统计 */
    .stats-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .stats-bar-number { font-size: 40px; }

    /* 产品详情 */
    .product-detail-inner { grid-template-columns: 1fr; gap: 40px; }
    .product-detail-gallery { position: static; }

    /* 联系页 */
    .contact-inner { grid-template-columns: 1fr; gap: 40px; }

    /* 关于页 */
    .story-inner { grid-template-columns: 1fr; gap: 40px; }
    .mission-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    /* Archive */
    .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    /* CTA */
    .cta-title { font-size: 32px; }
    .cta-desc { font-size: 16px; }
}

/* =====================
   手机端 ≤ 768px
   ===================== */
@media (max-width: 768px) {

    .container { padding: 0 16px; }

    /* ---- Header ---- */
    .header-main { padding: 10px 0; }
    .logo-zh { font-size: 18px; }
    .logo-en { font-size: 10px; }
    .mobile-menu-toggle { display: flex; }

    /* 移动端全屏菜单 */
    .main-nav {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: var(--white);
        z-index: 999;
        padding: 80px 24px 40px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .main-nav.mobile-open { transform: translateX(0); }

    .nav-menu { flex-direction: column; gap: 0; }
    .nav-menu > li > a {
        font-size: 18px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    /* 移动端下拉菜单 */
    .nav-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0 0 0 16px;
        background: var(--light-gray);
        border-radius: 0;
        display: none;
        margin-bottom: 8px;
    }
    .nav-menu li.sub-open > .sub-menu { display: block; }
    .sub-menu li a {
        padding: 10px 16px;
        font-size: 15px;
        border-bottom: 1px solid var(--border);
    }
    .sub-menu li:last-child a { border-bottom: none; }

    /* 父菜单展开箭头 */
    .nav-menu > li.menu-item-has-children > a::after {
        content: '▾';
        float: right;
        font-size: 14px;
        color: var(--text-muted);
    }
    .nav-menu > li.menu-item-has-children.sub-open > a::after {
        content: '▴';
    }

    /* ---- Hero ---- */
    .hero-section { height: 380px; }
    .hero-content { padding: 0 16px; max-width: 100%; }
    .hero-title { font-size: 26px; margin-bottom: 12px; }
    .hero-desc { font-size: 14px; margin-bottom: 24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .hero-badge { font-size: 11px; padding: 3px 10px; margin-bottom: 12px; }
    .btn-hero-primary,
    .btn-hero-secondary { padding: 10px 24px; font-size: 14px; }
    .hero-arrow { width: 36px; height: 36px; }
    .hero-controls { left: 16px; bottom: 16px; }

    /* ---- 分类导航 ---- */
    .category-nav-inner { justify-content: flex-start; }
    .category-nav-item { padding: 12px 14px; font-size: 11px; gap: 4px; }
    .category-nav-item svg { width: 18px; height: 18px; }

    /* ---- Section 通用 ---- */
    .section { padding: 48px 0; }
    .section-title { font-size: 24px; }
    .section-desc { font-size: 14px; }
    .section-header { margin-bottom: 32px; }

    /* ---- 产品卡片 ---- */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card-body { padding: 14px; }
    .product-card-title { font-size: 14px; }
    .product-card-excerpt { font-size: 13px; -webkit-line-clamp: 2; }
    .product-card-footer { flex-direction: column; gap: 8px; align-items: stretch; }
    .btn-product-detail,
    .btn-inquiry { text-align: center; padding: 8px 12px; font-size: 12px; }

    /* ---- 个人用户 / 解决方案卡片 ---- */
    .solutions-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .solution-card-body { padding: 16px; }
    .solution-card-title { font-size: 15px; }
    .solution-card-desc { font-size: 13px; }

    /* ---- 关于皓世成业 ---- */
    .about-intro-inner { grid-template-columns: 1fr; gap: 32px; }
    .about-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .stat-number { font-size: 28px; }
    .stat-item { padding: 14px 8px; }
    .about-features { gap: 16px; }

    /* ---- 数据统计 ---- */
    .stats-bar { padding: 36px 0; }
    .stats-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .stats-bar-number { font-size: 36px; }
    .stats-bar-label { font-size: 13px; }

    /* ---- CTA ---- */
    .cta-section { padding: 48px 0; }
    .cta-title { font-size: 24px; }
    .cta-desc { font-size: 14px; margin-bottom: 28px; }
    .btn-cta-primary,
    .btn-cta-secondary { padding: 12px 32px; font-size: 15px; }

    /* ---- 产品详情页 ---- */
    .product-detail { padding: 32px 0; }
    .product-detail-inner { grid-template-columns: 1fr; gap: 28px; }
    .product-detail-gallery { position: static; }
    .product-detail-title { font-size: 24px; }
    .product-actions { flex-direction: column; gap: 12px; }

    /* ---- 相关产品 ---- */
    .related-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* ---- 归档页 ---- */
    .archive-hero { padding: 40px 0; }
    .archive-hero-title { font-size: 28px; }
    .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .archive-filter { gap: 8px; }
    .archive-filter a { padding: 6px 16px; font-size: 13px; }

    /* ---- 联系页 ---- */
    .contact-section { padding: 40px 0; }
    .contact-inner { grid-template-columns: 1fr; gap: 32px; }
    .contact-form-wrap { padding: 24px 16px; }
    .form-grid { grid-template-columns: 1fr; gap: 0; }
    .contact-info-title { font-size: 22px; }

    /* ---- 关于页 ---- */
    .page-hero { padding: 48px 0; }
    .page-hero-title { font-size: 28px; }
    .page-hero-desc { font-size: 15px; }
    .about-mission { padding: 48px 0; }
    .mission-grid { grid-template-columns: 1fr; gap: 16px; }
    .story-inner { grid-template-columns: 1fr; gap: 32px; }
    .about-story { padding: 48px 0; }

    /* ---- 产品手册页 ---- */
    .catalogs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

    /* ---- 案例库页 ---- */
    .video-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

    /* ---- 搜索框 ---- */
    .search-overlay form { flex-direction: column; padding: 0 16px; }
    .search-overlay input { font-size: 16px; }

    /* ---- Footer ---- */
    .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .footer-bottom-inner { flex-direction: column; gap: 12px; text-align: center; }
}

/* =====================
   超小屏 ≤ 480px
   ===================== */
@media (max-width: 480px) {

    /* Hero 更紧凑 */
    .hero-section { height: 320px; }
    .hero-title { font-size: 22px; }
    .hero-desc { display: none; }
    .hero-actions { gap: 10px; }
    .btn-hero-primary,
    .btn-hero-secondary { padding: 9px 18px; font-size: 13px; }

    /* 产品/解决方案改单列 */
    .products-grid { grid-template-columns: 1fr; }
    .solutions-grid { grid-template-columns: 1fr !important; }
    .related-products-grid { grid-template-columns: 1fr; }
    .archive-grid { grid-template-columns: 1fr; }
    .catalogs-grid { grid-template-columns: 1fr !important; }

    /* 数据统计单列 */
    .stats-bar-inner { grid-template-columns: repeat(2, 1fr); }

    /* 分类导航缩小 */
    .category-nav-item { padding: 10px 10px; font-size: 10px; }
    .category-nav-item svg { width: 16px; height: 16px; }

    /* Section */
    .section { padding: 36px 0; }
    .section-title { font-size: 22px; }

    /* CTA */
    .cta-actions { flex-direction: column; align-items: center; }
    .btn-cta-primary,
    .btn-cta-secondary { width: 100%; max-width: 280px; }
}
