/* ═══════════════════════════════════════════════════════════════════
   MOBILE BASE — Cross-Device Responsive Patch
   全站点共享的基础移动端/平板适配规则
   放最后加载 → 优先级最高，覆盖模板内联样式
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Safe Area 安全区适配 (iPhone X+ 刘海/底部 Home Indicator) ── */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* header 底部需要留出 safe-area-bottom 空间（防止 footer 被 Home Indicator 遮挡） */
.footer-section {
    padding-bottom: calc(32px + var(--safe-bottom)) !important;
}

/* 移动端导航菜单底部也加上 safe-area */
@media (max-width: 768px) {
    .nav-menu {
        padding-bottom: calc(24px + var(--safe-bottom)) !important;
    }
}

/* ── 2. 动态视口高度修复 (100dvh 兼容移动端地址栏收起/展开) ── */
@supports (height: 100dvh) {
    .hero, [data-hero], .article-hero {
        min-height: 100dvh !important;
    }
}

/* ── 3. 触摸优化 (iOS Safari / Android 浏览器通用) ── */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
}
html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* ── 4. 通用断点层次 (三层) ── */

/* 4a. 小手机 (≤375px, iPhone SE / 小屏安卓) */
@media (max-width: 375px) {
    :root {
        --nav-h: 52px;
    }
    .nav-container { padding: 0 16px !important; }
    .nav-logo-static img, .nav-logo img { height: 14px !important; }
    .nav-menu { padding: 16px !important; }
    .nav-menu li { padding: 10px 0 !important; }
    .news-page, .article-container { padding-left: 16px !important; padding-right: 16px !important; }
    .article-title { font-size: 20px !important; }
    .news-page-title { font-size: 24px !important; }
}

/* 4b. 标准手机 (376px - 768px) */
@media (max-width: 768px) and (min-width: 376px) {
    :root {
        --nav-h: 60px;
    }
}

/* 4c. 平板 (769px - 1024px) — 适度收窄侧边距 */
@media (max-width: 1024px) and (min-width: 769px) {
    .news-page { padding-left: 80px !important; padding-right: 80px !important; }
    .article-container { padding-left: 80px !important; padding-right: 80px !important; }
    .nav-container { padding: 0 40px !important; }
}

/* ── 5. 极端大屏 (≥1920px) — 限制 max-width 防止过宽 ── */
@media (min-width: 1920px) {
    :root {
        --max: 1400px;
    }
}

/* ── 6. 折叠屏横屏 / 平板横屏 ── */
@media (orientation: landscape) and (max-height: 500px) {
    .article-hero { height: 180px !important; min-height: 180px !important; }
    .news-featured-media { min-height: 160px !important; }
    .article-title { font-size: 18px !important; margin-bottom: 20px !important; }
}

/* ── 7. 暗黑模式支持（用户系统设置）──（默认不启用，留接口）
@media (prefers-color-scheme: dark) {
    :root {
        --ink: #f0f0f0;
        --ink-2: #d0d0d0;
        --bg: #0a0a0a;
    }
    body { background: var(--bg) !important; }
}
*/

/* ═══════════════════════════════════════════════════════════════════
   8. MOBILE HEADER — 汉堡左侧 + Logo 居中 + 全屏抽屉 + 卡片二级菜单
   参考设计: 图二图三 — 抽屉打开后 header(☰+Logo)仍可见，下方铺满白菜单
   ═══════════════════════════════════════════════════════════════════ */

/* 8a. 平板 + 手机通用 (≤1024px)：汉堡左移，桌面菜单隐藏 */
@media (max-width: 1024px) {
    .nav-container {
        justify-content: space-between !important;
        padding: 0 24px !important;
    }
    .mobile-menu-button {
        display: flex !important;
        flex-shrink: 0 !important;
    }
    .nav-menu {
        display: none !important;
    }
    :root { --nav-h: 60px; }
}

/* 8b. 纯手机 (≤768px)：全屏白色抽屉 + 卡片式二级菜单 */
@media (max-width: 768px) {

    /* ── z-index 层级规划（核心修复：dynamic-logo 的 z-index:10000 是之前抽屉被盖的真凶）──
         99999  .mobile-menu-button.open  (变成 ✕ 的关闭按钮)
         99998  .nav-menu.open            (抽屉)
         9999   .header                   (保持原有)
          999   .dynamic-logo             (首页大 logo，手机端降下来避免盖抽屉) */

    /* 首页 dynamic-logo 在手机端降低层叠，防止盖住抽屉 */
    .dynamic-logo {
        z-index: 999 !important;
    }
    /* nav-logo px-width v3：宽度仅作兜底（不加 !important），实际由 JS 写入
       布局视口像素值（logo.style.width），彻底免疫地址栏动画期间的右沿抖动 */
    .dynamic-logo.nav-mode {
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 100%;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        height: var(--nav-h, 60px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10001 !important;
        pointer-events: none !important;
    }
    .dynamic-logo.nav-mode img {
        height: 24px !important;
    }

    /* 抽屉按钮打开后变成 ✕，层级最高 */
    .mobile-menu-button.open {
        z-index: 99999 !important;
    }

    /* 打开状态：白色全屏抽屉，从 header 下方开始铺满屏幕 */
    .nav-menu.open {
        display: flex !important;
        position: fixed !important;
        top: var(--nav-h, 60px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: #ffffff !important;
        padding: 16px 24px calc(40px + var(--safe-bottom)) !important;
        gap: 0 !important;
        box-shadow: 0 -1px 0 rgba(0,0,0,0.06) !important;
        z-index: 99998 !important;
        overflow-y: auto !important;
        animation: drawerFade 0.25s ease-out !important;
    }

    @keyframes drawerFade {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* 抽屉每一项：大写、左对齐、粗分隔线、充足点击区 */
    .nav-menu.open > li {
        width: 100% !important;
        text-align: left !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* 最后一项去掉底部分隔线 */
    .nav-menu.open > li:last-child {
        border-bottom: none !important;
    }

    .nav-menu.open > li > a,
    .nav-menu.open > li > .lang-selector {
        color: var(--ink-2, #1c1c1e) !important;
        font-size: 16px !important;
        font-family: var(--font-montserrat-semibold, sans-serif) !important;
        font-weight: 600 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        display: block !important;
    }

    /* ── 二级下拉：卡片样式（图三效果：白底圆角边框、子项垂直排列）── */
    .nav-menu.open .product-dropdown {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: #f8f8fa !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        border-radius: 10px !important;
        padding: 4px 0 !important;
        margin-top: 14px !important;
        min-width: unset !important;
        max-width: unset !important;
        width: 100% !important;
        display: block !important;
    }

    .nav-menu.open .dropdown-item {
        display: block !important;
        padding: 16px 20px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--ink-2, #1c1c1e) !important;
        letter-spacing: 0.10em !important;
        text-transform: uppercase !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        background: transparent !important;
        transition: background 0.15s ease !important;
    }

    .nav-menu.open .dropdown-item:last-child {
        border-bottom: none !important;
    }

    .nav-menu.open .dropdown-item:hover,
    .nav-menu.open .dropdown-item:active {
        background: rgba(0,0,0,0.04) !important;
        padding-left: 20px !important; /* 去掉桌面版 hover 时的缩进动画 */
    }

    /* header 手机端统一白色毛玻璃背景 + 深色汉堡图标 */
    .header {
        background: rgba(255,255,255,0.97) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        backdrop-filter: blur(12px) !important;
    }
    .header.scrolled {
        background: rgba(255,255,255,0.98) !important;
        box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
    }
    .mobile-menu-button .menu-icon,
    .header .mobile-menu-button .menu-icon {
        background: var(--ink-2, #1c1c1e) !important;
    }
}

/* 8c. 小屏手机 (≤480px)：进一步收紧间距 */
@media (max-width: 480px) {
    .nav-container { padding: 0 16px !important; }
    :root { --nav-h: 56px; }
    .nav-logo-static img, .nav-logo img { height: 20px !important; }

    .nav-menu.open {
        padding: 12px 20px calc(32px + var(--safe-bottom)) !important;
    }
    .nav-menu.open > li { padding: 16px 0 !important; }
    .nav-menu.open > li > a { font-size: 15px !important; }
    .nav-menu.open .dropdown-item { padding: 14px 18px !important; font-size: 12px !important; }
}