/* ===== 页面：联系入口 (contact) ===== */
.page-contact {
  --contact-gap: 2rem;
  --card-radius: 0px;
  --border-thin: 1px solid var(--color-grid, #A8DADC);
}

.page-contact .container {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  padding: 1rem 1.25rem 2.5rem;
}

/* 面包屑 */
.page-contact .page-breadcrumb {
  font-size: var(--size-sm, 14px);
  color: var(--color-grid, #A8DADC);
  margin-bottom: 1.25rem;
}
.page-contact .page-breadcrumb a {
  color: var(--color-blue, #1D3557);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition, 0.2s ease);
}
.page-contact .page-breadcrumb a:hover {
  border-color: var(--color-blue, #1D3557);
}
.page-contact .page-breadcrumb .sep {
  margin: 0 0.5rem;
  color: var(--color-grid, #A8DADC);
}
.page-contact .page-breadcrumb [aria-current="page"] {
  color: var(--color-dark, #0B1D2A);
  font-weight: var(--weight-data, 700);
}

/* 主标题 */
.page-contact h1 {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: var(--weight-heading, 900);
  font-size: var(--size-2xl, 48px);
  color: var(--color-blue, #1D3557);
  margin: 0 0 0.25rem;
  line-height: 1.1;
}
.page-contact .page-subtitle {
  font-size: var(--size-md, 20px);
  color: var(--color-dark, #0B1D2A);
  margin: 0 0 var(--contact-gap, 2rem);
  max-width: 600px;
}

/* 分栏卡片布局 — 移动端优先 */
.page-contact .contact-split {
  display: flex;
  flex-direction: column;
  gap: var(--contact-gap, 2rem);
  margin-bottom: var(--contact-gap, 2rem);
}

/* 左侧联系方式卡片 */
.page-contact .contact-info-card {
  background: var(--color-cream, #F1FAEE);
  border: var(--border-thin);
  padding: 1.5rem 1.25rem;
}
.page-contact .card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-contact .card-map-img {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--border-thin);
  flex-shrink: 0;
}
.page-contact .card-header h2 {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: var(--weight-heading, 900);
  font-size: var(--size-xl, 32px);
  color: var(--color-blue, #1D3557);
  margin: 0;
  line-height: 1.2;
}
.page-contact .contact-methods {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.page-contact .method-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-grid, #A8DADC);
}
.page-contact .method-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.page-contact .method-icon {
  width: 40px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 4px;
}
.page-contact .method-content {
  flex: 1;
  min-width: 0;
}
.page-contact .method-label {
  display: block;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: var(--weight-data, 700);
  font-size: var(--size-sm, 14px);
  color: var(--color-gold, #F4A261);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.page-contact .method-value {
  display: inline-block;
  font-size: var(--size-base, 16px);
  font-weight: var(--weight-body, 400);
  color: var(--color-dark, #0B1D2A);
}
.page-contact .link-email,
.page-contact .link-phone {
  color: var(--color-red, #E63946);
  text-decoration: underline;
  text-decoration-color: var(--color-red, #E63946);
  text-underline-offset: 3px;
  transition: color var(--transition, 0.2s ease);
}
.page-contact .link-email:hover,
.page-contact .link-phone:hover {
  color: var(--color-hover, #E76F51);
  text-decoration-color: var(--color-hover, #E76F51);
}
.page-contact .method-note {
  font-size: var(--size-xs, 12px);
  color: var(--color-grid, #A8DADC);
  margin: 4px 0 0;
}

/* 右侧模拟表单卡片 */
.page-contact .contact-form-card {
  background: var(--color-cream, #F1FAEE);
  border: var(--border-thin);
  padding: 1.5rem 1.25rem;
}
.page-contact .contact-form-card h2 {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: var(--weight-heading, 900);
  font-size: var(--size-lg, 24px);
  color: var(--color-blue, #1D3557);
  margin: 0 0 0.5rem;
}
.page-contact .form-intro {
  font-size: var(--size-sm, 14px);
  color: var(--color-grid, #A8DADC);
  margin: 0 0 1.25rem;
}
.page-contact .mock-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.page-contact .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-contact .form-field label {
  font-size: var(--size-sm, 14px);
  font-weight: var(--weight-data, 700);
  color: var(--color-dark, #0B1D2A);
}
.page-contact .form-input {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--size-base, 16px);
  padding: 0.6rem 0.75rem;
  border: var(--border-thin);
  background: var(--color-light, #F1FAEE);
  color: var(--color-dark, #0B1D2A);
  transition: border-color var(--transition, 0.2s ease), box-shadow var(--transition, 0.2s ease);
  outline: none;
}
.page-contact .form-input:focus {
  border-color: var(--color-red, #E63946);
  box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.15);
}
.page-contact .form-input::placeholder {
  color: var(--color-grid, #A8DADC);
  opacity: 0.7;
}
.page-contact .form-submit {
  align-self: flex-start;
  margin-top: 0.5rem;
  background: var(--color-red, #E63946);
  color: var(--color-light, #F1FAEE);
  border: none;
  padding: 0.65rem 1.75rem;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: var(--weight-data, 700);
  font-size: var(--size-base, 16px);
  cursor: pointer;
  transition: background var(--transition, 0.2s ease), transform 0.1s ease;
}
.page-contact .form-submit:hover {
  background: var(--color-gold, #F4A261);
  color: var(--color-dark, #0B1D2A);
}
.page-contact .form-submit:active {
  transform: scale(0.97);
}
.page-contact .form-disclaimer {
  font-size: var(--size-xs, 12px);
  color: var(--color-grid, #A8DADC);
  margin: 0;
}

/* 响应承诺卡片 */
.page-contact .response-card {
  background: var(--color-blue, #1D3557);
  border: var(--border-thin);
  padding: 1.5rem 1.25rem;
  margin-bottom: var(--contact-gap, 2rem);
}
.page-contact .response-card h2 {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: var(--weight-heading, 900);
  font-size: var(--size-lg, 24px);
  color: var(--color-light, #F1FAEE);
  margin: 0 0 1rem;
}
.page-contact .response-timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.page-contact .timeline-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-light, #F1FAEE);
  font-size: var(--size-base, 16px);
}
.page-contact .tl-icon {
  font-size: 1.4rem;
  line-height: 1;
}
.page-contact .tl-text {
  font-weight: var(--weight-body, 400);
}
.page-contact .timeline-arrow {
  color: var(--color-gold, #F4A261);
  font-size: 1.2rem;
  padding-left: 1.2rem;
}
.page-contact .response-note {
  font-size: var(--size-sm, 14px);
  color: var(--color-cream, #F1FAEE);
  margin: 0;
}
.page-contact .response-note a {
  color: var(--color-gold, #F4A261);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-contact .response-note a:hover {
  color: var(--color-hover, #E76F51);
}

/* 底部抽象地图占位 */
.page-contact .map-visual {
  border: var(--border-thin);
  background: var(--color-cream, #F1FAEE);
  padding: 2rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.page-contact .map-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.page-contact .map-pin {
  font-size: 2.5rem;
}
.page-contact .map-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--size-sm, 14px);
  color: var(--color-dark, #0B1D2A);
  letter-spacing: 1px;
}

/* ========== 桌面端 ========== */
@media (min-width: 768px) {
  .page-contact .container {
    padding: 1.5rem 2rem 3rem;
  }
  .page-contact .contact-split {
    flex-direction: row;
    align-items: stretch;
  }
  .page-contact .contact-info-card,
  .page-contact .contact-form-card {
    width: calc(50% - 1rem);
  }
  .page-contact .card-header {
    flex-direction: column;
  }
  .page-contact .card-map-img {
    max-width: 100%;
  }
  .page-contact .response-timeline {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
  .page-contact .timeline-arrow {
    padding-left: 0;
  }
  .page-contact .map-visual {
    min-height: 160px;
    padding: 2.5rem 2rem;
  }
}

@media (min-width: 1024px) {
  .page-contact h1 {
    font-size: var(--size-3xl, 64px);
  }
  .page-contact .contact-info-card {
    padding: 2rem 2rem;
  }
  .page-contact .contact-form-card {
    padding: 2rem 2rem;
  }
  .page-contact .response-card {
    padding: 2rem 2rem;
  }
}