/* ============================================================================
   联系我们页（/lianxi/，page-id-1084）· 仅这一页加载
   --------------------------------------------------------------------------
   版式（参考 heronaiapp.com/contact-us，视觉沿用本站墨线 / 纸面 / 主题色）：
     上：左表单   | 右「标语 + 建筑线稿」
     下：左大标题 | 右「5 个信息格 + 滚动公告」
   命名：.ch-contact-* 页面骨架、.ch-cform-* 表单、.ch-slogan{1,2} 标语、
        .ch-house 线稿、.ch-band-* 下内容带；状态类 is-*。
   ⚠ 兼容性（全站共用底线）：纯 CSS，无嵌套 / 无 Sass 语法，无 !important。
        用到 var() 自定义属性、color-mix()、clamp()、aspect-ratio、minmax()、
        :focus-within、:is()、:nth-child() → 支持到 Chrome/Edge 105+、
        Safari 16.4+、Firefox 121+（color-mix() 是其中最晚落地的一条）。
   ⚠ 颜色一律走皮肤层变量（--ch-ink / --muted-color / --ch-line / --theme-color /
        --ch-card-bg / --ch-base / --ch-frame），不要在这里写死，否则日夜主题会脱节。
   ⚠ 两条高特异性选择器不能降：见「页面标题」与「滚动公告」处的说明，
        降了会被主题样式 / 首页滚动栏样式压掉。
   ============================================================================ */

/* ---- 只在这页放开主题容器：内容要顶到屏幕边缘 ---- */
.page-id-1084 main.container > .sidebar {
  display: none;
}

body.page-id-1084 main.container,
body.page-id-1084 .content-layout,
body.page-id-1084 .content-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

body.page-id-1084 .content-layout {
  display: block;
}

body.page-id-1084 .content-wrap {
  flex: none;
  display: block;
}

body.page-id-1084 .page-article {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

/* ---- 页面骨架：两列 44% / 56% ---- */
.ch-contact {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  align-items: start;
}

/* 网格子项里的长文本 / 二维码会撑破轨道，统一开 min-width:0
   （.ch-band-head 里的标题是 nowrap 一行，没有这条会直接顶破 54% 轨道） */
.ch-contact-main,
.ch-contact-aside,
.ch-band-head,
.ch-band-side {
  min-width: 0;
}

.ch-contact-main {
  max-width: 640px;
  padding: 92px 48px 72px 5vw;
}

/* 页面标题：皮肤层是 body .ch-page-title（0,1,1），同特异性只能靠顺序赢，
   这里多带一层 .ch-contact-main 提权，避免加载顺序一变就被打回 22px */
body .ch-contact-main .ch-page-title {
  margin: 0 0 20px;
  font-size: 32px;
}

.ch-contact-lead {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--muted-color);
}

/* ---- 右栏标语一：右对齐，贴到右边界 ---- */
.ch-slogan1 {
  padding: 46px 5vw 0 0;
  text-align: right;
}

.ch-slogan1 b {
  display: block;
  font-size: clamp(25px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.ch-slogan1 span {
  display: block;
  margin: 14px 0 0 auto;
  max-width: 30em;
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted-color);
}

/* ---- 16:9 画框：图本身是 1.986 的宽幅，contain + 右下对齐，
       房子就坐在右下角，上面自然留出标语的位置；透明底，不裁边也不加框 ---- */
.ch-house {
  margin: 24px 0 0;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.ch-house img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

body.dark-theme .ch-house img {
  /* 反相后整张图会发亮，压一点透明度，夜里才不刺眼 */
  filter: invert(1) contrast(.88);
  opacity: .55;
}

/* ---- 左栏底部标语二 ---- */
.ch-slogan2 {
  margin: 46px 0 0;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -.01em;
}

/* ============================================================================
   表单：只有下划线，没有盒子
   ============================================================================ */
.ch-cform-title {
  margin: 40px 0 6px;
  font-size: 20px;
  font-weight: 600;
}

.ch-cform {
  margin-top: 4px;
}

.ch-cform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}

.ch-cform-field {
  display: block;
  padding-top: 18px;
}

.ch-cform-field > span {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted-color);
}

.ch-cform-field > span i {
  margin-left: 4px;
  font-style: normal;
  font-size: 11px;
  opacity: .65;
}

.ch-cform-field :is(input, textarea) {
  width: 100%;
  padding: 10px 0 9px;
  border: 0;
  border-bottom: 1px solid var(--ch-line);
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ch-ink);
  outline: none;
  transition: border-color .15s ease;
}

.ch-cform-field textarea {
  min-height: 112px;
  padding-top: 8px;
  resize: vertical;
}

.ch-cform-field :is(input, textarea)::placeholder {
  color: var(--muted-color);
  opacity: .6;
}

/* 焦点语义放在整块字段上（输入框自己不画焦点环） */
.ch-cform-field :is(input, textarea):focus {
  border-bottom-color: var(--theme-color);
}

.ch-cform-field:focus-within > span {
  color: var(--theme-color);
}

/* 蜜罐：机器人会填，真人看不见 */
.ch-cform-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ch-cform-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
}

.ch-cform-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 22px;
  border: var(--ch-frame);
  border-radius: 999px;
  background: var(--theme-color);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 0 0 var(--ch-base);
  transition: transform .16s ease, box-shadow .16s ease;
}

.ch-cform-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 0 var(--ch-base);
}

.ch-cform-submit:active {
  transform: translateY(0);
  box-shadow: 0 0 0 0 var(--ch-base);
}

.ch-cform-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted-color);
}

/* 提交回执 */
.ch-cform-msg {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--ch-line);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
}

.ch-cform-msg.is-ok {
  border-color: color-mix(in srgb, var(--theme-color) 55%, transparent);
  background: color-mix(in srgb, var(--theme-color) 8%, transparent);
}

.ch-cform-msg.is-err {
  border-color: #d9542b;
  background: color-mix(in srgb, #d9542b 7%, transparent);
  color: #b3423a;
}

.ch-cform-msg a {
  margin-left: 10px;
  color: var(--theme-color);
}

/* ============================================================================
   房子下方内容带：左一行大标题 | 右上 5 个信息格 + 右下滚动公告
   ============================================================================ */
.ch-band {
  display: grid;
  /* 左栏给到 54%：标题要一行放完，宽度就是字号的上限（字号 = 内容宽 ÷ 字数）。
     上层 .ch-contact 没有竖线，这条分割线是 band 自己的，加宽不存在对齐问题。 */
  grid-template-columns: minmax(0, 54%) minmax(0, 46%);
  align-items: stretch;
  margin-top: 10px;
  padding-right: 5vw;
  border-top: 1px solid var(--ch-line);
}

.ch-band-head {
  /* 容器查询：让标题能用 cqi 按「可视字数」反算字号（见下 h2） */
  container-type: inline-size;
  display: flex;
  align-items: center;
  padding: 18px 16px 18px 5vw;
}

.ch-band-head h2 {
  margin: 0;
  /* 永不折行 + 永远顶满这一行：字号 = 容器内容宽 ÷ 可视字数。
     --ch-len 由 PHP 按「全角 1、半角 0.55」加权算出（chaoh_contact_visual_len）。
     行高压到 1.02，字高即盒子内容高 —— 视觉上就是一行字撑满整个左块。 */
  font-size: clamp(16px, calc(100cqi / var(--ch-len, 14)), 72px);
  font-weight: 700;
  line-height: 1.02;
  white-space: nowrap;
  color: var(--ch-ink, #1b1b1b);
}

.ch-band-side {
  display: flex;
  flex-direction: column;
  /* 列间竖线画在右侧（stretch 到整行高），左侧标题块才好在行内居中 */
  border-left: 1px solid var(--ch-line);
}

/* ---- 上半：5 个信息格，灰线分割成一块一块 ---- */
.ch-band-cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--ch-line);
}

.ch-band-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  padding: 8px 16px 10px;
  color: var(--ch-ink, #1b1b1b);
  text-decoration: none;
  transition: color .16s ease;
}

.ch-band-cell + .ch-band-cell {
  border-left: 1px solid var(--ch-line);
}

.ch-band-cell em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted-color);
}

.ch-band-cell b {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a.ch-band-cell:hover,
a.ch-band-cell:focus-visible {
  text-decoration: none;
}

a.ch-band-cell:hover b {
  color: var(--theme-color);
}

.ch-band-qr {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ch-band-qr img {
  width: 36px;
  height: 36px;
  border: 1px solid var(--ch-line);
  border-radius: 6px;
  background: #fff;
  object-fit: cover;
}

/* ---- 下半：滚动公告（复用首页 ch-tick 结构）----
   ⚠ 不能降特异性：chaoh-ticker.css 用的是 body .ch-tick .ch-tick-band（0,2,1），
   这里不带足类名会被压回去，卡底 / 边框 / 95% 宽 + 15px 内边距就会漏出来。
   现在 (0,4,1) 稳赢，不依赖加载顺序。目标：透明底、无边框、零左右内边距，字幕顶到头。 */
body .ch-band .ch-band-tick .ch-tick {
  padding: 0;
}

body .ch-band .ch-band-tick .ch-tick .ch-tick-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body .ch-band .ch-band-tick .ch-tick .ch-tick-band {
  border-top: 0;
  border-bottom: 0;
  background: transparent;
  padding: 12px 0;
}

/* ============================================================================
   响应式：991px 起单列，600px 起再收一档
   ============================================================================ */
@media (max-width: 991.98px) {
  .ch-contact {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ch-contact-main {
    max-width: none;
    padding: 28px 20px 0;
  }

  .ch-house {
    margin-top: 14px;
  }

  /* 单列后标语改回左对齐，跟随表单的阅读起点 */
  .ch-slogan1 {
    padding: 26px 20px 0;
    text-align: left;
  }

  .ch-slogan1 span {
    margin-left: 0;
  }

  .ch-band {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .ch-band-head {
    padding: 20px;
    border-bottom: 1px solid var(--ch-line);
  }

  /* 字号仍由 100cqi ÷ 字数自动得出，窄屏自然变小，不需要再写死一档 */

  .ch-band-side {
    border-left: 0;
  }

  /* 5 个挤 2 列：偶数格竖线、第三行起横线、末格占整行 */
  .ch-band-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ch-band-cell {
    min-height: 0;
    border-top: 1px solid var(--ch-line);
  }

  .ch-band-cell:nth-child(odd) {
    border-left: 0;
  }

  .ch-band-cell:nth-child(even) {
    border-left: 1px solid var(--ch-line);
  }

  .ch-band-cell:nth-child(-n+2) {
    border-top: 0;
  }

  .ch-band-cell:last-child:nth-child(odd) {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 600px) {
  .ch-contact-main {
    padding: 20px 18px 0;
  }

  .ch-slogan1 {
    padding: 22px 18px 0;
  }

  .ch-cform-row {
    grid-template-columns: 1fr;
  }

  .ch-cform-submit {
    width: 100%;
    justify-content: center;
  }

  .ch-slogan2 {
    margin-top: 34px;
  }
}