/* ==============================
   Parallelogram Gallery (Minimal)
   - viewport 裁切
   - track 用 transform 位移（无 scroll）
   - card 固定 skew，内部反向 skew，图片不歪
   ============================== */

/* 可选：页面背景/字体（你有全局的话可删） */
/*
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Yu Gothic", Meiryo, Arial, sans-serif;
}
*/

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.para-gallery {
  padding: 26px 0 36px;
}

.para-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.para-head h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: .01em;
  color: #0b1f3b;
}

.para-head p {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #4b5563;
}

/* ===== viewport：负责交互 + 裁切 ===== */
.para-viewport {
  overflow: hidden;
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  /* 允许页面上下滚 */
}

.para-viewport:active {
  cursor: grabbing;
}

/* ===== track：只负责布局 + 被 JS transform 位移 ===== */
.para-track--xform {
  display: flex;
  gap: 14px;
  padding: 0;
  /* ✅ 关键：去掉 track padding */
  will-change: transform;
  transform: translate3d(0, 0, 0);
}


/* 拖拽时：不让子元素抢事件（防跳栏/误点） */
.para-track--xform.is-dragging,
.para-track--xform.is-dragging * {
  pointer-events: none;
}

/* ===== card：平行四边形 ===== */
.para-card {
  display: block;
  /* <a> 默认 inline，必须 block 才吃宽高 */
  flex: 0 0 auto;
  width: clamp(240px, 26vw, 360px);
  height: clamp(160px, 18vw, 220px);

  position: relative;
  overflow: hidden;
  border-radius: 18px;

  text-decoration: none;
  color: #fff;

  /* 关键：只保留 skew；不要在 CSS 里再写别的 transform 覆盖 */
  transform: skewX(-14deg);
  background: #0b1f3b;

  box-shadow: none;
  border: none;
}

.para-media {
  position: absolute;

  /* 1) 放大图片层：避免 skew 后两角露底 */
  inset: -34px;
  /* -28 ~ -40 之间你可按图再调 */

  background-image: var(--img);
  background-size: cover;
  background-position: center;

  transform: skewX(14deg) scale(1.06);
  /* 再轻微放大一层，双保险 */
  transform-origin: center;

  /* 2) 降低“锐/硬”感：降低对比+饱和，给一点点 blur */
  filter: saturate(0.98) contrast(0.96) brightness(0.98) blur(0.35px);
}

/* 文案：反向 skew，文字摆正 */
.para-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  transform: skewX(14deg);
  z-index: 1;
}

.para-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  opacity: .92;
}

.para-title {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .01em;
}

/* 键盘可访问性 */
.para-card:focus-visible {
  outline: 3px solid rgba(15, 76, 129, .45);
  outline-offset: 3px;
}

/* hover：仅非拖拽状态（避免拖拽时抖动/测量变化） */
@media (hover:hover) {
  .para-track--xform:not(.is-dragging) .para-card {
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .para-track--xform:not(.is-dragging) .para-card:hover {
    transform: skewX(-14deg) translateY(-2px);
    box-shadow: 0 18px 38px rgba(17, 24, 39, .16);
  }
}

/* 滚动区铺满屏幕，但保留左右安全边距 */
.para-viewport {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 6px;
  /* ✅ 原 track 的上 padding */
  padding-bottom: 14px;
  /* ✅ 原 track 的下 padding */
}