/* gera-mobile1017.css — 手机端视觉重排 (2026-10-17)
 *
 * 用户原话：「单论手机端而言，我进网页之后发现通篇都是文字，很少图片。文字也非常
 * 密集，信息量非常大，不知道该关注哪个，特别是产品分类 28 categories, one desk…
 * 排布也非常乱，整篇都没有什么美观性可言。」
 *
 * 实测证据（ops/shots-mobile.py，390x844 DPR2，7 页，已屏蔽 Clarity/CF-RUM/GA）：
 *   page          screens  chars  chars/screen  imgs  imgs/screen
 *   /              15.1    6,463      427         15     0.99
 *   /category/      7.2    2,115      292         29     4.00
 *   /products/     12.1    4,881      405         34     2.82
 *   /regions/       8.1    4,509      559          3     0.37
 *   /services/     10.0    4,198      421          3     0.30
 *   /who-we-are/    8.2    5,169      628          1     0.12
 *   /category/hardware-tools/  13.6  5,769  423   8   0.59
 *
 * 三个根因（都在这一层修，不动任何内容）：
 *
 *  A. 首屏的图**在手机上根本看不见**。
 *     .hero-scrim = linear-gradient(96deg, rgba(5,9,18,.94) 0%, … .74 44%, … .30 80%)
 *     —— 96deg 在 390px 宽下几乎是纯水平，左半屏 74–94% 不透明，整张 hero-qc.jpg
 *     被压在下面。.bleed-scrim 同病（90deg, .92 起）。→ 手机改**垂直**渐变，
 *     顶部留出照片，文字压在底部深色区。
 *
 *  B. 28 个品类是 28 个文字胶囊（.tchip = inline-flex pill，无图）。
 *     在 390px 上换成 ~10 行纯文字，正是用户说的「一看就知道你家有很多，但我
 *     不知道我的焦点在哪」。→ 手机改成 **2 列图片卡**，每卡用该品类自己的插图
 *     （assets/img/<base>-480.jpg，与 /products/ /category/ 同池），并在 ≤640px
 *     由 collapse.js 收成 8 张 + 「Show all 28 categories」（渐进增强，DOM 不变）。
 *
 *  C. 节奏单一：每一块都是「小标题 + 2–4 行段落」，14 屏里没有一屏是「图 + 一句话」。
 *     → .pains（五条报价事故）手机改**横滑卡片**（5 张，peek 18% 提示可滑），
 *       把 4 屏文字压成 1 屏；.sc-photo（How an order runs 四步）由 92px 缩略图
 *       改成整宽 2:1 图带；section 之间补发丝分界线。
 *
 * 门禁：8 档宽（1600→360）overflowX=0 / CJK 0 / 全 200 / 390px 无横向滚动；
 *       复测 chars/screen 与 imgs/screen 必须同向改善。
 * 回滚：functions.php 里 dequeue 'gera-mobile1017' 一行（或删本文件）。
 */

/* ============================================================
   1. 首屏 / 深色带：让照片真的看得见
   ============================================================ */
@media (max-width: 768px) {
  /* 手机上不再让照片当「全屏背景」（它会被文字压在 74–94% 的遮罩底下 = 等于没有），
     改成一条**看得见的 236px 照片带**，文字落到下面的实底上。 */
  body.gera .g6 .hero {
    display: block;
    min-height: 0;
    background: var(--ink);
  }
  body.gera .g6 .hero-media {
    position: relative;
    inset: auto;
    height: 236px;
  }
  body.gera .g6 .hero-media img { object-position: center 42%; }
  body.gera .g6 .hero-scrim {
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    height: 236px;
    background: linear-gradient(180deg,
      rgba(5, 9, 18, .26) 0%,
      rgba(5, 9, 18, .02) 58%,
      rgba(5, 9, 18, .55) 88%,
      var(--ink) 100%);
  }
  body.gera .g6 .hero-in { display: block; padding: 30px 18px 44px; }
  body.gera .g6 .hero-copy { max-width: none; }
  body.gera .g6 .hero .credit { display: none; }
  /* 右下角悬浮联系按钮常驻 ~62px，长标签压到它下面就看不见了 */
  body.gera .g6 .hero-tags { padding-right: 62px; }

  /* 深色带（What gets checked before dispatch）同病同治 */
  body.gera .g6 .bleed { min-height: 0; }
  body.gera .g6 .bleed-scrim {
    background: linear-gradient(180deg,
      rgba(5, 9, 18, .22) 0%,
      rgba(5, 9, 18, .52) 30%,
      rgba(5, 9, 18, .88) 62%,
      rgba(5, 9, 18, .97) 100%);
  }
  body.gera .g6 .bleed-tx { padding: 168px 18px 42px; }

  /* CTA 带同病 */
  body.gera .g6 .cta-scrim {
    background: linear-gradient(180deg,
      rgba(5, 9, 18, .62) 0%, rgba(5, 9, 18, .94) 46%, rgba(5, 9, 18, .98) 100%);
  }
  body.gera .g6 .cta-tx { padding: 92px 18px 56px; }
}

/* ============================================================
   2. 28 品类：文字胶囊 → 2 列图片卡
   ============================================================ */
@media (max-width: 768px) {
  body.gera .g6 .wall { margin-top: 34px; padding-top: 26px; }
  body.gera .g6 .wall-head { display: block; margin-bottom: 18px; }
  body.gera .g6 .wall-head b {
    display: block; margin-bottom: 6px;
    font-size: 21px; line-height: 1.2; letter-spacing: -.02em;
  }
  body.gera .g6 .wall-head span { display: block; font-size: 13.5px; line-height: 1.55; }

  body.gera .g6 .wall-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
  }
  body.gera .g6 .wall-grid > .tchip {
    display: block;
    min-height: 0;
    padding: 0 11px 11px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.005em;
    overflow: hidden;
    transform: none;
  }
  body.gera .g6 .wall-grid > .tchip::before {
    content: "";
    display: block;
    aspect-ratio: 4 / 3;
    margin: 0 -11px 10px;
    background-color: #EDEAE3;
    background-size: cover;
    background-position: center;
  }
  body.gera .g6 .wall-grid > .tchip b {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
  }

  /* 28 张各自品类的插图 —— 顺序 = 首页 .wall-grid 的 DOM 顺序（= CAT_IMG 映射） */
  body.gera .g6 .wall-grid > .tchip:nth-child(1)::before  { background-image: url(img/hardware-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(2)::before  { background-image: url(img/electronics-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(3)::before  { background-image: url(img/medical-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(4)::before  { background-image: url(img/sports-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(5)::before  { background-image: url(img/apparel-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(6)::before  { background-image: url(img/machinery-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(7)::before  { background-image: url(img/packaging-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(8)::before  { background-image: url(img/lighting-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(9)::before  { background-image: url(img/auto-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(10)::before { background-image: url(img/wood-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(11)::before { background-image: url(img/building-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(12)::before { background-image: url(img/furniture-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(13)::before { background-image: url(img/electrical-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(14)::before { background-image: url(img/appliance-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(15)::before { background-image: url(img/silicone-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(16)::before { background-image: url(img/bags-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(17)::before { background-image: url(img/chemical-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(18)::before { background-image: url(img/bearing-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(19)::before { background-image: url(img/food-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(20)::before { background-image: url(img/hvac-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(21)::before { background-image: url(img/metal-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(22)::before { background-image: url(img/food-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(23)::before { background-image: url(img/packaging-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(24)::before { background-image: url(img/safety-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(25)::before { background-image: url(img/water-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(26)::before { background-image: url(img/hydraulic-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(27)::before { background-image: url(img/water-480.jpg); }
  body.gera .g6 .wall-grid > .tchip:nth-child(28)::before { background-image: url(img/footwear-480.jpg); }
}

@media (max-width: 480px) {
  body.gera .g6 .wall-grid { gap: 9px; }
  body.gera .g6 .wall-grid > .tchip { padding: 0 9px 9px; font-size: 13px; }
  body.gera .g6 .wall-grid > .tchip::before { margin: 0 -9px 9px; }
}

/* ============================================================
   3. 五条报价事故：竖排长文 → 横滑卡片
   ============================================================ */
@media (max-width: 768px) {
  body.gera .g6 .pains {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-template-columns: none;
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 14px -18px 0;
    padding: 0 18px 14px;
  }
  body.gera .g6 .pains::-webkit-scrollbar { display: none; }
  body.gera .g6 .pains > .pain {
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 17px 15px 15px;
  }
  body.gera .g6 .pains > .pain > b { display: block; font-size: 17px; line-height: 1.3; }
  body.gera .g6 .pains > .pain > span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--n-body); }
  body.gera .g6 .pains > .pain > i { display: block; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--acc-deep); }
}

/* ============================================================
   4b. What we source 的 7 个标签：行列表 → 横滑图片标签
   ============================================================ */
@media (max-width: 768px) {
  body.gera .g6 .xp-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 134px;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -18px 16px;
    padding: 2px 18px 12px;
  }
  body.gera .g6 .xp-tabs::-webkit-scrollbar { display: none; }
  body.gera .g6 .xp-tab {
    display: block;
    scroll-snap-align: start;
    padding: 0 0 11px;
    border-radius: 4px;
    overflow: hidden;
  }
  body.gera .g6 .xp-tab:hover { transform: none; }
  body.gera .g6 .xp-tab .thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    margin-bottom: 9px;
  }
  body.gera .g6 .xp-tab .txt { display: block; padding: 0 10px; }
  body.gera .g6 .xp-tab .txt b { font-size: 13.5px; line-height: 1.3; }
  body.gera .g6 .xp-tab .txt em { display: block; margin-top: 3px; font-size: 12px; }
  body.gera .g6 .xp-tab .chev { display: none; }
}

/* ============================================================
   5. How an order runs：92px 缩略图 → 整宽图带
   ============================================================ */
@media (max-width: 768px) {
  body.gera .g6 .sc-block {
    display: block;
    grid-template-columns: none;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 0 0 22px;
  }
  body.gera .g6 .sc-block:first-child { border-top: 0; }
  body.gera .g6 .sc-photo {
    grid-row: auto;
    width: 100%;
    aspect-ratio: 2 / 1;
    margin: 18px 0 14px;
    border-radius: 4px;
  }
  body.gera .g6 .sc-block .gets { margin-top: 14px; }
}

/* ============================================================
   5. 节奏与层级：section 之间给一条看得见的分界
   ============================================================ */
@media (max-width: 768px) {
  body.gera .g6 .sec { padding: 56px 0; }
  body.gera .g6 .sec + .sec { border-top: 1px solid var(--line); }
  body.gera .g6 .sec.sand + .sec,
  body.gera .g6 .sec + .sec.sand { border-top-color: rgba(0, 0, 0, .07); }
  body.gera .g6 .head2 { margin-bottom: 24px; }
  body.gera .g6 .head2 h2 { font-size: 27px; line-height: 1.16; letter-spacing: -.02em; }
  body.gera .g6 .head2 .basis { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.5; }
  body.gera .g6 .wrap { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 480px) {
  body.gera .g6 .hero-in { padding: 142px 15px 28px; }
  body.gera .g6 .bleed-tx { padding: 142px 15px 34px; }
  body.gera .g6 .sec { padding: 48px 0; }
  body.gera .g6 .wrap { padding-left: 15px; padding-right: 15px; }
  body.gera .g6 .pains { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; }
}