/* ==========================================================================
   解决方案页（/solutions/smt · dip · assembly）
   只放本页专属样式：页头引言 / 制程节点 / 现场问题对照 / 涉及模块 / 验收口径。
   通用组件（按钮、卡片、区块标题、页内目录）在 site.css，这里不重复定义。
   ========================================================================== */

/* ---------------------------------------------------------- 01 页头 */

.sol-hero {
  position: relative;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(900px 320px at 88% -20%, var(--c-primary-soft), transparent 70%),
    var(--c-bg);
  overflow: hidden;
}
.sol-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: var(--sp-6);
  align-items: center;
}
.sol-hero__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h1);
}
.sol-hero__lead {
  margin: 0;
  max-width: 34em;
  font-size: var(--fs-h4);
  line-height: 1.75;
  color: var(--c-text-2);
}
.sol-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* 右侧引言：不是装饰，是这一段最容易被忽略的判断，值得单独占一栏 */
.sol-quote {
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-bg);
  box-shadow: var(--sh-2);
}
.sol-quote__note {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--c-accent-ink);
}
.sol-quote__text {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.85;
  color: var(--c-ink);
  text-wrap: pretty;
}

/* ------------------------------------------------------ 02 制程段切换 */

.subnav__link--end {
  gap: 4px;
  margin-left: auto;
  color: var(--c-text-3);
}
.subnav__link--end:hover { color: var(--c-primary); }

/* -------------------------------------------------------- 03 制程节点 */

.flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-4);
  padding: 0 0 var(--sp-3);
  border-bottom: 1px solid var(--c-dark-line);
  list-style: none;
}
.flow-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-dark-text-2);
}
.flow-legend__item::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--r-xs);
}
.flow-legend__item b {
  font-weight: 500;
  color: #fff;
}
.flow-legend__item--guard::before { background: var(--c-accent); }
.flow-legend__item--record::before { background: rgba(255, 255, 255, .34); }
.flow-legend__item--judge::before { background: var(--c-dark-info); }

.nodes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.node {
  display: flex;
  flex-direction: column;
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-dark-line);
  border-top: 2px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
}
.node--guard { border-top-color: var(--c-accent); }
.node--judge { border-top-color: var(--c-dark-info); }

.node__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}
.node__no {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  color: var(--c-dark-text-2);
}
.node__state {
  padding: 1px 7px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  line-height: 1.6;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8);
}
.node--guard .node__state { background: rgba(232, 119, 34, .16); color: var(--c-accent); }
.node--judge .node__state { background: rgba(127, 176, 220, .16); color: var(--c-dark-info); }

.node__title {
  margin: 0 0 var(--sp-0);
  font-size: var(--fs-h4);
  color: #fff;
}
.node__note {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-dark-text-2);
}

/* ------------------------------------------------------ 04 现场问题 */

.pain-list {
  display: grid;
  gap: var(--sp-3);
}
.pain {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  /* 裁掉左栏灰底突出的圆角 */
  overflow: hidden;
}
.pain__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
.pain__no {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--c-accent-ink);
}
.pain__title {
  margin: 0;
  font-size: var(--fs-h4);
}

/* 左"现场"右"系统"：同一件事的两面并排，比上下分段更容易对照 */
.pain__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}
.pain__col { padding: var(--sp-3); }
.pain__col--scene { background: var(--c-bg-2); }
.pain__col--fix { border-left: 1px solid var(--c-line); }

.pain__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
}
.pain__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pain__col--scene .pain__tag { color: var(--c-text-3); }
.pain__col--fix .pain__tag { color: var(--c-primary); }

.pain__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.8;
}
.pain__col--scene .pain__text { color: var(--c-text-2); }
.pain__col--fix .pain__text { color: var(--c-text); }

/* ------------------------------------------------------ 05 涉及模块 */

.sol-mods__grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.sol-mods__intro .section-head { margin-bottom: var(--sp-4); }

.sol-peers {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line-2);
}
.sol-peers__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--c-text-3);
}
.sol-peers__list {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sol-peer {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  font-size: var(--fs-sm);
  color: var(--c-text);
  transition: border-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out);
}
.sol-peer:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.sol-peer__icon {
  display: inline-flex;
  color: var(--c-primary);
}
.sol-peer .icon:last-child { margin-left: auto; }

.sol-modlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sol-modlist > li { display: flex; }
.sol-mod {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: inherit;
  transition: border-color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
}
.sol-mod:hover {
  border-color: var(--c-line-2);
  box-shadow: var(--sh-1);
  color: inherit;
}
.sol-mod__icon {
  display: inline-flex;
  flex: none;
  margin-top: 3px;
  color: var(--c-primary);
}
.sol-mod__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sol-mod__body b {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--c-ink);
}
.sol-mod__body em {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-2);
}
.sol-mod__no {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* ------------------------------------------------------ 06 验收口径 */

.accepts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 左侧竖线而不是顶部横线：横线满宽会变成表格行，竖线更像一条条验收点 */
.accept {
  padding: 2px 0 2px var(--sp-3);
  border-left: 2px solid var(--c-primary);
}
.accept__no {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--c-primary);
}
.accept h3 {
  margin: 0 0 var(--sp-0);
  font-size: var(--fs-h4);
}
.accept p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-2);
}

/* ------------------------------------------------------- 07 响应式 */

@media (max-width: 1024px) {
  .sol-hero__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .sol-quote { max-width: 560px; }
  .nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-mods__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .sol-mods__intro .section-head { margin-bottom: var(--sp-3); }
  .sol-peers { max-width: 420px; }
}

@media (max-width: 768px) {
  .sol-hero { padding: var(--sp-5) 0; }
  .sol-hero__lead { font-size: var(--fs-body); }
  .sol-quote__text { font-size: var(--fs-body); }

  /* 四个 tab 加尾部链接在窄屏放不下，去掉右推，允许横向滚动 */
  .subnav__link--end { margin-left: 0; }

  .flow-legend { gap: var(--sp-1) var(--sp-3); }

  /* 窄屏单列：编号与状态标签提到标题同一行，每个节点省一行高度，
     8 个节点合计少约 200px，页面不至于要滚九屏 */
  .nodes { grid-template-columns: 1fr; gap: var(--sp-1); }
  .node {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "no title state"
      "note note note";
    align-items: center;
    gap: var(--sp-0) var(--sp-2);
    padding: var(--sp-2);
  }
  .node__top { display: contents; }
  .node__no { grid-area: no; }
  .node__state { grid-area: state; }
  .node__title { grid-area: title; }
  .node__note { grid-area: note; margin-top: var(--sp-0); }

  .pain__head { padding: var(--sp-2) var(--sp-2) var(--sp-1); }
  .pain__pair { grid-template-columns: 1fr; }
  .pain__col { padding: var(--sp-2); }
  .pain__col--fix { border-left: 0; border-top: 1px solid var(--c-line); }
  .pain__text { font-size: var(--fs-sm); }

  .sol-modlist { grid-template-columns: 1fr; }
  .accepts { grid-template-columns: 1fr; }
}