/* 九清国内站 · 关于我们 /about/
   ⚠️ 铁律：本文件是这一页 CSS 的唯一副本。不要在页面正文、页脚 widget 或 Customizer 再放一份。
      版本号由 joeqing-about.php 用 filemtime 生成，改完即时生效，不吃缓存。

   ── 规格来源：tesla.cn/about 实测（1440 视口，2026-08-28）──
     H1   40px / 500 / 行高 48 / #fff   居中压在首屏大图上
     H2   28px / 500 / 行高 36 / #171A20 居中
     骨架 首屏大图 + 居中标题 + 底部三个数字 → 一句主张 + 一段话 → 通栏大图与短句交替 → CTA
   ⚠️ 和产品详情页**不是一套值**：product.css 里 H1 是 56、H2 是 48。
      两页都对齐特斯拉，但特斯拉自己 /model3 和 /about 就用了两套。别互相抄。
   ⚠️ 特斯拉全站标题都是 500 字重，不是粗体。做联系页时用 700 被打回两次，别再犯。
*/

.jqa{color:#393C41;font-size:16px;line-height:1.75}
.jqa *{box-sizing:border-box}

/* Astra 在正文上方留的两段间距，首屏大图必须紧贴页头 —— 和产品页同因同治。
   （空的 .entry-header.ast-no-title 那条已在 footer.css 全站处理） */
.jqa-page .site-content .content-area{margin-top:0!important;margin-bottom:0!important}

/* 通栏：正文被 --jq-shell 限宽，通栏块要铺满整屏 */
.jqa-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* 居中窄内容列。tesla 正文最宽约 1040 */
.jqa-mid{width:100%;max-width:1040px;margin-inline:auto;padding-inline:var(--jq-gutter,28px);text-align:center}
/* 卡片区要宽一些，跟全站容器同宽 */
.jqa-wide{max-width:var(--jq-shell,1344px)}

/* ── 首屏 ────────────────────────────────────────────────────────────
   高度用 85svh，和产品页同一个实测结论（tesla 首屏 = 85% 视口高，不铺满）。
   svh 不用 vh：手机上 vh 把地址栏算进去，滚动时高度会跳。 */
.jqa-hero{
  position:relative;overflow:hidden;background:#171a20;
  height:clamp(420px,85svh,900px);
  display:flex;align-items:center;justify-content:center;
}
.jqa-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
/* 暗角：车间照普遍偏亮，白字要压得住。比产品页稍重一点。 */
.jqa-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.52) 0%,rgba(0,0,0,.24) 45%,rgba(0,0,0,.62) 100%);
}
.jqa-hero-in{position:relative;z-index:2;text-align:center;padding-inline:var(--jq-gutter,28px)}
.jqa-h1{
  font-size:clamp(28px,2.8vw,40px);line-height:1.2;font-weight:500;color:#fff;
  margin:0 0 10px!important;letter-spacing:-.01em;
}
.jqa-hero-sub{margin:0!important;font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:rgba(255,255,255,.9)}

/* 首屏底部三个数字（tesla /about 就是这么放的） */
.jqa-stats{
  position:absolute;left:0;right:0;bottom:clamp(24px,4vh,56px);z-index:2;
  display:flex;justify-content:center;gap:clamp(32px,8vw,120px);
  padding-inline:var(--jq-gutter,28px);
}
.jqa-stat{text-align:center;min-width:0}
.jqa-stat-n{margin:0 0 4px!important;font-size:clamp(20px,2vw,28px);font-weight:500;line-height:1.2;color:#fff}
.jqa-stat-l{margin:0!important;font-size:clamp(12px,1.1vw,14px);line-height:1.4;color:rgba(255,255,255,.78)}

/* ── 通用区块 ──────────────────────────────────────────────────────── */
.jqa-sec{padding:clamp(56px,7vw,104px) 0}
.jqa-grey{background:#f4f4f4}
.jqa-h2{
  font-size:clamp(22px,2.2vw,28px);line-height:1.28;font-weight:500;color:#171a20;
  margin:0 0 14px!important;letter-spacing:-.01em;
}
.jqa-lead{margin:0 auto!important;max-width:56ch;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:#5C5E62}
.jqa-lead strong{color:#171a20;font-weight:500}

/* 通栏大图。比例跟着素材走（1672×941 ≈ 16:9），高度不写死免得裁掉车间信息 */
.jqa-shot{margin-top:0;margin-bottom:0}
.jqa-shot img{width:100%;height:auto;display:block}

/* ── 四列图卡 ─────────────────────────────────────────────────────── */
.jqa-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);
  margin-top:clamp(36px,4vw,56px);text-align:left;
}
.jqa-card{min-width:0}
.jqa-card-media{aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#f4f4f4;margin-bottom:14px}
.jqa-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.jqa-card-t{margin:0 0 6px!important;font-size:17px;font-weight:500;line-height:1.4;color:#171a20}
.jqa-card-d{margin:0!important;font-size:14px;line-height:1.7;color:#5C5E62}

/* ── 图文两栏（生产基地）───────────────────────────────────────────── */
.jqa-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(36px,4vw,56px);text-align:left;
}
.jqa-split-media{border-radius:8px;overflow:hidden;background:#f4f4f4}
.jqa-split-media img{width:100%;height:auto;display:block}
.jqa-split-tx{min-width:0}
/* 小标签：和联系页同一档（14/500），不放大 */
.jqa-k{margin:22px 0 6px!important;font-size:14px;font-weight:500;line-height:20px;color:#171a20}
.jqa-p{margin:0!important;font-size:15px;line-height:1.75;color:#5C5E62}

/* ── 交付流程四步 ─────────────────────────────────────────────────── */
.jqa-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);
  margin-top:clamp(36px,4vw,56px);text-align:left;
}
.jqa-step{min-width:0}
.jqa-step-media{aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#f4f4f4;margin-bottom:14px}
.jqa-step-media img{width:100%;height:100%;object-fit:cover;display:block}
.jqa-step-n{
  margin:0 0 6px!important;font-size:13px;font-weight:500;line-height:1;color:#fff;
  width:22px;height:22px;border-radius:50%;background:#171a20;
  display:flex;align-items:center;justify-content:center;
}

/* ── 归属清单 ─────────────────────────────────────────────────────── */
.jqa-list{margin:clamp(32px,4vw,48px) auto 0!important;padding:0!important;list-style:none;max-width:820px;text-align:left}
.jqa-list li{padding:18px 0;border-top:1px solid #e3e5e8;font-size:15px;line-height:1.75;color:#5C5E62}
.jqa-list li:first-child{border-top:0;padding-top:0}
.jqa-list b{display:block;font-size:16px;font-weight:500;color:#171a20;margin-bottom:4px}

/* ── 按钮（和产品页同一套：200×40 / 圆角4 / 14px·500）──────────────── */
.jqa-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:28px 0 0!important}
.jqa-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:200px;height:40px;padding:0 24px;border:0;border-radius:4px;
  font-size:14px;font-weight:500;line-height:1;text-decoration:none!important;
  transition:background-color .2s ease,color .2s ease;
}
.jqa-btn-primary{background:#3E6AE1;color:#fff!important}
.jqa-btn-primary:hover{background:#3457b8;color:#fff!important}
.jqa-btn-ghost{background:#f4f4f4;color:#171a20!important}
.jqa-btn-ghost:hover{background:#e8e8e8;color:#171a20!important}
.jqa-cta{background:#fff;padding:clamp(56px,7vw,104px) 0;text-align:center}

/* ── 手机 ─────────────────────────────────────────────────────────────
   站长的流量几乎全在手机，这段是主版本不是适配版。 */
@media(max-width:900px){
  .jqa-hero{height:clamp(420px,78svh,620px)}
  .jqa-stats{gap:20px;bottom:20px}
  .jqa-sec{padding:48px 0}
  /* 四列在手机上必然挤成一条竖线，直接两列；步骤保持两列才看得出顺序 */
  .jqa-cards,.jqa-steps{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
  .jqa-split{grid-template-columns:1fr;gap:24px;margin-top:28px}
  .jqa-split-media{order:-1}
  .jqa-cta{padding:48px 0}
}
@media(max-width:560px){
  .jqa-cards{grid-template-columns:1fr}
  .jqa-stats{gap:14px}
}

@media(prefers-reduced-motion:reduce){
  .jqa-btn{transition:none}
}