/* ============================================================================
   mobile-fix.css · 手机端布局修复（2026-10-23）
   ----------------------------------------------------------------------------
   只改布局（尺寸、间距、对齐、点击区、字号、溢出），不改任何数据。
   全部规则包在 max-width 媒体查询里，桌面端零影响。

   ⭐ 回滚：删掉 header-v3.php 里对本文件的 <link>（一行），其余文件不受影响。

   解决的体检问题：
     P0-1  语言切换「EN」被裁出屏幕（.nav-lang right=431px > 视口）
     P1-1  导航可点元素高度全部 < 44px
     P1-2  导航字号 11.5px 低于可读下限
     P1-3  产品列表缩略图仅 64×64
     P1-4  产品筛选标签横向滑动无视觉提示
     P1-5  关于页数字区数字/单位基线不齐
     P1-6  关于页长地址顶边、与工作时间无分隔
   ========================================================================== */

/* ---------- ≤760：导航收紧 + 点击区放大 ---------- */
@media (max-width: 760px) {
  .v3nav { gap: 8px; padding: 0 12px; }
  .v3nav-tools { gap: 6px; }

  /* 点击区 ≥ 44×44 */
  .v3nav-brand { min-height: 44px; }
  .v3nav-studio { height: 44px; padding: 0 10px; font-size: 12px; }
  /* flex:0 0 44px —— 不加会被 flex 压窄到 41px（360 屏实测） */
  #v3SearchBtn,
  #v3MenuBtn { flex: 0 0 44px; width: 44px; height: 44px; }

  /* 语言切换：不再靠右溢出 */
  .nav-lang {
    height: 44px;
    margin-left: 2px;
    font-size: 12px;
    letter-spacing: .02em;
    flex: 0 0 auto;
  }
  .nav-lang a { padding: 0 3px; }
  .nav-lang-sep { padding: 0 3px; }
}

/* ---------- ≤520：隐藏品牌文字，给语言切换腾位置 ---------- */
@media (max-width: 520px) {
  /* HRW 标识保留，去掉「海润微」三字 —— 这是 143px → 约 58px 的空间来源 */
  .v3nav-brand-txt { display: none; }
  .v3nav-tools { gap: 3px; }

  /* 「工作室」改回全称「音频工作室」：只多占 14px，
     用「语言切换缩小字号 + 收紧分隔符」把这 14px 换出来（见下） */
  .v3nav-studio span.txt { display: inline; }
  .v3nav-studio span.txt-s { display: none; }
  .v3nav-studio { padding: 0 8px; font-size: 11.5px; }

  /* 语言切换仍保留完整语言名（中文 / English，符合 W3C i18n），
     只压字号与分隔符内边距，不动用「中 / EN」缩写 */
  .nav-lang { font-size: 11px; margin-left: 0; }
  .nav-lang a { padding: 0 2px; }
  .nav-lang-sep { padding: 0 2px; }
}

/* ---------- 首页 hero 标题：手机端改为纯色亮金 ----------
   原因：.hero h1 .l2 用 linear-gradient(96deg,#F6D89A,#DFA83F,#B9802A) + background-clip:text。
   末端 #B9802A 是暗棕金，手机上行短、字少，更多字落在暗端 ⇒ 整行看起来发暗。
   手机上改用纯色 #F2D389（对比度更高），桌面端渐变保持不变。 */
@media (max-width: 760px) {
  /* 第一行：不再依赖继承 .hero h1 的 #F2F1EE —— 部分安卓浏览器上实测会退化成暗棕灰。
     显式指定 + 轻微文字阴影，保证在深色芯片背景上也读得清。 */
  .hero h1 .l1 {
    color: #FBF7EC;
    -webkit-text-fill-color: #FBF7EC;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  }
  .hero h1 .l2 {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #F2D389;
    -webkit-text-fill-color: #F2D389;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  }
}

/* 兜底：不支持 background-clip:text 的浏览器（部分安卓 WebView / 强制深色模式），
   渐变文字会整行透明=看起来"消失/发暗"。这里给纯色，保证任何环境都读得到。 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .l2 {
    background: none;
    color: #DFC08A;
    -webkit-text-fill-color: #DFC08A;
  }
}

/* ---------- 产品列表：缩略图放大，行结构随之调整 ---------- */
@media (max-width: 520px) {
  .pv-row {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 2px;
    align-items: center;
  }
  .pv-thumb { width: 96px; height: 96px; }
  .pv-id b { font-size: 14px; }
  .pv-id em { font-size: 12.5px; }
}

/* ---------- 产品筛选：给横向滑动一个可见提示 ---------- */
@media (max-width: 720px) {
  .pv-tabs {
    padding-right: 30px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
  }
  .pv-tabs button { scroll-snap-align: start; }
  .pv-chips { padding-right: 30px; }
}

/* ---------- 关于页：数字区与地址 ---------- */
@media (max-width: 520px) {
  .ab3-stat {
    align-items: flex-end;
    gap: 10px;
    padding: 14px 0;
  }
  .ab3-stat b { font-size: 26px; }
  /* 单位紧跟数字，去掉 4px 间隙造成的「50 +」断字感 */
  .ab3-stat b i { margin-left: 2px; font-size: 14px; line-height: 1; }
  .ab3-stat span {
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
    max-width: 46%;
  }

  .ab3-addr { padding-top: 16px; }
  .ab3-addr p { word-break: break-word; overflow-wrap: anywhere; }
  .ab3-addr p.dim {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line-l);
  }
}

/* ---------- 内页 hero 标题：与首页同一问题的修复 ----------
   产品 / 关于 / 联系 / 详情页的 .pv-hero h1 第二行同样是「渐变 + 透明填充」，
   在部分手机上会退化成暗棕。这里同样改成显式亮色，桌面端渐变保持不变。 */
@media (max-width: 760px) {
  .pv-hero h1,
  .pv-hero h1 .l1 {
    color: #FBF7EC;
    -webkit-text-fill-color: #FBF7EC;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  }
  .pv-hero h1 .l2,
  .pd-hero h1 .l2 {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #F2D389;
    -webkit-text-fill-color: #F2D389;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  }
}

/* ---------- 语言切换：窄屏缩写 ----------
   视觉上用「中 / EN」省出 30px，aria-label / title 仍是完整语言名。 */
.lg-s { display: none; }

/* 341–389px：工作室保留全称，语言切缩写 */
@media (max-width: 389px) {
  .nav-lang .lg-f { display: none; }
  .nav-lang .lg-s { display: inline; }
  .nav-lang { font-size: 11.5px; letter-spacing: .02em; }
}

/* ≤340px：语言缩写 + 工作室回短称，保证 320 小屏也不溢出 */
@media (max-width: 340px) {
  .v3nav-studio span.txt { display: none; }
  .v3nav-studio span.txt-s { display: inline; }
  .v3nav-studio { padding: 0 7px; }
  .v3nav-brand svg { height: 24px; }
}

/* ---------- 英文站：Audio Studio 比「音频工作室」宽，390 屏会贴边 ---------- */
@media (max-width: 430px) {
  html[lang="en"] .v3nav-studio span.txt { display: none; }
  html[lang="en"] .v3nav-studio span.txt-s { display: inline; }
  html[lang="en"] .v3nav-studio { padding: 0 9px; }
}