/* ==========================================================================
   如意约 · 服务品类总览页
   设计语言对齐 guides.css / faq.css，通用列表与卡片样式复用 page-sections.css。
   ========================================================================== */

/* ---------- 品类快速导航（放在页面底部，方便回跳） ---------- */
.services-nav {
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 16px;
  padding: 20px 22px;
}

.services-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.services-nav a {
  display: inline-block;
  font-size: 0.83rem;
  color: #5a6c7d;
  text-decoration: none;
  background: #f4f7fa;
  border: 1px solid #e8ecf1;
  border-radius: 20px;
  padding: 5px 13px;
  line-height: 1.4;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.services-nav a:hover {
  background: rgba(180, 239, 78, 0.18);
  border-color: rgba(180, 239, 78, 0.6);
  color: #1a1a2e;
}

/* ---------- 大类分组 ---------- */
.services-group {
  margin-bottom: 0;
  scroll-margin-top: 1.5rem;
}

.services-group + .services-group {
  margin-top: 3.25rem;
}

/* 原实现只给了 h2 默认浏览器样式（无字号/无间距），
   导致标题与描述挤在一起。这里补齐并建立与内页一致的层级。 */
.services-group > h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 1.25rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--color-brand, #B4EF4E);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.services-group-desc {
  font-size: 0.85rem;
  color: #8c8c9e;
  margin: 0 0 1.25rem;
  padding-left: calc(4px + 0.75rem);
  line-height: 1.7;
}

/* ---------- 品类卡片 ---------- */
.services-cat {
  padding: 20px 22px;
}

.services-cat h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 14px;
}

.services-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6ba32a;
  background: rgba(180, 239, 78, 0.2);
  border-radius: 20px;
  padding: 3px 11px;
  line-height: 1.4;
}

.services-soon-label {
  font-size: 0.76rem;
  color: #a0aab5;
  margin: 14px 0 7px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .services-group + .services-group { margin-top: 2.5rem; }
  .services-group > h2 { font-size: 1.05rem; }
  .services-cat { padding: 17px 18px; }
  .services-cat h3 { font-size: 0.95rem; gap: 8px; }
  .services-nav { padding: 16px 18px; }
  .services-nav a { font-size: 0.78rem; padding: 4px 11px; }
}

@media (max-width: 480px) {
  .services-group + .services-group { margin-top: 2rem; }
  .services-cat { padding: 15px 15px; }
  .services-cat h3 { font-size: 0.9rem; }
  .services-count { font-size: 0.7rem; padding: 2px 9px; }
}