.page-contact {
  --contact-font-size-h1: 3.2rem;
  --contact-font-size-h2: 1.6rem;
  --contact-font-size-h3: 1.2rem;
  --contact-card-min-height: 220px;
  --contact-brand-min-height: 320px;
  --contact-stripe-height: 6px;
  display: block;
  width: 100%;
  max-width: 100%;
  background: var(--color-bg-dark, #1A1A1A);
  color: var(--color-text-light, #F1FAEE);
  font-family: var(--font-body, 'Open Sans', sans-serif);
}

.page-contact__split {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── 左侧品牌区 ── */
.page-contact__brand {
  position: relative;
  flex: 0 0 auto;
  min-height: var(--contact-brand-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg-dark, #1A1A1A);
}

.page-contact__brand-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.page-contact__brand-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  max-width: 100%;
  height: auto;
  min-height: 100%;
}

.page-contact__brand-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,26,26,0.92) 0%, rgba(26,26,26,0.60) 100%);
  z-index: 1;
}

.page-contact__brand-body {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--spacing-lg, 2rem) var(--spacing-md, 1rem);
  max-width: 360px;
  width: 100%;
}

.page-contact__logo {
  font-family: var(--font-heading, 'Bebas Neue', Impact, sans-serif);
  font-weight: 700;
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: var(--color-primary, #E63946);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm, 0.5rem);
}

.page-contact__title {
  font-family: var(--font-heading, 'Bebas Neue', Impact, sans-serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--contact-font-size-h1);
  letter-spacing: 2px;
  color: var(--color-text-light, #F1FAEE);
  margin: 0 0 var(--spacing-sm, 0.5rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.page-contact__slogan {
  font-size: 1rem;
  color: var(--color-secondary, #A8B2C1);
  margin: 0 0 var(--spacing-md, 1rem);
  font-weight: 400;
  letter-spacing: 0.5px;
}

.page-contact__divider {
  width: 60px;
  height: 3px;
  background: var(--color-primary, #E63946);
  margin: 0 auto var(--spacing-md, 1rem);
  border-radius: 2px;
}

.page-contact__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, 0.25rem);
  font-size: 0.85rem;
  color: var(--color-text-muted, #A8B2C1);
  font-family: var(--font-mono, monospace);
}

.page-contact__breadcrumb-link {
  color: var(--color-secondary, #A8B2C1);
  text-decoration: none;
  transition: color 0.2s;
}

.page-contact__breadcrumb-link:hover {
  color: var(--color-primary, #E63946);
}

.page-contact__breadcrumb-sep {
  color: var(--color-text-muted, #A8B2C1);
  margin: 0 2px;
}

.page-contact__breadcrumb-current {
  color: var(--color-primary, #E63946);
  font-weight: 700;
}

.page-contact__brand-stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--contact-stripe-height);
  background: var(--color-primary, #E63946);
  z-index: 3;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: skewY(-1.2deg);
  transform-origin: left bottom;
  opacity: 0.85;
}

/* ── 右侧内容区 ── */
.page-contact__content {
  flex: 1 1 auto;
  padding: var(--spacing-lg, 2rem) var(--spacing-md, 1rem);
  background: var(--color-bg-panel, #2B2D42);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl, 4rem);
}

/* ── 联系卡片网格 ── */
.page-contact__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg, 2rem);
  width: 100%;
  max-width: 100%;
}

/* ── 单张卡片 ── */
.page-contact__card {
  position: relative;
  background: var(--color-bg-dark, #1A1A1A);
  border: 1px solid var(--color-secondary, #A8B2C1);
  border-radius: var(--border-radius, 4px);
  padding: var(--spacing-lg, 2rem) var(--spacing-md, 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: var(--contact-card-min-height);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  box-shadow: var(--shadow-card, 0 4px 20px rgba(0,0,0,0.4));
  overflow: hidden;
}

.page-contact__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}

.page-contact__card--email:hover {
  border-color: var(--color-primary, #E63946);
}

.page-contact__card--phone:hover {
  border-color: var(--color-accent, #06D6A0);
}

.page-contact__card--address:hover {
  border-color: var(--color-amber, #F4A261);
}

/* 地址卡片背景图 */
.page-contact__card-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.page-contact__card-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: 100%;
  height: auto;
  min-height: 100%;
  opacity: 0.25;
}

.page-contact__card-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0.70) 0%, rgba(26,26,26,0.85) 100%);
  z-index: 1;
}

/* 卡片图标 */
.page-contact__card-icon-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  margin-bottom: var(--spacing-sm, 0.5rem);
  transition: background 0.3s;
}

.page-contact__card:hover .page-contact__card-icon-wrap {
  background: rgba(255,255,255,0.10);
}

.page-contact__card-icon {
  width: 36px;
  height: 36px;
}

.page-contact__card--email .page-contact__card-icon {
  color: var(--color-primary, #E63946);
}

.page-contact__card--phone .page-contact__card-icon {
  color: var(--color-accent, #06D6A0);
}

.page-contact__card--address .page-contact__card-icon {
  color: var(--color-amber, #F4A261);
}

/* 卡片标题 */
.page-contact__card-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading, 'Bebas Neue', Impact, sans-serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--contact-font-size-h2);
  letter-spacing: 1.5px;
  color: var(--color-text-light, #F1FAEE);
  margin: 0 0 var(--spacing-xs, 0.25rem);
  text-transform: uppercase;
}

/* 卡片链接/地址 */
.page-contact__card-link {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-secondary, #A8B2C1);
  text-decoration: none;
  transition: color 0.2s;
  word-break: break-all;
}

.page-contact__card-link--email {
  color: var(--color-primary, #E63946);
}

.page-contact__card-link--email:hover {
  color: var(--color-primary-hover, #ff4d5a);
  text-decoration: underline;
}

.page-contact__card-link--phone {
  color: var(--color-accent, #06D6A0);
}

.page-contact__card-link--phone:hover {
  color: #2cf5b3;
  text-decoration: underline;
}

.page-contact__card-address {
  position: relative;
  z-index: 2;
  font-size: 0.95rem;
  color: var(--color-text-light, #F1FAEE);
  margin: var(--spacing-xs, 0.25rem) 0 0;
  line-height: 1.5;
  max-width: 220px;
}

.page-contact__card-hint {
  position: relative;
  z-index: 2;
  font-size: 0.75rem;
  color: var(--color-text-muted, #A8B2C1);
  margin: var(--spacing-sm, 0.5rem) 0 0;
  letter-spacing: 0.3px;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  opacity: 0.7;
}

/* 地址高亮状态 */
.page-contact__card--address[data-highlight="active"] {
  border-color: var(--color-amber, #F4A261);
  box-shadow: 0 0 0 2px var(--color-amber, #F4A261), var(--shadow-card, 0 4px 20px rgba(0,0,0,0.4));
}

/* ── 合作咨询区 ── */
.page-contact__consult {
  position: relative;
  padding: var(--spacing-lg, 2rem) 0 0;
  border-top: 1px solid rgba(168,178,193,0.25);
  text-align: center;
}

.page-contact__consult-stripe {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%) skewY(-1.5deg);
  width: 120px;
  height: 4px;
  background: var(--color-primary, #E63946);
  border-radius: 2px;
}

.page-contact__consult-title {
  font-family: var(--font-heading, 'Bebas Neue', Impact, sans-serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--contact-font-size-h2);
  letter-spacing: 1.5px;
  color: var(--color-text-light, #F1FAEE);
  margin: 0 0 var(--spacing-sm, 0.5rem);
  text-transform: uppercase;
}

.page-contact__consult-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-secondary, #A8B2C1);
  max-width: 520px;
  margin: 0 auto var(--spacing-md, 1rem);
}

.page-contact__consult-email {
  color: var(--color-primary, #E63946);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed var(--color-primary, #E63946);
  transition: color 0.2s, border-color 0.2s;
  font-family: var(--font-mono, monospace);
  word-break: break-all;
}

.page-contact__consult-email:hover {
  color: var(--color-primary-hover, #ff4d5a);
  border-bottom-style: solid;
}

.page-contact__consult-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm, 0.5rem);
  justify-content: center;
  margin-top: var(--spacing-md, 1rem);
}

.page-contact__btn {
  font-family: var(--font-heading, 'Bebas Neue', Impact, sans-serif);
  font-weight: 700;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 1px;
  padding: 0.6rem 1.4rem;
  text-transform: uppercase;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
  cursor: pointer;
  border-radius: var(--border-radius, 4px);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

.page-contact__btn {
  background: var(--color-primary, #E63946);
  color: var(--color-text-light, #F1FAEE);
  border: 2px solid var(--color-primary, #E63946);
}

.page-contact__btn:hover {
  background: var(--color-primary-hover, #ff4d5a);
  border-color: var(--color-primary-hover, #ff4d5a);
  transform: scale(1.03);
}

.page-contact__btn--outline {
  background: transparent;
  color: var(--color-secondary, #A8B2C1);
  border-color: var(--color-secondary, #A8B2C1);
}

.page-contact__btn--outline:hover {
  background: rgba(168,178,193,0.10);
  color: var(--color-text-light, #F1FAEE);
  border-color: var(--color-text-light, #F1FAEE);
  transform: scale(1.03);
}

/* ── 桌面端：左右分屏 ── */
@media (min-width: 768px) {
  .page-contact__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .page-contact {
    --contact-font-size-h1: 4rem;
    --contact-font-size-h2: 1.8rem;
    --contact-card-min-height: 260px;
    --contact-brand-min-height: 100vh;
  }

  .page-contact__split {
    flex-direction: row;
  }

  .page-contact__brand {
    flex: 0 0 34%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
  }

  .page-contact__brand-body {
    padding: var(--spacing-xl, 4rem) var(--spacing-lg, 2rem);
    max-width: 400px;
  }

  .page-contact__brand-stripe {
    height: calc(var(--contact-stripe-height) + 4px);
    transform: skewY(-2deg);
  }

  .page-contact__content {
    flex: 1 1 66%;
    padding: var(--spacing-xl, 4rem) var(--spacing-lg, 2rem);
    gap: var(--spacing-xl, 4rem);
  }

  .page-contact__cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg, 2rem);
  }

  .page-contact__card {
    padding: var(--spacing-lg, 2rem) var(--spacing-md, 1rem);
  }

  .page-contact__consult {
    padding: var(--spacing-lg, 2rem) 0 0;
  }

  .page-contact__consult-text {
    font-size: 1rem;
  }
}

@media (min-width: 1280px) {
  .page-contact {
    --contact-font-size-h1: 4.8rem;
    --contact-font-size-h2: 2rem;
  }

  .page-contact__brand {
    flex: 0 0 30%;
  }

  .page-contact__content {
    flex: 1 1 70%;
    padding: var(--spacing-xl, 4rem) var(--spacing-xl, 4rem);
  }

  .page-contact__cards {
    gap: var(--spacing-xl, 4rem);
  }
}

/* ── 小屏优化 ── */
@media (max-width: 374px) {
  .page-contact__title {
    font-size: 2.4rem;
  }

  .page-contact__card {
    padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem);
    min-height: 180px;
  }

  .page-contact__card-icon {
    width: 28px;
    height: 28px;
  }

  .page-contact__card-icon-wrap {
    width: 48px;
    height: 48px;
  }

  .page-contact__consult-actions {
    flex-direction: column;
    align-items: center;
  }

  .page-contact__btn {
    width: 100%;
    max-width: 220px;
  }
}

/* ── 打印样式 ── */
@media print {
  .page-contact__brand-media {
    display: none;
  }

  .page-contact__brand-overlay {
    background: none;
  }

  .page-contact__card-bg-wrap {
    display: none;
  }

  .page-contact__card {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .page-contact__brand-stripe {
    display: none;
  }
}