/*
 * Safety Boots Export Pro — 移动端 / 平板端 自适应增强
 * 说明：本文件 ONLY 通过 @media 媒体查询影响 平板(≤1024px) 与 手机(≤768/480px)，
 *       桌面端(>1024px)的样式完全不会被改动，确保电脑界面与原来一致。
 * 加载顺序：在 style.css 之后加载，同等优先级下本文件规则生效。
 */

/* ================================
   防止横向溢出（手机/平板最常见“布局乱”原因）
================================ */
@media (max-width: 1024px) {
    html { overflow-x: clip; }
    body { overflow-x: hidden; max-width: 100%; }
    img, video, iframe, .container { max-width: 100%; }
    * { -webkit-text-size-adjust: 100%; box-sizing: border-box; }
}

/* ================================
   平板 + 手机：导航改为汉堡菜单
   （原主题仅在 ≤768 启用汉堡；平板横屏 1024 仍走电脑导航，
    因 .nav-menu margin-left:140px 导致菜单被挤掉/换行，故扩展到 ≤1024）
================================ */
@media (max-width: 1024px) {
    .main-nav .container {
        padding: 12px 18px;
        flex-wrap: nowrap;
    }
    /* 显示手机端右侧控制区（语言 + 汉堡） */
    .mobile-header-controls {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    /* 汉堡按钮显示 */
    .mobile-menu-btn { display: flex; }
    /* 电脑端导航菜单改为下拉 */
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        background: var(--white);
        flex-direction: column;
        gap: 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 0;
    }
    .nav-menu.open { display: flex; }
    .nav-menu li { width: 100%; }
    .nav-menu li a {
        padding: 14px 20px;
        border-bottom: 1px solid var(--border-color);
        display: block;
    }
    /* 隐藏电脑端语言切换，显示手机端语言切换 */
    .main-header .lang-switch { display: none; }
    .mobile-lang-switch { display: flex; }

    /* 产品页：隐藏左侧栏，显示手机端分类下拉 */
    .products-sidebar.desktop-only { display: none; }
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
    .mobile-category-select {
        display: block;
        position: relative;
        z-index: 100;
        margin-bottom: 20px;
    }

    /* 平板：多列网格保持 2 列，避免过早变成 1 列显得空 */
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .products-layout,
    .product-detail-layout,
    .contact-page-layout,
    .about-content { grid-template-columns: 1fr; }

    .hero-content h1 { font-size: 36px; }
}

/* ================================
   手机（≤768px）
================================ */
@media (max-width: 768px) {
    .container { padding: 0 16px; }
    .main-nav .container { padding: 10px 15px; }

    /* Hero */
    .hero-section { height: 420px; }
    .hero-content { padding: 0 16px; }
    .hero-content h1 { font-size: 28px; }
    .hero-content p { font-size: 16px; }
    .hero-btn { padding: 13px 32px; font-size: 15px; }

    /* 产品网格：两列更紧凑 */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .product-image { height: 168px; }
    .product-overlay { display: none; }      /* 手机端整卡可点，去掉悬浮遮罩 */
    .product-card { cursor: pointer; }
    .product-info { padding: 14px; }
    .product-info h3 { font-size: 14px; }
    .product-info p { font-size: 13px; }
    .product-link { font-size: 13px; }

    /* 产品详情 */
    .product-detail-layout { gap: 28px; }
    .product-info-detail h1 { font-size: 24px; }
    .specs-table td { padding: 10px 4px; font-size: 14px; }
    .specs-table td:first-child { width: 110px; }
    .product-actions { flex-direction: column; }
    .product-actions a { text-align: center; }

    /* 页面标题栏 */
    .page-header { padding: 50px 0 28px; }
    .page-header h1 { font-size: 28px; }
    .breadcrumb { font-size: 12px; }

    /* 通用区块 */
    .section-title { margin-bottom: 30px; }
    .section-title h2 { font-size: 26px; }
    .section-title p { font-size: 15px; }

    .about-section { padding: 50px 0; }
    .about-image { height: 250px; }
    .about-text h2 { font-size: 26px; }

    .contact-cta-section { padding: 50px 0; }
    .contact-cta h2 { font-size: 26px; }
    .contact-cta p { font-size: 15px; }

    .certificates-section { padding: 50px 0; }
    .certificates-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* 联系页 */
    .contact-page-layout { gap: 28px; }
    .contact-form { padding: 20px; }

    /* 新闻 */
    .news-section { padding: 50px 0; }
    .news-grid { grid-template-columns: 1fr; }
    .news-image { height: 200px; }
    .news-title { font-size: 18px; }

    /* 页脚 */
    .site-footer { padding: 40px 0 20px; }
    .footer-content { grid-template-columns: 1fr; gap: 28px; }
    .footer-contact-inline { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* 浮动按钮 */
    .float-btns { right: 14px; bottom: 90px; }
    .whatsapp-btn { width: 48px; height: 48px; }
    .whatsapp-btn i { font-size: 24px; }
    .whatsapp-btn .wa-tooltip { display: none; }
    .back-to-top { width: 48px; height: 48px; }
    .back-to-top i { font-size: 22px; }

    /* 产品列表 / 详情页内边距 */
    .products-page { padding: 40px 0; }
    .products-main { padding: 16px; }
    .product-detail-section { padding: 40px 0; }
}

/* ================================
   小屏手机（≤480px）
================================ */
@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr; }
    .certificates-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-section { height: 360px; }
    .hero-content h1 { font-size: 24px; }
    .hero-content p { font-size: 14px; }
    .hero-btn { padding: 12px 28px; font-size: 14px; }
    .gallery-main { height: 220px; }
    .page-header h1 { font-size: 22px; }
    .logo { font-size: 18px; }
    .btn-large { padding: 12px 22px; font-size: 14px; }
    .about-image { height: 200px; }
    .specs-table td:first-child { width: 96px; }
    .product-info h3 { font-size: 15px; }
}