/* ==========================================================================
   mobile.css — ≤768 窄屏收尾：字号下限 + 触控区
   排在所有 p-*.css 之后加载，只补「窄屏上真的不够用」的地方。

   两条原则：
   1) 字号一律 max(原值, 下限)。414 以上的手机 1rem ≈ 55px 起，原值本来就大于下限，
      写不写都一样；只有 375 / 360 / 320 这类窄屏才会被抬起来。所以不用担心
      「一改就把宽屏手机也改了」。
   2) 图标按钮不放大视觉，只放大可点区。伪元素撑出来的区域是透明的，
      布局一个像素都不动。
   ========================================================================== */

@media (max-width: 768px) {
  /* ------------------------------------------------------------------------
     1. 字号下限
     375 视口下 1rem = 50px：0.22rem 只有 11px、0.18rem 只有 9px，
     中文在这个尺寸上笔画会糊成一片。下面按「正文 / 辅助 / 元信息」三档抬。
     ------------------------------------------------------------------------ */

  /* 正文段落：0.22rem(11px) → 13px */
  .p-sol__text,
  .cul-desc,
  .ncard__desc,
  .nrow__desc { font-size: max(0.24rem, 14px); }

  /* 正文段落（原本 0.2rem = 10px） */
  .rnd__lead { font-size: max(0.2rem, 13px); }
  /* 产品详情开头的简介：0.24rem 在 375 下只有 12px，按正文下限抬到 13px；
     行高同步抬，否则字变大了行距还是 21px，三行挤成一坨 */
  .pd-desc { font-size: max(0.24rem, 14px); line-height: 1.75; }

  /* 卡片规格、文件信息这类辅助行：11px → 12px */
  .pcard__spec,
  .dl-item__date,
  .dl-item__size,
  .dl-item__view,
  .pd-file__read,
  .stat-unit { font-size: max(0.22rem, 12px); }

  /* 联系方式：标签 9px、值 9px → 12px / 13px */
  .c-sub { font-size: max(0.18rem, 12.5px); }
  .ci-label { font-size: max(0.18rem, 12px); }
  .ci-value,
  .ci-value a { font-size: max(0.18rem, 16px); }

  /* 新闻：年份 8px、摘要 11px、整行「查看」8px */
  .ncard__year,
  .nrow__year { font-size: max(0.16rem, 12px); }
  .nrow__more { font-size: max(0.16rem, 12px); }

  /* 发展历程：年份 9px、注释 10px */
  .timeline__year { font-size: max(0.18rem, 14px); }
  .hist__small { font-size: max(0.2rem, 12px); }

  /* 产品详情参数表：表头 / 单元格 9~11px → 12px。
     注意要写成 .pd-table tbody td 这一级——页面里是
     `.pd-table--sys tbody td { font-size: 0.18rem }`，`.pd-table td` 特异性不够压不住 */
  .pd-table tbody th,
  .pd-table tbody td { font-size: max(0.18rem, 12px); }
  .pd-table thead th { font-size: max(0.22rem, 12px); }
  .pd-file__meta,
  .pd-file__meta time,
  .pd-file__meta span { font-size: max(0.18rem, 12px); }

  /* 首页：应用领域标签里的序号 6.5px，英文副标题 10px */
  .apply-tab__idx { font-size: max(0.13rem, 10px); }
  .hero-en { font-size: max(0.2rem, 12px); }

  /* 面包屑 / 版权 / 页脚政策链接：11px → 12px */
  .crumb,
  .crumb a,
  .crumb .sep,
  .crumb .current,
  .copyright,
  .copyright-time,
  .copyright-links a { font-size: max(0.22rem, 12px); }

  /* 首页产品中心的六个分段标签 */
  .tabs .tab span { font-size: max(0.22rem, 12px); }

  /* 「关于我们」数字后面的单位（年 / +人 / ㎡）。页面里写的是
     `.a-stats .stat-unit`，要多带一层 .a-stats 才压得住 */
  .a-stats .stat-unit { font-size: max(0.18rem, 12px); }

  /* 分页数字 */
  .pager button,
  .pager a,
  .pager .pager-dots { font-size: max(0.22rem, 12px); }

  /* 新闻详情：信息来源 / 发布时间 / 分享 */
  .nd-meta span,
  .share span { font-size: max(0.22rem, 12px); }

  /* 页脚二维码下面的平台名，原本只有 6.5px */
  .social-qr__name { font-size: max(0.13rem, 10px); }

  /* ------------------------------------------------------------------------
     2. 触控区
     ------------------------------------------------------------------------ */

  /* 二级导航：每项只有 24px 高。只加上内边距（再拿负 margin 抵掉，
     整块高度和红色下划线的位置都不变），可点区往上多出 5px */
  .subnav-list a {
    padding-top: 0.1rem;
    margin-top: -0.1rem;
  }

  /* 解决方案页的三个分段：文字本身 18px 高，上下各补 6px。
     行距正好 12px，两侧刚好接上、不互相压；负 margin 让左栏节奏不变 */
  .p-sol__tabs a {
    padding-block: 0.12rem;
    margin-block: -0.12rem;
  }

  /* 产品分类的加减号：视觉仍是 18×4 的横杠，盒子放到 32×32。
     负 margin 让它在 flex 行里占的宽度还是原来的 0.18rem */
  .cat-toggle {
    width: 32px;
    height: 32px;
    margin: -11px;
  }

  /* 图标按钮：视觉不变，透明伪元素把可点区撑大。
     ★ 这里只给「原本是 static」的两个补 position: relative。
       .pd-arrow 本身已是 position: absolute（压在商品图上左右两端），
       .pg / .social 原本就写了 relative —— 再改成 relative 会把 .pd-arrow
       打回文档流，箭头直接掉到图集下面去。
       绝对定位的元素自身就是 ::after 的包含块，不需要额外处理。 */
  .search-btn,
  .share-btn { position: relative; }

  .search-btn::after,
  .share-btn::after {
    content: "";
    position: absolute;
    inset: -11px;
  }
  /* 产品图的左右箭头、侧栏搜索的放大镜（两者都是 absolute） */
  .pd-arrow::after,
  .side-search button::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
  .pg::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .social::after {
    content: "";
    position: absolute;
    inset: -5px;
  }
}