/* pages/contacts.css — 联系页（bundle 4:116「CONTACTS」，1920×2557）
   断点：base 移动流式；≥768 表单居中；≥1280 按 1920 设计稿精确几何（frontend-execute.md §2.1/§2.3）。
   导航为首页式（透明白字叠首屏、滚动后白底黑字）——设计稿导航实例为通用 "nav" 而非「导航-白」，body 不加 page-sub。 */

/* ---------- 首屏（4:147：图 1920×1000，exposure +0.08，20% 黑遮罩；标题 y=270 x=165） ---------- */
.pct-hero {
  position: relative;
  display: flex;
  align-items: center;
  height: auto;
  min-height: 32rem;
  padding: 8rem var(--space-6) 3rem;
  overflow: hidden;
}

.pct-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../assets/images/contacts-hero.webp") center / cover no-repeat;
  filter: brightness(1.08); /* 设计 exposure +0.08 */
}

.pct-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .2); /* 设计稿 20% 黑遮罩 */
}

.pct-hero__title {
  position: relative;
  z-index: 1;
  max-width: 71.625rem; /* 1146 */
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, var(--font-size-hero));
  line-height: var(--line-height-heading); /* 76/68 */
  font-weight: var(--font-weight-medium);
  color: #fff;
}

/* ---------- 留言表单（4:150：红渐变卡 1200×550 @ (360,633)，底部越过首屏压联系区 38px） ---------- */
.pct-form {
  position: relative;
  overflow: hidden;
  z-index: 2; /* 压在联系区（DOM 靠后的 positioned 兄弟）之上 */
  padding: 3.1875rem var(--space-6) 3rem;
  color: #fff;
  /* Figma 渐变：#c30e23 → #690000，轴 ≈109.5deg 且 stop 1 落在盒外；
     CSS 终点取 #940711（stop 0→1 在盒内右下角 51.85% 处的插值） */
  background-image: linear-gradient(109.5deg, var(--color-primary) 0%, #940711 100%);
}

.pct-form__deco {
  position: absolute;
  top: 12.5rem; /* 装饰 y=200 */
  right: 0;      /* x=850+350=1200 贴卡右缘 */
  display: block;
  width: 21.875rem; /* 350 */
  height: 21.875rem;
  pointer-events: none; /* 纯装饰，不拦截表单点击 */
  /* ⚠ 这里刻意不写 opacity —— 装饰图 connect-with-xitec.png 的白色形状**自身 alpha 仅 0–25/255
     （≈10%）**，即旧 svg 版本的 opacity: .1 已经烘焙进 PNG。再叠一层 .1 会降到 ~1%，
     肉眼完全看不见。（旧实现是 <svg color:#fff> + opacity:.1，白色靠 color 提供，
     换成 <img> 后 color 失效、alpha 由图片自带。） */
}

.pct-form__title {
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2rem); /* 32 */
  line-height: 3rem; /* 48 */
  font-weight: var(--font-weight-medium);
  letter-spacing: -.02em;
}

.pct-form__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.875rem; /* 行距 90 = 输入框 60 + 30 */
  margin-top: 1.875rem; /* 标题底 99 → 字段 129 */
}

.pct-form__field label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pct-form__field input,
.pct-form__field textarea {
  display: block;
  width: 100%;
  height: 3.75rem; /* 60 */
  padding: 0 1.28125rem; /* 文字 x=20.5 */
  border: 1px solid rgba(255, 255, 255, .5); /* 50% 不透明度 */
  border-radius: .3125rem; /* 5px */
  background: transparent;
  font-family: inherit;
  font-size: var(--font-size-body);
  line-height: 3rem; /* 48 */
  color: #fff;
}

.pct-form__field input::placeholder,
.pct-form__field textarea::placeholder {
  color: var(--color-gray-300);
}

.pct-form__field textarea {
  height: 6.25rem; /* 100 */
  padding-top: .625rem; /* 文字 y=10；行高随共享 48 → 首行中心 y=34 与设计一致 */
  resize: none;
}

.pct-form__field input:focus-visible,
.pct-form__field textarea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -1px;
}

.pct-form__submit {
  height: 3.75rem;
  border: 0;
  border-radius: .3125rem; /* 5px */
  background: rgba(255, 255, 255, .85); /* 设计 #ffffff @0.85 */
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 3rem; /* 48 */
  letter-spacing: 0;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color .2s ease-out;
}

/* ⚠ 坑 29 同型（2026-09-20 审计发现并修）：SEND A MESSAGE 按钮是
   `form.pct-form__grid[data-m-stagger="80"]` 的直接子元素 → motion.js 给它打了 `data-m-anim`
   → 上面那条 `transition: background-color .2s` 被 motion.css 的 `.m-ready [data-m-anim]`
   （0,2,0）整条覆盖 → hover（rgba(255,255,255,.85) → #fff）瞬跳。
   解法：选择器抬到 (0,3,0) + 把 motion 三条过渡原样抄回。❗ 详见 products-sub.css 同名规则的注释。 */
.pct-contact .pct-form__grid .pct-form__submit {
  transition:
    opacity var(--m-dur) ease var(--m-delay, 0ms),
    translate var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
    scale var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
    background-color .2s ease-out;
}


.pct-form__submit:hover {
  background: #fff;
}

.pct-form__submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- 联系信息（4:118：背景图 y=1145–2145，exposure +0.08；公司名 y=1390 x=165） ---------- */
.pct-info {
  position: relative;
  margin-top: 2rem;
  padding: 3rem var(--space-6) 4rem;
  overflow: hidden;
}

.pct-info::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../assets/images/contacts-office.webp") center / cover no-repeat;
  filter: brightness(1.08);
}

.pct-info__name,
.pct-info__list {
  position: relative;
  z-index: 1;
  padding-left: 0;
}

.pct-info__name {
  /* 2026-09-23 用户要求公司全称不换行、一行显示。
     原宽度上限 1143px 是按**英文公司名**定的；俄语全称在 36px/600 下需 1227.8px
     → 被挤成 2 行。放开后 @1920 可用 1755、@1440 可用 1316，均能一行。
     ⚠ @1280 仍差 57.8px（可用 1170）—— 需要缩字号才能一行，待用户定。
     ⚠ 断行不再有宽度兜底：文案再变长会横向溢出，而 .pct-info 是 overflow:hidden 会裁切。 */
  max-width: none;
  font-size: clamp(1.5rem, 1rem + 1.7vw, var(--font-size-h2));
  line-height: 3.125rem; /* 50 */
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  font-style: normal;
}

.pct-info__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2.5rem;
  font-style: normal;
}

.pct-info__row {
  display: flex;
  align-items: flex-start;
  gap: 1.875rem; /* 图标盒 75 + 30 = 文字 x=105 */
}

.pct-info__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.6875rem;  /* 75 */
  height: 4.6875rem;
  border: 1px solid var(--color-gray-400); /* #cccccc，填充透明 */
  border-radius: .3125rem; /* 5px */
  /* 图标色 #c30e23 —— #i-ct-addr / #i-ct-tel / #i-ct-mail 的 <path> 均为 fill="currentColor"，
     改 color 即改图标色（外框 border 仍是 #cccccc，不受影响） */
  color: var(--color-primary);
}

.pct-info__row h3 {
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  font-weight: var(--font-weight-semibold);
}

.pct-info__row p {
  margin-top: .9375rem; /* 值 y=47（标题底 32 + 15） */
  font-size: var(--font-size-h3);
  line-height: 2rem;
  color: var(--color-text-2);
}

.pct-info__row a {
  color: inherit;
}

.pct-info__row a:hover {
  color: var(--color-primary);
}

/* ---------- 平板档（768–1279：表单居中定宽） ---------- */
@media (min-width: 768px) {
  .pct-form {
    max-width: 40rem;
    margin: 2.5rem auto 0;
    padding: 3.1875rem var(--space-10) 3rem;
  }

  .pct-info {
    margin-top: 4rem;
    padding: 5rem var(--space-10) 6rem;
  }
}

/* ---------- 桌面档（≥1280：1920 设计值精确命中） ---------- */
@media (min-width: 1280px) {
  .pct-hero {
    height: 62.5rem; /* 1000 */
    min-height: 0;
    padding: 0;
    align-items: flex-start;
  }

  .pct-hero__title {
    margin-top: 16.875rem; /* 标题 y=270 */
    margin-left: 8.59375%; /* x=165 */
    font-size: var(--font-size-hero);
  }

  /* 表单绝对定位叠于首屏底部：top 633，宽 1200 居中，底 1183 压联系区 38px */
  .pct-form {
    position: absolute;
    top: 39.5625rem; /* 633 */
    left: 50%;
    width: 62.5%; /* 1200 */
    max-width: none; /* 清除 md 档 40rem 钳制，否则卡被压成 640 宽 */
    margin: 0;
    padding: 3.1875rem 5rem 0;
    height: 34.375rem; /* 550 */
    transform: translateX(-50%);
  }

  .pct-form__title {
    padding: 0;
    font-size: 2rem;
  }

  .pct-form__grid {
    grid-template-columns: repeat(2, 18.75rem); /* 字段固定 300 宽，区总宽 630，右侧为装饰图标区 */
  }

  .pct-form__wide {
    grid-column: 1 / -1;
  }

  .pct-info {
    height: 62.5rem; /* 1000 */
    margin-top: 9.0625rem; /* 首屏底 1000 → 1145（表单叠于其上） */
    padding: 15.3125rem 0 0; /* 公司名 y=1390（区顶 1145 + 245） */
  }

  .pct-info__name,
  .pct-info__list {
    margin-left: 8.59375%; /* x=165 */
  }

  .pct-info__name {
    font-size: var(--font-size-h2); /* 36 */
  }

  .pct-info__list {
    gap: 3.625rem; /* 行距 58（375→512→639） */
    margin-top: 5rem; /* 公司名底 295 → 375 */
  }
}
/* ---------- 移动档（<768：隐藏表单卡内的装饰水印图，2026-09-20 用户要求） ----------
   ⚠ 为什么只在移动端隐藏：PC 档表单是「字段固定 300 宽 ×2 列 = 630」，卡片右侧
     1200−630 留出空白区，装饰图正好落在那里（≥1280 实测 deco 盒 y 833–1183，
     底缘与卡底 1183 齐平）→ 这是设计意图。
     而移动端卡片只有 375 宽，装饰图 350 宽几乎铺满整张卡、又压在表单下方
     （deco 中心点 elementFromPoint 命中的是 .pct-form__grid），
     变成一片盖在输入框上的「幽灵水印」→ 用户要求去掉。
   ⚠ 用 display:none 而非 opacity / visibility：它是 position:absolute +
     pointer-events:none 的纯装饰，不参与流式布局 → 隐藏后**零布局影响**
     （已逐盒比对验证：卡片 / 标题 / 各字段 / 按钮 / 联系区 / 页脚 / 文档总高
     在 375/430/767 全部逐值不变）。
   ⚠ 它带 alt="" + aria-hidden="true"，display:none 不损失任何可访问性信息。
   验收：.workbuddy-ai/tmp/_verify-pct-deco.js check */
@media (max-width: 767px) {
  .pct-form__deco {
    display: none;
  }
}