/* ==========================================================================
   客户 logo 条（首页 + About 页共用）
   --------------------------------------------------------------------------
   标记：template-parts/customer-rail.php
   数据：inc/customers-content.php
   只在首页与 About 页加载（functions.php / muban_enqueue_assets）。

   设计取舍
   --------
   1. 保留原色，不用常见的整条灰度。试过灰度：CSSC（白字压在蓝六边形上）和
      The Building Techniques（细线字标）灰度后几乎糊成一片，客户墙的第一作用
      是"认得出是谁"，灰度恰好毁掉这一点。改用 opacity 0.9 统一压一点亮度，
      让 HOLU 那种实心红盘不至于在 6 个里抢眼。
   2. 高度逐个定（--dh 来自内容层），不做统一高度：把 50px 的宽字标和 62px 的
      竖排标志压成同样高，窄的那几个会小到看不清。
   3. 首屏之后的窄条，所以用 section--tight；标题降级为 1.05rem，不再占用
      页面视觉层级——这一条是给"往下翻的人"看的，不是主卖点。
   ========================================================================== */

.cust {
  background: var(--white);
  /* 下一段（首页 Projects）也是白底，用一条细线交代边界 */
  border-bottom: 1px solid var(--line);
}

/* 嵌在别的 section 里（About 页出口市场段末尾）：不带背景与上下留白 */
.cust--inline {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

/* ---------- 文案 ---------- */

.cust__head {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

/* .eyebrow 自带一根 20px 的短横线，居中排时会偏左，这里收掉 */
.cust__head .eyebrow::before {
  display: none;
}

.cust__title {
  margin-top: var(--sp-2);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.008em;
  color: var(--navy);
}

.cust__lead {
  margin-top: var(--sp-2);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- logo 网格 ---------- */

/* 用 flex 而不是等宽网格：6 个标志宽窄差 3 倍，等宽列会让窄的图孤零零浮在
   一大片空白里。flex 让它们按自身宽度聚成一簇、整体居中，密度更像"一组证据" */
.cust__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6) var(--sp-8);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.cust__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cust__item img {
  width: auto;
  max-width: 100%;
  height: var(--dh, 36px);
  opacity: 0.9;
  transition: opacity 0.25s var(--ease);
}

/* 这里不做灰度 / 放大之类的 hover 效果：这些 logo 不是链接，点了没反应，
   给一个"看起来能点"的反馈反而是误导。只把透明度补满 */
@media (hover: hover) and (pointer: fine) {
  .cust__item:hover img {
    opacity: 1;
  }
}

/* ---------- 响应式 ---------- */

@media (max-width: 767px) {
  .cust__grid {
    gap: var(--sp-5) var(--sp-6);
  }

  /* 窄屏下等比缩小，避免 62px 的竖排标志比 46px 的圆形标志大太多 */
  .cust__item img {
    height: calc(var(--dh, 36px) * 0.78);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cust__item img {
    transition: none;
  }
}