/* ==========================================================================
   WaveRocker · 客户 Logo 墙（8 行 · 彩色原色）
   覆盖 assets/index-*.css 中的旧文字版 .logo-grid / .logo-window

   v5（2026-10-14）：滚动控制改由 /media/brand-wall.js 接管
     · 修复：移动端 tap 触发 :hover 粘滞 → animation-play-state:paused 永久停住
     · 修复：overflow:hidden 导致无法手动滑动查看
     · JS 接管后容器变为原生横向滚动（支持手指滑动 / 鼠标拖拽 / 滚轮）
     · CSS 动画保留为「JS 未加载」时的兜底
   ========================================================================== */

/* 视窗：8 行 × 46px */
.logo-window {
  height: calc(8 * 46px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
  /* 关键：禁用平滑滚动，否则 JS 每帧设置 scrollLeft 会被浏览器做动画 */
  scroll-behavior: auto;
  /* 隐藏滚动条（滚动能力由 JS 开启，外观保持干净） */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.logo-window::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* 轨道：flex + 两份内容，配合 translate(-50%) 无缝滚动（JS 兜底方案） */
.logo-grid {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: logo-scroll 130s linear infinite;
}

/* JS 接管后停用 CSS 动画，改由 scrollLeft 驱动 */
.logo-window[data-wall-js="1"] .logo-grid {
  animation: none;
  will-change: auto;
}

/* 悬停暂停：仅对「真有悬停能力的精细指针」生效
   —— 移动端 tap 会粘滞 :hover，若不加限定会导致动画永久暂停（v4 的 bug） */
@media (hover: hover) and (pointer: fine) {
  .logo-window:not([data-wall-js="1"]):hover .logo-grid {
    animation-play-state: paused;
  }
}

/* 横向滚动容器：可手指滑动 / 鼠标拖拽 */
.logo-window[data-wall-js="1"] {
  cursor: grab;
}
.logo-window[data-wall-js="1"]:active {
  cursor: grabbing;
}

/* 每一份：独立 8 行网格，自右向左排列 */
.logo-set {
  display: grid;
  grid-template-rows: repeat(8, 46px);
  grid-auto-flow: column;
  grid-auto-columns: clamp(148px, 13vw, 184px);
}

.logo-set img {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 46px;
  object-fit: contain;
  padding: 5px 16px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  /* 禁止图片原生拖拽 / 长按菜单，避免与手势滚动冲突 */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 平板 */
@media (max-width: 1100px) {
  .logo-window { height: calc(8 * 42px); }
  .logo-set {
    grid-template-rows: repeat(8, 42px);
    grid-auto-columns: clamp(120px, 15vw, 160px);
  }
  .logo-set img { height: 42px; padding: 4px 12px; }
}

/* 移动端：8 行（与桌面一致） */
@media (max-width: 720px) {
  .logo-window { height: calc(8 * 38px); }
  .logo-set {
    grid-template-rows: repeat(8, 38px);
    grid-auto-columns: 112px;
  }
  .logo-set img { height: 38px; padding: 4px 9px; }
  .logo-grid { animation-duration: 90s; }
}

@media print {
  .logo-grid { animation: none; }
  .logo-window { height: auto; overflow: visible; }
  .logo-set { grid-template-rows: repeat(8, 40px); }
}