/* ===========================================================================
   联系我们页
   1  页头（左文案 + 右联系卡）
   2  主区两栏（表单 / 三步）
   3  表单补充（地区、制程段多选、结果提示）
   4  现场参观引导卡
   5  响应式
   =========================================================================== */

/* ------------------------------------------------------ 01 页头 */
.ct-hero {
  padding: calc(var(--h-header) + var(--sp-6)) 0 var(--sp-5);
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-line);
}

.ct-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--sp-6);
  align-items: start;
}

.ct-hero__title {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--c-ink);
}

.ct-hero__lead {
  max-width: 30em;
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: var(--c-text-2);
}

/* 联系卡：右侧一列，标签定宽让值左边缘对齐 */
.ct-card {
  margin: 0;
  padding: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.ct-card__row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--c-line);
}
.ct-card__row:first-child { padding-top: 0; }
.ct-card__row:last-child { padding-bottom: 0; border-bottom: 0; }

.ct-card__row dt {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.ct-card__row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-ink);
  word-break: break-word;
}
.ct-card__row dd a { color: var(--c-ink); border-bottom: 1px solid var(--c-line-2); }
.ct-card__row dd a:hover { border-bottom-color: var(--c-primary); color: var(--c-primary); }

/* 地址长，单独一行不挤标签 */
.ct-card__row--wide { display: block; }
.ct-card__row--wide dt { margin-bottom: 4px; }

/* ------------------------------------------------------ 02 主区两栏 */
.ct-main { padding-top: var(--sp-6); padding-bottom: var(--sp-7); }

.ct-main__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--sp-6);
  align-items: start;
}

.ct-form-wrap {
  max-width: 760px;
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  scroll-margin-top: calc(var(--h-header) + var(--sp-3));
}

.ct-form-wrap__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--c-ink);
}

.ct-form-wrap__sub {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.ct-form-wrap__sub .req { color: var(--c-danger); }

/* 右侧三步：吸顶，跟随表单滚动 */
.ct-side {
  position: sticky;
  top: calc(var(--h-header) + var(--sp-4));
}

.ct-side__title {
  margin: var(--sp-2) 0 var(--sp-2);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--c-ink);
}

.ct-side__lead {
  margin: 0 0 var(--sp-4);
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-text-2);
}

.ct-step {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}

.ct-step__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
}

.ct-step__no {
  padding-top: 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-accent-ink);
  font-variant-numeric: tabular-nums;
}

.ct-step__name {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink);
}

.ct-step__note {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-text-2);
  text-wrap: pretty;
}

/* ------------------------------------------------------ 03 表单补充
   控件本身（省市并排、制程段多选、结果提示）在 site.css 的 9.1 节，
   这里只留联系页特有的间距。 */
.ct-form-wrap .inq-form--full { padding-top: var(--sp-1); }

/* ------------------------------------------------------ 04 现场参观卡 */
.ct-visit {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--c-primary-soft);
  border-radius: var(--r-md);
}

.ct-visit__eyebrow {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--c-accent-ink);
}

.ct-visit__title {
  margin: 0 0 var(--sp-1);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink);
}

.ct-visit__note {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-text-2);
}

/* ------------------------------------------------------ 05 响应式 */
@media (max-width: 1080px) {
  .ct-hero__grid,
  .ct-main__grid { grid-template-columns: 1fr; }
  .ct-hero { padding-top: calc(var(--h-header) + var(--sp-5)); }
  .ct-side { position: static; }
  /* 窄屏顺序：先看表单，再读步骤。侧栏内容不挡在表单前面 */
  .ct-side { order: 2; }
  .ct-form-wrap { order: 1; }

  /* 单列后联系卡不满宽：四项改成标签在上、值在下的栅格，左侧一条细线分隔，
     比四行虚线在宽屏里更紧凑；地址单独占一整行 */
  .ct-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-3);
    max-width: none;
  }
  .ct-card__row {
    display: block;
    padding: 0 0 0 var(--sp-2);
    border-bottom: 0;
    border-left: 2px solid var(--c-line-2);
  }
  .ct-card__row dt { margin-bottom: 6px; }
  .ct-card__row--wide { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .ct-hero__title { font-size: clamp(26px, 7vw, 32px); }
  .ct-hero__lead { font-size: 16px; }
  .ct-form-wrap { padding: var(--sp-3); }
  .ct-side__title { font-size: 22px; }
}

@media (max-width: 600px) {
  /* 三列放不下长邮箱，改回竖排：标签左、值右 */
  .ct-card { display: block; }
  .ct-card__row {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-left: 0;
    border-bottom: 1px dashed var(--c-line);
  }
  .ct-card__row:first-child { padding-top: 0; }
  .ct-card__row:last-child { padding-bottom: 0; border-bottom: 0; }
  .ct-card__row--wide { display: block; }
  .ct-card__row--wide dt { margin-bottom: 4px; }
}