/* 联系我们正文按 Figma 的 1620px 内容区排列，缩放交给公共脚本。 */
/* 固定滚动条占位，避免页面高度接近一屏时，滚动条显隐改变公共缩放计算的可用宽度。 */
html:has(.contact-page) { overflow-y: scroll; }
.contact-page .inner-banner-copy { top: 238px; }
.contact-main { width: 1620px; margin: 0 auto; padding-top: 60px; display: grid; grid-template-columns: 560px 1000px; gap: 60px; align-items: start; }
.contact-intro h2 { margin: 0; color: #000; font-size: 40px; font-weight: 400; line-height: 56px; }
.contact-intro > p { margin: 20px 0 0; color: #ddd; font-size: 26px; line-height: 36px; white-space: nowrap; }
.contact-section { margin-top: 40px; }
.contact-section--address { margin-top: 46px; }
.contact-section h3 { margin: 0; display: flex; align-items: center; gap: 20px; color: var(--blue); font-size: 18px; font-weight: 400; line-height: 26px; }
.contact-section h3::before { width: 20px; height: 4px; flex: 0 0 20px; content: ""; background: var(--blue); }
.contact-section h3::after { height: 1px; flex: 1; content: ""; background: var(--blue); }
.contact-section h3 img { width: 26px; height: 26px; flex: 0 0 26px; }
.contact-section h3 span { white-space: nowrap; }
.contact-section-body { margin: 20px 0 0 86px; }
.contact-address { color: #333; font-size: 18px; font-style: normal; line-height: 25px; }
.contact-phones { margin-bottom: 0; padding: 0; list-style: none; font-size: 18px; line-height: 36px; }
.contact-phones li { transition: background-color .2s ease; }
.contact-phones a { display: inline-block; }
.contact-social { display: flex; align-items: center; gap: 20px; }
.contact-social img { width: 170px; height: 170px; }
.contact-social figcaption { font-size: 18px; line-height: 25px; }
/* 使用设计稿原始地图，保留完整地名和定位标注，不做裁切。 */
.contact-map { margin: 0; margin-top: 80px; }
.contact-map img { width: 1000px; height: 800px; }
.contact-page .site-footer { margin-top: 100px; border-top: 6px solid var(--blue); }
.contact-page a:focus-visible,
.contact-page button:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

@media (hover: hover) {
  .contact-phones li:hover { background: #f0f5f9; }
  .contact-phones a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
}

/* 手机端依阅读顺序显示联系信息和地图，不沿用桌面的固定列宽。 */
html.is-mobile .contact-main { width: auto; margin: 0 20px; padding-top: 36px; display: flex; flex-direction: column; gap: 36px; }
html.is-mobile .contact-info { width: 100%; }
html.is-mobile .contact-intro h2 { font-size: 26px; line-height: 38px; }
html.is-mobile .contact-intro > p { margin-top: 10px; font-size: 16px; line-height: 26px; white-space: normal; }
html.is-mobile .contact-section { margin-top: 32px; }
html.is-mobile .contact-section h3 { gap: 12px; font-size: 17px; }
html.is-mobile .contact-section h3::before { width: 12px; flex-basis: 12px; height: 3px; }
html.is-mobile .contact-section-body { margin-top: 16px; margin-left: 0; }
html.is-mobile .contact-address { font-size: 16px; line-height: 28px; }
html.is-mobile .contact-phones { font-size: 16px; line-height: 36px; }
html.is-mobile .contact-social { gap: 20px; }
html.is-mobile .contact-social img { width: 150px; height: 150px; }
html.is-mobile .contact-social figcaption { font-size: 16px; }
html.is-mobile .contact-map { width: 100%; }
html.is-mobile .contact-map img { width: 100%; height: auto; }
html.is-mobile .contact-page .site-footer { margin-top: 48px; border-top-width: 4px; }

@media (prefers-reduced-motion: reduce) {
  html:has(.contact-page) { scroll-behavior: auto; }
  .contact-page *, .contact-page *::before, .contact-page *::after { transition: none !important; animation: none !important; }
}