/* ============================================================
   业务详情页样式（配色沿用 styles.css 的 CSS 变量）
   ============================================================ */

/* ---------- Hero ---------- */
.sd-hero { background: var(--bg-alt); padding: 22px 0 46px; }
.sd-crumb { font-size: 12.5px; color: var(--muted); margin-bottom: 22px; }
.sd-crumb a { color: var(--muted); text-decoration: none; }
.sd-crumb a:hover { color: var(--primary); }
.sd-crumb span { margin: 0 8px; color: #cbd5e1; }
.sd-crumb strong { color: var(--primary); font-weight: 700; }

.sd-hero-inner { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.sd-hero-l h1 { font-size: clamp(23px, 3.4vw, 32px); color: var(--ink); margin: 0 0 10px; line-height: 1.35; }
.sd-sub { font-size: 15px; color: var(--primary-dark); margin: 0 0 16px; font-weight: 700; }
.sd-intro { font-size: 14.5px; color: var(--body); line-height: 1.85; margin: 0 0 22px; }
.sd-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.sd-pricecard {
  background: #fff; border: 1px solid #cfe0f7; border-radius: 10px;
  padding: 24px 22px; box-shadow: var(--shadow); text-align: center;
}
.sd-pc-l { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.sd-pc-n { display: block; font-size: 30px; color: var(--accent); font-weight: 700; line-height: 1.2; }
.sd-pc-c { display: block; font-size: 13px; color: var(--body); margin-top: 10px; }
.sd-pc-x {
  display: block; font-size: 11.5px; color: var(--muted); margin-top: 12px;
  background: var(--bg-alt); border-radius: 4px; padding: 8px 10px; line-height: 1.6; text-align: left;
}
.sd-pc-btn {
  display: block; margin: 14px 0 8px; padding: 11px 16px; border-radius: var(--radius);
  background: var(--primary); color: #fff; font-size: 14.5px; text-decoration: none;
}
.sd-pc-btn:hover { background: var(--primary-dark); }
.sd-pc-note { font-size: 11.5px; color: #0d8a5f; }

/* ---------- 通用区块 ---------- */
.sd-sec { padding: 46px 0; }
.sd-sec-alt { background: var(--bg-alt); }
.sd-lead {
  font-size: 14px; color: var(--body); line-height: 1.85;
  max-width: 900px; margin: 0 0 22px;
}
.sd-note {
  font-size: 13px; color: var(--muted); margin-top: 18px;
  padding: 11px 15px; background: var(--primary-light);
  border-left: 3px solid var(--primary); border-radius: 0 6px 6px 0;
}

/* ---------- 办理流程 ---------- */
.sd-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sd-flow li {
  display: flex; gap: 13px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
}
.sd-flow-n {
  flex: none; width: 30px; height: 30px; border-radius: 6px;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sd-flow li h3 { margin: 0 0 4px; font-size: 15px; color: var(--ink); }
.sd-flow li p { margin: 0; font-size: 13px; color: var(--body); line-height: 1.7; }

/* ---------- 材料清单 ---------- */
.sd-mats { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
.sd-mats li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--body); line-height: 1.6; }
.sd-mat-ck {
  flex: none; width: 15px; height: 15px; margin-top: 3px;
  border: 1.5px solid var(--primary); border-radius: 3px; position: relative;
}
.sd-mat-ck::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid var(--primary);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.sd-dl {
  background: #fff; border: 1px dashed var(--primary); border-radius: 8px;
  padding: 22px 24px; text-align: center;
}
.sd-dl-t { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.sd-dl p { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }

/* ---------- 设备 / 场地 / 系统要求 ---------- */
.sd-eqs li { align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.sd-eqs li strong { font-weight: 600; color: var(--ink); }
.sd-eqs li em {
  display: block; width: 100%; font-size: 12px; color: var(--muted); font-style: normal;
}
.sd-eq-req, .sd-eq-opt {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: auto;
}
.sd-eq-req { background: #fee2e2; color: #b91c1c; }
.sd-eq-opt { background: #e0f2fe; color: #0369a1; }

/* ---------- 州市 ---------- */
.sd-cities { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.sd-city {
  padding: 6px 14px; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; font-size: 13px; color: var(--body);
}

/* ---------- 常见问题 ---------- */
.sd-faq {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 10px; overflow: hidden;
}
.sd-faq summary {
  padding: 15px 20px; cursor: pointer; font-size: 15px;
  font-weight: 700; color: var(--ink); list-style: none;
}
.sd-faq summary::-webkit-details-marker { display: none; }
.sd-faq summary::before { content: "Q  "; color: var(--primary); }
.sd-faq summary::after {
  content: "+"; float: right; color: var(--muted); font-weight: 400; font-size: 18px;
}
.sd-faq[open] summary::after { content: "−"; }
.sd-faq p {
  margin: 0; padding: 0 20px 17px 42px;
  font-size: 14px; color: var(--body); line-height: 1.85;
}

/* ---------- 相关服务 ---------- */
.sd-rel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px; }
.sd-rel-item {
  display: flex; flex-direction: column; gap: 5px;
  padding: 18px; background: #fff; text-decoration: none;
  border: 1px solid var(--border); border-radius: 8px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sd-rel-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--primary); }
.sd-rel-i { font-size: 22px; }
.sd-rel-item strong { font-size: 14.5px; color: var(--ink); }
.sd-rel-item span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.sd-cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  border-radius: 10px; padding: 26px 30px; color: #fff;
}
.sd-cta-band strong { display: block; font-size: 17px; margin-bottom: 4px; }
.sd-cta-band span { font-size: 13.5px; opacity: .9; }
.sd-cta-band .btn { background: #fff; color: var(--primary); flex: none; }
.sd-cta-band .btn:hover { background: var(--primary-light); }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .sd-hero-inner { grid-template-columns: 1fr; gap: 26px; }
  .sd-pricecard { max-width: 340px; }
  .sd-flow { grid-template-columns: repeat(2, 1fr); }
  .sd-mats { grid-template-columns: repeat(2, 1fr); }
  .sd-rel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sd-hero { padding: 16px 0 32px; }
  .sd-sec { padding: 32px 0; }
  .sd-flow, .sd-mats { grid-template-columns: 1fr; }
  .sd-rel { grid-template-columns: 1fr; }
  .sd-cta-band { padding: 20px; text-align: center; }
  .sd-cta-band .btn { width: 100%; }
  .sd-hero-cta .btn { width: 100%; }
}