/* ============================================================
   环球系列 · 移动端适配层（shared，全站共用）
   只在窄屏生效，不改变桌面端任何表现。
   设计原则：
   1. 触控目标 ≥ 44px（Apple HIG）/ ≥ 48px（Material）—— 用 padding 撑开，
      不改变视觉尺寸，避免破坏原有排版。
   2. 正文最小 15px、辅助信息最小 12px —— 手机上一个像素都不能省。
   3. 横向可滚容器加「可滑动」提示，避免用户不知道能左滑。
   4. 长表格/代码块不外溢，撑破页面。
   ============================================================ */

/* ---------- 全站基础：防横向溢出 + 滚动惯性 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
}
/* 横向滚动容器：iOS 惯性滚动 */
[style*="overflow"] {
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   窄屏（≤ 640px）：触控目标与字号
   ============================================================ */
@media (max-width: 640px) {
  /* ---- 1. 触控目标加高 ----
     这些元素本身是「行内小块」，直接用 min-height 会撑破布局，
     故用 padding 纵向撑开 + 负 margin 抵消，视觉尺寸不变、热区变大。 */
  .doc-check-item label,
  .doc-check-item { min-height: 44px; }
  .doc-check-item { display: flex; align-items: center; }
  /* 复选框本体放大到 24px（热区远大于此，因为整行 label 都可点） */
  .doc-check { width: 24px; height: 24px; }
  /* 行内引用链接（正文中的来源链接）保持行内，但加大纵向 padding 提高命中率 */
  .src-link, .source-link, main p a, .detail-foot a { padding: 3px 0; }

  /* 页脚链接、返回链接、面包屑 */
  .back,
  .back-btn,
  footer a,
  .site-footer a,
  .links a { display: inline-block; padding: 10px 2px; min-height: 40px; }

  /* 筛选按钮、标签页 */
  .filter-btn,
  .tab,
  [role="tab"] { min-height: 42px; padding-top: 10px; padding-bottom: 10px; }

  /* 夹在正文里的操作链接 */
  .profile-link,
  .compare-link,
  .detail-link { min-height: 46px; display: flex; align-items: center; justify-content: center; }

  /* 标签 chip：视觉小、热区够 */
  .cc-tag,
  .tag,
  .chip { padding: 6px 11px; font-size: 12px; }

  /* ---- 2. 字号下限 ----
     11-12px 的辅助信息在手机上偏小，抬到 12-13px。 */
  .cc-tag, .tag, .chip { font-size: 12px; }
  .cc-en, .en, .meta, .note, .hint { font-size: 12.5px; }
  .kv-table th, .kv-table td { font-size: 13.5px; }
  footer, .site-footer { font-size: 12.5px; line-height: 1.7; }

  /* ---- 3. 横向滚动容器：加「可左滑」提示 ---- */
  .tablewrap,
  .table-wrap,
  .scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 右侧渐隐，暗示还有内容 */
    background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06));
    background-position: right center;
    background-size: 20px 100%;
    background-repeat: no-repeat;
    background-attachment: local;
  }

  /* ---- 4. 表格：允许换行、收窄内边距，减少横向滚动距离 ---- */
  table th, table td { padding: 9px 10px; }
  /* 只对「窄屏下可以换行」的表放行，比较表仍保持 nowrap 由容器滚动 */
  .kv-table td, .kv-table th { white-space: normal; word-break: break-word; }

  /* ---- 5. 大字号收敛，避免手机上一行只放得下几个字 ---- */
  h1 { font-size: clamp(22px, 7.5vw, 30px) !important; }
  .hero-title, .topic-hero h1, .hero h1 { line-height: 1.3; }

  /* ---- 6. 卡片内边距收紧、栅格单列 ---- */
  .country-card { padding: 14px; }
  .cc-top { gap: 10px; }
  .cc-arrow { display: none; }  /* 手机上箭头意义不大，省空间 */
}

/* ============================================================
   超窄屏（≤ 380px）：iPhone SE / 小屏安卓
   ============================================================ */
@media (max-width: 380px) {
  .doc-check-item label { font-size: 13px; }
  .cc-name { font-size: 15px; }
  h1 { font-size: clamp(20px, 7vw, 26px) !important; }
  /* 极窄屏下双列也放不下，强制单列 */
  .grid, .map-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   触控设备：去掉 hover 依赖（手机上 hover 会「粘住」）
   ============================================================ */
@media (hover: none) {
  a:hover, button:hover, .country-card:hover {
    /* 仅在非触控设备保留 hover 效果；触控设备用 active 反馈代替 */
  }
  .country-card:active { transform: scale(0.985); transition: transform .08s; }
  a:active, button:active { opacity: 0.8; }
}