/* ============================================================
   responsive.css —— 全站共享移动端适配样式表
   引入：header.php <head>（紧随内联基础样式之后 → 同权重本文件靠后生效）
   断点策略（由宽到窄）：
     1280 / 1100 / 1024(汉堡抽屉启用) / 900 / 768 / 600 / 480 / 400 / 360
   原则：以 .nav-shell 单一 DOM（桌面横排 → 移动抽屉），避免重复标记；
        对页面内联 style（<body> 内 <style> 靠后）的已知冲突用 !important。
   ============================================================ */

/* ---------- 全局基础层（任意宽度均生效，偏安全） ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    -webkit-tap-highlight-color: rgba(30, 95, 196, .12);
    overscroll-behavior-y: none; /* 顶部下拉/底部回弹不越出页面 */
}
/* 横向溢出兜底：用 clip（不产生滚动容器、不破坏 sticky），旧内核回退 hidden */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}
body.no-scroll { overflow: hidden; } /* 抽屉打开时锁定背景滚动 */
* { -webkit-overflow-scrolling: touch; } /* iOS 惯性滚动 */
/* 通用富文本/表格溢出护栏（桌面端一并生效，防止内容把页面撑宽） */
.article-body {
    overflow-wrap: break-word;
    word-break: break-word;
}
.article-body img, .article-body video, .article-body canvas,
.article-body iframe, .article-body svg, .article-body table,
.article-body pre { max-width: 100%; }
.article-body table { display: block; overflow-x: auto; }
.article-body pre, .article-body code { white-space: pre-wrap; word-break: break-all; }

/* ============================================================
   断点 ≤ 1280 —— 收紧间距
   ============================================================ */
@media (max-width: 1280px) {
    .container { padding-left: 18px; padding-right: 18px; }
    .section { padding: 60px 0; }
}

/* ============================================================
   断点 ≤ 1024 —— 启用汉堡抽屉
   桌面顶栏在 <1025px 已放不下「logo+8项导航+搜索+登录」，转为抽屉是
   比一味缩小字号更可点的方案；≤1024 也覆盖 1024px 平板。
   ============================================================ */
@media (max-width: 1024px) {
    /* --- 顶栏瘦身 --- */
    .site-header .container { height: 62px; padding: 0 14px; gap: 8px; }
    .logo-icon { width: 44px; height: 44px; }
    .logo-text .brand { font-size: 1.05rem; }
    .nav-shell { height: auto; flex: none; } /* fixed 元素不参与 flex，恢复固定尺寸 */

    /* 【关键修复】.site-header 是 position:sticky + z-index:100，本身就是一个堆叠上下文。
       抽屉 .nav-shell (z:400) 是它的后代，被困在该上下文里——全局比较时只能以 z:100 参与。
       但 .nav-overlay (z:390) 是 body 直接子节点，在根层级比较，390 > 100 → 遮罩盖在
       抽屉之上，导致点击"首页/集团概况…"等菜单项实际命中遮罩，链接永不触发。
       在此断点把 site-header 提到 500，让抽屉以父级 z:500 整体超过遮罩。 */
    .site-header { z-index: 500; }

    /* --- 右侧操作按钮（搜索 + 汉堡）--- */
    .nav-btns { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .nav-btns .search-toggle,
    .nav-btns .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0; margin: 0;
        border: 1px solid #d4e0f3; border-radius: 8px; background: #fff;
        color: #1e5fc4; cursor: pointer;
    }
    .nav-btns .nav-toggle { color: #0d2862; }

    /* --- 右侧抽屉面板 --- */
    .nav-shell {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 400;
        width: min(86vw, 340px); height: 100vh; height: 100dvh;
        display: flex; flex-direction: column; align-items: stretch;
        justify-content: flex-start;
        background: #fff;
        box-shadow: -8px 0 28px rgba(9, 20, 40, .18);
        transform: translateX(105%);
        transition: transform .28s cubic-bezier(.32, .72, 0, 1);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 0 0 28px;
    }
    .nav-shell.open { transform: translateX(0); }

    /* 抽屉头：品牌 + 关闭 */
    .nav-shell-top {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 18px; border-bottom: 1px solid #eef2f8;
        position: sticky; top: 0; background: #fff; z-index: 1;
    }
    .nav-shell-brand { font-size: 1.05rem; font-weight: 700; color: #0d2862; }
    .nav-close {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0; border: none; background: transparent;
        color: #8899aa; font-size: 1.1rem; cursor: pointer;
    }
    .nav-close:active { background: #f2f6fc; border-radius: 50%; }

    /* 抽屉内顺序：搜索(1) → 导航(2) → 账户(3) */
    .nav-shell .header-search {
        order: 1; display: flex; width: auto; height: 42px;
        margin: 14px 14px 4px; border-radius: 10px; flex: none;
    }
    .nav-shell .header-search input { flex: 1 1 auto; width: auto; min-width: 0; }
    .nav-shell .header-search button { flex: none; }

    .nav-shell .nav {
        order: 2; display: flex; flex-direction: column; align-items: stretch;
        width: 100%; height: auto; padding: 4px 0; flex: none; gap: 0;
    }
    .nav-shell .nav li { display: block; width: 100%; height: auto; }
    .nav-shell .nav li + li::before { display: none; } /* 去掉竖线分隔符 */
    .nav-shell .nav a {
        display: flex; align-items: center; width: 100%;
        min-height: 48px; height: auto; padding: 0 22px;
        font-size: 1rem; color: #333; white-space: normal;
    }
    .nav-shell .nav a.active { background: rgba(30, 95, 196, .08); font-weight: 600; }
    .nav-shell .nav a:active { background: rgba(30, 95, 196, .12); }

    .nav-shell .nav-auth {
        order: 3; display: flex; flex-direction: column; align-items: stretch;
        width: 100%; height: auto; margin: 6px 0 0; padding: 8px 0;
        border-top: 1px solid #eef2f8; flex: none;
    }
    .nav-shell .nav-auth li { display: block; width: 100%; height: auto; }
    .nav-shell .nav-auth li + li::before { display: none; }
    .nav-shell .nav-auth a {
        display: flex; align-items: center; width: 100%;
        min-height: 48px; height: auto; padding: 0 22px; font-size: .98rem;
    }
    .nav-shell .nav-auth .nav-user, .nav-shell .nav-auth .nav-login { color: #1e5fc4; font-weight: 600; }
    .nav-shell .nav-auth .nav-logout, .nav-shell .nav-auth .nav-register { color: #666; }

    /* --- 遮罩 --- */
    .nav-overlay {
        display: block; position: fixed; inset: 0; z-index: 390;
        background: rgba(9, 20, 40, .5);
        opacity: 0; visibility: hidden;
        transition: opacity .25s ease, visibility .25s;
    }
    .nav-overlay.show { opacity: 1; visibility: visible; }

    /* --- 内容层微调 --- */
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .container { padding-left: 16px; padding-right: 16px; }
    .section { padding: 52px 0; }
    .page-banner { padding: 54px 0; }
    .article-body img, .article-body table { max-width: 100%; }
}

/* ============================================================
   断点 ≤ 900 —— 通用双列/大卡片收缩前奏
   ============================================================ */
@media (max-width: 900px) {
    .lead { font-size: .98rem; }
}

/* ============================================================
   断点 ≤ 768 —— 通用单列化 + 字号触控优化
   （多数页内 grid 单列已由各自页面处理，此处补全局遗漏）
   ============================================================ */
@media (max-width: 768px) {
    /* 输入框 ≥16px：避免 iOS Safari 聚焦自动缩放，扩大触摸区 */
    input[type="text"], input[type="password"], input[type="email"],
    input[type="tel"], input[type="number"], input[type="url"],
    input[type="search"], textarea, select {
        max-width: 100%; font-size: 16px;
    }
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 24px; }
    .container { padding-left: 14px; padding-right: 14px; }
    .section { padding: 46px 0; }
    .section-desc { font-size: .95rem; margin-bottom: 34px; }
    .page-banner h1 { letter-spacing: 1px; }
    .site-footer { padding: 36px 0 18px; }
    .footer-col h4 { margin-bottom: 14px; }
    .footer-col a { display: block; padding: 7px 0; } /* 触控间距 */
    .subnav { padding: 12px 0; }
    .subnav .container { gap: 8px; }
    .subnav a { padding: 7px 18px; }
}

/* ============================================================
   断点 ≤ 600 —— 手机核心宽度（iPhone SE / 主流 360~414 之间的视觉下限）
   ============================================================ */
@media (max-width: 600px) {
    .section { padding: 40px 0; }
    .section-title { font-size: 1.3rem; }
    .page-banner { padding: 42px 0; }
    .page-banner h1 { font-size: 1.45rem; line-height: 1.35; }
    .page-banner p { font-size: .95rem; }
    .lead { font-size: .95rem; }
    /* 首页首屏轮播：高度随屏幕收敛，避免大屏定高在小屏占过多首屏 */
    .hero-slider { height: 380px !important; }
    /* 富文本正文手机字号 */
    .article-body { font-size: .98rem !important; line-height: 1.85; }
    /* 页面内两列表单（contact/job-apply 内联 1fr 1fr）小屏改单列 */
    .form-row-2 { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
    /* 通用卡片内边距收紧 */
    .feat { padding: 22px 18px; }
    .card { border-radius: 10px; }
    /* 间距大数值元素收拢（flex/grid gap 超 40 的常见排版） */
    .footer-grid { gap: 22px; }
}

/* ============================================================
   断点 ≤ 480 —— 小屏细节
   ============================================================ */
@media (max-width: 480px) {
    .site-header .container { padding: 0 10px; }
    .nav-btns { gap: 6px; }
    .nav-btns .search-toggle, .nav-btns .nav-toggle { width: 38px; height: 38px; }
    .logo-icon { width: 40px; height: 40px; }
    .section-title { font-size: 1.22rem; letter-spacing: .5px; }
    .footer-col a { padding: 8px 0; }
    .subnav a { font-size: .85rem; padding: 6px 14px; }
    .btn { padding: 0 20px; font-size: .92rem; }
}

/* ============================================================
   断点 ≤ 400 / ≤ 360 —— 极端窄屏兜底
   ============================================================ */
@media (max-width: 400px) {
    .logo-text .brand { font-size: 1rem; }
    .nav-shell { width: 92vw; }
}
@media (max-width: 360px) {
    .nav-btns .search-toggle { display: none; } /* 极窄屏只留汉堡，搜索入口在抽屉内 */
    .logo-text .sub { display: none; }
}

/* ============================================================
   触屏偏好增强（不依赖宽度）
   ============================================================ */
@media (pointer: coarse) {
    .nav a, .nav-auth a, .footer-col a { -webkit-tap-highlight-color: transparent; }
}