/* ============================================================
   WDELE — About Us 专题页样式(仅 /about 用;base.html head block 按需加载)
   供应商验厂初审台(Supplier Due Diligence Hub)。
   站内公共件由 base.css 提供(.wrap/.sec/.sec-tint/.sec-head/.eyebrow/.sect/
   .sect-sub, .btn*, .rv 等),色 token 由 tokens.css 提供,本文件只写本页私有
   (about- 前缀 / .bcrumb)样式。断点节奏与 base.css 一致:1100 / 760。
   ============================================================ */

/* ---------- 01 · Hero(深底;唯一 h1 含 WDELE;右列厂区全景) ---------- */
.about-hero{
  background:radial-gradient(1100px 520px at 86% -14%,rgba(216,44,5,.22),transparent 60%),var(--dark);
  color:#fff;padding:54px 0 66px;border-bottom:1px solid rgba(255,255,255,.08);
}
.about-hero .wrap{max-width:1240px}
.about-hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:52px;align-items:center}
.about-hero-copy .eyebrow{color:#ff8a70;margin-bottom:16px}
.about-hero-copy .eyebrow::before{background:#ff8a70}
.about-hero-copy h1{color:#fff;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.02em;line-height:1.12;max-width:820px;margin:0}
.about-lede{color:#aeb7c7;font-size:clamp(15px,1.22vw,16.5px);line-height:1.72;max-width:760px;margin:18px 0 0}
.ah-note{
  margin-top:22px;max-width:720px;display:flex;gap:13px;align-items:flex-start;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  border-left:3px solid #ff8a70;border-radius:10px;padding:15px 17px;
}
.ah-note svg{flex:none;color:#ff8a70;margin-top:2px}
.ah-note .an-b{min-width:0}
.ah-note .an-l{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ff8a70;margin-bottom:5px}
.ah-note .an-t{display:block;font-size:13.5px;line-height:1.6;color:#cdd6e2}
.about-hero .about-cta-row{margin-top:28px}
.about-hero-media{position:relative}
.about-hero-media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:16px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.38);
}

/* ---------- 02 · WDELE at a Glance(结构化验厂口径表格) ---------- */
.about-glance-panel{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.about-glance-row{
  display:grid;grid-template-columns:225px 1fr;gap:24px;align-items:baseline;
  padding:17px 22px;
}
.about-glance-row+.about-glance-row{border-top:1px solid var(--line)}
.about-glance-row:nth-child(odd){background:#fcfcfd}
.ag-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);line-height:1.5}
.ag-cell{min-width:0}
.ag-value{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.45}
.ag-sub{display:block;font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.55}

/* ---------- 03 · Why WDELE / 四采购保障 ---------- */
.about-pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.about-pillar{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 20px;
  display:flex;flex-direction:column;position:relative;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.about-pillar::before{
  content:"";position:absolute;left:20px;right:20px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--red),var(--red-2));
}
.about-pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d9dee7}
.ap-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 14px}
.ap-num{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--red);line-height:1;font-variant-numeric:tabular-nums}
.ap-tag{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#ad2204;
  background:var(--red-soft);border:1px solid #f2c9bd;border-radius:999px;padding:5px 10px;line-height:1;
  white-space:nowrap;
}
.about-pillar h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.35;margin:0 0 9px}
.about-pillar p{font-size:13.5px;line-height:1.6;color:#475467;margin:0}

/* ---------- 04 · 制造流程 6 步链(图实一一对应;图来自 #02 库) ---------- */
.about-proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.about-proc{
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.about-proc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d9dee7}
.about-proc .ap-media{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line)}
.about-proc .ap-media img{width:100%;height:100%;object-fit:cover;display:block}
.about-proc .ap-body{padding:18px 19px 20px;display:flex;flex-direction:column;flex:1}
.ap-stage{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:9px}
.about-proc h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.about-proc p{font-size:13.5px;line-height:1.6;color:#475467;margin:0}

/* ---------- 05 · 品质验证 3 卡(自有实验室用例表述) ---------- */
.about-quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.about-quality{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 22px;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.aq-head{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.aq-ico{
  flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--red-soft);color:var(--red);border:1px solid #f2c9bd;
}
.about-quality h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.35;margin:0}
.about-quality p{font-size:13.5px;line-height:1.62;color:#475467;margin:0}

/* ---------- 06 · 证书分类陈列(6 证;缩略图 + 文案标签 + 整包请求) ---------- */
.about-cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.about-cert{
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(16,24,40,.03);
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.about-cert:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d9dee7}
.about-cert .c-img{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:#fff;padding:16px;border-bottom:1px solid var(--line);
}
.about-cert .c-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.about-cert .c-body{padding:13px 15px 15px;margin-top:auto}
.c-badge{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ad2204;background:var(--red-soft);border-radius:5px;padding:4px 8px;margin-bottom:9px;line-height:1}
.about-cert h3{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4;margin:0;color:var(--ink)}
.about-cert-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:30px}

/* ---------- 07 · 三级行动 CTA(目的地:产品区 /#products · OEM/ODM · audit 弹窗) ---------- */
.about-cta3{background:var(--dark);color:#fff;padding:92px 0}
.about-cta3 h2{color:#fff;font-size:clamp(26px,3.2vw,42px)}
.about-cta3 .sect-sub{color:#aeb7c7;margin:16px auto 0;max-width:720px}
.about-cta3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;margin-top:44px}
.acta3-card{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:26px 24px;display:flex;flex-direction:column;
}
.acta3-card.is-accent{background:linear-gradient(180deg,rgba(216,44,5,.22),rgba(216,44,5,.05));border-color:rgba(255,138,112,.4)}
.a3-kick{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ff8a70}
.acta3-card h3{color:#fff;font-size:19px;font-weight:800;letter-spacing:-.01em;margin:10px 0 8px}
.acta3-card p{font-size:13.5px;line-height:1.6;color:#aeb7c7;margin:0 0 22px}
.a3-link{margin-top:auto}
.a3-link .btn{width:100%;white-space:normal}

/* ---------- responsive(对齐 base.css:1100 / 760) ---------- */
@media (max-width:1100px){
  .about-hero-grid{grid-template-columns:1fr;gap:34px}
  .about-hero-media img{aspect-ratio:16/8}
  .about-pillar-grid,.about-quality-grid{grid-template-columns:repeat(2,1fr)}
  .about-proc-grid,.about-cert-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .about-hero{padding:36px 0 50px}
  .about-glance-row{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  .about-pillar-grid,.about-proc-grid,.about-quality-grid,.about-cert-grid{grid-template-columns:1fr}
  .about-cta3{padding:66px 0}
  .about-cta3-grid{grid-template-columns:1fr}
  .ah-note{padding:13px 14px}
}