/* =========================================================================
   mobile-adapt.css  —  移动端适配兜底（不修改任何已有 CSS / class / 跳转）
   适用对象：使用 team-slide__* / team-intro__* / section__* / top-banner /
            level-high / name-bg / licese-preview__* 等新 class 体系、
            内联 rem 样式、根字号原本由 rem.js 用 JS 注入的页面。

   设计稿基准：750px 宽，1rem = 10px@750px。
   原机制：rem.js 在运行时设置 html{font-size:10*(clientWidth/750)px}。
   问题：一旦脚本被拦截 / 预览器禁脚本 / 在桌面宽视图打开，根字号退回
         浏览器默认 16px，所有 rem 算出来巨大并横向溢出，表现为“像桌面”。
   本表：用纯 CSS 复刻同一缩放逻辑，并补充真正的移动端布局。
   ========================================================================= */

/* 1) 根字号：纯 CSS vw 复刻 rem.js，彻底去 JS 依赖。
      与 rem.js 数值完全一致：375px→5px，750px→10px，1440px→19.2px。
      html{font-size:10px} 仅作无 vw 时的兜底（取 750px 设计基准）。 */
html { font-size: 10px; }

/* 1.1) 顶部“返回上一页”按钮：全端统一改为圆角胶囊米色按钮。
   所有页面（gaoji/zishenji/zhuanjiaji/fenxianfenxishi/jiatingfengxianzixunrenzheng/biaogantuandui）
   的 .back-btn-top 均生效，桌面端与移动端一致。 */
.back-btn-top {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  padding: 0.45rem 1rem !important;
  background: linear-gradient(180deg, #f8ecd8 0%, #f0dec2 100%) !important;
  border-radius: 9999px !important;
  color: #5a3d1f !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  cursor: pointer !important;
}

@media screen and (min-width: 1px) {
  html { font-size: 1.33333vw; }   /* 10 / 750 * 100 = 1.33333vw */
}

/* 2) 移动端布局兜底（≤768px）。仅在此宽度内生效，不影响桌面外观。 */
@media screen and (max-width: 768px) {
  /* 2.1 根字号提升：手机端固定 12px（比设计稿基准 10px 再大 20%），
     用固定值避免不同宽度跳变，所有 rem 文字、间距、图标都最大可读。 */
  html { font-size: 12px; }

  /* 2.1b 顶部“返回上一页”按钮：手机端稍作放大，并贴靠左上角。 */
  .back-btn-top {
    position: fixed !important;
    left: 1.2rem !important;
    top: 0.6rem !important;
    font-size: 1.1rem !important;
    padding: 0.6rem 1.2rem !important;
  }

  /* 杜绝横向滚动 */
  html, body { overflow-x: hidden; }

  /* 现代盒模型，防止 width:100% + padding 导致溢出（仅移动端作用域） */
  *, *::before, *::after { box-sizing: border-box; }

  /* 图片自适应 */
  img { max-width: 100%; height: auto; }

  /* 内容区在手机上真正占满宽度，并居中（避免原 max-width:54.69rem 限制导致偏左） */
  .section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 主布局 flex 行改为纵向堆叠，避免窄屏横向溢出 / 挤压 */
  .team-style .section__inner,
  .team-style .section__cont,
  .high-list-wrap { flex-direction: column; }

  /* 2.2 标题字号 */
  .top_title { font-size: 2.2rem; }
  .section__title-img { max-width: 92%; height: auto; }

  /* 2.3 头像网格：手机上改为 3 列，容器撑满、居中，头像和名字都更易读 */
  .list,
  .section .list {
    width: 100% !important;
    max-width: 100% !important;
    gap: 1rem 1.2rem !important;
    justify-content: center !important;
  }
  .list .avatar-high,
  .section .list .avatar-high,
  .avatar-high {
    flex: 0 0 calc((100% - 1.2rem * 2) / 3) !important;
    width: calc((100% - 1.2rem * 2) / 3) !important;
  }
  .list .avatar-high .text,
  .avatar-high .text { font-size: 1.2rem !important; }

  /* 2.3b 资深级（zishenji）列表：手机端改为 5 列紧凑展示，
     头像图片和名字随列宽等比例缩放。 */
  .level-senior .list {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    justify-content: center !important;
    justify-items: center !important;
  }
  .level-senior .avatar-senior {
    width: 100% !important;
    max-width: 14rem !important;
    height: auto !important;
    aspect-ratio: 8 / 8.18 !important;
  }
  /* 头像照片与遮罩：严格参照源代码比例——框(.avatar-senior) 8rem×8.18rem，
     照片(.img/.view) 6rem×6.3rem、top:0.8rem、水平居中。
     即 照片宽 = 框宽 × 75%，top = 0.8/8.18 ≈ 9.8%，left 居中 12.5%。
     这样照片正好嵌在头框内、不盖边框。 */
  .level-senior .avatar-senior .img,
  .level-senior .avatar-senior .view {
    width: 75% !important;
    height: auto !important;
    aspect-ratio: 6 / 6.3 !important;
    left: 11% !important;
    margin-left: 0 !important;
    top: 8% !important;
  }
  .level-senior .avatar-senior .view {
    line-height: normal !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
  }
  /* 名字条与文字放大 */
  .level-senior .avatar-senior__name-wrap {
    height: auto !important;
    bottom: -0.6rem !important;
  }
  .level-senior .avatar-senior__badge { height: 3.2rem !important; }
  .level-senior .avatar-senior__name-bar {
    height: auto !important;
    padding: 0.35rem 1rem !important;
  }
  .level-senior .avatar-senior .text {
    font-size: 1.35rem !important;
    line-height: 1.4 !important;
  }

  /* 2.3c 风险分析师（fenxianfenxishi）列表：手机端展示改为 3 列，
     按钮框（.item-name）与文字放大。原 .item 为 float 五列（width:20%）、
     按钮框固定 8.2rem×2.3rem、文字 0.8rem；桌面 .section__inner 还带 8.5rem 内边距，
     手机端需收窄，否则 3 列放不下。 */
  .level-analyst .section__inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .level-analyst .item {
    width: 33.333% !important;
  }
  .level-analyst .item-name {
    width: 96% !important;
    max-width: 12.5rem !important;
    height: 3.4rem !important;
    background-size: 100% 100% !important;
  }
  .level-analyst .item-name .text {
    font-size: 1.3rem !important;
    line-height: 2.2rem !important;
    max-width: 9.5rem !important;
  }
  .level-analyst .item-popover__name {
    font-size: 1.2rem !important;
    line-height: 1.8rem !important;
  }
  .level-analyst .item-popover__view {
    font-size: 1.2rem !important;
    line-height: 1.8rem !important;
  }

  /* 2.4 证书弹窗：在手机上占满屏幕宽度，证书图片和文字足够大。
     关闭按钮原本是绝对定位在右上角，但容易误触或被装饰遮挡，
     这里改为 flex 纵向排列，关闭按钮固定显示在证书图片下方。 */
  .licese-preview__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 94vw !important;
    max-width: 94vw !important;
    padding: 0.6rem !important;
  }
  .licese-preview__cont {
    order: 1 !important;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
  }
  .cert-card__bg {
    width: 100% !important;
    height: auto !important;
    max-height: 80vh !important;
  }
  .cert-card__name-text { font-size: 2.8rem !important; }
  .cert-card__name-text--long { font-size: 2.3rem !important; }
  .cert-card__validity { font-size: 2rem !important; }
  .licese-preview__close {
    order: 2 !important;
    position: relative !important;
    margin-top: 1.2rem !important;
    width: 4.4rem !important;
    height: 4.4rem !important;
    line-height: 4.4rem !important;
    font-size: 3rem !important;
    text-align: center !important;
    color: #fff !important;
    background-color: #000 !important;
    border-radius: 100% !important;
  }

  /* 2.4e 团队详情弹框（biaogantuandui 等点团队卡片弹出 .team-intro）：手机端
     ① 弹框垂直居中（源码已 top:50% translate(-50%,-50%)，这里强化并适度放宽高度，
        避免视觉偏上）；
     ② 关闭按钮原本绝对定位在右上角外侧（top:-3.5rem;right:-3.5rem，白圈白叉），
        改为 flex 纵向排列移到弹框下方，并放大，深色遮罩上白叉清晰可见。 */
  .team-intro__wrapper {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80% !important;
    max-width: calc(100vw - 4rem) !important;
    max-height: calc(100vh - 4rem) !important;
    overflow: visible !important;
  }
  .team-intro__close {
    position: absolute !important;
    bottom: -4.6rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    right: auto !important;
    width: 4.4rem !important;
    height: 4.4rem !important;
    padding: 0.7rem !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 100% !important;
    z-index: 5 !important;
  }

  /* 2.4d 资深简介弹框（zishenji 点头像弹出 .expert-intro）：手机端
     ① 关闭按钮原本绝对定位在右上角（白描边，移到弹框下方需加底色才可见），
        这里改为 flex 纵向排列，关闭按钮固定显示在弹框内容下方；
     ② 弹框内文字整体放大一点；
     ③ 引言模块(.expert-intro__quote)原本用 position:absolute 限制文字区域，
        文字一长就被截断。改为自适应：文字脱离绝对定位、随内容向下扩展，
        背景图绝对定位铺满；同时弹框顶部对齐而非垂直居中，为底部关闭按钮留空间。 */
  .expert-intro__wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 60vw !important;
    max-width: calc(100vw - 3rem) !important;
    max-height: 86vh !important;
  }
  .expert-intro__inner {
    height: auto !important;
    order: 1 !important;
    max-height: calc(86vh - 5rem) !important;
    overflow-y: auto !important;
  }
  .expert-intro__close {
    order: 2 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-top: 1.4rem !important;
    width: 4rem !important;
    height: 4rem !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 100% !important;
  }
  .expert-intro__photo-level { font-size: 1rem !important; }
  .expert-intro__badge-text { font-size: 1.3rem !important; }
  .expert-intro__name { font-size: 2rem !important; }
  .expert-intro__org { font-size: 1.15rem !important; }
  .expert-intro__status { font-size: 1.1rem !important; }
  .expert-intro__status-text { font-size: 1.1rem !important; }
  .expert-intro__validity { font-size: 1.15rem !important; }
  .expert-intro__section-note { font-size: 1.1rem !important; }
  .expert-intro__quote-mark { font-size: 2.4rem !important; }
  .expert-intro__stat-badge-text { font-size: 1.04rem !important; }
  .expert-intro__stat-num { font-size: 1.36rem !important; }
  .expert-intro__stat-arrow { font-size: 0.8rem !important; }
  .expert-intro__stat-label { font-size: 0.8rem !important; }
  .expert-intro__stats {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  .expert-intro__stat-card {
    width: 80% !important;
    margin: 0 auto !important;
  }
  .expert-intro__quote {
    position: relative !important;
    overflow: visible !important;
    background-size: cover !important;
    height: auto !important;
  }
  .expert-intro__quote > img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
  }
  .expert-intro__quote-text {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    padding: 1.8rem 1.6rem 1.6rem 3.6rem !important;
    white-space: pre-line !important;
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
  }

  /* 2.4d1 资深/专家简介弹框：左侧头像区不跟随右侧引言文字被撑高，
     让等级图片/徽章保持原位不随引言下移。同时保持头像原始高度（11.5rem），
     避免照片被放大变形。 */
  .expert-intro__card {
    align-items: flex-start !important;
  }
  .expert-intro__card-photo {
    align-self: flex-start !important;
    flex-shrink: 0 !important;
  }
  .expert-intro__photo-wrap {
    height: auto !important;
  }
  .expert-intro__photo {
    height: 11.5rem !important;
  }

  /* 2.4d2 专家级详情弹框：手机端继续收紧「服务理念」标题块与引言之间的空白
     （统一适用于 jiatingfengxianzixunrenzheng/biaogantuandui、zhuanjiaji 等
      使用 .expert-intro__section 的弹框）。 */
  .expert-intro__section {
    margin-top: 0.5rem !important;
    padding: 0 1.2rem !important;
  }
  .expert-intro__section-head {
    width: 8rem !important;
    margin-bottom: 0.4rem !important;
  }
  .expert-intro__section-note {
    margin-bottom: 0.8rem !important;
    font-size: 0.9rem !important;
  }
  .expert-intro__quote {
    padding: 1.2rem 1.0rem 1.0rem !important;
  }

  /* 2.4b 团队卡片弹框（点团队头像弹出）：手机端整体放大文字、保持层级，
     原内联每个元素都单独设了很小的 font-size（成员名 0.7rem / 认证结果 0.5rem / 介绍 0.85rem），
     这里逐一覆盖放大；总经理/有效期从过分大的 1.6rem 收到 1.2rem。 */
  .team-intro__card-label { font-size: 1.3rem !important; }
  .team-intro__card-name { font-size: 1.9rem !important; }
  .team-intro__card-manager,
  .team-intro__card-validity { font-size: 1.2rem !important; }
  .team-intro__card-status { font-size: 1.1rem !important; }
  .team-intro__status-icon { font-size: 1rem !important; }
  .team-intro__section-num { font-size: 3.6rem !important; }
  .team-intro__section-title { font-size: 1.5rem !important; }
  .team-intro__section-body { font-size: 1.3rem !important; line-height: 1.6 !important; }
  .team-intro__quote-mark { font-size: 1.9rem !important; }
  .team-intro__quote-text { font-size: 1.5rem !important; white-space: pre-line !important; }
  .team-intro__stat-num { font-size: 2.6rem !important; }
  .team-intro__stat-unit { font-size: 1.4rem !important; }
  .team-intro__stat-arrow { font-size: 1rem !important; }

  /* 2.4b1 团队弹框「服务理念」手机端：桌面 .team-intro__quote-mark 用绝对定位浮在背景图上，
     文字一长就被 .team-intro__quote 的 overflow:hidden 截断盖住。改为背景图绝对铺满、
     文字相对定位正常流撑开高度，完整显示不裁切（与 expert-intro__quote 处理一致）。 */
  .team-intro__quote {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }
  .team-intro__quote > img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
  }
  .team-intro__quote-mark {
    position: relative !important;
    z-index: 1 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 1.6rem 1.4rem !important;
    white-space: pre-line !important;
    line-height: 1.5 !important;
  }
  .team-intro__stat-label { font-size: 0.85rem !important; margin-top: 0.6rem !important; }
  .expert-intro__stat-label { font-size: 0.68rem !important; margin-top: 0.48rem !important; }
  .team-intro__member-name { font-size: 1.2rem !important; }
  .team-intro__member-popover { font-size: 1.1rem !important; }
  .team-intro__member-title { font-size: 1rem !important; }
  .team-intro__member-btn { font-size: 0.9rem !important; }
  .team-intro__analyst-name { font-size: 1.1rem !important; }
  .team-intro__analyst-text { font-size: 1rem !important; }
  .team-intro__analyst-popover { font-size: 1rem !important; }
  .team-intro__analyst-popover--has-name .team-intro__analyst-popover-view::after { font-size: 1.2rem !important; }

  /* 2.4c 团队卡片-认证区域：恢复自动轮播（marquee）效果。
     原模板用 JS 在 overflow-x:hidden 的容器里自动改变 scrollLeft 实现无缝滚动；
     但触发条件写死 members.length>5（桌面端才需要），手机端容器变窄，成员少也会溢出，
     导致看起来没有自动滚动。这里先把 overflow 恢复为 hidden，再配合下方 JS 阈值修复。
     左侧等级标题固定宽度，避免挤压右侧列表。 */
  .team-intro__members-level-icon { width: 8.5rem !important; }
  .team-intro__members-level-title {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    top: 1.2rem !important;
    padding: 0 0.5rem !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
  .team-intro__members-list {
    margin-left: 0.8rem !important;
    margin-right: 0.8rem !important;
    gap: 0.8rem !important;
  }
  .team-intro__members-list--carousel {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  .team-intro__members-list--carousel::-webkit-scrollbar { display: none !important; }
  .team-intro__member { min-width: 7.5rem !important; }
  .team-intro__member-avatar { width: 5.5rem !important; height: 5.5rem !important; }

  /* 2.8 团队服务数据卡片：手机上三列并排过窄，标签文字被图标遮挡/换行。
     改为垂直堆叠，每行一个卡片，文字与图标不再重叠，标签字号适当放大。 */
  .team-intro__stats {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .team-intro__stat-card {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  .team-intro__stat-card-inner {
    min-height: auto !important;
    padding: 1.2rem 1.5rem !important;
  }
  .team-intro__stat-value {
    justify-content: flex-start !important;
  }
  .team-intro__stat-num {
    font-size: 2.8rem !important;
  }
  .team-intro__stat-unit {
    font-size: 1.3rem !important;
  }
  .team-intro__stat-label {
    font-size: 1.1rem !important;
    margin-top: 0.8rem !important;
    padding-right: 3.5rem !important;
  }
  .team-intro__stat-icon {
    width: 2.6rem !important;
    right: 1rem !important;
    bottom: 1rem !important;
  }

  /* 风险咨询师（分析师）模块：原名称框只有 3.7rem×1.15rem，手机上几乎看不见，
     这里每行 3 列（用 item padding 制造间距，避免 flex gap 把第 3 个挤下去）、
     名称框高度加大到 4rem，确保长名字完整显示不被遮挡。 */
  .team-intro__members-list--analyst {
    gap: 1.2rem 0 !important;
    padding: 1rem 0.2rem !important;
    overflow: visible !important;
  }
  .team-intro__analyst-item {
    width: 33.333% !important;
    flex: 0 0 33.333% !important;
    padding: 0 0.35rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
  }
  .team-intro__analyst-name {
    width: 100% !important;
    height: 4rem !important;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .team-intro__analyst-text {
    max-width: 100% !important;
    padding: 0 0.2rem !important;
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* 2.5 返回按钮 */
  .back-btn__text {
    padding: 0.5rem 3rem;
    font-size: 1.2rem;
  }

  /* 2.6 团队轮播（biaogantuandui 等）：手机上不居中/偏左修复。
     原 .section__inner max-width:54.69rem + .section padding:3.48rem 导致手机溢出偏左；
     .team-style__swiper-wrp 宽度 85% + 大 padding 也导致轮播不居中。 */
  .section { padding: 1.2rem !important; }
  .section__inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 标题（section__title 内的 SVG/图片）在手机上强制居中。
     原模板靠 .section__title img{display:block;margin:0 auto} 居中，
     这里显式补 text-align + margin:auto，避免被覆盖后退回靠左。 */
  .section__title,
  .team-style .section__title { text-align: center !important; }
  .section__title-img,
  .section__title img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .team-style__swiper-wrp {
    width: 100% !important;
    padding: 0 0.5rem !important;
    height: auto !important;
    box-sizing: border-box !important;
  }
  .team-style__swiper { height: auto !important; }
  .team-style .swiper-slide {
    width: 100% !important;
    height: auto !important;
  }
  .team-style .swiper-slide img {
    height: auto !important;
    max-height: 60vh;
  }
  .team-style__swiper-wrp .swiper-button-prev,
  .team-style__swiper-wrp .swiper-button-next { display: none !important; }

  /* 2.6c 团队列表卡片手机端：桌面 .team-style__item 有 min-height:400px，手机端图片变窄后
     真实高度不足 400px，卡片被撑高导致图片下方大片空白。去掉最小高度，卡片随图片自适应。 */
  .team-style .team-style__item {
    min-height: 0 !important;
  }

  /* 2.7 弹框底部按钮（查看认证证书 / 返回认证名录）：原 font-size:0.6rem（手机上≈7px）太小。
     手机端放大到 1.4rem（≈17px），padding 同步加大，便于手指点击；
     .btn-wrap 允许换行，避免两个按钮并排时窄屏溢出。 */
  .btn-wrap {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.2rem !important;
    margin-top: 1.6rem !important;
  }
  .btn-wrap .btn-item {
    font-size: 1.4rem !important;
    padding: 1rem 2.6rem !important;
    border-radius: 3rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* 2.9 “-排名不分先后-”说明文字：原桌面端为极小备注字号，手机端按 12px 根字号
     换算后几乎看不清。统一放大到 1.2rem（≈14.4px），与同页其他说明文字协调。
     覆盖所有页面（高级/资深/专家/分析师/标杆团队页）的 .explain 元素。 */
  .explain,
  .section .explain,
  .section__cont .explain {
    font-size: 1.2rem !important;
    line-height: 1.8 !important;
    text-align: center !important;
  }
}