/* ==========================================================================
   portal-r38e.css — bug261022（2）移动端三页排版修复
   问题19 核心业务 /services · 问题20 成功案例 /cases 筛选条 · 问题23 合作伙伴 /partners

   加载位置：必须排在 portal.css / portal-extra.css / r29*~r37*.css 之后
             （head.html 里统一加 <link>），本文件只做「覆盖」，不改任何既有文件。

   三条约定（与 r37c 保持一致）：
   1. 所有规则都锁在 @media (max-width:900px)，PC（≥901px）零影响；
   2. 每条需要压过既有样式的规则都带足前缀或用「多写一个同类选择器」抬高特异性，
      这样即使本文件被别的 <link> 排到前面也不会被反向覆盖：
        · /services 的 .aside-nav 基础样式在 portal.css:431；
        · /cases 的 .filter-bar{...} 在 cases.html 的内联 <style> 里，
          而内联 <style> 出现在 head 的 <link> 之后 —— 同特异性下晚出现者胜，
          所以这里写成 `.filter-bar.filter-bar`（0,2,0），否则 flex-wrap 改不动；
        · /partners 的 .logo-ph 高度同时被 partners.html 内联样式（92px / ≤720px 80px）
          与 portal-r29d.css（120px / ≤720px 96px）声明，这里用
          `.partner-grid .card.partner .photo.logo-ph`（0,5,0）一次压过全部旧值；
   3. 不新增任何 JS：/services 的分类切换继续复用 services.html 底部那套
      [data-svc-target] / [data-svc-panel] + hidden 脚本，本文件只改外观与排列。
   ========================================================================== */

@media (max-width: 900px) {

  /* ======================================================================
     问题19：核心业务 /services —— 左侧分类竖排列表 → 一行横向可滑动 Tab
     ----------------------------------------------------------------------
     改前（390×844 实测）：.aside-layout 在 ≤1180px 已经是单列（portal.css:456），
     于是 .aside-nav（portal.css:431，sticky + 白卡 + 14px 内边距）变成一段
     320px 高、4 行竖排的分类列表，把「服务卡片」整体压到首屏之外；
     4 个链接每行一个（实测 top = 435/482/529/577，即 4 行）。
     改后：分类条本身就是滚动容器（flex + nowrap + overflow-x:auto），
     每个分类是一颗胶囊；右侧面板（.svc-sec）因为 .aside-layout 变 block 而全宽。
     ====================================================================== */

  /* 布局：单列 grid → 普通块级流，面板才能拿到 100% 宽度 */
  .svc-page.aside-layout {
    display: block;
  }

  /* 分类条：吸顶横滑条。
     top:57px 与移动端 header（portal-r36a.css:122-124，sticky 56~57px）对齐，
     z-index 必须低于 header 的 900（r36a）与 .site-top 的 1000，
     否则滚动时分类条会盖住汉堡按钮与「免费企业诊断」。 */
  .svc-page .aside-nav {
    position: sticky;
    top: 57px;
    z-index: 50;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    /* 横向滚动本体：overflow-y:hidden 防止胶囊阴影把条撑高；滚动条三件套隐藏 */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* 让「scrollLeft=0」本身成为一个合法吸附点：第一颗胶囊的起点在边框 1px +
       内边距 7px = 8px 处，把 snapport 左沿也内缩 8px，两者对齐时 scrollLeft 正好 0。
       不加这一行，Chrome 会在加载时把最近的吸附点（第 1 颗胶囊）吸到左沿，
       分类条会莫名左移 7px。 */
    scroll-padding-left: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 覆盖 portal.css:431 的白卡内边距与 margin；底部间距统一 24px（问题19 补：上下间距 24） */
    margin: 0 0 24px;
    padding: 7px;
    background: #fff;
    border: 1px solid var(--line, #ECECEC);
    border-radius: 14px;
    /* 吸顶压在服务卡片上时给一点分离感，不滚动时也只是一层很淡的描边阴影 */
    box-shadow: 0 6px 18px rgba(40, 26, 8, .06);
  }
  .svc-page .aside-nav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* 问题19 补：Tab 标签栏「顶部」间距统一 24px。
     标签栏是 .section--soft 的首个元素，其顶部间距 = 该段上内边距；
     移动端全局 .section{padding:52px 0}（≤480px 甚至 96px），这里用 .pg-services 作用域
     只把 services 页该段缩到 24px，不影响其它页面；底部间距由上方的 margin-bottom:24px 提供。 */
  .pg-services .section--soft {
    padding-top: 24px;
  }

  /* 单个 Tab：胶囊。portal.css:432 的 display:block / padding:11px 14px / 9px 圆角
     在横滑条里会让 4 个分类各占一整行，必须显式改回 inline-flex + 自适应宽度。 */
  .svc-page .aside-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    height: auto;
    padding: 9px 14px;
    border: 1px solid #EFE3CC;
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-700, #4A4A4A);
    /* 关键：nowrap，否则「知识产权服务」这种长分类会在 90px 宽里折成两行 */
    white-space: nowrap;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }
  /* 选中态：沿用 portal.css:434 的金色渐变（这里重写是因为上面的 background:#fff
     与它同特异性、又更晚出现，不重写会把激活态刷成白底） */
  .svc-page .aside-nav a.is-active {
    background: linear-gradient(135deg, var(--gold-500, #FAC100), var(--gold-400, #FFD54A));
    border-color: transparent;
    color: #3A2A00;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(250, 193, 0, .28);
  }
  .svc-page .aside-nav a.is-active:hover {
    background: linear-gradient(135deg, var(--gold-500, #FAC100), var(--gold-400, #FFD54A));
    color: #3A2A00;
  }

  /* 面板：全宽 + 顶部留白由分类条的 margin-bottom 提供（原来是 grid gap 38px） */
  .svc-page .svc-sec {
    width: 100%;
    max-width: 100%;
  }
  /* 兜底：任何 display 覆盖都不能让非当前面板漏出来（切换脚本只改 hidden） */
  .svc-page .svc-sec[hidden] {
    display: none !important;
  }
  /* 深链接 /services#tax 落到面板时，避让「header 57px + 分类条 ~50px」 */
  .svc-page section[id] {
    scroll-margin-top: 124px;
  }

  /* ======================================================================
     问题20：成功案例 /cases —— 4 个筛选胶囊被硬挤成两行 → 一行横滑
     ----------------------------------------------------------------------
     改前（390×844 实测）：.filter-bar 是 flex-wrap:wrap（cases.html 内联样式），
     标签占 108px，剩下 250px 只放得下「全部 65 + 企业融资 92」，
     「财税服务 / 知识产权」被挤到第二行（badge top = 840/840/892/892）。
     改后：nowrap + overflow-x:auto，4 颗胶囊永远在同一行，整条可左右滑动。
     ====================================================================== */

  .filter-bar.filter-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* 给胶囊的 focus 描边与阴影留一点竖向空间，同时避免被容器裁掉 */
    padding: 2px 0 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .filter-bar.filter-bar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* 胶囊本体：比 PC 略小一点，13px 字号 + 7/14 内边距，4 颗排开约 330px，
     390px 视口内基本能看到 3 颗半，滑一下就到底 —— 既有横滑提示又不显空。 */
  .filter-bar a.badge {
    flex: 0 0 auto;
    padding: 7px 14px;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    border-radius: 999px;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
  }

  /* ======================================================================
     成功案例 /cases —— 「案例说明」卡片压缩（大段文字 + 按钮占满大半首屏）
     仅移动端（≤900px）生效：卡片内边距、说明文字字号/行高、徽标与按钮同步收紧，
     按钮不再拉伸成整行，让首屏更快露出案例网格。
     ====================================================================== */
  .pg-cases .intro-row.card {
    padding: 14px 13px 15px;
    border-radius: 14px;
  }
  .pg-cases .intro-row {
    gap: 10px;
  }
  .pg-cases .intro-row .badge {
    padding: 3px 10px;
    font-size: 11.5px;
    line-height: 1.5;
  }
  .pg-cases .intro-row p {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-500, #6B6B6B);
  }
  /* 按钮保持紧凑胶囊形态，不被网格拉伸成整行 */
  .pg-cases .intro-row .btn.btn--ghost {
    justify-self: start;
    margin-top: 0;
    height: 34px;
    padding: 0 15px;
    font-size: 12.5px;
    border-radius: 999px;
  }

  /* 成功案例：收紧「标题 → 案例说明卡片 → 分类Tab」的上下间距
     原：标题与卡片之间 = section 默认上内边距（≤720 为 64px）；
         卡片与分类Tab之间 = 分类条 mt-xl（64px）。统一压到紧凑值。 */
  .pg-cases .section { padding-top: 24px; }                 /* 标题与卡片之间 */
  .pg-cases .filter-bar.filter-bar { margin-top: 16px; }    /* 卡片与分类Tab之间 */

  /* ======================================================================
     问题23：合作伙伴 /partners —— 单列 → 一行两列；LOGO 等比完整不裁剪
     ----------------------------------------------------------------------
     改前（390×844 实测）：
       · 三组伙伴网格（.grid--4 / .grid--3）在 ≤720px 都被 portal.css:469
         压成 1 列，390px 下每张卡 358px 宽、198px 高，一屏只能看到 2 家机构；
       · LOGO 画框 .logo-ph 在 ≤720px 是 96px 高（portal-r29d.css:83-88），
         卡片宽 358px 时画框内宽 278px、高只有 70px，横版 LOGO（如 4:1）按 contain
         缩放后只剩 278×70 里的一小条，上下留白很多、显得「图没显示全」；
         如果图片是竖图，视觉上更容易被读成「被裁」。
     改后：网格固定两列 + 卡片内边距与画框一起缩小，画框用固定高度 + contain，
     保证任何比例的 LOGO 都完整落在框内（不裁剪、不变形、不拉伸）。
     ====================================================================== */

  /* 两列：`.partner-grid.grid`（0,2,0）压过 portal.css:451 的
     `.grid--4{grid-template-columns:repeat(2,1fr)}` 与 :469 的 1 列。 */
  .partner-grid.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* 卡片：从 30/26 内边距收紧到 12/10，两列下也放得下机构名 */
  .partner-grid .card.partner {
    padding: 12px 10px;
    border-radius: 14px;
  }
  .partner-grid .card.partner h3 {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 700;
    /* 机构名最多两行，超出的（极少数长名）用省略号，避免把两列网格拉成不等高 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* LOGO 画框：固定 86px 高，四周 9px 呼吸位。
     选择器带上 .photo.logo-ph（0,5,0），一次压过：
       partners.html 内联 .logo-ph{height:92px} 与 ≤720px{height:80px}
       portal-r29d.css:29-35 的 120px 与 ≤720px 的 96px。 */
  .partner-grid .card.partner .photo.logo-ph {
    height: 86px;
    padding: 9px;
    background: #fff;
    border-radius: 10px;
  }

  /* 图片：宽高都占满画框的可用区域，再交给 object-fit:contain 等比缩放 ——
     这是「完整显示、不裁剪」的关键：cover 才会裁掉超出的边，
     contain 一定把整张图缩进框内，两侧或上下自动留白并居中。 */
  .partner-grid .card.partner .logo-ph img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* 无 LOGO 占位文案：画框矮了，字号同步缩小，避免撑破 86px */
  .partner-grid .card.partner .logo-ph span {
    padding: 5px 10px;
    font-size: 11.5px;
    line-height: 1.4;
    text-align: center;
  }
}