/* Hero carousel — PC full-bleed + H5 rounded card */

.hero {
  width: 100%;
  max-width: none;
  min-height: 0;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.hero-swiper {
  width: 100%;
  height: 100%;
}

.hero-swiper .swiper-slide {
  width: 100%;
  height: auto;
}

.hero__main-img {
  width: 100%;
  height: 710px;
  max-height: none;
  min-height: 350px;
  display: block;
  border-radius: 0;
  object-fit: cover;
  background: #464646;
}

.hero__fade {
  display: none;
}

.hero__pagination.swiper-pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, calc(100% - 400px));
  bottom: 28px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.hero__pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 9999px;
  opacity: 1;
  transition: width 0.3s ease, background 0.3s ease;
}

.hero__pagination .swiper-pagination-bullet-active {
  width: 36px;
  height: 10px;
  background: var(--color-primary-500, #ecd227);
  border-radius: 5px;
}

.hero__filmstrip {
  display: none;
}

/* ========== PC hero — Figma 1920×710 ========== */
@media (min-width: 769px) {
  .hero {
    width: 100%;
    aspect-ratio: 1920 / 710;
    height: auto;
    max-height: none;
    max-width: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  .hero-swiper {
    position: absolute;
    inset: 0;
    height: 100%;
    border-radius: 0;
    z-index: 0;
  }

  .hero-swiper .swiper-slide {
    height: 100%;
  }

  .hero__main-img {
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    border-radius: 0;
    object-fit: cover;
  }

  /* Bottom fade — 206px, transparent 60% → black */
  .hero__fade {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 206px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000 100%);
  }

  /* Hide dots on PC */
  .hero__pagination.swiper-pagination {
    display: none !important;
  }

  /* Filmstrip — Figma left 1068 / 1920 ≈ 55.625% */
  .hero__filmstrip {
    display: flex;
    position: absolute;
    left: 55.625%;
    bottom: 60px;
    top: auto;
    right: auto;
    z-index: 4;
    padding: 0;
    margin: 0;
    background: none;
    pointer-events: none;
  }

  .hero__filmstrip-inner {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    pointer-events: auto;
  }

  .hero__filmstrip-arrow {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin: 0;
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;
    cursor: pointer;
    padding: 0;
    opacity: 1;
  }

  .hero__filmstrip-arrow:hover {
    opacity: 0.85;
  }

  .hero__filmstrip-arrow--prev {
    background-image: url("/static/images/arrow_l.svg");
  }

  .hero__filmstrip-arrow--next {
    background-image: url("/static/images/arrow_r.svg");
  }

  .hero__filmstrip-thumbs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  .hero__filmstrip-thumb {
    position: relative;
    display: block;
    width: 100px;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: #464646;
    transition: width 0.2s ease, height 0.2s ease;
  }

  .hero__filmstrip-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #464646;
  }

  /* Inactive: 50% black overlay */
  .hero__filmstrip-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .hero__filmstrip-thumb:hover::after {
    opacity: 0.35;
  }

  /* Active: 116×162, no dim */
  .hero__filmstrip-thumb--active {
    width: 116px;
    height: 162px;
  }

  .hero__filmstrip-thumb--active::after {
    opacity: 0;
  }
}

/* Mid-width PC: keep 1920/710 proportion */
@media (min-width: 769px) and (max-width: 1280px) {
  .hero {
    height: auto;
    aspect-ratio: 1920 / 710;
  }

  .hero-swiper,
  .hero-swiper .swiper-slide,
  .hero__main-img {
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  .hero__main-img {
    min-height: 0;
  }

  .hero__fade {
    height: 29.014%; /* 206 / 710 */
  }

  .hero__filmstrip {
    bottom: 8.45%; /* 60 / 710 */
  }
}

/* ========== H5 hero — 343×154 单卡滑动（Figma） ========== */
@media (max-width: 768px) {
  .hero,
  .hero.hero--h5 {
    position: relative;
    max-width: 100%;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
  }

  .hero-swiper {
    position: relative;
    width: 100%;
    aspect-ratio: 343 / 154;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    background: #464646;
    /* 滑动跟手、减少纵向滚动误触抢占 */
    touch-action: pan-y;
  }

  .hero-swiper .swiper-wrapper {
    height: 100%;
  }

  .hero-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .hero-swiper .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero__main-img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
    display: block;
    pointer-events: none; /* 滑动交给 Swiper，点击由外层 a 承接 */
  }

  .hero__fade {
    display: none !important;
  }

  /* 右下角胶囊指示点 — Figma gap 6 / 6×6 / active 24×6 */
  .hero__pagination.swiper-pagination {
    left: auto;
    right: 12px;
    transform: none;
    width: auto;
    top: auto;
    bottom: 10px;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    display: flex;
    z-index: 5;
    pointer-events: auto;
  }

  .hero__pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 9999px;
    opacity: 1;
    transition: width 0.25s ease, background 0.25s ease;
  }

  .hero__pagination .swiper-pagination-bullet-active {
    width: 24px;
    height: 6px;
    background: var(--color-primary-500, #ecd227);
    border-radius: 5px;
  }

  .hero__filmstrip {
    display: none !important;
  }
}