/* ==========================================================================
   Space Vanta · Trust Bridge — picks（自动精选集）
   路径：public/trust-bridge/picks/cs/picks.css
   每件商品是一块悬浮的金属边小板：静态时错落浮动，悬停时抬升、地面投影收窄、边缘泛蓝光。
   随机逻辑见 picks.js；未挑中的卡片带 hidden 属性。
   ========================================================================== */

.sv-trust-bridge__picks {
  position: relative;
  margin-top: 48px;
}

.sv-trust-bridge__picks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.sv-trust-bridge__picks-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sv-tb-steel-500);
}

.sv-trust-bridge__picks-title::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--sv-tb-blue);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(47, 107, 255, .6);
}

.sv-trust-bridge__picks-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* 换一批：切角方块 + 两支错位箭头 */
.sv-trust-bridge__shuffle {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  appearance: none;
  border: 0;
  cursor: pointer;
  color: var(--sv-tb-blue);
  background: var(--sv-tb-rim);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.sv-trust-bridge__shuffle::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: var(--sv-tb-glass);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .3s;
}

.sv-trust-bridge__shuffle svg {
  position: relative;
  width: 18px;
  height: 18px;
  transition: transform .6s var(--sv-tb-ease);
}

.sv-trust-bridge__shuffle:hover { color: #fff; }
.sv-trust-bridge__shuffle:hover::before { background: var(--sv-tb-grad); }
.sv-trust-bridge__shuffle:hover svg { transform: rotate(180deg); }

.sv-trust-bridge__shuffle:focus-visible {
  outline: 2px solid var(--sv-tb-blue);
  outline-offset: 3px;
}

/* ---------- 卡片栅格 ---------- */
.sv-trust-bridge__picks-grid {
  display: grid;
  grid-template-columns: repeat(var(--sv-tb-picks, 5), minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  align-items: start;
  /* JS 就绪前先隐藏，避免“先显示固定几件、再被随机替换”的闪动；1.2s 后无论如何都显示（无 JS 兜底） */
  opacity: 0;
  animation: sv-tb-reveal .01s 1.2s forwards;
  transition: opacity .5s var(--sv-tb-ease), filter .5s var(--sv-tb-ease);
}

.sv-trust-bridge__picks.is-ready .sv-trust-bridge__picks-grid {
  opacity: 1;
  animation: none;
}

/* 换一批时：整排虚化淡出 → 换牌 → 对焦淡入 */
.sv-trust-bridge__picks.is-shuffling .sv-trust-bridge__picks-grid {
  opacity: 0;
  filter: blur(8px);
}

@keyframes sv-tb-reveal { to { opacity: 1; } }

.sv-trust-bridge__picks[hidden] { display: none; }

.sv-trust-bridge__card[hidden] { display: none !important; }

/* 无 JS 兜底：只显示前 N 件 */
.sv-trust-bridge__picks:not(.is-ready) .sv-trust-bridge__card:nth-child(n + 6) { display: none; }

.sv-trust-bridge__card {
  position: relative;
  display: block;
  color: var(--sv-tb-ink);
  text-decoration: none;
  /* 错落的“台阶”：偶数位置略低，呼应堆栈的层级感 */
  transition: transform .6s var(--sv-tb-ease);
}

.sv-trust-bridge__card[data-slot="1"],
.sv-trust-bridge__card[data-slot="3"],
.sv-trust-bridge__card[data-slot="5"],
.sv-trust-bridge__card[data-slot="7"] { transform: translateY(16px); }

.sv-trust-bridge__card:focus-visible {
  outline: 2px solid var(--sv-tb-blue);
  outline-offset: 6px;
}

.sv-trust-bridge__card-float {
  display: block;
  position: relative;
  transition: transform .6s var(--sv-tb-ease);
  animation: sv-tb-float 9s ease-in-out infinite;
}

.sv-trust-bridge__card:nth-child(2n) .sv-trust-bridge__card-float { animation-delay: -3s; }
.sv-trust-bridge__card:nth-child(3n) .sv-trust-bridge__card-float { animation-delay: -6s; }

.sv-trust-bridge.is-offscreen .sv-trust-bridge__card-float,
.sv-trust-bridge.is-offscreen .sv-trust-bridge__card-ground { animation-play-state: paused; }

.sv-trust-bridge__card-stage {
  display: block;
  position: relative;
}

/* 金属边小板：描边渐变 + 内缩图片，同一切角 */
.sv-trust-bridge__card-plate {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--sv-tb-rim);
  clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 34px) 100%, 0 100%);
  transition: background .5s;
}

.sv-trust-bridge__card-media {
  position: absolute;
  inset: 1.5px;
  overflow: hidden;
  background: linear-gradient(135deg, #F4F7FC, #DCE5F4);
  clip-path: polygon(0 15px, 15px 0, 100% 0, 100% calc(100% - 21px), calc(100% - 33px) 100%, 0 100%);
}

.sv-trust-bridge__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--sv-tb-ease);
}

/* 地面投影：不随板浮动，只在悬停时收窄变淡 */
.sv-trust-bridge__card-ground {
  position: absolute;
  left: 8%;
  right: 12%;
  bottom: -16px;
  height: 22px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(21, 26, 38, .28), rgba(21, 26, 38, 0) 70%);
  animation: sv-tb-ground 9s ease-in-out infinite;
  transition: transform .6s var(--sv-tb-ease), opacity .6s;
}

.sv-trust-bridge__card-name {
  display: -webkit-box;
  margin: 26px 2px 4px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sv-tb-ink);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sv-trust-bridge__card-price {
  display: block;
  margin: 0 2px;
  font-size: 13px;
  color: var(--sv-tb-steel-600);
  font-variant-numeric: tabular-nums;
}

/* 悬停 / 聚焦：板抬升、边缘泛蓝光、图片轻微推近 */
.sv-trust-bridge__card:hover .sv-trust-bridge__card-float,
.sv-trust-bridge__card:focus-visible .sv-trust-bridge__card-float {
  transform: translateY(-8px);
}

.sv-trust-bridge__card:hover .sv-trust-bridge__card-plate,
.sv-trust-bridge__card:focus-visible .sv-trust-bridge__card-plate {
  background: linear-gradient(135deg, #DCE6FF 0%, #7FAAFF 45%, #2F6BFF 100%);
}

.sv-trust-bridge__card:hover .sv-trust-bridge__card-img { transform: scale(1.05); }
.sv-trust-bridge__card:hover .sv-trust-bridge__card-ground { transform: scaleX(.84); opacity: .7; }

/* ---------- 移动端：横向滑动的一排 ---------- */
@media (max-width: 767px) {
  .sv-trust-bridge__picks { margin-top: 22px; }

  .sv-trust-bridge__picks-grid {
    display: flex;
    gap: 14px;
    margin: 0 calc(var(--sv-tb-gutter) * -1);
    padding: 4px var(--sv-tb-gutter) 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--sv-tb-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sv-trust-bridge__picks-grid::-webkit-scrollbar { display: none; }

  .sv-trust-bridge__card {
    flex: 0 0 44%;
    scroll-snap-align: start;
  }

  .sv-trust-bridge__card[data-slot] { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-trust-bridge__picks-grid { opacity: 1; animation: none; }
}