/* 首屏背景图 · 由 index.html 在 main.css 之后引入 */

/* 设计稿 1000 内容区 → 宽 948、右溢 86、上 49 */
.hero-inner:has(.hero-bg) {
  --hero-map-width: min(948px, 94.8%);
  --hero-map-right-overflow: min(86px, 8.6%);
  --hero-map-top: min(49px, 4.9%);
  display: block;
  position: relative;
  min-height: 640px;
  padding-bottom: 128px;
  overflow: visible;
}

.hero-inner:has(.hero-bg) .hero-copy {
  position: relative;
  z-index: 2;
  flex: none;
  width: 100%;
  max-width: 700px;
  min-width: 0;
}

.hero-visual:has(.hero-bg) {
  position: absolute;
  left: auto;
  right: calc(-1 * var(--hero-map-right-overflow));
  top: var(--hero-map-top);
  transform: none;
  width: var(--hero-map-width);
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  flex: none;
  z-index: 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hero-bg {
  width: 100%;
  height: auto;
  aspect-ratio: 1896 / 1026;
  position: relative;
  background: transparent;
}

.hero-bg__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right top;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 1400px) {
  .hero-inner:has(.hero-bg) {
    min-height: clamp(520px, 62vw, 640px);
    padding-bottom: clamp(96px, 12vw, 128px);
  }

  .hero-visual:has(.hero-bg) {
    display: block;
    width: var(--hero-map-width);
    max-width: none;
    padding-top: 0;
    right: calc(-1 * var(--hero-map-right-overflow));
    top: var(--hero-map-top);
  }
}

@media (max-width: 1400px) and (min-width: 1024px) {
  .hero-inner:has(.hero-bg) {
    --hero-map-width: clamp(640px, 78%, 880px);
    --hero-map-right-overflow: min(72px, 7.2%);
    --hero-map-top: min(44px, 4.4%);
    min-height: clamp(480px, 54vw, 580px);
    padding-bottom: clamp(88px, 9vw, 108px);
  }

  .hero-inner:has(.hero-bg) .hero-copy {
    max-width: min(700px, 56%);
  }
}

@media (max-width: 1023px) {
  .hero-inner:has(.hero-bg) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-bottom: 48px;
    overflow: visible;
  }

  .hero-inner:has(.hero-bg) .hero-copy {
    position: relative;
    z-index: auto;
    max-width: none;
    flex: none;
    width: 100%;
  }

  .hero-visual:has(.hero-bg) {
    --hero-mobile-width: 122vw;
    position: static;
    flex: none;
    width: var(--hero-mobile-width);
    max-width: none;
    margin: 16px 0 0;
    margin-left: calc(50% - var(--hero-mobile-width) / 2);
    padding-top: 0;
    right: auto;
    top: auto;
    transform: none;
    display: block;
    align-self: center;
  }

  .hero-bg__img {
    object-position: center center;
  }
}