/* ==========================================================================
   portal-r38d.css —— bug261022（2）移动端 /about 排版修复（第 38 轮 d 包）
   只覆盖 .pg-about（/about 的 body class），且全部规则锁在 @media (max-width:900px)：
   PC（>900px）不新增任何命中，桌面端零变化；文件最后加载，用区块专属类
   （.about-strength / .about-stats / .about-team / .about-culture，由 about.html 追加）
   提高特异性，压过 portal.css 里 .card / .stat-band 的基础规则与 720px 的 1 列降级。
   字号/行高按 portal-r36a.css 首页移动端既有口径（h3 16.5 / p 13 / li 12.5 / num 26），
   保证两个页面在手机上观感一致。
   涉及问题：
     #6  企业资源储备：四个数据指标改 2×2、缩小上下内边距、去掉逐格色差 →
         合并成一整个浅黄模块 + 1px 十字分割线 + 统一圆角与极淡阴影
     #15 四大基础能力：图标（保留浅黄底）固定左侧，序号 01 与标题并排在图标右侧，
         描述与标签列表回到图标/标题下方全宽
     #16 企业资源储备：2×2 左右排列、卡片更矮、数字与说明居中对齐
     #17 服务团队：图标（保留浅黄底）左侧，标题右置并与图标垂直居中，描述与列表下方全宽
     #18 企业文化：Flex 横向 —— 图标左、标题右，描述在下方；卡片压扁
   ========================================================================== */

@media (max-width: 900px) {
  /* ---------- #15 四大基础能力（about_strength）：图标左 + 标题右置 + 序号右上角装饰 ---------- */
  .pg-about .about-strength .card {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* 图标与标题在同一行内垂直居中 */
    column-gap: 10px;
    row-gap: 10px;
    padding: 16px 14px; /* 原 30px 26px：上下各减 14px */
    border-radius: 16px;
    position: relative; /* 序号绝对定位基准 */
    isolation: isolate; /* 把序号层级锁在卡片内，避免跑到 section 背景之后 */
  }
  .pg-about .about-strength .card__ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin: 0; /* 关键：去掉 portal.css:203 的 margin-bottom:20px，标题才能回到图标右侧 */
    position: relative;
    z-index: 1; /* 压在装饰序号之上 */
  }
  .pg-about .about-strength .card__ico svg {
    width: 20px;
    height: 20px;
  }
  /* 序号 01/02…：卡片右上角背景装饰 —— 调浅颜色、缩小字号、整体下移，更柔和 */
  .pg-about .about-strength .team-card__role {
    position: absolute;
    top: 18px;       /* 整体下移，作为背景装饰更柔和、不喧宾夺主 */
    right: 10px;
    flex: 0 0 auto;
    font-size: 30px; /* 适当缩小 */
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    color: #E6E6E6; /* 更淡的灰色 */
    opacity: .28;   /* 更透明 */
    pointer-events: none;
    z-index: 0;
  }
  /* 标题吃掉行内剩余宽度 → 与图标同行，不会被挤到下一行 */
  .pg-about .about-strength .card h3 {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 16.5px;
    line-height: 1.45;
    position: relative;
    z-index: 1; /* 压在装饰序号之上 */
  }
  /* 描述 / 标签列表：回到整行全宽（图标与标题下方） */
  .pg-about .about-strength .card > p {
    flex: 0 0 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
  }
  .pg-about .about-strength .card__list {
    flex: 0 0 100%;
    margin: 0;
    gap: 7px; /* 列表项间距放宽，增加呼吸感 */
  }
  .pg-about .about-strength .card__list li {
    font-size: 12.5px;
    line-height: 1.85; /* 行高放宽，提升阅读呼吸感 */
    padding-left: 14px;
  }
  .pg-about .about-strength .card__list li::before {
    top: 9px;
    width: 4px;
    height: 4px;
  }

  /* ---------- #6 / #16 企业资源储备（about_stats）：2×2 + 单块浅黄 + 极淡虚线十字 ---------- */
  .pg-about .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 压过 portal.css:469 的 1fr */
    gap: 0; /* 去掉 1px 实线间隙，改由单元格内描边画虚线 */
    background: transparent; /* 容器不再充当十字线底色 */
    border-radius: 16px; /* 四角统一圆角 */
    box-shadow: 0 5px 16px rgba(163, 124, 26, 0.07); /* 极淡阴影 */
    overflow: hidden;
  }
  .pg-about .about-stats .stat-band__item {
    background: #FFF8E1; /* 四块同一底色，去掉原先逐格的背景色差 */
    padding: 16px 12px; /* 原 30px 26px */
    text-align: center; /* #16：大数字与说明文字居中对齐 */
    /* 极淡虚线十字：仅在内部相邻边描虚线，外缘不画，避免框外多出线 */
    border-right: 1px dashed #EDE3C8;
    border-bottom: 1px dashed #EDE3C8;
  }
  .pg-about .about-stats .stat-band__item:nth-child(2n) { border-right: 0; }   /* 最右列去右边线 */
  .pg-about .about-stats .stat-band__item:nth-child(n+3) { border-bottom: 0; } /* 最底行去下边线 */
  .pg-about .about-stats .stat-band__num {
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.2px;
  }
  .pg-about .about-stats .stat-band__num i {
    font-size: 14px;
    margin-left: 2px;
  }
  .pg-about .about-stats .stat-band__label {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 4px;
  }

  /* ---------- #17 服务团队（about_team）：图标左 + 标题右且垂直居中 ---------- */
  .pg-about .about-team .card {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* 标题与图标垂直居中 */
    column-gap: 12px;
    row-gap: 10px;
    padding: 16px 14px;
    border-radius: 16px;
  }
  .pg-about .about-team .card__ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin: 0;
  }
  .pg-about .about-team .card__ico svg {
    width: 20px;
    height: 20px;
  }
  .pg-about .about-team .card h3 {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 16.5px;
    line-height: 1.45;
  }
  .pg-about .about-team .card > p {
    flex: 0 0 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
  }
  .pg-about .about-team .card__list {
    flex: 0 0 100%;
    margin-top: 0;
    gap: 5px;
  }
  .pg-about .about-team .card__list li {
    font-size: 12.5px;
    line-height: 1.55;
    padding-left: 14px;
  }
  .pg-about .about-team .card__list li::before {
    top: 8px;
    width: 4px;
    height: 4px;
  }

  /* ---------- #18 企业文化（about_culture）：图标左 + 标题右 + 描述下方，卡片压扁 ---------- */
  .pg-about .about-culture .card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 14px 16px; /* 原 30px 26px：上下各减 16px */
    border-radius: 16px;
  }
  .pg-about .about-culture .card__ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin: 0;
  }
  .pg-about .about-culture .card__ico svg {
    width: 20px;
    height: 20px;
  }
  .pg-about .about-culture .card h3 {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 16.5px;
    line-height: 1.45;
  }
  .pg-about .about-culture .card > p {
    flex: 0 0 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
  }

  /* 企业资源储备：「查看合作伙伴」移动端移到四张卡片下方并居中（桌面端沿用顶部 outline 按钮） */
  .pg-about .resource-btn--desktop { display: none; }
  .pg-about .resource-btn--mobile {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 24px auto 0; /* 适当增加按钮上方间距（18→24），与下方对齐 */
  }
  /* 大幅缩减按钮下方的间距：资源区 section 底部内边距 64px → 24px，与上方统一 */
  .pg-about .section--navy.section--tight { padding-bottom: 24px; }
}
