/* ==========================================================================
   PT1958 · 品牌卡轮播（首页 #brands 与 /partners/ 共用一套）
   结构：.brand-carousel > .brand-track > .brand-cell > img × N
        .brand-pager（左箭头 · 中间链接 · 右箭头）
   变量：
     --per-view  一屏显示几张卡（首页 5，栏目页 3）
     --cell-cols 每张卡内 logo 的列数（首页 1 列×2 行；栏目页 1 列×3 行，末卡单张靠顶）
   行为（brand-carousel.js）：3.5s 自动滑一格 · 箭头切一格 · 按住拖动为自由跟手。
   品牌图由 build_pages.py 扫描 public/static/images/home/<分组目录> 生成。
   响应式段必须放在文件末尾（同优先级后定义者胜）。
   ========================================================================== */

.brand-carousel {
  --per-view: 5;
  --cell-cols: 1;
  --brand-gap: var(--sp-4);
  overflow: hidden;
  /* 负边距对冲内距：给卡片 hover 阴影留出空间，避免被 overflow 裁掉 */
  padding: 6px 2px 12px;
  margin: -6px -2px -12px;
}

/* 栏目页（/partners/）与首页同款：per_cell=2、一屏 5 卡，不再用变体。 */

.brand-track {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--brand-gap);
  transition: transform .55s var(--ease);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.brand-track.is-dragging { transition: none; cursor: grabbing; }

.brand-cell {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--brand-gap)) / var(--per-view));
  display: grid;
  grid-template-columns: repeat(var(--cell-cols), minmax(0, 1fr));
  gap: var(--brand-gap); /* 卡内各 logo 小卡之间的间隙 */
}

.brand-cell img {
  width: 100%;
  aspect-ratio: 9 / 5;
  object-fit: contain;
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-user-drag: none;
  user-select: none;
}

.brand-cell img:hover {
  border-color: rgba(28, 109, 208, .35);
  box-shadow: var(--shadow-lg);
}

/* 非满卡补位（生成器输出 .brand-cell--t3 / --t1）：
   t3 = 3 个 logo：列优先——第一列上下两个，第 3 个在右列垂直居中（与其它小格同尺寸）；
   t1 = 1 个 logo（末卡）：不做特殊处理，按正常流从上排（保持标准小卡尺寸）。 */
.brand-cell--t3 {
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.brand-cell--t3 img:nth-child(3) {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

/* 轮播条：左箭头 · 中间链接 · 右箭头 */
.brand-pager {
  margin-top: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
}

.brand-pager__arrow {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.brand-pager__arrow:hover {
  border-color: var(--c-accent);
  background: rgba(28, 109, 208, .06);
}

.brand-pager__more {
  min-width: 132px;
  padding: 12px var(--sp-6);
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  color: #fff;
  background: var(--c-primary);
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* color:#fff 必须重申：全局 a:hover（base.css）特异性更高，且 --c-accent 未定义，
   不写会让 hover 时文字变回继承的深色、消失在深蓝底里 */
.brand-pager__more:hover { color: #fff; background: var(--c-accent, var(--c-primary)); transform: translateY(-2px); }

/* ===== 响应式（必须保持在文件末尾） ======================================== */
@media (max-width: 1200px) {
  .brand-carousel { --per-view: 4; }
}

@media (max-width: 900px) {
  .brand-carousel { --per-view: 3; }
}

@media (max-width: 420px) {
  .brand-carousel { --per-view: 2; }
  .brand-cell img { padding: var(--sp-3); }
}