/* =============================================================================
 * restore-about.css —— Track 3 设计稿还原（独立写集，避免并行冲突）
 *
 * 为什么单独一个文件：
 *   components.css 是所有 page-*.php 共用的。多个还原任务同时改它必然互相覆盖。
 *   所以每个还原单元独占一个 CSS 文件，互不干扰；出问题也能单独回滚。
 *
 * 归属：page-about.php（公司简介页）
 * 约束：本文件只服务该单元自己的模板，不要往里塞全局样式（放 components.css）。
 *
 * 设计基准：.stitch/figma-verify/fig-about.png（1521×6775，8 个 section）
 * 区块目标高度（原生宽度下量测）：
 *   1 hero 765 · 2 band 257 · 3 timeline 1368 · 4 caps 896
 *   5 quality 1050 · 6 materials 669 · 7 team 809 · 8 cta 483
 *
 * 所有类名以 .sv-about- 开头，作用域只在本页，不会外溢到其他模板。
 * ========================================================================== */

/* ---------- 1) 首屏 ---------------------------------------------------------- */

/* 设计稿：pt-16 / pb-24（64 / 96），左文右图 + 悬浮徽标 */
.sv-about-hero{padding:72px 0 128px}
.sv-about-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.sv-about-hero__grid > *{min-width:0}

.sv-about-hero__crumb{padding:0;margin-bottom:18px}

/* eyebrow 前的小圆点，与设计稿一致 */
.sv-about-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sv-about-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sv-clay-500);flex:none}

.sv-about-hero__h1{margin:0 0 32px;font-size:clamp(2.2rem,3.9vw,3.6rem);line-height:1.08}
.sv-about-hero__lead{margin-bottom:16px;font-size:1.0625rem;max-width:52ch}
.sv-about-hero__body{margin-top:20px}
.sv-about-hero__body > *:last-child{margin-bottom:0}

/* 首屏要点行：上方细分隔线，图标 + 文案 */
.sv-about-marks{list-style:none;display:flex;flex-wrap:wrap;gap:14px 26px;margin:48px 0 0;padding:32px 0 0;border-top:1px solid var(--sv-line)}
.sv-about-marks li{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;color:var(--sv-ink-600)}
.sv-about-marks__dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--sv-forest-500);flex:none;position:relative}
.sv-about-marks__dot::after{content:"";position:absolute;left:4px;top:3px;width:5px;height:8px;border-right:1.5px solid var(--sv-forest-500);border-bottom:1.5px solid var(--sv-forest-500);transform:rotate(40deg)}

/* 图片卡 + 右下悬浮徽标 */
.sv-about-hero__media{position:relative}
.sv-about-shot{position:relative;border-radius:var(--sv-r-img);overflow:hidden;border:1px solid var(--sv-line);background:var(--sv-sand-200);box-shadow:var(--sv-shadow-md)}
.sv-about-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,38,30,.3),transparent 55%);pointer-events:none}
.sv-about-shot__img{width:100%;height:auto;aspect-ratio:16/12;object-fit:cover;display:block}
.sv-about-shot .sv-prod__ph{display:block;width:100%;aspect-ratio:16/12}

.sv-about-badge{position:absolute;left:24px;bottom:-24px;display:flex;align-items:center;gap:12px;
  background:var(--sv-white);border:1px solid var(--sv-line);border-radius:12px;padding:14px 20px;
  box-shadow:var(--sv-shadow-md);max-width:min(360px,88%)}
.sv-about-badge__icon{width:40px;height:40px;border-radius:50%;background:var(--sv-sand-200);
  color:var(--sv-forest-700);display:grid;place-items:center;font-size:1rem;font-weight:700;flex:none}
.sv-about-badge__body{display:grid;gap:2px;min-width:0}
.sv-about-badge__body b{font-family:var(--sv-font-mono);font-size:.8125rem;color:var(--sv-ink-900);letter-spacing:.01em}
.sv-about-badge__body span{font-size:.75rem;color:var(--sv-ink-400);line-height:1.45}

/* ---------- 2) 关键数据带（深色 5 列） ---------------------------------------- */
.sv-about-band{background:var(--sv-forest-900);color:var(--sv-white);padding:72px 0;
  border-block:1px solid rgba(255,255,255,.12)}
.sv-about-band__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.sv-about-band__cell{display:flex;flex-direction:column;gap:20px;padding-inline:24px;border-left:1px solid rgba(255,255,255,.14)}
.sv-about-band__cell:first-child{padding-left:0;border-left:0}
.sv-about-band__cell:last-child{padding-right:0}
.sv-about-band__cell b{display:block;font-size:clamp(2rem,3.2vw,3rem);font-weight:600;line-height:1.06;
  color:var(--sv-white);letter-spacing:-.01em}
.sv-about-band__cell span{font-size:.875rem;color:rgba(255,255,255,.72);max-width:22ch;line-height:1.6}

/* ---------- 3) 时间线（中轴 + 左右交错） -------------------------------------- */
.sv-section.sv-about-story{padding:112px 0}
.sv-about-head{max-width:52rem;margin-bottom:64px}
.sv-about-head h2{margin:12px 0 0}
.sv-about-head p{margin-top:12px;max-width:56ch}
.sv-about-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;max-width:none;margin-bottom:64px}
.sv-about-head--row p{margin:0;max-width:34ch;flex:0 1 auto}
.sv-about-head--center{text-align:center;margin-inline:auto;max-width:40rem;margin-bottom:64px}
.sv-about-head--center p{margin-inline:auto}

.sv-about-timeline{list-style:none;position:relative;margin:0 auto;padding:0;max-width:64rem;
  display:grid;gap:64px}
/* 中轴细线 */
.sv-about-timeline::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:1px;
  background:var(--sv-line);transform:translateX(-50%)}
.sv-about-timeline__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.sv-about-timeline__card{border:1px solid var(--sv-line);background:var(--sv-white);border-radius:var(--sv-r-card);
  padding:28px 32px;box-shadow:var(--sv-shadow-sm)}
.sv-about-timeline__item.is-left .sv-about-timeline__card{grid-column:1;margin-right:48px;text-align:right}
.sv-about-timeline__item.is-right .sv-about-timeline__card{grid-column:2;margin-left:48px}
.sv-about-timeline__num{display:inline-block;font-size:.8125rem;font-weight:600;color:var(--sv-forest-700);
  background:var(--sv-sand-200);border-radius:6px;padding:3px 9px;margin-bottom:10px}
.sv-about-timeline__card h3{margin:0 0 8px;font-size:1.125rem}
.sv-about-timeline__card p{margin:0;font-size:.875rem;color:var(--sv-ink-600)}
/* 节点圆点压在中轴上 */
.sv-about-timeline__dot{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;
  background:var(--sv-forest-700);border:4px solid var(--sv-sand-100);transform:translate(-50%,-50%);z-index:1}

/* ---------- 4) 在制能力（6 张卡 / 3 列） -------------------------------------- */
.sv-section.sv-about-caps{padding:112px 0;background:var(--sv-sand-200);
  border-block:1px solid var(--sv-line)}
.sv-about-caps__grid{gap:28px}
.sv-about-cap{padding:36px 30px;display:flex;flex-direction:column}
.sv-about-cap__icon{width:48px;height:48px;border-radius:12px;background:var(--sv-sand-200);
  margin-bottom:20px;position:relative;flex:none}
.sv-about-cap__icon::before{content:"";position:absolute;inset:15px;border:2px solid var(--sv-forest-700);border-radius:3px}
.sv-about-cap h3{margin-bottom:10px}
.sv-about-cap p{margin:0;font-size:.9375rem}
/* 卡底规格脚注：复刻设计稿的「border-top + 一行 mono 规格」。
   margin-top:auto 让不同高度的卡在同一行里脚注贴底对齐。 */
.sv-about-cap__spec{display:block;margin-top:auto;padding-top:14px;border-top:1px solid var(--sv-line);
  font-family:var(--sv-font-mono);font-size:.6875rem;line-height:1.5;color:var(--sv-ink-400);
  letter-spacing:.01em}

/* ---------- 5) 质量体系（左闸口 + 右认证墙） ---------------------------------- */
.sv-section.sv-about-quality{padding:112px 0}
.sv-about-quality__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch}
.sv-about-quality__grid > *{min-width:0}
.sv-about-quality__left h2{margin:12px 0 0}
.sv-about-quality__lead{margin:16px 0 32px;max-width:46ch}

/* 闸口密度按设计稿口径（p-4 = 16px 内边距、space-y-4 = 16px 间距）。
   2026-09-22：原实现 56/30 内边距 + 24px 间距，在「3 道闸口」时靠稀疏撑满高度，
   补足到设计稿的 6 道后必须回到设计稿密度，否则桌面会反向超标。 */
.sv-about-gates{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.sv-about-gate{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;background:var(--sv-white);
  border:1px solid var(--sv-line);border-radius:var(--sv-r-card)}
.sv-about-gate__num{flex:none;font-size:.8125rem;font-weight:600;color:var(--sv-forest-700);
  background:var(--sv-sand-200);border-radius:6px;padding:4px 9px;line-height:1.4}
.sv-about-gate__body{display:grid;gap:6px;min-width:0}
.sv-about-gate__title{font-size:1.0625rem;line-height:1.34}
.sv-about-gate__text{font-size:.9375rem;line-height:1.68}
.sv-about-gate__title{display:block;font-family:var(--sv-font-display);font-weight:600;
  color:var(--sv-ink-900);margin:0}
.sv-about-gate__text{display:block;color:var(--sv-ink-600)}

.sv-about-certs{display:flex;flex-direction:column;background:var(--sv-white);border:1px solid var(--sv-line);
  border-radius:var(--sv-r-img);padding:48px;box-shadow:var(--sv-shadow-sm)}
.sv-about-certs h3{margin:12px 0 36px;font-size:1.35rem}
.sv-about-certs__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* 6 块认证（2026-09-22）：设计稿在窄屏仍保持 2 列；≤420px 才落单列，
   否则每块矮到 80px 以下、与设计稿的 113~129px 密度差得更远。 */
.sv-about-cert{display:grid;gap:12px;padding:36px 26px;border:1px solid var(--sv-line);border-radius:12px;
  background:var(--sv-sand-100)}
.sv-about-cert__name{font-size:.8125rem;font-weight:600;color:var(--sv-forest-700)}
.sv-about-cert__text{font-size:.9375rem;color:var(--sv-ink-600);line-height:1.55}
.sv-about-certs__strip{margin-top:auto;padding-top:48px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.sv-about-certs__strip span{font-size:.875rem;color:var(--sv-ink-600);max-width:46ch}
.sv-about-certs__strip a{font-size:.8125rem;font-weight:600;color:var(--sv-clay-500);white-space:nowrap}
.sv-about-certs__strip a:hover{color:var(--sv-clay-600)}

/* ---------- 6) 工厂与材料（左图 + 右 3 点） ----------------------------------- */
.sv-section.sv-about-materials{padding:112px 0;background:var(--sv-sand-200);
  border-block:1px solid var(--sv-line)}
.sv-about-materials__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center}
.sv-about-materials__grid > *{min-width:0}
.sv-about-materials__copy h2{margin:12px 0 0}
.sv-about-materials__copy > p{margin:16px 0 32px;max-width:50ch}
.sv-about-feats{display:grid;gap:24px}
.sv-about-feat{display:flex;align-items:flex-start;gap:14px}
.sv-about-feat__icon{width:22px;height:22px;border-radius:50%;background:var(--sv-forest-500);flex:none;margin-top:3px;position:relative}
.sv-about-feat__icon::after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;
  border-right:2px solid var(--sv-white);border-bottom:2px solid var(--sv-white);transform:rotate(40deg)}
.sv-about-feat h4{font-family:var(--sv-font-display);font-size:1rem;font-weight:600;margin:0 0 4px;color:var(--sv-ink-900)}
.sv-about-feat p{margin:0;font-size:.875rem;line-height:1.6}

/* ---------- 7) 团队（3 张职能卡） -------------------------------------------- */
.sv-section.sv-about-team{padding:112px 0}
.sv-about-team__grid{gap:32px}
.sv-about-member{padding:40px 32px;display:flex;flex-direction:column}
.sv-about-member__avatar{width:64px;height:64px;border-radius:50%;background:var(--sv-sand-200);
  border:1px solid var(--sv-line);margin-bottom:28px;flex:none;position:relative}
.sv-about-member__avatar::after{content:"";position:absolute;inset:22px 18px;border-radius:50% 50% 44% 44%;
  background:var(--sv-moss-300);opacity:.75}
.sv-about-member h3{margin:0 0 10px;font-size:1.25rem}
.sv-about-member p{margin:0;font-size:.875rem;line-height:1.65}
.sv-about-member__foot{display:block;margin-top:28px;padding-top:20px;border-top:1px solid var(--sv-line);
  font-family:var(--sv-font-mono);font-size:.75rem;color:var(--sv-forest-700)}
.sv-about-member__foot:hover{color:var(--sv-clay-500)}

/* ---------- 8) 结尾 CTA（深色圆角面板） -------------------------------------- */
.sv-about-cta{padding:0 0 112px}
.sv-about-cta__panel{background:var(--sv-forest-900);color:var(--sv-white);border-radius:var(--sv-r-img);
  padding:32px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;
  position:relative;overflow:hidden}
.sv-about-cta__panel::after{content:"";position:absolute;right:-80px;bottom:-120px;width:340px;height:340px;
  border-radius:50%;background:rgba(143,169,143,.14);pointer-events:none}
.sv-about-cta__copy{position:relative;z-index:1}
.sv-about-cta__copy h2{margin:12px 0 20px;color:var(--sv-white)}
.sv-about-cta__copy p{color:rgba(255,255,255,.76);margin:0;max-width:52ch}
.sv-about-cta__p2{margin-top:16px!important}
.sv-about-cta__addr{align-items:flex-start}
.sv-about-cta__pin{flex:none;line-height:1.6}
.sv-about-cta__addr-body{display:grid;gap:6px;min-width:0}
.sv-about-cta .sv-eyebrow{color:var(--sv-moss-300)}
.sv-about-cta__addr{display:inline-flex;align-items:flex-start;gap:8px;margin-top:24px;
  font-family:var(--sv-font-mono);font-size:.8125rem;line-height:1.6;color:rgba(255,255,255,.66)}
.sv-about-cta__actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;justify-self:end;width:100%;max-width:320px}
.sv-about-cta__actions .sv-btn{width:100%}

/* ---------- 响应式 -----------------------------------------------------------
 * 2026-09-22 移动端还原（Track 3）。
 *
 * 桌面 1521px 已经 8/8 区块达标（-5.1%），所以这里**只在 ≤1100px 生效**，
 * ≥1200px 的规则一行都不动。
 *
 * 依据：把 page-about.php 用 WP 函数桩渲染成 HTML，再加载真实的
 * tokens/theme/components/i18n + 本文件，在 Edge 里实测；基准是
 * .stitch/verify/_ref/about-*.html（与 fig-about.png 0.00% 偏差）。
 * 实测设计稿 vs 修复前线上（单区块高度）：
 *   390px  capabilities 2444 vs 1815（-25.7%）
 *          quality     2566 vs 1795（-30.1%）
 *          cta          681 vs  510（-25.1%）
 *   834px  capabilities 1393 vs 1105（-20.7%）
 * 修法 = 补内容（见 inc/config.php 新增键）+ 对齐设计稿的移动端密度，
 * 不用 min-height 硬撑。
 * ------------------------------------------------------------------------- */

@media(max-width:1100px){
  .sv-about-band__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .sv-about-band__cell{border-left:0;padding-inline:0}
  .sv-about-quality__grid,.sv-about-materials__grid{grid-template-columns:1fr;gap:40px}
}
/* CTA 面板：设计稿 grid-cols-1 lg:grid-cols-12 —— lg 以下单列、lg 起两列；
   内边距 p-8（32px）→ md:p-14（56px）。 */
@media(max-width:1023px){
  .sv-about-cta__panel{grid-template-columns:1fr;gap:32px}
  .sv-about-cta__actions{justify-self:start}
}
@media(min-width:768px){
  .sv-about-cta__panel{padding:56px}
}

/* 能力网格断点严格照设计稿的 md:grid-cols-2 lg:grid-cols-3（md=768, lg=1024）。
   原实现只在 640px 落单列，768~1023px 一直是 3 列，比设计稿少一行。 */
@media(min-width:768px) and (max-width:1023px){
  .sv-about-caps__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* CTA 按钮：设计稿 flex-col → sm:flex-row（≥640）→ lg:flex-col（≥1024）。 */
@media(min-width:640px) and (max-width:1023px){
  .sv-about-cta__actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;width:100%;max-width:none}
  .sv-about-cta__actions .sv-btn{flex:1 1 220px}
}
@media(max-width:900px){
  .sv-about-hero{padding:40px 0 72px}
  .sv-about-hero__grid{grid-template-columns:1fr;gap:56px}
  .sv-about-badge{position:static;margin-top:16px;max-width:none}
  .sv-about-timeline::before{left:8px}
  .sv-about-timeline__item{grid-template-columns:1fr}
  .sv-about-timeline__item.is-left .sv-about-timeline__card,
  .sv-about-timeline__item.is-right .sv-about-timeline__card{grid-column:1;margin:0 0 0 36px;text-align:left}
  .sv-about-timeline__dot{left:8px;top:36px}
  .sv-section.sv-about-story,.sv-section.sv-about-caps,.sv-section.sv-about-quality,
  .sv-section.sv-about-materials,.sv-section.sv-about-team{padding:80px 0}
  .sv-about-head--row{flex-direction:column;align-items:flex-start}

  .sv-about-caps__grid{gap:24px}
  .sv-about-cap__icon{width:48px;height:48px;margin-bottom:20px}
  .sv-about-cap h3{font-size:1.1875rem;line-height:1.28;margin-bottom:12px}
  .sv-about-cap p{font-size:1rem;line-height:1.72;margin-bottom:18px}
  .sv-about-cap__spec{padding-top:16px;font-size:.75rem;line-height:1.62}

  /* ---- 质量体系：设计稿 6 闸口每块 80~96px、间距 16px；认证区 32px 内边距。
     原实现闸口 56/30 内边距 + 24px 间距，在单列下比设计稿稀疏。 */
  .sv-about-gates{gap:16px}
  .sv-about-gate{padding:20px 22px;gap:14px}
  .sv-about-gate__body{gap:8px}
  .sv-about-gate__title{font-size:1.0625rem;line-height:1.34}
  .sv-about-gate__text{font-size:.9375rem;line-height:1.68}
  .sv-about-certs{padding:32px}
  .sv-about-certs h3{margin:12px 0 28px}
  .sv-about-certs__strip{padding-top:28px;margin-top:28px}

  /* ---- CTA：按钮 50px 高、间距 16px（设计稿 h-[50px] + gap-4）。 ---- */
  .sv-about-cta{padding-bottom:72px}
  .sv-about-cta__copy h2{margin:12px 0 18px}
  .sv-about-cta__copy p{font-size:1.0625rem;line-height:1.7}
  .sv-about-cta__addr{margin-top:24px;font-size:.875rem;line-height:1.7}
  .sv-about-cta__actions{width:100%;max-width:none;gap:16px}
  .sv-about-cta__actions .sv-btn{min-height:50px}
}
/* 单列（<768，设计稿 md 以下）：能力卡按设计稿的 28px 内边距 + 更大的正文行距。
   原实现 36/30 内边距在单列下让卡比设计稿薄 ~100px，6 张卡就是 -29%。 */
@media(max-width:767px){
  .sv-about-cap{padding:28px}
  .sv-about-cap__icon{width:48px;height:48px;margin-bottom:20px}
  .sv-about-cap h3{font-size:1.1875rem;line-height:1.28;margin-bottom:12px}
  .sv-about-cap p{font-size:1rem;line-height:1.72;margin-bottom:18px}
  .sv-about-cap__spec{padding-top:16px;font-size:.75rem;line-height:1.62}
  .sv-about-gate{padding:20px 22px}
  .sv-about-gate__title{font-size:1.0625rem;line-height:1.34}
  .sv-about-gate__text{font-size:.9375rem;line-height:1.68}
  .sv-about-certs{padding:32px}
  .sv-about-certs h3{margin:12px 0 28px}
  .sv-about-certs__strip{padding-top:28px;margin-top:28px}
}
@media(max-width:639px){
  .sv-about-cta__actions{flex-direction:column}
  .sv-about-band{padding:64px 0}
  .sv-about-band__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .sv-about-band__cell b{font-size:2.25rem}
  .sv-about-band__cell span{font-size:.9375rem}
  .sv-about-certs{padding:28px 24px}
  .sv-about-certs__grid{gap:14px}
  .sv-about-cert{padding:26px 20px;gap:10px}
  .sv-about-cert__text{font-size:.875rem;line-height:1.6}
  .sv-section.sv-about-story,.sv-section.sv-about-caps,.sv-section.sv-about-quality,
  .sv-section.sv-about-materials,.sv-section.sv-about-team{padding:80px 0}
  .sv-about-hero{padding:48px 0 96px}
}
/* 认证墙断点照设计稿的 sm:grid-cols-2（sm=640）：<640 单列，≥640 两列。 */
@media(max-width:639px){
  .sv-about-certs__grid{grid-template-columns:1fr}
}