/* ============================================================
   数方节能 · 接口驱动版补充样式
   仅用于加载/空态/错误态、详情页与联系表单，
   原有视觉全部沿用 /skin/css/*。
   ============================================================ */

/* Banner 支持多张且可点击跳转 */
.hero-slide { display: block; }
a.hero-slide { cursor: pointer; }

/* ---------- 接口骨架 ---------- */
.cms-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  padding: 24px 0;
}
.cms-skeleton__item {
  border: 1px solid var(--line, #e5edf0);
  border-radius: var(--r-m, 16px);
  padding: 16px;
  background: #fff;
  overflow: hidden;
}
.cms-skeleton__item i {
  display: block;
  height: 14px;
  border-radius: 6px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #eef5f2 25%, #f7fbf9 37%, #eef5f2 63%);
  background-size: 400% 100%;
  animation: cms-shimmer 1.4s ease infinite;
}
.cms-skeleton__item i:first-child {
  height: 150px;
  border-radius: 10px;
}
.cms-skeleton__item i:last-child { width: 55%; margin-bottom: 0; }
@keyframes cms-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- 空态 / 错误态 ---------- */
.cms-empty-text {
  padding: 36px 20px;
  text-align: center;
  color: var(--ink3, #8198a4);
  font-size: 15px;
}
.cms-error {
  max-width: 560px;
  margin: 48px auto;
  padding: 34px 30px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line, #e5edf0);
  border-radius: var(--r-l, 22px);
  box-shadow: var(--shadow-m, 0 10px 30px -10px rgba(12, 40, 52, .12));
}
.cms-error__ico {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: #c0392b;
  background: #fdecea;
}
.cms-error h3 { font-size: 19px; margin-bottom: 8px; }
.cms-error p { color: var(--ink2, #3d5665); font-size: 14px; margin-bottom: 20px; }
.cms-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--em, #0f9d6e);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.cms-btn:hover { background: var(--em-d, #0a7d57); }

/* ---------- 通用详情页 ---------- */
.cms-detail {
  max-width: 920px;
  margin: 0 auto;
  padding: 12px 0 70px;
}
.cms-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink3, #8198a4);
  transition: color .2s;
}
.cms-back:hover { color: var(--em, #0f9d6e); }
.cms-back__ico {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transform: rotate(180deg);
}
.cms-detail-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  line-height: 1.32;
  color: var(--ink, #0c1a21);
  margin-bottom: 10px;
}
.cms-detail-summary {
  margin: 22px 0 18px;
  padding: 16px 20px;
  border-left: 3px solid var(--em, #0f9d6e);
  background: var(--mint2, #f2faf6);
  border-radius: 0 12px 12px 0;
  color: var(--ink2, #3d5665);
  font-size: 14.5px;
}
.cms-detail-cover {
  margin: 0 0 26px;
  border-radius: var(--r-m, 16px);
  overflow: hidden;
  background: var(--paper, #f7fbf9);
}
.cms-detail-cover img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}
.cms-detail-content {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ink2, #3d5665);
}
.cms-detail-content p { margin: 0 0 14px; }
.cms-detail-content img {
  height: auto;
  border-radius: 10px;
  margin: 6px 0 14px;
}
.cms-detail-content h2,
.cms-detail-content h3,
.cms-detail-content h4 {
  color: var(--ink, #0c1a21);
  margin: 26px 0 12px;
  line-height: 1.45;
}
.cms-detail-content ul,
.cms-detail-content ol { padding-left: 1.4em; margin: 0 0 16px; }
.cms-detail-content li { margin-bottom: 6px; }
.cms-detail-content table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.cms-detail-content th,
.cms-detail-content td { border: 1px solid var(--line, #e5edf0); padding: 8px 10px; }
.cms-detail-foot { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line, #e5edf0); }

/* ---------- 在线留言 ---------- */
.cms-contact-form {
  margin-top: 34px;
  padding: 28px 30px 26px;
  background: #fff;
  border: 1px solid var(--line, #e5edf0);
  border-radius: var(--r-l, 22px);
  box-shadow: var(--shadow-s, 0 1px 2px rgba(12, 40, 52, .05));
}
.cms-contact-form h3 {
  font-size: 21px;
  font-weight: 900;
  color: var(--ink, #0c1a21);
}
.cms-form-lead {
  margin: 6px 0 22px;
  font-size: 13.5px;
  color: var(--ink3, #8198a4);
}
.cms-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.cms-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2, #3d5665);
}
.cms-form-grid label.is-full { grid-column: 1 / -1; }
.cms-form-grid input,
.cms-form-grid textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line2, #d5e3e6);
  border-radius: 10px;
  background: var(--paper, #f7fbf9);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink, #0c1a21);
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.cms-form-grid input:focus,
.cms-form-grid textarea:focus {
  border-color: var(--em, #0f9d6e);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 157, 110, .12);
}
.cms-form-grid textarea { resize: vertical; min-height: 110px; }
.cms-form-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}
.cms-form-foot .sv-btn { cursor: pointer; border: 0; }
.cms-form-tip { font-size: 13px; color: var(--ink3, #8198a4); }
.cms-form-tip.is-error { color: #c0392b; }
.cms-form-tip.is-ok { color: var(--em-d, #0a7d57); }

/* ---------- 小屏 ---------- */
@media (max-width: 720px) {
  .cms-contact-form { padding: 22px 18px; }
  .cms-form-grid { grid-template-columns: 1fr; }
  .cms-detail { padding-bottom: 48px; }
  .cms-form-foot { flex-direction: column; align-items: flex-start; }
}

/* 未渲染完成的页头占位，避免首屏跳动 */
#site-header:empty { min-height: 78px; }