/* ============================================================
   星悦医疗 · 产品中心（products.css）
   产品线总览 / 医疗版 / 生理数据无感监测系统 / 指标与技术 / 售后 / 流程
   ============================================================ */

/* ---- 发丝线网格列数（本页单独使用） ---- */
.hair-grid--2{grid-template-columns:repeat(2,1fr)}
.hair-grid--3{grid-template-columns:repeat(3,1fr)}
.hair-grid--4{grid-template-columns:repeat(4,1fr)}

/* ---------------- 图片卡网格（4 格：3 款硬件 + 1 套系统） ---------------- */
.img-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
}
.img-card{
  background:var(--surface);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:background .3s ease;
}
.img-card:hover{background:#FBFDFE}
.img-card .media{min-height:0;aspect-ratio:4/3;flex:0 0 auto}
/* 产品 03 / 04 同排，统一 19:10：截图按 4:3 会裁掉界面两侧，床垫图据此重裁以对齐行高 */
.img-card--wide .media{aspect-ratio:19/10;background:var(--surface-alt)}
.img-card .img-body{
  padding:clamp(18px,1.9vw,26px) clamp(16px,1.7vw,24px) clamp(20px,2.1vw,28px);
  display:flex;flex-direction:column;flex:1;
}
.img-card .img-idx{
  font-size:11px;font-weight:700;letter-spacing:.24em;
  color:var(--primary);margin-bottom:11px;
}
.img-card h3{font-size:16px;letter-spacing:.03em;margin-bottom:9px;transition:color .3s ease}
.img-card:hover h3{color:var(--primary)}
.img-card p{font-size:13.5px;line-height:1.8;color:#5A6B73}
/* 卡片内需要被看见的单个能力（视觉检测）：浅底高亮，不抢标题 */
.img-card .hl{
  font-style:normal;font-weight:700;color:var(--primary);
  background:var(--primary-tint);border:1px solid rgba(14,90,110,.16);
  border-radius:3px;padding:1px 6px;margin-left:2px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* 卡内文字链统一贴底，卡片等高时基线对齐 */
.img-card .link-arrow{margin-top:auto;padding-top:16px}

/* ---- 产品卡内「功能 / 特点」两行 ----
   只给清单与一句要点，不铺长段落；标签与正文左右并排，窄屏转为上下 */
.card-spec{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:13px;
}
.spec-row{display:flex;gap:11px;align-items:flex-start}
.spec-key{
  flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--primary);line-height:1.85;white-space:nowrap;
}
.spec-row p{flex:1;font-size:13px;line-height:1.85;color:#5A6B73;margin:0}
.spec-row p .en{font-size:11.5px;line-height:1.65;color:#93A2A8;margin-top:3px}

/* ---------------- 产品线总览 ---------------- */
.lines-lead{max-width:900px;margin-bottom:clamp(34px,4vw,56px)}
.lines-lead p{font-size:var(--fs-body);line-height:2.02;color:#55666E}
.lines-lead p + p{margin-top:14px}

.lines-grid > article{display:flex;flex-direction:column}
.line-card{padding:clamp(28px,3.2vw,44px) clamp(24px,2.6vw,36px);transition:background .3s ease}
.line-card:hover{background:#FBFDFE}
.line-idx{font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--primary);margin-bottom:20px}
.line-card h3{font-size:var(--fs-card);letter-spacing:.03em;margin-bottom:14px}
.line-card p{font-size:14px;line-height:1.95;color:#5A6B73}
.line-card p.line-use{margin-top:8px;font-size:13px;color:var(--text-muted)}
.line-card .link-arrow{margin-top:auto;padding-top:24px}

.custom{margin-top:clamp(40px,4.8vw,64px);border-top:1px solid var(--border);padding-top:clamp(26px,3vw,38px)}
.custom-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.custom-head .eyebrow{letter-spacing:.24em}
.custom-head p{font-size:var(--fs-small);color:var(--text-muted)}
.custom-media{margin-top:24px}

/* 该图为 831px 宽的实拍，铺满通栏会被放大 1.4 倍而发虚；
   限制到 880px 内使其接近原生像素，同时减少画面的空高 */
.prod-shot{margin-top:clamp(30px,3.6vw,52px);max-width:880px;margin-inline:auto}
/* 通栏一张图 + 下面两格文字 */
.custom-grid{margin-top:22px}
.custom-item{padding:clamp(22px,2.6vw,32px) clamp(22px,2.4vw,30px)}
.custom-item h3{font-size:14.5px;letter-spacing:.05em;margin-bottom:10px}
.custom-item p{font-size:13.5px;color:#5A6B73;line-height:1.85}

/* ---- 配套系统横条 ---- */
.system-band{
  margin-top:clamp(40px,4.8vw,64px);padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--border);
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,48px);flex-wrap:wrap;
}
.system-band .eyebrow{display:block;margin-bottom:16px;letter-spacing:.24em}
.system-band h3{font-size:var(--fs-card);letter-spacing:.03em;margin-bottom:12px}
.system-band p{font-size:14px;line-height:1.95;color:#5A6B73;max-width:820px}
.system-band .link-arrow{margin-bottom:4px}
@media (max-width:768px){.system-band .link-arrow{margin-bottom:0}}

/* ---------------- 产品详情（医疗版） ---------------- */
.pdetail{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:stretch}
.pdetail .media{aspect-ratio:4/3;min-height:0}
.pdetail--rev .media{order:2}
.pdetail-text{display:flex;flex-direction:column;justify-content:center}
.pdetail-idx{font-size:12px;font-weight:600;letter-spacing:.24em;color:var(--primary);margin-bottom:16px}
.pdetail-text h3{font-size:var(--fs-h3);letter-spacing:.03em;margin-bottom:16px}
.pdetail-text .lead{font-size:var(--fs-lead);font-weight:600;color:var(--ink);line-height:1.75;margin-bottom:18px}
/* 无图版式：医疗版详情改为文字通栏 */
.pdetail--text-only{grid-template-columns:1fr}
.pdetail--text-only .pdetail-text{max-width:960px}

.tick-list li{
  position:relative;padding:9px 0 9px 20px;font-size:14.5px;line-height:1.88;color:#55666E;
  border-bottom:1px dashed var(--line-soft);
}
.tick-list li:last-child{border-bottom:0}
.tick-list li::before{content:"";position:absolute;left:0;top:19px;width:7px;height:1px;background:var(--primary)}
.tick-list li strong{color:var(--ink);font-weight:600}

.sub-grid{margin-top:clamp(40px,5vw,66px)}
.sub-item{padding:clamp(24px,2.8vw,36px) clamp(22px,2.4vw,32px);transition:background .3s ease}
.sub-item:hover{background:#FBFDFE}
.sub-item h3{font-size:14.5px;letter-spacing:.06em;color:var(--primary);margin-bottom:16px}
.sub-item p{font-size:14px;line-height:1.95;color:#5A6B73}
.sub-item li{
  position:relative;padding:8px 0 8px 18px;font-size:14px;line-height:1.88;color:#5A6B73;
  border-bottom:1px dashed var(--line-soft);
}
.sub-item li:last-child{border-bottom:0;padding-bottom:0}
.sub-item li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:1px;background:var(--primary)}

/* ---------------- 生理数据无感监测系统 ---------------- */
.platform-board{display:block}
.platform-board--solo .spec-stack{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
.spec-stack{
  display:grid;grid-template-rows:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
}
.spec-cell{background:var(--surface);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;justify-content:center}
.spec-cell b{
  display:flex;align-items:baseline;gap:6px;line-height:1;letter-spacing:.02em;
  font-size:clamp(24px,2.8vw,36px);font-weight:700;color:var(--primary);
}
.spec-cell b em{font-style:normal;font-size:.42em;font-weight:600;letter-spacing:.04em}
.spec-cell span{display:block;margin-top:12px;font-size:13px;color:var(--text-muted);line-height:1.7}
.platform-board + .sub-grid{margin-top:clamp(34px,4.2vw,54px)}

/* ---------------- 监测指标与技术特点 ---------------- */
.metric-split{display:grid;grid-template-columns:1fr 1.18fr;gap:var(--gap-lg);align-items:start}
.metric-col h3{
  font-size:var(--fs-card);letter-spacing:.04em;margin-bottom:22px;
  display:flex;align-items:baseline;gap:12px;
}
.metric-col h3 em{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.22em;color:var(--text-muted)}
.metric-list li{
  position:relative;padding:14px 0 14px 22px;font-size:14.5px;line-height:1.88;color:#55666E;
  border-bottom:1px solid var(--border);
}
.metric-list li:last-child{border-bottom:0}
.metric-list li::before{content:"";position:absolute;left:0;top:24px;width:8px;height:1px;background:var(--primary)}
/* 指标口径说明：把血压/血氧/疲劳类结果标注为评估参考值，避免被理解为诊断结论 */
.metric-note{
  margin-top:clamp(24px,2.8vw,36px);padding:16px 20px;
  border-left:3px solid var(--primary);background:var(--primary-tint);
  font-size:13.5px;line-height:1.95;color:#55666E;
}
.metric-list li strong{color:var(--ink);font-weight:600}

/* 极端环境实证 */
.extreme{
  position:relative;overflow:hidden;padding:clamp(76px,9vw,128px) 0;color:#fff;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 76px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 76px),
    linear-gradient(148deg,var(--primary-ink) 0%,#0B4E60 56%,var(--primary) 100%);
}
.extreme::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,55,68,.22),rgba(10,68,83,.4))}
.extreme-inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.extreme-inner .eyebrow{color:rgba(255,255,255,.72);display:block;margin-bottom:20px;letter-spacing:.3em}
.extreme-inner h2{color:#fff;font-size:clamp(22px,2.6vw,34px);letter-spacing:.03em;max-width:760px}
.extreme-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2);
  margin-top:clamp(36px,4.4vw,56px);
}
.extreme-cell{background:rgba(255,255,255,.04);padding:clamp(24px,2.8vw,38px)}
.extreme-cell b{
  display:flex;align-items:baseline;gap:5px;line-height:1.05;letter-spacing:.03em;
  font-size:clamp(22px,2.6vw,32px);font-weight:700;color:#fff;
}
.extreme-cell b em{font-style:normal;font-size:.42em;font-weight:600;margin-left:4px}
.extreme-cell span{display:block;margin-top:14px;font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.78)}

/* ---------------- 配套与售后 ---------------- */
.support-item{padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,32px);transition:background .3s ease}
.support-item:hover{background:#FBFDFE}
.support-item h4{font-size:14.5px;letter-spacing:.06em;color:var(--primary);margin-bottom:16px}
.support-item p{font-size:14px;line-height:1.92;color:#5A6B73}
.support-item li{
  position:relative;padding:8px 0 8px 18px;font-size:14px;line-height:1.88;color:#5A6B73;
  border-bottom:1px dashed var(--line-soft);
}
.support-item li:last-child{border-bottom:0;padding-bottom:0}
.support-item li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:1px;background:var(--primary)}

/* ---------------- 选型与部署流程 ---------------- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.flow-step{background:var(--surface);padding:clamp(26px,3vw,40px) clamp(20px,2.2vw,28px);transition:background .3s ease}
.flow-step:hover{background:#FBFDFE}
.flow-num{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--primary);margin-bottom:22px}
.flow-step h4{font-size:15px;letter-spacing:.04em;margin-bottom:12px}
.flow-step p{font-size:13.5px;line-height:1.88;color:#5A6B73}
.flow-note{margin-top:22px;font-size:13px;color:var(--text-muted)}

/* ---------------- 视觉检测（单独成块强调） ---------------- */
.vision-band{
  display:flex;gap:clamp(16px,2vw,26px);align-items:flex-start;
  margin-top:clamp(26px,3vw,38px);
  padding:clamp(24px,2.8vw,34px) clamp(22px,2.6vw,34px);
  background:var(--primary-tint);
  border:1px solid rgba(14,90,110,.14);
  border-left:3px solid var(--primary);
  border-radius:var(--radius);
}
/* 视觉检测图标卡：已裁掉原图的蓝色底，只留白色圆角卡，避免在高亮块里显突兀 */
.vision-thumb{
  display:block;flex:0 0 auto;width:clamp(72px,7vw,96px);height:auto;
  border-radius:calc(var(--radius) + 2px);
}
.vision-body .eyebrow{display:block;margin-bottom:10px;letter-spacing:.22em;color:var(--primary)}
.vision-body h3{font-size:var(--fs-card);letter-spacing:.03em;margin-bottom:10px}
.vision-body p{font-size:14px;line-height:1.9;color:#4E5F67;max-width:820px}

/* ---------------- 响应式 ---------------- */
@media (max-width:1024px){
  .hair-grid--3,.hair-grid--4{grid-template-columns:repeat(2,1fr)}
  .pdetail,.platform-board,.metric-split{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
  .pdetail--rev .media{order:0}
  .platform-board .media{aspect-ratio:16/9}
  .spec-stack{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
  .extreme-grid{grid-template-columns:1fr;gap:1px}
  .flow{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .hair-grid--2,.hair-grid--3,.hair-grid--4{grid-template-columns:1fr}
  .img-grid{grid-template-columns:1fr}
  .spec-row{flex-direction:column;gap:3px}
  .spec-key{line-height:1.6}
  .spec-stack{grid-template-columns:1fr}
  .vision-band{flex-direction:column}
  .vision-thumb{width:100%;max-width:320px}
  .flow{grid-template-columns:1fr}
  .lines-lead p{font-size:14.5px}
}
@media (prefers-reduced-motion: reduce){
  .line-card,.sub-item,.support-item,.flow-step{transition:none!important}
}