/* ============================================================
   星悦医疗 · 应用场景（solutions.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)}

/* ---- 待补充提醒 ---- */
.tbd{
  font-style:normal;font-size:12.5px;color:#9AA8AE;letter-spacing:.04em;
  border-bottom:1px dashed var(--line);
}

/* ---------------- 页头：全幅大图 + 场景横条 ---------------- */
.sol-hero{min-height:clamp(520px,72vh,720px);display:flex;flex-direction:column;justify-content:flex-end}
.sol-hero > img{opacity:.46}
.sol-hero::after{background:linear-gradient(180deg,rgba(9,55,68,.5),rgba(9,55,68,.8) 52%,rgba(10,68,83,.94))}
.sol-hero .page-hero-inner{padding:clamp(96px,12vw,152px) 0 clamp(34px,4.2vw,54px)}
.sol-hero .eyebrow{display:block;color:rgba(255,255,255,.72);letter-spacing:.3em;margin-bottom:18px}
.sol-hero h1{max-width:15em}
.sol-hero p{max-width:740px;line-height:1.9}

.scene-bar{
  position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.18);
  background:rgba(6,38,48,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.scene-bar-inner{
  max-width:var(--container);margin:0 auto;padding:0 var(--pad-x);
  display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;
}
.scene-bar a{
  display:flex;flex-direction:column;gap:7px;padding:20px 24px;text-decoration:none;
  border-right:1px solid rgba(255,255,255,.14);
  transition:color .22s ease,background .22s ease;
}
.scene-bar a:first-of-type{padding-left:0}
.scene-bar a:last-of-type{border-right:0}
.scene-bar a:hover{background:rgba(255,255,255,.05)}
.scene-bar b{font-size:14px;font-weight:600;letter-spacing:.05em;color:rgba(255,255,255,.9);transition:color .22s ease}
.scene-bar em{font-style:normal;font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.02em;line-height:1.6}
.scene-bar a:hover b{color:#fff}

/* ---------------- 场景总览 ---------------- */
.overview-lead{max-width:900px;margin-bottom:clamp(34px,4vw,56px)}
.overview-lead p{font-size:var(--fs-body);line-height:2;color:#55666E}

.scene-cards{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
}
.scene-card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;
  background:var(--surface);padding:clamp(28px,3.2vw,46px) clamp(24px,2.8vw,40px);
  transition:background .3s ease;
}
.scene-card:hover{background:#FBFDFE}
.scene-cap{position:static;padding:0;display:flex;flex-direction:column;flex:1}
.scene-cap > span{font-size:11.5px;font-weight:600;letter-spacing:.24em;color:var(--primary)}
.scene-cap h3{color:var(--ink);font-size:var(--fs-card);letter-spacing:.04em;margin:14px 0 12px;transition:color .3s ease}
.scene-card:hover .scene-cap h3{color:var(--primary)}
.scene-cap p{color:#5A6B73;font-size:14px;line-height:1.85;max-width:34em;margin-bottom:20px}
.scene-cap .link-arrow{color:var(--primary);margin-top:auto}
.scene-cap .link-arrow svg{width:15px;height:15px}

/* 小标题（区块内次级） */
.sub-head{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin:clamp(46px,5.4vw,74px) 0 22px;padding-bottom:14px;border-bottom:1px solid var(--border);
}
.sub-head h3{font-size:var(--fs-card);letter-spacing:.04em}
.sub-head p{font-size:var(--fs-small);color:var(--text-muted)}

/* 共性能力 */
.cap-item{padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px);transition:background .3s ease}
.cap-item:hover{background:#FBFDFE}
.cap-item h4{font-size:14.5px;letter-spacing:.05em;margin-bottom:10px}
.cap-item p{font-size:13.5px;color:#5A6B73;line-height:1.85}

/* 选型参考维度 */
.pick{margin-top:clamp(46px,5.4vw,74px);border:1px solid var(--border);background:var(--surface)}
.pick-head{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:clamp(22px,2.6vw,30px) clamp(22px,2.4vw,32px);
  border-bottom:1px solid var(--border);background:var(--primary-tint);
}
.pick-head h3{font-size:var(--fs-card);letter-spacing:.04em}
.pick-head p{font-size:var(--fs-small);color:#4A5D66}
.pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.pick-item{background:var(--surface);padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,30px)}
.pick-item b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--primary);margin-bottom:14px}
.pick-item p{font-size:14px;color:#5A6B73;line-height:1.88}

/* ---------------- 场景区块头 ---------------- */
.scene-head{padding-bottom:24px;margin-bottom:clamp(34px,4vw,54px);border-bottom:1px solid var(--border)}
.scene-idx{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--primary);margin-bottom:16px}
.scene-idx::before{content:"";width:26px;height:1px;background:var(--primary)}
.scene-head h2{font-size:var(--fs-h2);margin-bottom:14px}
.scene-head h2:last-child{margin-bottom:0}
.scene-head > p{color:var(--text-muted);max-width:760px;font-size:var(--fs-body)}
.scene-tags{margin-top:16px!important;font-size:12.5px;letter-spacing:.06em;color:var(--text-muted)!important}
.scene-tags b{color:var(--primary);font-weight:600;letter-spacing:.14em;margin-right:12px}

/* ---------------- 场景内图文块 ---------------- */
.scene-block{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:center}
.scene-block--solo{grid-template-columns:1fr}
.scene-block + .scene-block{margin-top:clamp(44px,5vw,74px)}
.scene-block .media{aspect-ratio:4/3;min-height:0}
.scene-block--rev .media{order:2}

/* 图文场景块：场景照片在本页各场景中呈现，首页场景区改用文字目录 */
.scene-text{max-width:920px}
.scene-text h3{font-size:var(--fs-h3);letter-spacing:.03em;margin-bottom:14px}
.scene-lead{font-size:var(--fs-lead);font-weight:600;color:var(--ink);line-height:1.75;margin-bottom:0}

/* ---------------- 监测指标（发丝线四格 + 图标） ---------------- */
.metric-block{margin-top:clamp(44px,5vw,74px)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.metric-cell{background:var(--surface);padding:clamp(24px,2.8vw,36px) clamp(20px,2.4vw,30px);transition:background .3s ease}
.metric-cell:hover{background:#FBFDFE}
.metric-cell svg{width:26px;height:26px;color:var(--primary);margin-bottom:20px}
.metric-cell h4{font-size:14.5px;letter-spacing:.05em;margin-bottom:10px}
.metric-cell p{font-size:13.5px;color:#5A6B73;line-height:1.85}

/* ---------------- 价值带（四格） ---------------- */
.value-band{margin-top:clamp(44px,5vw,74px);border-top:1px solid var(--border);padding-top:clamp(26px,3vw,38px)}
.value-band > h3{font-size:var(--fs-card);letter-spacing:.04em;margin-bottom:22px}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.value-cell{background:var(--surface);padding:clamp(24px,2.8vw,36px) clamp(20px,2.4vw,30px)}
.value-cell b{display:block;width:26px;height:2px;background:var(--primary);margin-bottom:22px}
.value-cell h4{font-size:14.5px;letter-spacing:.04em;margin-bottom:10px}
.value-cell p{font-size:13.5px;color:#5A6B73;line-height:1.88}

/* ---------------- 价值 + 大图同屏 ---------------- */
.scene-value{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:center;margin-top:clamp(44px,5vw,74px)}
.scene-value--solo{grid-template-columns:1fr}
.value-list{max-width:920px}
.scene-value .media{aspect-ratio:4/3;min-height:0}
.value-list h3{font-size:var(--fs-h3);letter-spacing:.03em;margin-bottom:18px}
.value-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);
}
.value-list li:last-child{border-bottom:0}
.value-list li::before{content:"";position:absolute;left:0;top:24px;width:8px;height:1px;background:var(--primary)}
.value-list li strong{color:var(--ink);font-weight:600}

/* ---------------- 适用人群（编号四格） ---------------- */
.person-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.person-cell{background:var(--surface);padding:clamp(24px,2.8vw,36px) clamp(20px,2.4vw,30px);transition:background .3s ease}
.person-cell:hover{background:#FBFDFE}
.person-cell b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--primary);margin-bottom:18px}
.person-cell h4{font-size:14.5px;letter-spacing:.04em;margin-bottom:10px}
.person-cell p{font-size:13.5px;color:#5A6B73;line-height:1.85}

/* ---------------- 两栏对读 ---------------- */
.two-col{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);
  margin-top:clamp(44px,5vw,74px);
}
.two-col .col{background:var(--surface);padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,32px)}
.col h3{font-size:var(--fs-card);letter-spacing:.04em;margin-bottom:18px;display:flex;align-items:baseline;gap:12px}
.col h3 em{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.22em;color:var(--text-muted)}
.col li{
  position:relative;padding:9px 0 9px 18px;font-size:14px;line-height:1.88;color:#5A6B73;
  border-bottom:1px dashed var(--line-soft);
}
.col li:last-child{border-bottom:0;padding-bottom:0}
.col li::before{content:"";position:absolute;left:0;top:18px;width:6px;height:1px;background:var(--primary)}

/* ---------------- 部署与服务流程 ---------------- */
.step-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.step{background:var(--surface);padding:clamp(26px,3vw,40px) clamp(20px,2.2vw,28px);transition:background .3s ease}
.step:hover{background:#FBFDFE}
.step svg{width:22px;height:22px;color:var(--primary);margin-bottom:20px}
.step b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--primary);margin-bottom:14px}
.step h4{font-size:15px;letter-spacing:.04em;margin-bottom:10px}
.step p{font-size:13.5px;color:#5A6B73;line-height:1.88}

/* ---------------- 响应式 ---------------- */
@media (max-width:1024px){
  .hair-grid--3,.hair-grid--4{grid-template-columns:repeat(2,1fr)}
  .metric-grid,.value-grid,.person-grid,.pick-grid,.step-flow{grid-template-columns:repeat(2,1fr)}
  .scene-bar-inner{grid-template-columns:repeat(2,1fr);padding-left:0;padding-right:0}
  .scene-bar a{border-right:0;border-bottom:1px solid rgba(255,255,255,.14);padding:16px 20px}
  .scene-bar a:first-of-type{padding-left:20px}
  .scene-block,.scene-value{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .scene-block--rev .media{order:0}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hair-grid--2,.hair-grid--3,.hair-grid--4{grid-template-columns:1fr}
  .metric-grid,.value-grid,.person-grid,.pick-grid,.step-flow{grid-template-columns:1fr}
  .scene-cards{grid-template-columns:1fr}
  .scene-bar-inner{grid-template-columns:1fr}
  .scene-bar a{padding:14px 20px}
  .sol-hero{min-height:auto}
  .scene-cap p{font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  .scene-card,.scene-cap h3{transition:none}
}