/* ==========================================================================
   首页「客户品牌 logo 动态展示区」
   真源：_patch_gtq43_brandwall.py（项目根，幂等下发）· 2026-10-16 甲方确认版式
   结构：本文档只承载样式；HTML 由补丁脚本插在「客户案例」与「媒体资讯」之间。

   ⚠ 三条本项目红线，本文件逐条照做：
   ① **深底禁橙**：区块底色走 --c-dark-deep，深底上的强调色一律 --c-dark-on-hi
      （淡蓝）。橙色只属于浅底语境（真源 tools/_verify_dark.py 的 ORANGE_BAN）。
      预演稿里 h2 .accent 曾误用浅底橙色强调令牌，落地时已纠正为深底淡蓝。
      ⚠ 本注释刻意不写出该令牌的完整调用形式 —— 全文扫描类断言会命中注释里的字面量。
   ② **白卡是必需的，不是审美偏好**：约一半客户 logo 是深色/近黑字主体，
      贴深底几乎不可见；统一转纯白又会把「底与字反色的方块形 logo」变成白方块。
      ⇒ 承载面必须是白色圆角卡 + logo 原色。
   ③ **无缝滚动必须放两份**：track 内同一组 logo 出现两遍，动画走 translateX(-50%)
      才看不出接缝。第二份带 .bw-clone（aria-hidden），reduce-motion 下隐藏，
      避免静止时 logo 重复展示。

   核验：tools/_verify_dark.py（静态规则体 + 无头浏览器扫描橙色）· _e2e_check_gtq.py
   ========================================================================== */

/* ---------- 区块容器：深色权威底 ---------- */
.brand-wall{position:relative;background:var(--c-dark-deep);padding:56px 0 60px;overflow:hidden;}
/* 顶部径向光晕：淡蓝（#0052D9 系），把副标题区域提亮到 ≈(8,41,110)，
   副标题 rgba(255,255,255,.62) 在其上仍有 6.0:1，达 WCAG AA
   ⚠ max-width:100% 不是装饰：900px 宽的绝对定位元素在窄屏会向右溢出，
     `.brand-wall` 的 overflow:hidden 只挡视觉、**不挡 scrollWidth** ⇒
     移动端渲染探针实测 ovf=255（桌面 1440 下 270~1170 全在盒内，所以一直没暴露）。 */
.brand-wall::before{content:"";position:absolute;left:50%;top:-160px;width:900px;height:420px;
    max-width:100%;transform:translateX(-50%);
    background:radial-gradient(ellipse at center,rgba(0,82,217,.30) 0%,rgba(0,82,217,0) 70%);
    pointer-events:none;}

/* ---------- 标题区（复用 .section-head，但整段覆写为深底配色） ---------- */
.brand-wall .section-head{position:relative;text-align:center;margin-bottom:34px;}
.brand-wall .section-head .eyebrow{display:inline-block;font-size:13px;letter-spacing:.06em;
    color:var(--c-dark-on);padding:4px 14px;border-radius:999px;
    border:1px solid var(--c-dark-line);background:rgba(255,255,255,.08);margin-bottom:14px;}
.brand-wall .section-head h2{font-size:30px;font-weight:700;line-height:1.35;
    color:var(--c-dark-on);margin:0 0 12px;letter-spacing:-0.3px;}
/* ⚠ 覆盖 common.css 的 `.section-head h2 .accent`（浅底橙色强调）。
   深底上强调色走 --c-dark-on-hi，与 .page-banner h1 .accent 同一范式。 */
.brand-wall .section-head h2 .accent{color:var(--c-dark-on-hi);}
.brand-wall .section-head .sub{font-size:15px;line-height:1.7;color:var(--c-dark-on-sub);margin:0;}
/* 副标题的三条信息切成语义段：桌面并成一行，移动端各占一行。
   为什么不能放任 CJK 自动换行：390px 下实测断成「累计为客 / 户节省发稿预算超 800 万」，
   把一个词从中间劈开。分段后断点只可能落在「 · 」处。 */
.brand-wall .section-head .sub .seg{display:inline;}
.brand-wall .section-head .sub .sep{display:inline;}

/* ---------- 双行反向无缝滚动 ---------- */
.bw-rows{display:grid;gap:18px;position:relative;}
/* 左右各 7% 渐隐，避免 logo 在视口边缘「硬切」 */
.bw-row{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);}
.bw-track{display:flex;align-items:center;gap:18px;width:max-content;
    animation:bw-scroll 56s linear infinite;will-change:transform;}
/* 第二行反向：同一关键帧 + reverse，两行永远错位 */
.bw-row--rev .bw-track{animation-direction:reverse;}
@keyframes bw-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* 悬停整行暂停，便于点到具体品牌 */
.bw-row:hover .bw-track{animation-play-state:paused;}

/* ---------- 白色承载卡 ---------- */
.bw-item{flex:0 0 auto;width:180px;height:84px;display:flex;align-items:center;justify-content:center;
    background:#fff;border-radius:10px;padding:0 24px;
    transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease;}
/* 行内悬停时其余卡片压暗，聚焦当前品牌 */
.bw-row:hover .bw-item{opacity:.5;}
.bw-item:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.34);opacity:1 !important;}
/* object-fit:contain —— 固定 132x44 的框，各 logo 按比例居中缩放。
   与预演稿的 background-size:contain 视觉等价，保证卡片内留白一致。 */
.bw-item .bw-logo{width:132px;height:44px;object-fit:contain;display:block;}

/* ---------- 平板 ---------- */
@media (max-width: 1024px){
    .bw-item{width:156px;height:76px;padding:0 20px;}
    .bw-item .bw-logo{width:114px;height:38px;}
    .bw-track{gap:14px;}
    .bw-rows{gap:14px;}
}

/* ---------- 手机 ---------- */
@media (max-width: 768px){
    .brand-wall{padding:38px 0 40px;}
    .brand-wall .section-head{margin-bottom:26px;padding:0 18px;}
    .brand-wall .section-head h2{font-size:21px;}
    .brand-wall .section-head .sub{font-size:13px;}
    .bw-item{width:132px;height:66px;border-radius:8px;padding:0 16px;}
    .bw-item .bw-logo{width:100px;height:34px;}
    .bw-rows{gap:12px;}
    .bw-track{gap:12px;animation-duration:42s;}
    /* 三条信息各占一行，间隔符隐去（换行本身已经分了段） */
    .brand-wall .section-head .sub .seg{display:block;}
    .brand-wall .section-head .sub .sep{display:none;}
}

/* ---------- 降级：用户偏好减少动效 ----------
   不滚动就要「看得全」⇒ 两份副本折叠成一份、两行各自换行居中。
   若只写 animation:none，第一份右侧与整份第二份都会停在视口外，等于藏了一半 logo。 */
@media (prefers-reduced-motion: reduce){
    .bw-row{-webkit-mask-image:none;mask-image:none;}
    .bw-track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;gap:14px;}
    .bw-clone{display:none;}
}