/* ============================================================
   Shifang Packaging — contact.css
   联系页：联系信息 + 询盘表单 + 地址地图
   （头部、Banner 卡片、面包屑、表单控件、CTA 带、页脚等共用组件见 main.css）
   ============================================================ */

/* ---------- 1. 联系信息 + 表单 ---------- */
/* Banner 背景图：后台上传后显示（未上传则纯白卡片） */
.contact-hero .hero-card {
  background:
    linear-gradient(95deg, #fff 0%, #fff 56%, rgba(255, 255, 255, 0) 90%),
    var(--contact-hero-img, none) right center / cover no-repeat;
}

.contact { padding: 72px 0; }
.contact__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.contact__grid--single { grid-template-columns: 1fr; }
.contact__info h2 { font-size: var(--fs-h2); }
.contact__info > p {
  margin-top: 16px;
  color: var(--c-text-2);
}
.contact__list { margin-top: 32px; }
.contact__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
  padding-bottom: 24px;
}
.contact__item + .contact__item {
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
}
.contact__item svg {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: var(--c-teal);
}
.contact__item img {
  display: block;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  object-fit: contain;
}
.contact__item--noicon { grid-template-columns: 1fr; }
.contact__item strong {
  display: block;
  font-size: 1rem;
  color: var(--c-ink);
}
.contact__item a,
.contact__item span {
  display: block;
  margin-top: 6px;
  color: var(--c-text-2);
}
.contact__item a:hover { color: var(--c-teal); }

.contact__card {
  padding: 32px 36px 36px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.contact__card h2 { font-size: var(--fs-h3); }
.contact__card .lead__form { margin-top: 24px; }

/* Contact Form 7：联系页留言表单（布局与控件宽度规则在 main.css 的 .lead__form 内统一处理） */
.contact__card .wpcf7-not-valid-tip { margin-top: 6px; font-size: 14px; color: #B3261E; }
.contact__card .wpcf7-response-output {
  margin: 4px 0 0;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}
.contact__card .wpcf7-spinner { margin: 10px auto 0; }

/* ---------- 2. 地图 ---------- */
.contact-map { padding: 0 0 72px; }
.contact-map__frame {
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.contact-map__frame img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
}
.contact-map__note {
  margin-top: 16px;
  color: var(--c-text-3);
}

/* ---------- 3. 响应式（三端适配） ---------- */
@media (max-width: 1024px) {
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  .contact { padding: 56px 0; }
  .contact-map { padding-bottom: 56px; }
  .contact-map__frame img { height: 280px; }
}

@media (max-width: 720px) {
  .contact__card { padding: 24px; }
  .contact-map__frame img { height: 220px; }
}