/* ==========================================================================
   联系我们 · contact.css
   --------------------------------------------------------------------------
   来源：原 app/views/site/contact.php 第 55–164 行的内联 <style> 块，整段搬到本文件。
   那段样式写在 <body> 里、晚于 theme.css 加载，且把面板底写死成
   rgba(17,25,39,.72) / rgba(8,11,17,.35)，于是日间模式下整页仍是深色；
   字号也停在 11.8–15px，比全站正文（--fs-base 19px）小一截。

   本文件的改写约定：
   1) 色值全部走令牌（--bg / --bg-soft / --panel / --panel-2 / --line /
      --line-soft / --text / --text-2 / --muted / --brand / --brand-2 /
      --brand-soft）；浅染底统一 --brand-soft，半透明品牌描边统一 --brand。
   2) 字号按「正文 --fs-base、节标题 --fs-lg、辅助说明 --fs-sm / --fs-xs」
      三档收口（用户原话：「联系我们整页文字偏小，需与全站字号统一」）。
      21px 的原值正好等于 --fs-md，取精确档而不是再放大一档。
   3) 行高：长文 --lh-loose，一般段落 --lh-base，标题 --lh-tight。
   4) 间距走 --sp-*：区块之间 --sp-6/--sp-7，标题与内容 --sp-4，卡片内 --sp-4，
      行内小间隔 --sp-1/--sp-2。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页头
   -------------------------------------------------------------------------- */

.px-hero {
    padding: var(--sp-7, 56px) 0 var(--sp-5, 32px);
    background: radial-gradient(120% 150% at 10% 0, var(--brand-soft), transparent 58%);
}
.px-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6, 40px); align-items: end; }
.px-eyebrow {
    display: inline-block; font-family: var(--mono); font-size: var(--fs-xs, 16px); letter-spacing: 2px;
    text-transform: uppercase; color: var(--brand); margin-bottom: var(--sp-3, 12px);
    padding-left: var(--sp-2, 8px); border-left: 2px solid var(--brand);
}
.px-hero h1 {
    font-size: var(--fs-xl, 32px); font-weight: 700; letter-spacing: -.7px;
    line-height: var(--lh-tight, 1.3); color: var(--text);
}
.px-sub {
    margin-top: var(--sp-3, 12px); font-size: var(--fs-base, 19px);
    line-height: var(--lh-loose, 1.8); color: var(--text-2); max-width: 640px;
}
.px-note { margin-top: var(--sp-3, 12px); font-size: var(--fs-xs, 16px); color: var(--muted); letter-spacing: .2px; }
.px-kpis { display: flex; gap: var(--sp-2, 8px); }
.px-kpi {
    min-width: 132px; padding: var(--sp-3, 12px) var(--sp-4, 16px);
    border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel);
}
.px-kpi b {
    display: block; font-family: var(--mono); font-size: var(--fs-md, 21px); font-weight: 700;
    letter-spacing: -.5px; color: var(--text); line-height: var(--lh-tight, 1.3);
}
.px-kpi b span { font-family: var(--mono); font-size: var(--fs-xs, 16px); color: var(--brand); margin-left: 3px; }
.px-kpi em {
    display: block; margin-top: 5px; font-style: normal;
    font-size: var(--fs-xs, 16px); color: var(--muted);
}
/* 「留言通道开放」那枚标签原来是 style="margin:0" 硬压掉 .tag 的外边距 */
.px-kpi .tag { margin: 0; }

/* --------------------------------------------------------------------------
   2. 面包屑
   -------------------------------------------------------------------------- */

.px-crumbbar { border-top: 1px solid var(--line-soft); background: var(--bg-soft); }
.px-crumb {
    display: flex; align-items: center; gap: var(--sp-2, 8px); height: 40px;
    font-size: var(--fs-xs, 16px); color: var(--muted);
}
.px-crumb a { color: var(--muted); }
.px-crumb a:hover { color: var(--text); }
.px-crumb .cur { color: var(--text-2); }
.px-crumb .sep { color: var(--muted); font-family: var(--mono); }

/* --------------------------------------------------------------------------
   3. 联系方式卡片
   -------------------------------------------------------------------------- */

.px-section { padding: var(--sp-7, 56px) 0 0; }
.px-contacts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--sp-4, 16px); max-width: 1080px; margin: 0 auto;
}
.px-contact {
    padding: var(--sp-4, 16px); border: 1px solid var(--line-soft);
    border-radius: var(--radius); background: var(--panel);
}
.px-contact .lb {
    display: flex; align-items: center; gap: var(--sp-2, 8px); font-size: var(--fs-xs, 16px);
    color: var(--muted); letter-spacing: .4px; margin-bottom: var(--sp-2, 8px);
}
.px-contact .lb svg { color: var(--brand-2); }
.px-contact b {
    display: block; font-family: var(--mono); font-size: var(--fs-base, 19px); font-weight: 600;
    color: var(--text); word-break: break-all; line-height: var(--lh-base, 1.65);
}
.px-contact span { display: block; margin-top: var(--sp-2, 8px); font-size: var(--fs-xs, 16px); color: var(--muted); }
a.px-contact { display: block; text-decoration: none; transition: border-color .18s; }
a.px-contact:hover { border-color: var(--line); }
a.px-contact:hover b { color: var(--brand); }

/* --------------------------------------------------------------------------
   4. 正文（后台「页面内容」渲染出来的富文本）
   -------------------------------------------------------------------------- */

.px-prose { max-width: 820px; margin: 0 auto; font-size: var(--fs-base, 19px); line-height: var(--lh-loose, 1.8); color: var(--text-2); }
.px-prose > :first-child { margin-top: 0; }
.px-prose > :last-child { margin-bottom: 0; }
.px-prose p { margin-bottom: var(--sp-4, 16px); }
.px-prose h2, .px-prose h3 { color: var(--text); padding-left: var(--sp-3, 12px); border-left: 3px solid var(--brand); }
.px-prose h2 {
    font-size: var(--fs-lg, 25px); font-weight: 700;
    margin: var(--sp-6, 40px) 0 var(--sp-4, 16px); line-height: var(--lh-tight, 1.3);
}
.px-prose h3 {
    font-size: var(--fs-md, 21px); font-weight: 600;
    margin: var(--sp-5, 32px) 0 var(--sp-3, 12px); border-left-color: var(--brand);
}
.px-prose strong { color: var(--text); font-weight: 600; }
.px-prose a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--line); }
.px-prose ul, .px-prose ol { margin: 0 0 var(--sp-4, 16px); padding-left: var(--sp-5, 32px); }
.px-prose ul li { list-style: disc; margin-bottom: var(--sp-2, 8px); }
.px-prose ol li { list-style: decimal; margin-bottom: var(--sp-2, 8px); }
.px-prose blockquote {
    margin: var(--sp-4, 16px) 0; padding: var(--sp-4, 16px); border-left: 3px solid var(--brand-2);
    background: var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.px-prose img {
    display: block; max-width: 100%; height: auto; margin: var(--sp-5, 32px) auto;
    border-radius: 8px; border: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------------------
   5. 两栏：左侧正文分节，右侧常驻留言表单
   原来留言表单钉在页面最底部，读者要滑过联系方式、商务合作、合作与代理、使用支持
   四段文字才看得见它；而「联系我们」页最该做的事就是留言。改成右栏 sticky 之后，
   表单从进入正文起就一直可见，正文再长也不影响。
   -------------------------------------------------------------------------- */

.ct-doc {
    display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: var(--sp-6, 40px);
    align-items: start; max-width: 1080px; margin: 0 auto;
}
.ct-main { min-width: 0; }
.ct-side { position: sticky; top: 86px; }

/* 正文分节：编号 + 标题 + 上方细线，与产品页 / 关于页同一套视觉。
   节标题统一到 --fs-lg，与产品页 .px-sec-h 同档 —— 这两页读者会来回跳，
   同一层级的标题在两页里不该是两个字号。 */
.ct-sec {
    padding-top: var(--sp-6, 40px); margin-top: var(--sp-6, 40px);
    border-top: 1px solid var(--line-soft);
}
.ct-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ct-sec-h {
    display: flex; align-items: baseline; gap: var(--sp-3, 12px); margin: 0 0 var(--sp-4, 16px);
    font-size: var(--fs-lg, 25px); font-weight: 700; letter-spacing: -.2px; color: var(--text);
    padding-left: 0; border-left: 0;
}
.ct-sec-no {
    font-family: var(--mono); font-size: var(--fs-xs, 16px); letter-spacing: 1.5px;
    color: var(--muted); flex: 0 0 auto;
}
.ct-main .px-prose { max-width: none; margin: 0; font-size: var(--fs-base, 19px); line-height: var(--lh-loose, 1.8); }

/* 侧栏只有 352px，两列表单会挤成两行字，这里一律改单列 */
.ct-side .px-form { margin-top: 0; padding: var(--sp-4, 16px); }
.ct-side .form-row { grid-template-columns: minmax(0, 1fr); }
.ct-side .px-form-head { flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: var(--sp-3, 12px); }
.ct-side .px-form-head h2 { font-size: var(--fs-md, 21px); }
.ct-side-form-note {
    margin-top: var(--sp-3, 12px); font-size: var(--fs-xs, 16px);
    line-height: var(--lh-loose, 1.8); color: var(--muted);
}

/* --------------------------------------------------------------------------
   6. 留言表单
   -------------------------------------------------------------------------- */

.px-form-wrap { max-width: 820px; margin: 0 auto; }
.px-form {
    margin-top: var(--sp-5, 32px); padding: var(--sp-5, 32px); border: 1px solid var(--line);
    border-radius: 12px; background: var(--panel); scroll-margin-top: 80px;
}
.px-form-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-3, 12px); margin-bottom: var(--sp-4, 16px);
}
.px-form-head h2 { font-size: var(--fs-md, 21px); font-weight: 700; color: var(--text); letter-spacing: -.2px; }
.px-form-head .sub { font-size: var(--fs-xs, 16px); color: var(--muted); }
.px-form .field { margin-bottom: var(--sp-3, 12px); }
.px-form .field label { font-size: var(--fs-xs, 16px); color: var(--text-2); }
.px-form-tip {
    margin-top: var(--sp-4, 16px); padding-top: var(--sp-3, 12px);
    border-top: 1px solid var(--line-soft); font-size: var(--fs-xs, 16px);
    color: var(--muted); line-height: var(--lh-loose, 1.8);
}
/* 表单提示里的两个链接原来是 style="color:#58a6ff"，改由类承担 */
.px-form-tip a { color: var(--brand); }
.px-end { height: var(--sp-7, 56px); }

/* --------------------------------------------------------------------------
   7. 断点：只做布局（列数 / sticky 归位），字号交给令牌自己降档
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
    /* 窄屏放弃侧栏：表单退回正文之后，sticky 在手机上会遮挡内容 */
    .ct-doc { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5, 32px); }
    .ct-side { position: static; }
}
@media (max-width: 900px) {
    .px-hero { padding: var(--sp-6, 40px) 0 var(--sp-4, 16px); }
    .px-hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4, 16px); align-items: start; }
    .px-kpis { flex-wrap: wrap; }
    .px-form { padding: var(--sp-4, 16px); }
}
@media (max-width: 600px) {
    .px-form-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ==========================================================================
   v2.5.0 · 关于我们 + 联系我们合并后的下半页
   --------------------------------------------------------------------------
   合并页没有自己的 hero：上面是「关于」的 hero 与正文，这里直接接标题带，
   所以不再重复一遍 .px-hero，只用一条分隔线把两段语义分开。
   ========================================================================== */

.ct-merged {
    border-top: 1px solid var(--line-soft);
    padding-top: 44px;
    scroll-margin-top: 84px;   /* 顶栏是 sticky 的，锚点跳过来别被盖住 */
}
.ct-merged-head { margin-bottom: 26px; max-width: 720px; }
.ct-merged-head h2 {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 700;
    letter-spacing: -.6px;
    margin: 8px 0 10px;
    color: var(--text);
}
.ct-merged-head .px-sub { color: var(--text-2); font-size: 15px; line-height: 1.8; margin: 0; }
.ct-merged-head .px-note { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }

/* 联系区块里的两块并列：正文在左、表单+小程序码在右 */
.ct-merged .ct-doc { margin-top: 26px; }
.ct-side-mp { margin-top: 18px; }
.ct-side-mp .mpqr-card { margin-top: 0; }

@media (max-width: 900px) {
    .ct-merged { padding-top: 32px; }
    .ct-side-mp { margin-top: 14px; }
}

/* ============================================================
   v2.6.0 · 微信二维码（后台「站点信息 → 微信二维码图片」）
   ------------------------------------------------------------
   单独一块、居中放在联系卡片列表下方：二维码是方图，塞进 1/3 宽的
   联系卡里会被压到 120px 以内，手机扫码识别率明显下降。这里给到 180px，
   并在浅色主题下补一圈白底 + 描边 —— 二维码本身是白底方图，
   深色主题直接铺在 --panel 上会缺一条边界，看起来像浮着。
   ============================================================ */
.ct-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}
.ct-qr img {
    display: block;
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.ct-qr span {
    font-size: var(--fs-xs, 16px);
    color: var(--text-2);
    text-align: center;
    line-height: 1.6;
}
@media (max-width: 640px) {
    .ct-qr img { width: 150px; height: 150px; }
}