/* ==========================================================================
   联系我们页（contact.html）· 参考 UEMO「图片轮播浅色-001」(id/357)
   + 「表单浅色-005」(id/393) 逐规格复刻
   - 跑马灯：无限左向滚动图片带（本站改为 130×173 3:4 竖卡以贴合产品图）
   - 两栏：左信息卡 340fr : 右表单卡 679fr，gap 80（参考实测比例）
   - 表单：两列网格 + 下划线输入框 + 胶囊单选 + 整行黑胶囊提交
   全部规则用 body.ip-contact 限作用域，不影响站内其他页面。
   ========================================================================== */

/* ---------- ① 图片跑马灯带（参考 id/357 第二行 marquee） ----------
   2026-09-12 用户「红色框的内容删除，卡片轮播往上方，在白色背景居中」
   → 再「这里没改好，红色框的地方是星空背景」：
   轮播已搬进黑带 section（contact.html 里 .lh-sec--title 内），坐在星空上；
   黑带高度由 js/list-hero.js 按「本段最后一个内容块底部 + 3.5vw」算 → 星空一直铺到轮播下方。
   留白分配：段自身还有 3.5vw 下内边距，所以这里下边距给 3.5vw，上 7vw 与之相加后上下等值
   （= 轮播在星空里上下居中）。 */
body.ip-contact .ct-strip {
  margin: 0;   /* 上下留白已交给外层白板 .lh-white-pad 的 padding（轮播现在坐在白板里） */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
body.ip-contact .ct-track {
  display: flex; width: max-content; animation: ctScroll 72s linear infinite;
  will-change: transform; backface-visibility: hidden;   /* 跑马灯只用合成器搬层，避免重绘卡顿 */
}
body.ip-contact .ct-set { display: flex; flex: 0 0 auto; }
body.ip-contact .ct-item {
  flex: 0 0 auto;
  width: 130px; height: 173px;
  margin-right: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  contain: layout paint;   /* 每张卡自成一个绘制单元 */
}
body.ip-contact .ct-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes ctScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { body.ip-contact .ct-track { animation: none; } }

/* ---------- ①b 白色板：包住卡片轮播（2026-09-12 用户两轮指令 ----------
   ①「红色框柱的地方做个白色背景，像品牌介绍的页面一样」②「红色框柱的地方移动到蓝色框」：
   白板宽度 = 内容列（它就是 .ip-wrap.lh-strip-wrap 的子元素），轮播放在板内、四周留白，
   黑带（.lh-banner-bg）高度 = 整段高度（js/list-hero.js 量的），所以星空正好在白板下沿收住、
   白板左右两侧露出星空 —— 与品牌介绍页数据白板同一手法。
   ⚠️ 段自身下内边距在本页必须为 0（见下），否则黑带会在白板下面再多出 3.5vw，白板就压不到边。 */
body.ip-contact .lh-sec--title { padding-bottom: 0; }
body.ip-contact .lh-white-pad {
  margin-top: clamp(60px, 7vw, 120px);                       /* 巨字与白板之间留黑 */
  /* 2026-09-12 单列统一：左右内边距改用 --col-pad（原 clamp(24px,3.6vw,70px)），
     这样板内的 .ct-strip 与下方 .ct-grid 落在同一条内容框上（原来两者差 6px）。
     上下留白不动，仍照用户蓝框的缩进。 */
  padding: clamp(26px, 2.6vw, 52px) var(--col-pad);
  background: #fff;
}

/* 白板与下方内容区之间的间距（2026-09-12 用户圈住这条白带「红色框位置要增加间距」）。
   ⚠️ 必须加在**内容列的上内边距**上，不能写成白板的下外边距 —— 黑带段是 BFC（.lh-sec 有
   overflow:clip），下外边距会被包含进段高，黑带就跟着往下一块变高、星空多铺一截。
   实测基准：内容区上沿原 = 白板下沿（792），可见留白 = 卡片自身 72px；加完 5.5vw 后 ≈ 177px。 */
body.ip-contact .ip-main > .ip-wrap { padding-top: clamp(48px, 5.5vw, 110px); }

/* ---------- ② 两栏骨架（参考 id/393：340 : 679、gap 80） ---------- */
body.ip-contact .ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 340fr) minmax(0, 679fr);
  gap: clamp(40px, 5.5vw, 80px);
  align-items: stretch;
}
/* ⑦ 白底浮卡：只给右栏表单（用户 2026-09-10：左边不加白底/阴影，也不要灰底）
   卡片盒 = 右栏轨道宽（右边缘与页头/页脚同一竖线），表单文字靠卡片自身内缩 50px（照参考 id/393） */
body.ip-contact .ct-card { padding: 72px 0; }
body.ip-contact .ct-card--form {
  background: #fff; border-radius: 20px;
  box-shadow: 0 10px 30px rgba(20, 21, 26, .07), 0 2px 8px rgba(20, 21, 26, .04);
  padding: 72px clamp(24px, 7.2%, 88px);      /* 四周留白加大（用户 2026-09-10 红框） */
}
/* 两卡内容同起点：左右都不再额外内缩，上下留白一致（用户 2026-09-10 要求两栏内容对齐） */
body.ip-contact .ct-card--info { position: relative; padding: 72px 0; display: flex; flex-direction: column; }

/* ---------- ③ 标题块（虚线胶囊徽标 + 48px 标题） ---------- */
body.ip-contact .ct-card--info .ct-pill { position: absolute; top: 0; left: 0; margin: 0; }
body.ip-contact .ct-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 22px; padding: 4px 15px;
  border: 2px dashed rgba(20, 21, 26, .08); border-radius: 100px;
  font-size: 14px; font-weight: 700; line-height: 1.6; color: rgba(20, 21, 26, .6);
}
body.ip-contact .ct-h2 {
  margin: 0;
  font-size: 48px; line-height: 1.25;
  font-weight: 700; letter-spacing: -.01em; color: #14151a;
}
body.ip-contact .ct-h2--tight { line-height: 1.25; }
body.ip-contact .ct-lead { margin: 20px 0 0; font-size: 14px; line-height: 28px; color: rgba(20, 21, 26, .6); }
body.ip-contact .ct-note { margin: 20px 0 0; font-size: 14px; line-height: 1.8; color: #14151a; }

/* ---------- ④ 左卡信息块（32px 描边图标 + 18px 字段名 + 40px 分隔线） ---------- */
/* 左栏信息块与右栏表单行「逐行对齐」（用户 2026-09-10：联系电话↔姓名/公司，以此类推）
   右栏行首间距 126/125/110（行高 101/101/86 + 行距 24），左栏用同一节奏，
   块高固定 92（h3 行高 25 + 下边距 12 + 两条 26px 正文行） */
body.ip-contact .ct-blk {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 20px;
  margin-top: 21px;
}
body.ip-contact .ct-blk:first-of-type { margin-top: 36px; }
body.ip-contact .ct-blk:nth-of-type(3) { margin-top: 20px; }
body.ip-contact .ct-blk:nth-of-type(4) { margin-top: 5px; }   /* 第4行行距更小（表单 需求类型 行更矮） */
body.ip-contact .ct-ico {
  width: 32px; height: 32px;
  border: 1px solid rgba(20, 21, 26, .2); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #14151a;
}
body.ip-contact .ct-ico svg { width: 18px; height: 18px; display: block; }
body.ip-contact .ct-blk h3 { margin: 3px 0 12px; font-size: 18px; line-height: 1.4; font-weight: 700; color: #14151a; }
body.ip-contact .ct-blk p { margin: 0; font-size: 14px; line-height: 26px; color: rgba(20, 21, 26, .6); }
body.ip-contact .ct-blk p.ct-strong { font-size: 16px; color: #14151a; }
body.ip-contact .ct-blk p.ct-strong a.ct-tel { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
body.ip-contact .ct-blk p.ct-strong a.ct-tel:hover { border-bottom-color: rgba(20, 21, 26, .35); }
body.ip-contact .ct-blk p.ct-strong a.ct-mail { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; word-break: break-all; }
body.ip-contact .ct-blk p.ct-strong a.ct-mail:hover { border-bottom-color: rgba(20, 21, 26, .35); }
body.ip-contact .ct-addr-label { display: inline-block; min-width: 5em; margin-right: 2px; font-weight: 600; color: rgba(20, 21, 26, .85); }
body.ip-contact .ct-hr { height: 1px; border: 0; margin: 12px 0 0; background: rgba(20, 21, 26, .1); }

/* ---------- ⑤ 圆形社媒按钮（39px 圆 + 21px 图标） ---------- */
body.ip-contact .ct-soc { display: flex; gap: 16.8px; margin-top: auto; padding-top: 44px; }
/* 社交图标按钮本体在 css/site-social.css（UEMO 素材 465 规格） */
body.ip-contact .ct-soc-note { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: rgba(20, 21, 26, .45); }

/* ---------- ⑥ 表单（参考实测：两列 gap 24、行 101px、下划线输入框） ---------- */
body.ip-contact .ct-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
body.ip-contact .ct-row { display: flex; flex-direction: column; min-width: 0; }
body.ip-contact .ct-row--wide { grid-column: 1 / -1; }
body.ip-contact .ct-label {
  display: block;
  margin: 0 0 12px; font-size: 16px; line-height: 1.4; font-weight: 700; color: #111;
}
body.ip-contact .ct-label em {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 12px; line-height: 1.5; font-weight: 400; color: rgba(20, 21, 26, .55);
}
body.ip-contact .ct-label i { font-style: normal; color: #3452ff; }
body.ip-contact .ct-row input[type="text"],
body.ip-contact .ct-row input[type="date"],
body.ip-contact .ct-row input[type="file"],
body.ip-contact .ct-row textarea {
  width: 100%; box-sizing: border-box;
  border: 0; border-bottom: 1px solid rgba(0, 0, 0, .12); border-radius: 0;
  background: transparent; outline: none;
  padding: 14px 0; font-family: inherit; font-size: 14px; color: #111;
  transition: border-color .26s;
}
body.ip-contact .ct-row input[type="file"] { font-size: 13px; color: rgba(20, 21, 26, .6); }
body.ip-contact .ct-row textarea { min-height: 92px; line-height: 1.8; resize: vertical; }
body.ip-contact .ct-row input:focus, body.ip-contact .ct-row textarea:focus { border-bottom-color: #14151a; }
body.ip-contact .ct-row input::placeholder, body.ip-contact .ct-row textarea::placeholder { color: rgba(17, 17, 17, .35); }

/* 胶囊单选组（参考：input 24×24 appearance:none + 13px 标签） */
body.ip-contact .ct-radio-grp { display: flex; flex-wrap: wrap; gap: 0 28px; }
body.ip-contact .ct-radio { display: inline-flex; align-items: center; }
body.ip-contact .ct-radio input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 0; border: 1px solid rgba(20, 21, 26, .3);
  border-radius: 50%; background: #fff; cursor: pointer; transition: .2s;
}
body.ip-contact .ct-radio input:checked { border-color: #14151a; background: #14151a; box-shadow: inset 0 0 0 3px #fff; }
body.ip-contact .ct-radio label { margin-left: 6px; font-size: 13px; line-height: 32px; color: #111; cursor: pointer; }

/* 提交（整行 52px 黑胶囊） */
body.ip-contact .ct-foot { grid-column: 1 / -1; margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
/* 提交按钮：正常宽度（不占满整行）+ 悬停切换（黑底白字 ⇄ 白底黑字描边） */
body.ip-contact .ct-submit {
  align-self: flex-start; width: auto; min-width: 176px; height: 52px; padding: 0 42px;
  border: 1px solid #14151a; border-radius: 100px; background: #14151a; color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background .28s ease, color .28s ease, box-shadow .28s ease, transform .28s ease;
}
body.ip-contact .ct-submit:hover {
  background: #fff; color: #14151a;
  box-shadow: 0 10px 24px rgba(20, 21, 26, .14);
  transform: translateY(-2px);
}
body.ip-contact .ct-submit:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(20, 21, 26, .12); }
body.ip-contact .ct-submit:focus-visible { outline: 2px solid #14151a; outline-offset: 3px; }
body.ip-contact .ct-submit:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; background: #14151a; color: #fff; }
body.ip-contact .ct-status { margin: 0; font-size: 14px; line-height: 1.7; color: #14151a; }

/* ---------- ⑦ 响应式 ---------- */
@media (max-width: 1100px) {
  body.ip-contact .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  body.ip-contact .ct-card { padding: 46px 0; }
  body.ip-contact .ct-card--form { padding: 46px 24px; }
  body.ip-contact .ct-h2 { font-size: 40px; line-height: 1.25; }
  body.ip-contact .ct-h2--tight { line-height: 1.25; }
  body.ip-contact .ct-item { width: 116px; height: 155px; margin-right: 8px; }
}
@media (max-width: 760px) {
  body.ip-contact .ct-form { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  body.ip-contact .ct-h2 { font-size: 30px; line-height: 37.5px; }
  body.ip-contact .ct-item { width: 98px; height: 131px; margin-right: 6px; }
  body.ip-contact .ct-blk { gap: 0 14px; }
  body.ip-contact .ct-soc { margin-top: 0; padding-top: 32px; }
}