/* ═══════════════════════════════════════════════════════════════
   知微全站响应式增强 responsive-enhance.css v1.0
   ★开发负责人: 知微工作区 | 2026-08-20 | 手机+Pad UI/UE 适配
   
   三级断点体系（7种碎片化断点 → 3级）:
     - 手机  <640px:  单列 + 汉堡抽屉 + 44px触控 + safe-area
     - 平板  640-1024: 双列栅格 + 侧栏可折叠
     - 桌面  >1024px:  现有布局（不受影响）
   
   规范依据: WCAG 2.5.5 触控目标 / Apple HIG / 2025-2026 响应式最佳实践
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bp-mobile: 640px;
  --bp-tablet: 1024px;
  --touch-target: 44px;
  --kdd-gold: #D4AF37;
  --kdd-gold-deep: #B8942F;
}

/* ── 移动端 viewport 增强（需页面已有 viewport-fit=cover，JS 兜底注入） ── */
@viewport { width: device-width; }

/* ═══ 手机端 <640px ═══ */
@media (max-width: 640px) {

  /* 触控目标 ≥44px（WCAG 2.5.5 AA） */
  a, button, .btn, .nav-item, .sidebar-link, .card-link,
  .asset-title a, .breadcrumb a, .theme-toggle, .menu-toggle {
    min-height: var(--touch-target);
    min-width: var(--touch-target);
    display: inline-flex;
    align-items: center;
  }

  /* 内容区全宽优先（铁律 E031: 单列自上而下） */
  body { font-size: 15px; line-height: 1.7; }
  .layout, .main-content, #app, .content-area, article, main {
    margin-left: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* 弹性排版 clamp() */
  h1 { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.25; }
  h2 { font-size: clamp(18px, 5vw, 26px) !important; line-height: 1.3; }
  h3 { font-size: clamp(16px, 4.5vw, 22px) !important; }
  .keypoint, .card-title, .stat-title { font-size: clamp(17px, 5vw, 24px) !important; }

  /* 卡片折叠为全宽单列 */
  .card, .theory-card, .case-card, .asset-card, .stat-card,
  .vendor-card, .company-card, .topic-card, .chart-card {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 14px !important;
  }
  .asset-grid, .card-grid, .chart-grid, .theory-grid, .case-grid,
  .content-grid, .stat-grid, .vendor-grid {
    grid-template-columns: 1fr !important;
    display: block !important;
    gap: 0 !important;
  }

  /* 表格横向滚动容器 */
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* 图表容器横向滚动（不破坏单列） */
  .chart-container, .chart-box, [id^="chart"], .echarts-box {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 侧边栏 → 汉堡抽屉（默认收起） */
  .sidebar, nav.sidebar, aside.sidebar, .side-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 320px) !important;
    height: 100% !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 1000 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #0a0e17 !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
  .sidebar.open, nav.sidebar.open, aside.sidebar.open, .side-nav.open {
    transform: translateX(0);
  }

  /* 遮罩层（JS 注入，点击关闭） */
  .sidebar-mask {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 1;
    animation: maskFade 0.25s ease;
  }
  @keyframes maskFade { from { opacity: 0; } to { opacity: 1; } }

  /* 汉堡按钮（JS 注入，fixed 左上） */
  .hamburger-btn {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    left: 12px !important;
    z-index: 1001 !important;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,14,23,0.9);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 12px;
    color: #D4AF37;
    font-size: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  }
  .hamburger-btn:active { transform: scale(0.94); }

  /* 返回顶部浮动按钮（底部拇指热区 + safe-area） */
  .back-top-btn {
    position: fixed !important;
    right: 14px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    z-index: 998 !important;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(212,175,55,0.92);
    color: #0a0e17;
    border-radius: 50%;
    font-size: 18px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 16px rgba(212,175,55,0.35);
  }
  .back-top-btn.show { opacity: 1; pointer-events: auto; }
  .back-top-btn:active { transform: scale(0.94); }

  /* 安全区（刘海屏/手势条） */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .fixed-bottom, .footer-fixed, .tabbar {
    padding-bottom: max(env(safe-area-inset-bottom), 10px) !important;
  }

  /* 图片懒加载提示 */
  img { max-width: 100% !important; height: auto !important; }

  /* 面包屑/返回链接触控友好 */
  .breadcrumb a { min-height: 44px; line-height: 44px; }

  /* 搜索框/输入框触控 */
  input, select, textarea { font-size: 16px !important; min-height: 44px; }

  /* 减少信息密度: 页面留白收紧 */
  .section, section, .module { padding: 10px 0 !important; }
  p { margin: 8px 0; }
}

/* ═══ 平板端 641-1024px ═══ */
@media (min-width: 641px) and (max-width: 1024px) {

  /* 触控目标 */
  a, button, .nav-item, .sidebar-link { min-height: 44px; }

  /* 双列栅格（图表/统计卡墙），内容卡保持单列（铁律） */
  .chart-grid, .card-grid, .stat-grid, .vendor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* 侧边栏可折叠（默认收起，汉堡展开） */
  .sidebar, nav.sidebar, aside.sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(70vw, 300px) !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 1000 !important;
    overflow-y: auto;
    background: #0a0e17 !important;
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
  .sidebar.open, nav.sidebar.open, aside.sidebar.open { transform: translateX(0); }

  /* 平板布局边距 */
  .layout, .main-content, #app {
    margin-left: 0 !important;
    padding: 0 20px !important;
  }

  /* 弹性字号 */
  h1 { font-size: clamp(24px, 4.5vw, 34px) !important; }
  body { font-size: 15.5px; }

  /* 安全区 */
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* 表格横向滚动 */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══ 触屏设备禁用 hover 粘滞 ═══ */
@media (hover: none) {
  .card:hover, .btn:hover, .nav-item:hover, .sidebar-link:hover,
  .asset-card:hover, .stat-card:hover, .vendor-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: inherit !important;
  }
  a:hover, button:hover { opacity: 1 !important; }
}

/* ═══ 桌面端 >1024px（保持现状，仅微调） ═══ */
@media (min-width: 1025px) {
  /* 桌面隐藏汉堡/返回顶部（JS 同步隐藏） */
  .hamburger-btn, .back-top-btn, .sidebar-mask { display: none !important; }
  /* 桌面恢复侧边栏（不被移动端覆盖影响） */
  .sidebar, nav.sidebar, aside.sidebar {
    transform: none !important;
    position: static !important;
  }
}

/* ═══ 滚动条美化（触控友好） ═══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.3); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ═══ 减少动画偏好支持 ═══ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}