/* ==========================================================================
   首页专用样式
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(7.5rem, 16vh, 11rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* 文字区与页面其他区块同宽（沿用 .wrap--wide 的 1440px 上限，不再单独放宽） */

/* 左半标题 / 右半说明，两栏分割（参考 Vanilla Hero 的 50/50 with no image） */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 4.2vw, 4.5rem);
  align-items: end;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--jade); margin-bottom: 1.5rem;
}
.hero__eyebrow::before {
  content: ""; width: 2.25rem; height: 1px; background: var(--aurora);
}

.hero__title {
  font-size: clamp(2.1rem, 1.1rem + 4.6vw, 4.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

/* 右半栏：说明与按钮自成一块 */
.hero__desc {
  max-width: 44ch;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  color: var(--fg-mute);
}

.hero__actions { margin-top: 2rem; display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* 数据条：横向铺开，与页面同宽 */
.hero__stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.75rem, 6vw, 6rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero__stats li { display: flex; flex-direction: column; gap: 0.15rem; }
.hero__stats strong {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
  font-weight: 700;
  background: var(--aurora);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__stats span { font-size: 0.82rem; color: var(--fg-dim); letter-spacing: 0.04em; }

/* 作品视觉带（位于 Hero 下方，与导航同宽） */
.hero__strip { margin-top: clamp(3.25rem, 8vw, 6rem); }
.hero__strip-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9rem, 2.4vw, 1.75rem);
}

.hero__shot {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 8;
  transition: transform 0.6s var(--ease), border-color 0.4s, box-shadow 0.6s;
}
.hero__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.hero__shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 7, 14, 0.92) 4%, rgba(5, 7, 14, 0.28) 46%, transparent 74%);
  transition: opacity 0.5s;
}
.hero__shot:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.hero__shot:hover img { transform: scale(1.05); }
.hero__shot--gold:hover { box-shadow: 0 24px 60px rgba(232, 180, 74, 0.22); }
.hero__shot--jade:hover { box-shadow: 0 24px 60px rgba(53, 224, 176, 0.22); }

.hero__shot-label {
  position: absolute; left: clamp(1rem, 2.4vw, 1.75rem); bottom: clamp(0.9rem, 2.2vw, 1.5rem);
  z-index: 1; display: flex; flex-direction: column; gap: 0.2rem;
}
.hero__shot-cn { font-family: var(--font-serif); font-size: clamp(1.05rem, 0.9rem + 1vw, 1.6rem); font-weight: 700; }
.hero__shot-en { font-size: 0.76rem; color: var(--fg-mute); letter-spacing: 0.06em; }

/* ---------- 工作室 ---------- */
.studio { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); }
.studio__body p { color: var(--fg-mute); }
.studio__body p + p { margin-top: 1.15rem; }

.studio__facts {
  margin: 2.25rem 0 0; display: grid; gap: 0;
  border-top: 1px solid var(--line);
}
.studio__facts > div {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line);
}
.studio__facts dt { color: var(--fg-dim); font-size: 0.86rem; }
.studio__facts dd { margin: 0; font-size: 0.9rem; }

/* ---------- 联系 ---------- */
.contact {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 5vw, 3.5rem); flex-wrap: wrap;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(600px 200px at 12% 0%, rgba(53, 224, 176, 0.1), transparent 70%),
    radial-gradient(600px 200px at 88% 100%, rgba(123, 92, 255, 0.12), transparent 70%),
    var(--bg-card);
}
.contact__text .sec-head__title { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); }
.contact__text .sec-head__desc { margin-top: 0.7rem; }
.contact__actions { display: flex; flex-direction: column; gap: 0.6rem; min-width: min(100%, 22rem); }

.contact__list { display: grid; gap: 0.55rem; }
.contact__list li {
  display: flex; align-items: baseline; gap: 0.85rem; flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  font-size: 0.88rem;
}
.contact__list span { flex: none; min-width: 5.5rem; color: var(--fg-dim); font-size: 0.8rem; }
.contact__list a { color: var(--jade); transition: opacity 0.25s; }
.contact__list a:hover { opacity: 0.78; }
.contact__list em { font-style: normal; color: var(--fg-mute); }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  /* 两栏改为上下堆叠：标题在上，说明与按钮在下 */
  .hero__grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.75rem); }
  .hero__desc { max-width: 58ch; }
}
@media (max-width: 900px) {
  .studio { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 700px) {
  .hero__strip-inner { grid-template-columns: 1fr; }
  .hero__stats { gap: 1.5rem 2.25rem; }
}
@media (max-width: 560px) {
  .game-grid { grid-template-columns: 1fr; }
}