/* ==========================================================================
   pages/home.css — 首页
   ========================================================================== */

/* ---------------------------------------------------------------- 首屏 */

/* 全屏视频 banner：视频铺满视口，页头透明压在其上，文案叠一层落款板 */
.hero--film {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-height);
  overflow: hidden;
  background: var(--color-primary-900);
}

.hero__media {
  position: absolute;
  inset: 0;
  background: var(--color-primary-900);
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 顶部窄渐变，承托透明页头 */
.hero--film::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-height) * 1.8);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(12, 9, 6, 0.55) 0%, rgba(12, 9, 6, 0.28) 45%, rgba(12, 9, 6, 0) 100%);
}

.hero--film::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(12, 9, 6, 0.74) 0%, rgba(12, 9, 6, 0.36) 44%, rgba(12, 9, 6, 0) 100%);
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: var(--space-16) var(--space-24);
}

.hero__content {
  max-width: 740px;
  text-shadow: 0 1px 2px rgba(8, 7, 5, 0.6), 0 2px 12px rgba(8, 7, 5, 0.35);
}

.hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-regular);
  line-height: 1.14;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-inverse);
  text-shadow:
    0 1px 2px rgba(8, 7, 5, 0.82),
    0 2px 14px rgba(8, 7, 5, 0.4),
    0 16px 48px rgba(8, 7, 5, 0.3);
  animation: heroRise 0.9s var(--ease-out) 0.15s backwards;
}

.hero__title em {
  font-family: inherit;
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--color-gold-400);
}

/* 署名板：贴左的小块深色底 + 左侧金线，不做整屏蒙层 */
ul.hero__names {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  width: fit-content;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-6);
  background-color: rgba(14, 12, 10, 0.34);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-left: 2px solid var(--color-gold-400);
  animation: heroRise 0.9s var(--ease-out) 0.3s backwards;
}

.hero__names b {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: var(--color-text-inverse);
}

.hero__names span {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold-200);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-10);
  animation: heroRise 0.9s var(--ease-out) 0.42s backwards;
}

/* 右下角视频控制：静音 / 暂停 */
.hero__tools {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-8);
  z-index: 3;
  display: flex;
  gap: var(--space-3);
}

.hero__tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(19, 17, 15, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.hero__tool:hover {
  color: #fff;
  background-color: rgba(19, 17, 15, 0.62);
  border-color: rgba(255, 255, 255, 0.44);
}

.hero__tool:focus-visible {
  outline: 2px solid var(--color-gold-300);
  outline-offset: 2px;
}

.hero__icon { width: 20px; height: 20px; }
.hero__icon--sound,
.hero__icon--play { display: none; }

.hero__tool[data-state="on"] .hero__icon--muted { display: none; }
.hero__tool[data-state="on"] .hero__icon--sound { display: block; }
.hero__tool[data-state="paused"] .hero__icon--pause { display: none; }
.hero__tool[data-state="paused"] .hero__icon--play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__names,
  .hero__actions { animation: none; }
}

/* ---------------------------------------------------------------- 方法摘要 *//* ---------------------------------------------------------------- 方法摘要 *//* ---------------------------------------------------------------- 方法摘要 */

.method-intro__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: end;
  margin-bottom: var(--space-16);
}

.method-intro__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
}

.method-card {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-text);
}

.method-card__num {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  color: var(--color-gold-700);
}

.method-card__title {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.method-card__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------- 案例条 */

.results-strip__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.results-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

/* ---------------------------------------------------------------- 医生条 */

.about-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}

.about-strip__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-neutral-100);
}

.about-strip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-strip__quote {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-brand);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text);
}

.about-strip__list {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  font-size: var(--fs-base);
  color: var(--color-text-secondary);
}

.about-strip__list li {
  position: relative;
  padding-left: var(--space-5);
  line-height: 1.6;
}

.about-strip__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--color-brand);
}

/* ---------------------------------------------------------------- 响应式 */

@media (max-width: 1024px) {
  .hero__title { font-size: var(--fs-4xl); }
  .hero__inner { padding-block: var(--space-12); }

  .method-intro__head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .method-intro__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }

  .results-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about-strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

@media (max-width: 640px) {
  .hero__title { font-size: 2.15rem; }
  .hero__inner { padding-bottom: calc(var(--space-20) + var(--space-8)); }
  .hero__actions { margin-top: var(--space-8); }
  .hero__tools { right: var(--space-4); bottom: var(--space-5); }
  .hero__tool { width: 38px; height: 38px; }
  .hero__icon { width: 17px; height: 17px; }
  ul.hero__names { padding: var(--space-3) var(--space-4); }

  .results-strip__grid { grid-template-columns: minmax(0, 1fr); }
  .about-strip__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- 七个区域 */

.area-list {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--space-6);
}

.area-list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-text);
}

.area-list__num {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  color: var(--color-gold-700);
}

.area-list__name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--color-text);
}

.area-list__desc {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

@media (max-width: 640px) {
  .area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}

/* ---------------------------------------------------------------- 首页关于块 */

.about-strip__media--card {
  background: var(--color-neutral-50);
}

.about-strip__media--card img {
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------- 数字条 */

/* 全屏 banner 下的四项数字介绍：细金圈图标 + 衬线大数字 + 小号标签 */
.stat-bar {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.stat-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  padding-block: var(--space-10);
}

.stat {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.stat__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-gold-300);
  border-radius: 50%;
  color: var(--color-gold-700);
}

.stat__icon svg {
  width: 26px;
  height: 26px;
}

.stat__value {
  font-family: var(--font-number);
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--color-primary-800);
}

.stat__label {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ---------------------------------------------------------------- 案例分组 */

/* 首页案例模块拆成上下两组（视频 / 图片）后的小节标签 */
.results-group + .results-group {
  margin-top: var(--space-12);
}

.results-group__label {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold-700);
}

/* ---------------------------------------------------------------- 护照墙 */

/* 全球患者护照墙：双行反向无限滚动，悬停暂停，减动效退化为横向滚动 */
.pass-wall {
  overflow: hidden;
}

.pass-wall .section-head {
  max-width: 720px;
}

.pass-wall__rows {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.pass-wall__row {
  overflow: hidden;
}

.pass-wall__track {
  display: flex;
  width: max-content;
  animation: pass-wall-scroll var(--pass-duration, 110s) linear infinite;
}

.pass-wall__row--reverse .pass-wall__track {
  animation-direction: reverse;
  --pass-duration: 130s;
}

.pass-wall__row:hover .pass-wall__track {
  animation-play-state: paused;
}

.pass-wall__set {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pass-wall__cell {
  flex: 0 0 auto;
  width: 176px;
  height: 176px;
  margin-right: var(--space-4);
  overflow: hidden;
  background: var(--color-primary-800);
}

.pass-wall__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes pass-wall-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .pass-wall__track {
    animation: none;
    width: auto;
    overflow-x: auto;
  }
}

/* ---------------------------------------------------------------- 响应式补充 */

@media (max-width: 1024px) {
  .stat-bar__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-8);
  }
}

@media (max-width: 640px) {
  .stat { gap: var(--space-4); }
  .stat__icon { width: 44px; height: 44px; }
  .stat__icon svg { width: 20px; height: 20px; }
  .stat__value { font-size: var(--fs-2xl); }

  .pass-wall__cell {
    width: 120px;
    height: 120px;
    margin-right: var(--space-3);
  }

  .pass-wall__rows { gap: var(--space-3); }
}