/*
 * 联系我们
 * - hero：2.0 成稿 design/pc/联系我们.jpg
 * - 办公点区：成稿单图 + 右侧悬浮「总部」信息卡（design/pc/联系我们.jpg y=701..1304）
 * - 留言表单：2.0 成稿有、线上无；保留
 */

.page-contact .contact-office.container--wide {
  width: min(1200px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

/* 表单用的是全局 .container（1200 版心自带 24px 内 padding，给窄桌面视口当安全边距），
   但成稿的表单栅格是不留白直接铺满 1200：内 padding 会把两列输入框从 588 挤成 564。
   不能直接 padding:0——769~1199 视口下会失去安全边距，变成贴边。
   改用跟上面 .container--wide 同款手法：外部 calc 收窄代替内部 padding，
   窄视口下仍有等效的 24px 边距，只是从「盒内让」换成「盒外让」。 */
.page-contact .contact-form.container {
  width: min(1200px, calc(100% - var(--gutter) * 2));
  padding: 0;
}

/* ---------------------------------------------------------------- hero
   成稿 / 素材 1920×545。禁止定高 + cover + clamp(vw)（docs/14 §5）。 */

.contact-hero {
  --u: 0.05208333cqw;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 545;
  container-type: inline-size;
  overflow: hidden;
  background: #e9f2fb;
}

.contact-hero__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ---------------------------------------------------------------- 办公点 · 成稿单图悬浮卡
   1920 成稿：标题 ink y=620..645；地图 1170×604 @ x=360,y=701；
   白卡 340×520 @ x=1178,y=743（距地图顶 42、右 12）。
   段高 68 + 39 + 49 + 604 = 760（545..1305），页脚仍落在 y=1983。 */

.contact-offices {
  padding: 68px 0 0;
  background: var(--bg-white);
}

/* 30 不是 34：成稿「联系我们」4 字 ink 宽 118 ⇒ 3.9F=118 ⇒ F≈30；
   按全局那份 34 渲染出来是 133。本页两个标题都是 30，
   而国际医药冷链页同位置实测 36 —— 成稿逐页不一致，全局值的取舍见 docs/09 Q22。 */
.contact-offices__title {
  text-align: center;
  font-size: 30px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 49px;
}

.contact-office__map-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 604;
  container-type: inline-size;
  background: #f3f7fb;
}

.contact-office__map {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

.contact-office__map.is-over-pin,
.contact-office__map.is-over-pin .contact-office__map-img {
  cursor: pointer;
}

.contact-office__map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.contact-office__pins {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.contact-office__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 26px;
  height: 34px;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.contact-office__pin:focus,
.contact-office__pin:focus-visible {
  outline: none;
}

.contact-office__photo {
  position: absolute;
  left: var(--photo-x, 50%);
  top: var(--photo-y, 50%);
  z-index: 4;
  width: min(220px, 28cqi);
  margin: 0;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(10, 27, 57, .18);
  transform: translate(18px, -100%) scale(.92);
  transform-origin: left bottom;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1);
}

.contact-office__photo.is-left {
  transform: translate(calc(-100% - 18px), -100%) scale(.92);
  transform-origin: right bottom;
}

.contact-office__photo.is-on {
  opacity: 1;
  transform: translate(18px, calc(-100% - 8px)) scale(1);
}

.contact-office__photo.is-left.is-on {
  transform: translate(calc(-100% - 18px), calc(-100% - 8px)) scale(1);
}

.contact-office__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: cover;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .contact-office__photo {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .contact-office__card[data-reveal].is-revealed {
    transition-delay: 100ms;
  }
}

.contact-office__card {
  position: absolute;
  top: calc(42 / 604 * 100%);
  right: calc(12 / 1200 * 100%);
  z-index: 5;
  width: min(340px, 42cqi);
  min-height: calc(520 / 604 * 100%);
  box-sizing: border-box;
  padding: 42px max(24px, min(50px, 4.27cqi)) 40px;
  background: var(--bg-white);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}

.contact-office__name {
  margin: 0 0 20px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}

.contact-office__item {
  padding: 18px 0 20px;
  border-bottom: var(--hairline) solid var(--line);
}

.contact-office__item:first-of-type {
  padding-top: 0;
}

.contact-office__item:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.contact-office__icon {
  display: block;
  width: 18px;
  height: 18px;
  margin-bottom: 10px;
}

.contact-office__label {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}

.contact-office__value {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
}

.contact-office__value a {
  color: inherit;
}

.contact-office__item.is-empty {
  display: none;
}

/* ---------------------------------------------------------------- 留言表单 */

.contact-form-section {
  padding: 68px 0 58px;
  background: var(--bg-white);
  text-align: center;
}

.contact-form-section h2 {
  font-size: 30px;      /* 「请给我们留言」6 字 ink 宽 177 ⇒ 5.9F=177 ⇒ F≈30 */
  line-height: 1.3;
  color: var(--ink);
}

.contact-form-section__sub {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* 行距 24 由步距反推：成稿两行输入 ink 顶 1494 / 1560 ⇒ 步距 66，输入框高 42 ⇒ 缝 24。 */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}

.contact-form__field {
  position: relative;
  display: block;
}

.contact-form__field--full {
  grid-column: 1 / -1;
}

.contact-form__field .req {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #e53935;
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}

.contact-form__field--full .req {
  top: 18px;
  transform: none;
}

/* display:block 是必须的，不是随手加的：textarea 默认 inline-block，会在包裹它的
   label 里留出约 9px 的幻影间隙（baseline 对齐的行内格式化上下文遗留空间）——
   textarea 自身 rect 量出来正是 180，但 label 量出来是 189。
   input 这次实测恰好没有这个间隙，但那是巧合（两者行高不同导致的），不能当规律依赖，
   所以两个选择器一起加，不单独只修 textarea。 */
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: #f5f5f5;
  padding: 0 16px 0 28px;
  color: var(--ink);
}

.contact-form input {
  height: 42px;
}

.contact-form textarea {
  min-height: 180px;    /* 成稿 1626..1805 */
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--ink-mute);
}

.contact-form__field:not(:has(.req)) input {
  padding-left: 16px;
}

/* 成稿 1838..1879 × x=880..1039 ⇒ 42 高、160 宽；.btn 基类是 48 高，这里按稿压回 42。 */
.contact-form__submit {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 160px;
  height: 42px;
  margin-top: 8px;
}

.contact-form__hint {
  grid-column: 1 / -1;
  text-align: center;
  min-height: 1.5em;
  font-size: 14px;
  color: var(--brand);
}

/* ---------------------------------------------------------------- 移动端 */

html[data-layout="mobile"] {
  /* hero 按 design/mobile/联系我们@2x.png 实测（@2x ÷ 2）：
     图 96..310 ⇒ 48..155（高 107，与 1920×545 同比，舞台继续走上面的 aspect-ratio）。
     文案随切图等比缩放，不再 HTML 叠字。 */

  /* [10] 矩阵：移动稿省略地图信息卡，只保留 hero、留言表单、紧凑页脚。
     办公点区（含标题与卡片）整段隐藏，避免多出一块非成稿内容把页脚顶下去。 */
  .contact-offices {
    display: none;
  }

  /* 表单按成稿实测（÷2）：标题 ink 顶 184、22px；副文 ink 顶 215、13px；
     首个输入框顶 245，框高 42、缝 8（步距 50）；textarea 445..540.5 ⇒ 96；
     提交按钮 553..594.5 × x=25..349.5 ⇒ 42 高、325 宽居中；按钮底距页脚 24.5。 */
  /* 两稿配色相反：PC 稿是白底 + 浅灰输入框，移动稿是 #f4f4f4 底 + 白色输入框
     （框下 4px 由 #e5e5e5 渐变回底色，即一层浅投影）。移动端按移动稿反过来。 */
  .contact-form-section {
    padding: 24px 0 24px;
    background: #f4f4f4;
  }

  .contact-form input,
  .contact-form textarea {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
  }

  .contact-form-section h2 {
    font-size: 22px;
  }

  .contact-form-section__sub {
    margin-top: 3px;
    font-size: 13px;
  }

  .contact-form {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 15px;
  }

  /* 两端字段序不同：PC 稿是 姓名|联系方式 / 公司名称|邮箱 两列，收成单列后得到
     姓名→联系方式→公司名称；移动稿是 姓名→公司名称→联系方式→邮箱。
     DOM 保持 PC 序（同一业务 DOM），移动端只用 order 重排。 */
  .contact-form__field:has(input[name="name"]) { order: 1; }
  .contact-form__field:has(input[name="company"]) { order: 2; }
  .contact-form__field:has(input[name="contact"]) { order: 3; }
  .contact-form__field:has(input[name="email"]) { order: 4; }
  .contact-form__field--full { order: 5; }
  .contact-form__submit { order: 6; }
  .contact-form__hint { order: 7; }

  .contact-form input,
  .contact-form textarea {
    font-size: 15px;
  }

  /* rows=5 会把内容高度撑到 ~160，min-height 压不住，这里直接定高。 */
  .contact-form textarea {
    height: 96px;
    min-height: 96px;
  }

  .contact-form__submit {
    width: 100%;
    min-width: 0;
    max-width: 325px;
    margin-top: 12px;
  }
}