/* ============================================================
   work.css — 居中头部 + 左文案/右 4 卡横向滚动行
   ============================================================ */

.work { padding: 160px 0 330px; background: var(--white); }
.work h2 { max-width: 21ch; }
.work .section-head .btn { margin-top: 26px; }

.work__row {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: end;
  margin-top: 197px;
}

.work__copy { display: grid; justify-items: start; gap: 18px; }
.work__copy h3 { font-size: clamp(24px, 2.2vw, 32px); }
.work__copy p { color: var(--slate); }
.work__stat {
  margin-top: 44px;
  font-family: var(--font-numeric);
  font-weight: 500;
  font-size: clamp(64px, 7vw, 100px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: #000;
}
.work__stat-caption { color: var(--navy); font-size: var(--body-lg); }

/* 两槽堆叠：卡1/2 在位，卡3/4 随滚动从下方升起叠盖（overflow 裁切出「从底边升入」感） */
.work__gallery {
  position: relative;
  aspect-ratio: 874 / 533;
  overflow: clip;
  border-radius: 20px;
}
.work__gallery img {
  position: absolute;
  top: 0;
  width: calc(50% - 11px);
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.work__gallery img:nth-child(1) { left: 0; }
.work__gallery img:nth-child(2) { right: 0; }
.work__gallery img:nth-child(3) { left: 0; z-index: 2; }
.work__gallery img:nth-child(4) { right: 0; z-index: 2; }
/* 无 JS / 降级：上层两卡直接叠在终位（内容不缺失） */
.motion-off .work__gallery img { transform: none !important; }

@media (max-width: 1199px) {
  .work__row { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 809px) {
  .work { padding: 90px 0 70px; }
  .work__row { margin-top: 60px; }
  /* 移动端退回横向滚动行 */
  .work__gallery {
    aspect-ratio: auto;
    overflow-x: auto;
    display: flex;
    gap: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .work__gallery::-webkit-scrollbar { display: none; }
  .work__gallery img {
    position: static;
    flex: none;
    width: min(320px, 80vw);
    height: auto;
    scroll-snap-align: start;
    transform: none !important;
  }
}
