/* ============================================================================
   mobile.css — 手机端适配层（隔离式，参照 hkzhuna docs/mobile-adaptation.md）
   ----------------------------------------------------------------------------
   【隔离契约】本文件 100% 的规则都写在 @media 内。
   · ≥1025px（全部桌面分辨率）：0 条生效声明 → PC 版式与引入前逐像素一致。
   · 断点沿用站点既有体系：1024（导航临界）、720（手机/底栏）、620（窄手机）。
   · 只覆盖站点既有 class，不新增结构；不写 UA 嗅探、不做双模板。

   参考 hkzhuna 第七轮手机端适配的 A–H 分组：
   A 基础层 / B 顶栏与导航 / C 首屏 / D 区块密度 / E 表单 / F 报告页 /
   G 页脚与吸底元素 / H 点击目标。
   ============================================================================ */

/* ===========================================================================
   1. 基础层（全站手机通用，≤720）
   =========================================================================== */
@media (max-width: 720px) {
  /* iOS 横屏不自动放大字号 */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* 兜底横向溢出。clip 不会把 body 变成滚动容器，不破坏 sticky/fixed */
  body { overflow-x: clip; }

  /* 去掉点击灰块 + 消除 300ms 点击延迟 */
  a, button, summary, label, select, input, [role='button'] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* 长串不撑破屏幕 */
  img, video, canvas, iframe { max-width: 100%; }
  pre, code { overflow-wrap: anywhere; }
  pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 1024px) {
  /* iOS 在输入框聚焦时自动放大整页（字号 <16px 触发）。
     select 走系统选择器不会触发缩放，故排除，避免撑宽顶部语言选择器。
     覆盖到 ≤1024 是因为 iPad Safari 同样会聚焦放大。 */
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']):not([type='button']),
  textarea { font-size: 16px !important; }
}

/* ===========================================================================
   2. 导航临界区（≤1024）
   ---------------------------------------------------------------------------
   既有问题：主导航 .nav 在 ≤1024 隐藏，而移动底栏原本只在 ≤720 出现 →
   721–1024（平板竖屏 / 折叠屏展开）整段没有任何导航入口。
   处理：底栏上移到 ≤1024；正文、cookie 条为它让位并避开 iPhone 底部横条。
   =========================================================================== */
@media (max-width: 1024px) {
  .mobile-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface);
    border-top: 1px solid var(--line-strong);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-bar a {
    display: flex; align-items: center; justify-content: center;
    min-height: 36px; padding: 9px 0;
    /* 7 格等宽，最长标签（西语 Herramientas / 德语 Werkzeuge）在 390px 下
       比格子还宽；不再 nowrap 硬裁，缩字号 + 零横向内边距 + 必要时断词兜底。 */
    font-size: 10.5px; line-height: 1.25; letter-spacing: -0.01em;
    text-align: center; color: var(--muted);
    white-space: normal; overflow-wrap: anywhere; hyphens: auto;
  }
  .mobile-bar a:hover { color: var(--brand); text-decoration: none; }

  /* 只有真的存在底栏的页面才留出底栏高度（报告页走独立布局，无底栏） */
  body:has(.mobile-bar) { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }
  .cookie { bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }

  /* 报告页自带吸底购买条 .rep-buybar（z-40，同一位置）→ 隐藏全局底栏避免叠压 */
  body:has(.rep-buybar) .mobile-bar { display: none; }
}

/* ===========================================================================
   3. 顶栏 / 轮播 / 折叠区 / Cookie（≤720）：点击目标与触控友好
   =========================================================================== */
@media (max-width: 720px) {
  /* 语言选择器略放大，但仍控制在头栏可容纳宽度内 */
  .lang-switch__select { font-size: 13px; padding: 7px 24px 7px 10px; }

  /* 轮播圆点：视觉仍是 8px 小点，但点击区 ≥24px（背景裁到内容盒） */
  .scan-dot { width: 24px; height: 24px; padding: 8px; background-clip: content-box; }
  .scan-dot.is-active { width: 38px; padding: 8px; }

  /* 邮箱折叠触发器：整行 ≥40px 触控 */
  .upg__summary { display: flex; align-items: center; min-height: 40px; }

  /* Cookie：Reject 原为 13px 纯文本链，和右侧大按钮不对等且难点。
     改为等效按钮（同最小高度 + 描边），拒绝与同意同等易点。 */
  .cookie__inner { padding: 14px 18px; gap: 12px; }
  .cookie__actions { width: 100%; gap: 10px; }
  .cookie__reject {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 14px;
    border: 1px solid var(--line-strong); border-radius: 999px;
    font-size: 13.5px;
  }
  .cookie__actions .btn { flex: 1; min-height: 40px; }

  /* 页脚链接：行内链接触控高度 ≥30px（列链接 + 底部法务链接 + 推广链接） */
  .footer a { display: inline-flex; align-items: center; min-height: 32px; }
  .footer__col a { min-height: 32px; }

  /* 面包屑链接：Home / Free tools 也是可点导航，抬到 32px */
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; }

  /* 其余小型控件：标签 chip / 皮肤图 tab / 文字按钮（Sign out）统一抬到 32px */
  .chip, .skinmap__tab, .skinmap__maponly, .btn-link { min-height: 32px; }
  .chip { padding-top: 6px; padding-bottom: 6px; }

  /* 账户页工具链（My reports · Email preferences · Delete my data · Sign out）
     是一排独立操作，不是句子内链——每个抬到 32px 触控高度，自然换行 */
  .acct-links a, .acct-links .btn-link { display: inline-flex; align-items: center; min-height: 32px; }
}

/* ===========================================================================
   4. 内容密度与标题（≤620）
   ---------------------------------------------------------------------------
   手机上 .h1 仍是 38.4px（clamp 下限 2.4rem），次级页首屏偏大；
   首屏/区块纵向留白按 hkzhuna 的做法压缩一档。
   =========================================================================== */
@media (max-width: 620px) {
  .h1 { font-size: 2rem; }
  .hero--premium .h1 { font-size: clamp(1.78rem, 7.2vw, 2.04rem); letter-spacing: -.018em; }
  .hero--premium { padding-top: 30px; padding-bottom: 34px; }
  .hero--premium .lede { font-size: .98rem; line-height: 1.62; }

  .section { padding: 44px 0; }

  /* 首屏三档按钮：加大内距，主按钮更易点 */
  .plan-trio__btn { padding: 15px 14px; }
  .plan-trio__name { font-size: 15px; }
  .plan-trio__sub { font-size: 14px; }

  /* 表格：单元格收窄，窄屏能多显示几列（表格本身在 .table-wrap 内横向滚动） */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table th, .table td { padding-left: 10px; padding-right: 10px; }
  .table { font-size: 13px; }

  /* 报告正文的 4–5 列度量表：内容比目录表长，挤在 354px 里每格折 4–5 行。
     给一个最小宽度，让它在 .table-wrap 内横向滑动，而不是把单元格压扁。 */
  .sample-body .table, .report-body .rep-ch .table { min-width: 470px; }

  /* 居中版式里的长说明段：手机上一律左对齐（多行居中极难扫读）。
     标题仍居中，保持原有视觉节奏。
     第二条要和 site.css 的 .tool-page .section > .container > .lede 同特异性（0,4,0），
     靠后加载取胜——工具页 hero 段实际命中的是那条规则。 */
  .center .lede, .center .fine, .tool-hero .lede, .hero-band .lede { text-align: left; }
  .tool-page .section > .container > .lede,
  .tool-page .section > .container.container--narrow > .lede,
  .tool-page .section > .container > .lede--section { text-align: left; }

  /* 工具页顶部全大写元信息（AI IMAGE TOOL · 5 CREDITS · …）在 390px 折 3 行，
     收紧字距/行高，避免像一堵字墙。 */
  .tool-hero .eyebrow, .credit-page .eyebrow, .decision-cost-banner { font-size: 10px; letter-spacing: .045em; line-height: 1.6; }

  /* 订阅卡里的主按钮：输入框已整宽，按钮也应整宽（原为左侧小按钮） */
  #newsletter-form .btn { width: 100%; }
}

/* ===========================================================================
   5. 表单与结账（≤620）：整宽堆叠（既有 .form--inline 在 ≤720 已堆叠，
      这里补结账/邮箱卡片内按钮与金额行的触控高度）
   =========================================================================== */
@media (max-width: 620px) {
  .checkout-email .btn, .email-form .btn, .capture .btn { min-height: 44px; }
  .field input, .field select, .field textarea { min-height: 44px; }
}

/* ===========================================================================
   6. 小屏高度（≤700px，如 iPhone SE / 横屏）：cookie 条 + 底栏原本占掉近 30% 首屏
   （375×667 实测 cookie 149px + 底栏 37px），收紧 cookie 内距与按钮高度。
   =========================================================================== */
@media (max-width: 720px) and (max-height: 700px) {
  .cookie__inner { padding: 10px 16px; gap: 8px; }
  .cookie__text { font-size: 12.5px; }
  .cookie__reject,
  .cookie__actions .btn { min-height: 34px; font-size: 13px; }
  .cookie__actions .btn { padding-top: 8px; padding-bottom: 8px; }
}

/* ===========================================================================
   7. 本地化长词（≤1024）：德语/芬兰语等复合词在 grid/flex 里会以 min-content
      把轨道撑得比视口还宽（390px 实测 /de/face-report/ 溢出 48px）。
      只放宽断词与最小宽度，不改字号/间距，PC 端零影响。
   =========================================================================== */
@media (max-width: 1024px) {
  .container, .container--narrow, .panel, .card { min-width: 0; overflow-wrap: break-word; }
  .hero-slim { grid-template-columns: minmax(0, 1fr); }
  .hero-slim__text { min-width: 0; }
  .hero-slim__text .h1, .hero-slim__text .lede, .hero-slim__text .eyebrow,
  .hero-slim .hero-actions .btn { overflow-wrap: anywhere; }
  .hero-slim .hero-actions .btn { max-width: 100%; white-space: normal; }
}

/* ≤720：顶栏 CTA 的本地化译文可能比英文长（日语实测溢出 12px）。宁可让
   按钮换行，也不能把整行顶出视口。 */
@media (max-width: 720px) {
  .site-header__actions .btn--sm { max-width: 44vw; white-space: normal; line-height: 1.3; text-align: center; }
}

/* ===========================================================================
   8. 超窄屏（≤360）：顶栏「logo + 语言选择 + CTA」三件在 320px 下会一起把
      整行撑出视口（英文 38px / 日语 44px，与语言无关，属既有缺陷）。
      收紧间距与字号，语言下拉限宽，容器留白从 18px 降到 12px。
   =========================================================================== */
@media (max-width: 360px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .site-header__inner { gap: 5px; }
  .site-header__actions { gap: 5px; flex-shrink: 1; min-width: 0; }
  .site-header .logo__mark { width: 24px; height: 24px; font-size: 16px; }
  .site-header .logo__text { font-size: 16px; }
  .lang-switch__select {
    max-width: 78px; font-size: 11px; padding: 7px 20px 7px 8px;
    text-overflow: ellipsis;
  }
  .lang-switch::after { right: 8px; }
  .site-header__actions .btn--sm {
    max-width: 38vw; font-size: 11px; padding: 8px 9px;
    line-height: 1.25; white-space: normal;
  }

  /* 页脚：≤720 时是两列网格，日语长标签在 320px 会把列撑宽。根因是
     `.footer a` 被设成 inline-flex，文字变成单个不可收缩的匿名 flex item。
     列链接改成可换行的 block（保留 32px 触控高度），列本身 min-width:0。 */
  .footer__col { min-width: 0; }
  .footer__col h3 { overflow-wrap: anywhere; }
  .footer__col a {
    display: block; min-width: 0; overflow-wrap: anywhere;
    min-height: 32px; padding: 5px 0; line-height: 22px;
  }
}

/* ≤340：两列各只剩 ~130px，日语长标签仍会撑宽列。极窄边缘屏直接单列，
   保证 0 裁切；360px（常见小屏）继续用两列，页脚不至于被拉得过长。 */
@media (max-width: 340px) {
  .footer__cols { grid-template-columns: 1fr; }
}