.page-contact {
  --contact-max-width: 1200px;
  --contact-gap: 2rem;
  --contact-card-bg: var(--color-bg-light, #F4F4F4);
  --contact-card-border: var(--color-border, #2C3E50);
  --contact-icon-color: var(--color-secondary, #00D4FF);
  --contact-accent: var(--color-accent, #FF6B35);
  --contact-text: var(--color-text-primary, #FFFFFF);
  --contact-muted: var(--color-text-secondary, #B0C4DE);
  --contact-input-bg: #ffffff;
  --contact-input-border: var(--color-border, #2C3E50);
  --contact-radius: 4px;
  --contact-transition: var(--transition, 0.25s ease);

  background-color: var(--color-bg-dark, #060F1E);
  color: var(--contact-text);
  padding: 2rem 1rem;
}

.page-contact__inner {
  max-width: var(--contact-max-width);
  margin: 0 auto;
}

/* 面包屑 */
.page-contact__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: var(--font-small);
  color: var(--contact-muted);
  margin-bottom: 1.5rem;
}

.page-contact__breadcrumb a {
  color: var(--contact-accent);
  text-decoration: none;
  transition: color var(--contact-transition);
}

.page-contact__breadcrumb a:hover,
.page-contact__breadcrumb a:focus-visible {
  text-decoration: underline;
  color: var(--color-accent-light, #FF8C4D);
}

.page-contact__separator {
  color: var(--contact-muted);
}

/* 标题区 */
.page-contact__heading {
  font: var(--font-heading);
  font-size: 2.2rem;
  letter-spacing: var(--letter-spacing-heading, 0.05em);
  color: var(--contact-text);
  margin: 0 0 0.25rem 0;
}

.page-contact__subtitle {
  font: var(--font-body);
  color: var(--contact-muted);
  margin: 0 0 2rem 0;
  max-width: 600px;
}

/* 两列布局 */
.page-contact__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--contact-gap);
}

/* 左侧信息区 */
.page-contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--contact-gap);
}

/* 卡片通用样式 */
.page-contact__card {
  background-color: var(--color-primary-light, #1A2D4A);
  border: 1px solid var(--contact-card-border);
  border-left: 4px solid var(--contact-accent);
  padding: 1.5rem;
  border-radius: 0;
  transition: box-shadow var(--contact-transition);
}

.page-contact__card:hover {
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.1);
}

.page-contact__card-title {
  font: var(--font-subheading);
  font-size: 1.25rem;
  letter-spacing: var(--letter-spacing-subheading, 0.03em);
  color: var(--contact-accent);
  margin: 0 0 1rem 0;
  border-bottom: 1px solid var(--contact-card-border);
  padding-bottom: 0.5rem;
}

/* 联系方式块 */
.page-contact__contact-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-contact__contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: var(--font-body);
  font-weight: 500;
  color: var(--contact-text);
  word-break: break-all;
}

.page-contact__icon {
  flex-shrink: 0;
  color: var(--contact-icon-color);
  width: 28px;
  height: 28px;
}

.page-contact__response-note {
  font: var(--font-small);
  color: var(--contact-muted);
  margin: 0.5rem 0 0 0;
}

/* 地址块 */
.page-contact__address-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: var(--font-body);
  font-style: normal;
  font-weight: 500;
  color: var(--contact-text);
  margin-bottom: 0.5rem;
}

/* 地图框架 */
.page-contact__map-frame {
  margin-top: 1rem;
  border: 1px solid var(--contact-card-border);
  overflow: hidden;
  background-color: var(--color-bg-dark, #060F1E);
  line-height: 0;
}

.page-contact__map-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 表单区 */
.page-contact__form-wrapper {
  display: flex;
  flex-direction: column;
}

.page-contact__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.page-contact__label {
  font: var(--font-small);
  font-weight: 600;
  color: var(--contact-text);
  letter-spacing: 0.02em;
}

.page-contact__input,
.page-contact__textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: var(--font-body);
  background-color: var(--contact-input-bg);
  border: none;
  border-bottom: 2px solid var(--contact-input-border);
  color: var(--color-primary, #0B1D3A);
  transition: border-color var(--contact-transition);
  box-sizing: border-box;
}

.page-contact__input::placeholder,
.page-contact__textarea::placeholder {
  color: #999;
}

.page-contact__input:focus,
.page-contact__textarea:focus {
  outline: 2px solid var(--contact-accent);
  outline-offset: 2px;
  border-bottom-color: var(--contact-accent);
}

.page-contact__textarea {
  resize: vertical;
  min-height: 80px;
}

/* 提交按钮 */
.page-contact__submit {
  align-self: flex-start;
  padding: 0.75rem 2rem;
  font: var(--font-subheading);
  font-size: 1rem;
  background-color: var(--contact-accent);
  color: #fff;
  border: none;
  border-radius: var(--contact-radius);
  cursor: pointer;
  transition: background-color var(--contact-transition), transform 0.1s;
}

.page-contact__submit:hover,
.page-contact__submit:focus-visible {
  background-color: var(--color-accent-light, #FF8C4D);
}

.page-contact__submit:active {
  transform: scale(0.98);
}

/* 成功提示（默认隐藏，模拟交互用） */
.page-contact__form-success {
  display: none;
  font: var(--font-small);
  color: var(--contact-accent);
  background-color: rgba(255, 107, 53, 0.1);
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--contact-accent);
  margin-top: 0.5rem;
}

/* 辅助交互：点击提交后显示成功提示，仅作为demo */
/* 此选择器模拟JS行为：表单内点击submit时触发 */
/* 实际项目中通过JS处理，这里仅作渐进增强占位 */
.page-contact__submit:focus-visible {
  outline: 2px solid var(--contact-accent);
  outline-offset: 2px;
}

/* 额外链接 */
.page-contact__extra-links {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--contact-card-border);
}

.page-contact__extra-title {
  font: var(--font-subheading);
  font-size: 1rem;
  color: var(--contact-muted);
  margin: 0 0 0.75rem 0;
}

.page-contact__extra-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-contact__extra-link {
  font: var(--font-body);
  color: var(--contact-accent);
  text-decoration: none;
  transition: color var(--contact-transition);
}

.page-contact__extra-link:hover,
.page-contact__extra-link:focus-visible {
  text-decoration: underline;
  color: var(--color-accent-light, #FF8C4D);
}

/* 桌面端：两列布局 */
@media (min-width: 768px) {
  .page-contact {
    padding: 3rem 2rem;
  }

  .page-contact__columns {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .page-contact__heading {
    font-size: 2.8rem;
  }

  .page-contact__card {
    padding: 2rem;
  }

  .page-contact__card-title {
    font-size: 1.5rem;
  }

  .page-contact__contact-item {
    font-size: 1.1rem;
  }

  .page-contact__submit {
    padding: 0.85rem 2.5rem;
  }
}

/* 大桌面端：内容宽度固定 */
@media (min-width: 1200px) {
  .page-contact__inner {
    padding: 0 1rem;
  }
}

/* 辅助功能：focus-visible 轮廓 */
.page-contact a:focus-visible,
.page-contact button:focus-visible {
  outline: 2px solid var(--contact-accent);
  outline-offset: 2px;
}

/* 高对比度模式下保证边框 */
@media (prefers-contrast: high) {
  .page-contact__card {
    border: 2px solid var(--contact-accent);
  }
}