/* ===== 联系品牌页面专属样式 ===== */
.page-contact {
  --contact-card-bg: var(--color-dark, #2C3E50);
  --contact-card-radius: var(--radius-lg, 16px);
  --contact-map-bg: var(--color-light, #F5F7FA);
  --contact-dot-color: var(--color-accent, #FF6F00);
  --contact-dot-hover: var(--color-primary, #1A73E8);
  --contact-link-color: var(--color-link, #2962FF);
  --contact-text-light: #FFFFFF;
  --contact-text-muted: rgba(255, 255, 255, 0.7);
  --contact-spacing: var(--spacing-lg, 32px);
}

/* 面包屑 */
.page-contact .breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  font-size: var(--font-size-small, 14px);
  font-weight: var(--font-weight-label, 500);
  letter-spacing: 0.3px;
  color: var(--color-text-secondary, #5A6A7E);
  margin-bottom: var(--spacing-md, 24px);
  padding: 0;
}

.page-contact .breadcrumb a {
  color: var(--color-link, #2962FF);
  text-decoration: none;
  transition: color var(--transition-fast, 0.15s ease);
}

.page-contact .breadcrumb a:hover {
  color: var(--color-primary-hover, #1557B0);
  text-decoration: underline;
}

.page-contact .breadcrumb-sep {
  color: var(--color-text-secondary, #5A6A7E);
  user-select: none;
}

.page-contact .breadcrumb [aria-current="page"] {
  color: var(--color-text, #1A1A2E);
  font-weight: var(--font-weight-h2, 600);
}

/* 主布局 */
.page-contact .contact-layout {
  display: flex;
  flex-direction: column;
  gap: var(--contact-spacing);
}

/* 左侧主内容 */
.page-contact .contact-primary {
  flex: 1 1 auto;
}

.page-contact .contact-primary h1 {
  font-size: var(--font-size-h1, 42px);
  font-weight: var(--font-weight-h1, 800);
  line-height: var(--line-height-h1, 1.2);
  color: var(--color-text, #1A1A2E);
  margin: 0 0 var(--spacing-lg, 32px) 0;
  letter-spacing: -0.02em;
}

/* 联系方式卡片组 */
.page-contact .contact-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 24px);
  margin-bottom: var(--spacing-xl, 40px);
}

.page-contact .contact-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md, 24px);
  background: var(--contact-card-bg);
  border-radius: var(--contact-card-radius);
  padding: var(--spacing-md, 24px);
  box-shadow: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, 0.06));
  transition: transform var(--transition-base, 0.25s ease), box-shadow var(--transition-base, 0.25s ease);
}

.page-contact .contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(0, 0, 0, 0.10));
}

.page-contact .contact-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 8px);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px;
  box-sizing: content-box;
}

.page-contact .contact-card-body {
  flex: 1;
  min-width: 0;
}

.page-contact .contact-card-body h2 {
  font-size: var(--font-size-h2, 24px);
  font-weight: var(--font-weight-h2, 600);
  line-height: var(--line-height-h2, 1.3);
  color: var(--contact-text-light);
  margin: 0 0 var(--spacing-xs, 8px) 0;
}

.page-contact .contact-detail {
  font-size: var(--font-size-body, 16px);
  font-weight: var(--font-weight-body, 400);
  line-height: var(--line-height-body, 1.6);
  color: var(--contact-text-light);
  margin: 0 0 var(--spacing-xs, 8px) 0;
  word-break: break-word;
}

.page-contact .contact-link {
  color: var(--contact-link-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast, 0.15s ease), color var(--transition-fast, 0.15s ease);
}

.page-contact .contact-link:hover {
  color: var(--color-accent, #FF6F00);
  border-bottom-color: var(--color-accent, #FF6F00);
}

.page-contact .contact-note {
  font-size: var(--font-size-small, 14px);
  font-weight: var(--font-weight-body, 400);
  color: var(--contact-text-muted);
  margin: 0;
}

.page-contact .contact-note .contact-link {
  color: var(--color-accent, #FF6F00);
  border-bottom: none;
}

.page-contact .contact-note .contact-link:hover {
  text-decoration: underline;
  border-bottom: none;
}

/* 服务说明 */
.page-contact .service-info {
  background: var(--color-white, #FFFFFF);
  border-radius: var(--contact-card-radius);
  padding: var(--spacing-md, 24px);
  box-shadow: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, 0.06));
  border-left: 4px solid var(--color-accent, #FF6F00);
}

.page-contact .service-info h2 {
  font-size: var(--font-size-h2, 24px);
  font-weight: var(--font-weight-h2, 600);
  line-height: var(--line-height-h2, 1.3);
  color: var(--color-text, #1A1A2E);
  margin: 0 0 var(--spacing-sm, 16px) 0;
}

.page-contact .service-info p {
  font-size: var(--font-size-body, 16px);
  font-weight: var(--font-weight-body, 400);
  line-height: var(--line-height-body, 1.6);
  color: var(--color-text-secondary, #5A6A7E);
  margin: 0 0 var(--spacing-sm, 16px) 0;
}

.page-contact .service-info p:last-child {
  margin-bottom: 0;
}

.page-contact .service-extra {
  font-size: var(--font-size-small, 14px);
}

.page-contact .service-info a {
  color: var(--color-link, #2962FF);
  text-decoration: none;
  font-weight: var(--font-weight-label, 500);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast, 0.15s ease), color var(--transition-fast, 0.15s ease);
}

.page-contact .service-info a:hover {
  color: var(--color-accent, #FF6F00);
  border-bottom-color: var(--color-accent, #FF6F00);
}

/* 右侧地图区域 */
.page-contact .contact-map {
  flex: 1 1 auto;
  position: relative;
  background: var(--contact-map-bg);
  border-radius: var(--contact-card-radius);
  overflow: hidden;
  min-height: 320px;
  box-shadow: var(--shadow-card, 0 2px 12px rgba(0, 0, 0, 0.06));
}

.page-contact .map-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--contact-card-radius);
  position: relative;
  z-index: 1;
}

.page-contact .map-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.page-contact .map-dots circle {
  pointer-events: auto;
  cursor: default;
  fill: var(--contact-dot-color);
  opacity: 0.72;
  transition: fill var(--transition-fast, 0.15s ease), r var(--transition-fast, 0.15s ease), opacity var(--transition-fast, 0.15s ease);
}

.page-contact .map-dots circle:hover {
  fill: var(--contact-dot-hover);
  opacity: 1;
  r: 10;
}

/* ---- 桌面端 (≥768px) ---- */
@media (min-width: 768px) {
  .page-contact .contact-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .page-contact .contact-primary {
    flex: 0 0 55%;
    max-width: 55%;
  }

  .page-contact .contact-map {
    flex: 1 1 auto;
    min-height: 420px;
    position: sticky;
    top: calc(var(--header-height, 70px) + var(--spacing-md, 24px));
  }

  .page-contact .contact-cards {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .page-contact .contact-card {
    flex: 1 1 calc(50% - var(--spacing-md, 24px) / 2);
    min-width: 220px;
  }

  .page-contact .contact-card:last-child {
    flex: 1 1 100%;
  }

  .page-contact .contact-primary h1 {
    font-size: calc(var(--font-size-h1, 42px) * 0.85);
  }
}

/* ---- 大桌面端 (≥1024px) ---- */
@media (min-width: 1024px) {
  .page-contact .contact-primary {
    flex: 0 0 52%;
    max-width: 52%;
  }

  .page-contact .contact-card {
    flex: 1 1 calc(33.33% - var(--spacing-md, 24px) * 2 / 3);
    min-width: 180px;
  }

  .page-contact .contact-card:last-child {
    flex: 1 1 calc(33.33% - var(--spacing-md, 24px) * 2 / 3);
  }

  .page-contact .contact-primary h1 {
    font-size: var(--font-size-h1, 42px);
  }

  .page-contact .contact-map {
    min-height: 480px;
  }
}

/* ---- 超宽屏 (≥1280px) ---- */
@media (min-width: 1280px) {
  .page-contact .contact-primary {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .page-contact .contact-map {
    min-height: 520px;
  }
}