/* ============================================================
   联系我们页面样式 contact.css（仅 contact.html 使用）
   ============================================================ */

/* 顶部：4 张联系方式小卡 */
.contact-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.info-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px;
}
.info-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.info-card p { font-size: 13px; color: var(--c-text-sub); line-height: 1.6; }

/* 下排：直接联系（左） + 微信扫码（右） */
.contact-bottom {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* 左：直接联系我们 */
.direct-card {
  padding: 34px 36px;
  display: flex; flex-direction: column; justify-content: center;
}
.direct-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.side-tip { color: var(--c-text-sub); font-size: 14px; line-height: 1.7; margin-bottom: 24px; }
.side-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* 白卡片内的幽灵按钮：浅蓝描边 + 蓝字（覆盖 common.css 的深底样式） */
.side-actions .btn-ghost {
  background: #fff; color: var(--c-primary); border: 1px solid rgba(43,127,255,.35);
}
.side-actions .btn-ghost:hover { background: #f2f7ff; }

/* 右：微信二维码卡 */
.qr-card {
  text-align: center; padding: 34px 26px;
  display: flex; flex-direction: column; justify-content: center;
}
.qr-card .qr-icon { margin: 0 auto 14px; display: inline-flex; }
.qr-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.qr-box {
  width: 160px; height: 160px; margin: 0 auto 12px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(43,127,255,.16);
}
.qr-box img { width: 100%; height: 100%; object-fit: cover; }
.qr-tip { font-size: 13px; color: var(--c-text-sub); }

@media (max-width: 1024px) {
  .contact-top { grid-template-columns: repeat(2, 1fr); }
  .contact-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact-top { grid-template-columns: 1fr; }
  .direct-card { padding: 28px 24px; }
  .qr-card { padding: 28px 24px; }
}