/**
 * 联系我们页 H5（Figma 847:6381 Contact_390；仅 contact.html 引入）
 * 与 PC 区块 `.contact-pc-only` 分离；≤768px 显示 `.contact-h5-only`，不修改 styles.css 内 PC 联系页规则。
 */

.contact-h5-only {
  display: none;
}

@media (max-width: 768px) {
  html:has(body[data-page='contact']) {
    font-size: calc(100vw / 3.9);
    min-width: 0;
  }

  body[data-page='contact'] {
    min-width: 0;
  }

  body[data-page='contact'] .contact-pc-only {
    display: none !important;
  }

  body[data-page='contact'] .contact-h5-only {
    display: block;
  }

  /* 稿面 FooterMobile 背景 #f5f7fa（覆盖全站 H5 页脚 #f8f9fa，仅联系页） */
  body[data-page='contact'] .site-footer {
    background: #f5f7fa;
  }

  /* ---------- 版心 ---------- */
  body[data-page='contact'] .contact-h5 {
    max-width: 3.9rem;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* ---------- Banner / Hero（Figma 847:6398） ---------- */
  body[data-page='contact'] .contact-h5__hero {
    position: relative;
    height: 2.3rem;
    overflow: hidden;
    background: #ffffff;
  }

  body[data-page='contact'] .contact-h5__hero-visual {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  body[data-page='contact'] .contact-h5__hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 82% center;
    display: block;
  }

  body[data-page='contact'] .contact-h5__hero-fog {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.38) 40%,
      rgba(255, 255, 255, 0) 56%
    );
  }

  body[data-page='contact'] .contact-h5__title {
    position: absolute;
    left: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
    max-width: 52%;
    font-family: var(--font-hero-cn);
    font-size: 0.4rem;
    font-weight: 500;
    line-height: normal;
    color: #1f6fdb;
  }

  /* 英文标题较短但字母宽：52% 易把 “Contact Us” 折行，英文时单行展示 */
  html[lang='en'] body[data-page='contact'] .contact-h5__title {
    max-width: none;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* 英文标题较短但字母宽：52% 易把 “Contact Us” 折行，英文时单行展示 */
  html[lang='ja'] body[data-page='contact'] .contact-h5__title {
    max-width: 49%;
  }

  /* ---------- 信息卡 + 配图（Figma 847:6385–6397） ---------- */
  body[data-page='contact'] .contact-h5__sheet {
    padding: 0.32rem 0.2rem 0;
    box-sizing: border-box;
    background: #ffffff;
  }

  body[data-page='contact'] .contact-h5__card {
    width: 3.5rem;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0.24rem 0.16rem 0;
    border-radius: 0.24rem;
    background: #f1f7ff;
  }

  body[data-page='contact'] .contact-h5__card-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.32rem;
  }

  body[data-page='contact'] .contact-h5__brand {
    width: 100%;
    text-align: center;
    color: #181818;
  }

  body[data-page='contact'] .contact-h5__name-ja {
    margin: 0;
    font-family: var(--font-hero-cn);
    font-size: 0.3rem;
    font-weight: 700;
    line-height: 1.2;
  }

  body[data-page='contact'] .contact-h5__name-en {
    margin: 0.1rem 0 0;
    font-family: var(--font-hero-cn);
    font-size: 0.2rem;
    font-weight: 500;
    line-height: normal;
    color: #181818;
    opacity: 0.3;
  }

  body[data-page='contact'] .contact-h5__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
    width: 100%;
    font-family: var(--font-hero-cn);
    font-size: 0.16rem;
    font-weight: 500;
    line-height: normal;
    color: #181818;
  }

  body[data-page='contact'] .contact-h5__details p {
    margin: 0;
    width: 100%;
  }

  body[data-page='contact'] .contact-h5__map-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.02rem;
    box-sizing: border-box;
    min-height: 0.48rem;
    padding: 0.12rem 0.24rem;
    border-radius: 0.08rem;
    font-family: var(--font-hero-cn);
    font-size: 0.18rem;
    font-weight: 500;
    line-height: normal;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(90deg, #378aff 0%, #4ea4ff 100%);
    transition: opacity 0.2s ease, filter 0.2s ease;
  }

  body[data-page='contact'] .contact-h5__map-btn:active {
    opacity: 0.92;
    filter: brightness(0.98);
  }

  body[data-page='contact'] .contact-h5__map-arrow {
    display: inline-block;
    font-size: 0.18rem;
    line-height: 1;
    margin-left: 0.02rem;
  }

  body[data-page='contact'] .contact-h5__city {
    align-self: center;
    width: calc(100% + 0.56rem);
    max-width: none;
    margin: 0;
    border-radius: 0.24rem 0.24rem 0 0;
    overflow: hidden;
    line-height: 0;
    background: transparent;
  }

  body[data-page='contact'] .contact-h5__city img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: auto;
    display: block;
  }

  /* ---------- 办公场景通栏（Figma 847:6383，同稿 img_end_banner） ---------- */
  body[data-page='contact'] .contact-h5__office {
    width: 100%;
    margin: 0 auto;
    margin-top: 0.32rem;
    overflow: hidden;
    line-height: 0;
    background: #ffffff;
  }

  body[data-page='contact'] .contact-h5__office img {
    width: 100%;
    height: auto;
    display: block;
  }
}