/* ============================================================
   changjian-wenti.css — 常见问题页
   骨架：窄首屏 + 高频三问卡 + 左侧分类锚点 + 右侧 details 问答流
   ============================================================ */

/* ---------- 模块1：Hero ---------- */
.cjwt-hero { padding: 128px 0 56px; text-align: center; }
.cjwt-hero-inner h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.28; margin: 18px 0 14px; }
.cjwt-hero-inner h1 em { font-style: normal; color: var(--denim-600); }
.cjwt-hero-inner p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.9; }
.cjwt-hero-inner a { font-weight: 600; }

/* ---------- 模块2：高频三问 ---------- */
.cjwt-top-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cjwt-top-card {
  display: block; background: var(--paper-100); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 26px 24px;
  border-top: 4px solid var(--denim-600);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.cjwt-top-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cjwt-top-q {
  font-family: var(--font-serif); font-weight: 900; font-size: 14px;
  color: var(--rust); letter-spacing: 1px;
}
.cjwt-top-card h3 { font-size: 17px; margin: 10px 0 8px; }
.cjwt-top-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; }

/* ---------- 模块3：检索式问答区 ---------- */
.cjwt-area-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: start;
}
.cjwt-side { position: sticky; top: 96px; }
.cjwt-side nav {
  background: var(--paper-200); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px 14px;
}
.cjwt-side h4 {
  font-size: 13px; letter-spacing: 2px; color: var(--brown-700);
  padding: 6px 12px 12px; border-bottom: 1px dashed var(--line); margin-bottom: 8px;
}
.cjwt-side nav a {
  display: block; padding: 10px 12px; font-size: 14.5px;
  color: var(--ink-soft); border-radius: 6px;
  transition: background .2s, color .2s, padding-left .2s;
}
.cjwt-side nav a:hover { background: var(--denim-100); color: var(--denim-800); padding-left: 16px; }

.cjwt-cat { margin-bottom: 40px; }
.cjwt-cat h2 {
  font-size: 19px; padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 3px double var(--line);
}
.cjwt-item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-100); margin-bottom: 10px; overflow: hidden;
}
.cjwt-item summary {
  cursor: pointer; list-style: none;
  padding: 14px 18px; font-size: 15px; font-weight: 600; color: var(--denim-900);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.cjwt-item summary::-webkit-details-marker { display: none; }
.cjwt-item summary::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--brown-600); border-bottom: 2px solid var(--brown-600);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.cjwt-item[open] summary::after { transform: rotate(225deg); }
.cjwt-item[open] summary { background: var(--paper-200); }
.cjwt-item-body { padding: 4px 18px 16px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.9; }
.cjwt-item-body a { font-weight: 600; }

/* ---------- 模块4：收尾 CTA ---------- */
.cjwt-end-inner { text-align: center; max-width: 680px; margin: 0 auto; }
.cjwt-end-inner h2 { color: var(--paper-100); font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 12px; }
.cjwt-end-inner p { color: rgba(250,246,238,.85); margin-bottom: 22px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .cjwt-top-grid { grid-template-columns: 1fr; }
  .cjwt-area-grid { grid-template-columns: 1fr; }
  .cjwt-side { position: static; }
  .cjwt-side nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .cjwt-side h4 { width: 100%; border-bottom: 0; padding-bottom: 4px; }
}
@media (max-width: 640px) {
  .cjwt-hero { padding: 110px 0 44px; }
}

/* ---------- 模块5：按人群找答案 ---------- */
.cjwt-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cjwt-group-card {
  background: var(--paper-100); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 26px 24px;
  border-top: 4px double var(--denim-500);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.cjwt-group-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cjwt-group-card h3 { font-size: 17px; margin-bottom: 8px; }
.cjwt-group-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.9; }
.cjwt-group-card a { font-weight: 600; }

/* ---------- 模块6：流程指引条 ---------- */
.cjwt-route-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px; padding: 22px 10px;
}
.cjwt-route-line a {
  padding: 10px 22px; border-radius: 30px;
  background: var(--denim-700); color: var(--paper-100);
  font-size: 14px; font-weight: 600; letter-spacing: 1px;
  transition: transform .25s var(--ease), background .25s;
}
.cjwt-route-line a:hover { background: var(--brown-800); color: var(--stitch); transform: translateY(-2px); }
.cjwt-route-sep { color: var(--brown-400); font-weight: 700; }
.cjwt-route-note { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- 模块7：怎么问更快 ---------- */
.cjwt-howto-title { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 20px; }
.cjwt-howto-list { list-style: none; counter-reset: qstep; }
.cjwt-howto-list li {
  counter-increment: qstep; position: relative;
  padding: 12px 0 12px 48px; font-size: 15px;
  border-bottom: 1px dashed var(--line);
}
.cjwt-howto-list li::before {
  content: "0" counter(qstep);
  position: absolute; left: 0; top: 12px;
  font-family: var(--font-serif); font-weight: 900; color: var(--rust);
}
.cjwt-howto-list b { color: var(--denim-800); }
.cjwt-howto-note { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }

@media (max-width: 1080px) {
  .cjwt-group-grid { grid-template-columns: 1fr; }
}