:root {
  --color-252525: #252525;
  --color-000000: #000000;
  --color-878787: #878787;
  --color-FFFFFF: #ffffff;

  --font-48: clamp(27px, 2.6vw, 48px);
  --font-30: clamp(22px, 1.57vw, 30px);
  --font-22: clamp(16px, 1.15vw, 22px);
  --font-14: clamp(13px, 0.73vw, 14px);

  /* 统一间距体系：全部随视口流体缩放，移动端/桌面端共用 */
  --page-max-width: 1076px;
  --section-pad-y: clamp(40px, 5vw, 100px); /* 每个 section 统一的上/下内边距 */
  --block-gap: clamp(24px, 4vw, 56px); /* 标题与图片/视频/轮播块之间的间距 */
  --text-gap: clamp(12px, 1.5vw, 20px); /* 标题与正文之间的间距 */
  --note-gap: clamp(10px, 1.2vw, 16px); /* 正文与测试备注之间的间距 */
}

html,
body {
  width: 100%;
  margin: 0;
  background: var(--color-FFFFFF);
  color: var(--color-252525);
}

body {
  overflow-x: visible;
}

.hep-s-page,
.hep-s-page section,
.hep-s-page picture,
.hep-s-page img,
.hep-s-page video {
  display: block;
}

.hep-s-page {
  width: 100%;
  max-width: var(--page-max-width);
  margin-right: auto;
  margin-left: auto;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--color-FFFFFF);
  color: var(--color-252525);
  font-size: var(--font-22);
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: -0.4px;
}

.hep-s-page button:focus-visible {
  outline: 2px solid var(--color-FFFFFF);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-000000);
}

.hep-s-page h1,
.hep-s-page h2 {
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.8px;
}

.hep-s-page h1 {
  font-size: var(--font-48);
}

.hep-s-page h2 {
  font-size: var(--font-48);
}

.hep-s-page strong {
  font-weight: bold;
}

.hep-s-page .test-note {
  color: var(--color-878787);
  font-size: var(--font-14);
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

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

.hep-s-page .hero {
  position: relative;
  width: 100%;
  background: var(--color-000000);
  color: var(--color-FFFFFF);
}

.hep-s-page .hero-visual,
.hep-s-page .hero-visual picture {
  width: 100%;
}

.hep-s-page .hero-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 1076 / 787;
}

.hep-s-page .hero-copy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5%;
  z-index: 1;
  width: 90%;
  padding-top: 7%;
  text-align: center;
}

.hep-s-page .hero-copy > p {
  margin-top: 20px;
}

.hep-s-page .hero-stats {
  position: absolute;
  right: 0;
  bottom: 8%;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  width: 100%;
}

.hep-s-page .hero-stats li,
.hep-s-page .hero-stats strong,
.hep-s-page .hero-stats span {
  display: block;
}

.hep-s-page .hero-stats strong {
  font-size: var(--font-30);
  line-height: 1.5;
  letter-spacing: -0.8px;
}

.hep-s-page .hero-stats span {
  margin-top: 6px;
  font-size: var(--font-14);
  line-height: 1.2;
  letter-spacing: -0.4px;
}

/* ---------- 结构强度升级 ---------- */

.hep-s-page .strength {
  width: 100%;
  padding: var(--section-pad-y) 0;
  background: var(--color-000000);
  color: var(--color-FFFFFF);
}

.hep-s-page .strength > h2,
.hep-s-page .strength > .test-note {
  width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  text-align: center;
}

.hep-s-page .strength > h2 {
  margin-bottom: var(--block-gap);
}

.hep-s-page .strength-list {
  width: 100%;
}

.hep-s-page .strength-item {
  display: block;
  width: 90%;
  margin-right: 5%;
  margin-bottom: var(--block-gap);
  margin-left: 5%;
}

.hep-s-page .strength-item:last-of-type {
  margin-bottom: 0;
}

.hep-s-page .strength-item picture,
.hep-s-page .strength-item img {
  width: 100%;
}

.hep-s-page .strength-item img {
  height: auto;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.hep-s-page .strength-copy {
  width: 100%;
  max-width: 800px;
  margin: var(--text-gap) auto 0;
  font-size: var(--font-22);
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: -0.4px;
  text-align: center;
}

.hep-s-page .strength > .test-note {
  margin-top: var(--block-gap);
}

/* 滚动增强（JS 启用时）的安全复位默认值 */
.hep-s-page .strength.is-scroll-enhanced {
  min-height: 0;
}

.hep-s-page .strength.is-scroll-enhanced > h2 {
  position: relative;
  top: auto;
}

.hep-s-page .strength.is-scroll-enhanced .strength-list {
  position: relative;
  height: auto;
}

.hep-s-page .strength.is-scroll-enhanced .strength-item {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.hep-s-page .strength.is-scroll-enhanced > .test-note {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
}

/* ---------- 快速动态响应 ---------- */

.hep-s-page .response {
  width: 100%;
  padding-top: var(--section-pad-y);
  background: var(--color-FFFFFF);
  color: var(--color-252525);
}

.hep-s-page .response-intro {
  width: 90%;
  margin: 0 5%;
  padding-bottom: var(--block-gap);
  text-align: center;
}

.hep-s-page .response-intro > p:not(.test-note) {
  margin-top: var(--text-gap);
}

.hep-s-page .response-intro .test-note {
  margin-top: var(--note-gap);
}

.hep-s-page .response-carousel {
  position: relative;
  width: 100%;
  padding: var(--block-gap) 0 var(--section-pad-y);
  background: var(--color-252525);
  color: var(--color-FFFFFF);
}

.hep-s-page .response-track {
  width: 90%;
  margin: 0 5%;
}

.hep-s-page .response-slide {
  width: 100%;
  margin-bottom: var(--block-gap);
}

.hep-s-page .response-slide:last-of-type {
  margin-bottom: 0;
}

.hep-s-page .response-slide picture,
.hep-s-page .response-slide img {
  width: 100%;
}

.hep-s-page .response-slide img {
  height: auto;
  aspect-ratio: 2 / 1;
}

.hep-s-page .response-slide figcaption {
  width: 90%;
  margin: var(--text-gap) 5% 0;
  text-align: center;
}

.hep-s-page .response-controls {
  display: none;
}

.hep-s-page .response-copy-control {
  display: flex;
  flex-direction: column;
}

.hep-s-page .response-navigation {
  display: flex;
  gap: 8px;
}

/* 桌面端轮播增强（JS 启用时，移动端不启用） */
.hep-s-page .response-carousel.is-carousel-enhanced {
  min-height: 560px;
  padding-top: var(--block-gap);
}

.hep-s-page .response-carousel.is-carousel-enhanced .response-track {
  position: relative;
  width: 100%;
  height: 500px;
  margin: 0;
}

.hep-s-page .response-carousel.is-carousel-enhanced .response-slide {
  position: absolute;
  top: 0;
  left: 15%;
  z-index: 0;
  width: 70%;
  margin: 0;
  transform: translateX(306%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 600ms ease,
    opacity 600ms ease;
  will-change: transform, opacity;
}

.hep-s-page .response-carousel.is-carousel-resetting .response-slide {
  transition: none;
}

.hep-s-page
  .response-carousel.is-carousel-enhanced
  .response-slide[data-carousel-position="0"],
.hep-s-page .response-carousel.is-carousel-enhanced .response-slide.is-current {
  z-index: 2;
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.hep-s-page
  .response-carousel.is-carousel-enhanced
  .response-slide[data-carousel-position="-1"],
.hep-s-page
  .response-carousel.is-carousel-enhanced
  .response-slide.is-previous {
  z-index: 1;
  transform: translateX(-102%);
  opacity: 1;
  visibility: visible;
}

.hep-s-page
  .response-carousel.is-carousel-enhanced
  .response-slide[data-carousel-position="1"],
.hep-s-page .response-carousel.is-carousel-enhanced .response-slide.is-next {
  z-index: 1;
  transform: translateX(102%);
  opacity: 1;
  visibility: visible;
}

.hep-s-page
  .response-carousel.is-carousel-enhanced
  .response-slide[data-carousel-position="-2"] {
  transform: translateX(-204%);
  opacity: 0;
  visibility: visible;
}

.hep-s-page
  .response-carousel.is-carousel-enhanced
  .response-slide[data-carousel-position="2"] {
  transform: translateX(204%);
  opacity: 0;
  visibility: visible;
}

.hep-s-page .response-carousel.is-carousel-enhanced .response-slide figcaption {
  display: none;
}

.hep-s-page .response-carousel.is-carousel-enhanced .response-controls {
  position: absolute;
  bottom: 48px;
  left: 15%;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 70%;
}

.hep-s-page .response-carousel.is-carousel-enhanced .response-caption {
  margin-top: 4px;
}

.hep-s-page .response-carousel.is-carousel-enhanced .response-indicators {
  display: flex;
}

.hep-s-page .response-indicators button {
  width: 26px;
  height: 24px;
  margin-right: 10px;
  padding: 0;
  border: 0;
  border-top: 2px solid var(--color-878787);
  background: var(--color-252525);
  color: var(--color-FFFFFF);
  cursor: pointer;
}

.hep-s-page .response-indicators button[aria-pressed="true"] {
  border-top-color: var(--color-FFFFFF);
}

.hep-s-page .response-navigation button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-252525);
  color: var(--color-FFFFFF);
  font-size: var(--font-14);
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: -0.4px;
  cursor: pointer;
}

.hep-s-page .response-navigation button::before {
  display: block;
  width: 32px;
  height: 32px;
  content: "";
  background-color: var(--color-FFFFFF);
  -webkit-mask: url("https://img.tmotor.com/products/hep-s/images/arrow.svg")
    center / contain no-repeat;
  mask: url("https://img.tmotor.com/products/hep-s/images/arrow.svg") center /
    contain no-repeat;
}

.hep-s-page .response-navigation [data-carousel-prev]::before {
  transform: rotate(180deg);
}

/* ---------- 续航 / 动力协同 / 识别防护（统一间距） ---------- */

.hep-s-page .flight-time,
.hep-s-page .power-system,
.hep-s-page .protection {
  width: 90%;
  margin: 0 5%;
  padding: var(--section-pad-y) 0;
  text-align: center;
  background: var(--color-FFFFFF);
  color: var(--color-252525);
}

.hep-s-page .flight-time > p:not(.test-note),
.hep-s-page .power-system > p,
.hep-s-page .protection > p {
  margin-top: var(--text-gap);
}

.hep-s-page .flight-time .test-note {
  margin: var(--note-gap) 0 0;
}

.hep-s-page .flight-time video,
.hep-s-page .power-system video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--color-000000);
}

.hep-s-page .flight-time video {
  margin-top: var(--block-gap);
}

.hep-s-page .power-system video {
  margin-top: var(--block-gap);
}

.hep-s-page .power-system > video ~ p {
  margin-top: var(--text-gap);
}

.hep-s-page .protection-visuals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1vw, 12px);
  width: 100%;
  margin: var(--block-gap) 0 0;
}

.hep-s-page .protection-visuals picture,
.hep-s-page .protection-visuals img {
  width: 100%;
}

.hep-s-page .protection-visuals img {
  height: auto;
}

/* ---------- 移动端（间距变量自动缩放，仅覆盖必要项） ---------- */

@media screen and (max-width: 768px) {
  .hep-s-page section {
    min-height: 0;
  }

  .hep-s-page .hero-visual img {
    height: auto;
    aspect-ratio: auto;
  }

  .hep-s-page .hero-copy {
    padding-top: 26%;
  }

  .hep-s-page .hero-stats {
    bottom: 7%;
    grid-template-columns: repeat(2, 1fr);
  }

  .hep-s-page .hero-stats li:nth-child(2) {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-top: 15vw;
  }

  .hep-s-page .hero-stats li:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  /* 移动端轮播图片为 675×400，按原始比例显示避免拉伸变形 */
  .hep-s-page .response-slide img {
    aspect-ratio: 675 / 400;
  }

  /* 视频移动端通栏显示 */
  .hep-s-page .flight-time video,
  .hep-s-page .power-system video {
    width: 100%;
    max-width: none;
  }

  .hep-s-page .flight-time {
    padding-top: clamp(80px, 10vw, 200px);
  }

  .hep-s-page .protection {
    padding-bottom: clamp(80px, 10vw, 200px);
  }

  /* JS 增强样式的安全复位（移动端不启用增强） */
  .hep-s-page .strength .strength-item,
  .hep-s-page .strength.is-scroll-enhanced .strength-item {
    position: relative;
    inset: auto;
    display: block;
    width: 90%;
    height: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .hep-s-page .response-carousel,
  .hep-s-page .response-carousel.is-carousel-enhanced {
    min-height: 0;
  }

  .hep-s-page .response-carousel.is-carousel-enhanced .response-track {
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    margin: 0 5%;
  }

  .hep-s-page .response-slide,
  .hep-s-page .response-carousel.is-carousel-enhanced .response-slide,
  .hep-s-page
    .response-carousel.is-carousel-enhanced
    .response-slide.is-current,
  .hep-s-page
    .response-carousel.is-carousel-enhanced
    .response-slide.is-previous,
  .hep-s-page .response-carousel.is-carousel-enhanced .response-slide.is-next {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: 100%;
    margin: 0 0 var(--block-gap);
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .hep-s-page
    .response-carousel.is-carousel-enhanced
    .response-slide:last-of-type {
    margin-bottom: 0;
  }

  .hep-s-page
    .response-carousel.is-carousel-enhanced
    .response-slide
    figcaption {
    display: block;
  }

  .hep-s-page .response-controls,
  .hep-s-page .response-carousel.is-carousel-enhanced .response-controls {
    display: none;
  }

  .hep-s-page .strength > h2,
  .hep-s-page .strength-copy,
  .hep-s-page .strength > .test-note,
  .hep-s-page .response-slide figcaption {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hep-s-page .strength.is-scroll-enhanced .strength-item {
    transition: none;
  }
}