/* ============================================================
   yikeyichi.com · kaoshi-fudao.html 专属样式
   布局原型：L5 三角 clip-path Hero + 阶梯递进卡片
   ============================================================ */

/* ---------- Hero：三角分割 ---------- */
.hero{
  position:relative; min-height:76vh; display:flex; align-items:center;
  padding:calc(var(--header-h) + 50px) 0 100px; overflow:hidden; background:var(--green-950);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero__tri{
  position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(27,42,33,.96) 30%,rgba(34,57,46,.7) 55%,rgba(34,57,46,.15) 100%);
  clip-path:polygon(0 0,72% 0,46% 100%,0 100%);
}
.hero__content{ position:relative; z-index:2; max-width:640px; }
.hero__content .breadcrumb{ margin-bottom:20px; }
.hero__content .breadcrumb a{ color:rgba(251,248,241,.6); }
.hero__content .breadcrumb .cur{ color:var(--cream-100); }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:13px; letter-spacing:.4em; color:var(--brown-500); margin-bottom:16px;
}
.hero__eyebrow::before{ content:""; width:42px; height:1px; background:var(--brown-500); }
.hero h1{ color:var(--cream-50); font-size:clamp(34px,5.4vw,60px); line-height:1.25; margin-bottom:20px; }
.hero__lead{ color:rgba(251,248,241,.82); font-size:16px; line-height:2.05; max-width:540px; margin-bottom:32px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- 三模块：阶梯递进 ---------- */
.modules{ background:var(--cream-50); }
.md-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start;
}
.md-card{
  background:var(--cream-100); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:30px 26px; transition:all .4s var(--ease);
}
.md-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-5px); }
.md-card--mid{ transform:translateY(38px); background:var(--green-900); }
.md-card--mid h3,.md-card--mid p{ color:var(--cream-50); }
.md-card--mid ul li{ color:rgba(251,248,241,.72); }
.md-card--deep{ transform:translateY(76px); border-top:3px solid var(--brown-500); }
.md-card__stage{
  display:inline-block; font-size:12px; letter-spacing:.2em; color:var(--brown-600);
  border:1px solid rgba(176,141,102,.4); border-radius:var(--radius-round);
  padding:4px 14px; margin-bottom:16px;
}
.md-card--mid .md-card__stage{ color:var(--brown-500); border-color:rgba(176,141,102,.4); }
.md-card h3{ font-size:21px; margin-bottom:10px; }
.md-card > p{ font-size:14px; color:var(--ink-soft); line-height:2; margin-bottom:16px; }
.md-card ul li{
  position:relative; padding-left:20px; font-size:13.5px; color:var(--ink-soft);
  margin-bottom:7px;
}
.md-card ul li::before{
  content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
  background:var(--brown-500); transform:rotate(45deg);
}
.md-card ul a{ color:var(--green-700); font-weight:600; }

/* ---------- 工种 chips ---------- */
.td-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.td-chip{
  display:flex; flex-direction:column; gap:4px; padding:24px 26px;
  background:var(--cream-50); border:1px solid var(--line); border-radius:var(--radius-s);
  border-left:3px solid var(--green-700); transition:all .35s var(--ease);
}
.td-chip:hover{ border-left-color:var(--brown-600); background:var(--cream-50); transform:translateX(6px); }
.td-chip b{ font-family:var(--font-serif); font-size:18px; color:var(--green-900); }
.td-chip span{ font-size:12.5px; color:var(--muted); }

/* ---------- 辅导形式 ---------- */
.fm-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:start; }
.fm-copy .eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.32em; color:var(--brown-600); margin-bottom:14px;
}
.fm-copy .eyebrow::before{ content:""; width:34px; height:1px; background:var(--brown-500); }
.fm-copy h2{ margin-bottom:16px; }
.fm-copy > p{ color:var(--muted); margin-bottom:24px; }
.fm-copy img{ width:100%; height:280px; object-fit:cover; border-radius:var(--radius-m); box-shadow:var(--shadow-md); }
.fm-cards{ display:flex; flex-direction:column; gap:16px; }
.fm-card{
  background:var(--cream-100); border-radius:var(--radius-m); padding:22px 26px;
  border:1px solid var(--line); transition:all .35s var(--ease);
}
.fm-card:nth-child(2){ margin-left:36px; }
.fm-card:hover{ border-color:var(--brown-500); }
.fm-card h3{ font-size:17px; color:var(--green-800); margin-bottom:6px; }
.fm-card p{ font-size:13.5px; color:var(--muted); line-height:1.95; }

/* ---------- 学时要求：深底 ---------- */
.hours .eyebrow{ color:var(--brown-500); }
.hours .eyebrow::before{ content:""; width:34px; height:1px; background:var(--brown-500); }
.hr-note{
  max-width:760px; border:1.5px solid rgba(251,248,241,.18); border-radius:var(--radius-m);
  padding:28px 32px; background:rgba(251,248,241,.04);
}
.hr-note p{ color:rgba(251,248,241,.74); font-size:15px; line-height:2.1; }

/* ---------- 时间安排表 + 引语 ---------- */
.sc-table{ overflow-x:auto; border-radius:var(--radius-m); box-shadow:var(--shadow-sm); margin-bottom:30px; }
.sc-table .tbl{ min-width:680px; background:var(--cream-100); }
.sc-quotes{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.sc-quotes blockquote{
  border-top:2px solid var(--brown-500); padding-top:18px;
  font-family:var(--font-serif); font-size:15.5px; line-height:2; color:var(--ink-soft);
}

/* ---------- FAQ：中心窄列表 ---------- */
.fq-list{ max-width:760px; margin:0 auto; }
.fq-item{
  background:var(--cream-50); border-bottom:1px solid var(--line-strong);
}
.fq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:19px 6px; font-size:15px; font-weight:600; color:var(--green-900);
}
.fq-item summary::-webkit-details-marker{ display:none; }
.fq-item summary span{
  flex:none; width:24px; height:24px; border-radius:var(--radius-s);
  background:rgba(44,74,58,.08); position:relative; transition:all .35s var(--ease);
}
.fq-item summary span::before{
  content:""; position:absolute; left:6px; right:6px; top:50%; height:1.5px; background:var(--green-700);
}
.fq-item summary span::after{
  content:""; position:absolute; top:6px; bottom:6px; left:50%; width:1.5px; background:var(--green-700);
  transition:transform .35s var(--ease);
}
.fq-item[open] summary span{ background:var(--green-800); }
.fq-item[open] summary span::before,.fq-item[open] summary span::after{ background:var(--cream-50); }
.fq-item[open] summary span::after{ transform:scaleY(0); }
.fq-item p{ padding:0 30px 18px 6px; font-size:14px; color:var(--muted); line-height:2; }
.fq-item p a{ color:var(--green-700); }

/* ---------- CTA：深底横条 ---------- */
.booking{ background:linear-gradient(135deg,var(--green-950),var(--green-800)); }
.booking .eyebrow{ color:var(--brown-500); }
.booking .eyebrow::before{ content:""; width:34px; height:1px; background:var(--brown-500); }
.booking h2{ color:var(--cream-50); }
.bk-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; }
.bk-copy > p{ color:rgba(251,248,241,.74); }
.bk-copy a{ color:var(--brown-500); font-weight:700; }
.bk-form{
  background:var(--cream-50); border-radius:var(--radius-l); padding:30px 28px;
  display:grid; grid-template-columns:1fr 1fr; gap:14px; box-shadow:var(--shadow-lg);
}
.bk-form .field:nth-child(3),.bk-form .btn{ grid-column:1 / -1; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .md-steps{ grid-template-columns:1fr; }
  .md-card--mid,.md-card--deep{ transform:none; }
  .fm-grid{ grid-template-columns:1fr; }
  .td-grid{ grid-template-columns:1fr 1fr; }
  .bk-inner{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .td-grid,.sc-quotes{ grid-template-columns:1fr; }
  .fm-card:nth-child(2){ margin-left:0; }
  .bk-form{ grid-template-columns:1fr; padding:24px 20px; }
  .bk-form .field{ grid-column:1 !important; }
}

/* ============================================================
   【新增】扩充区块样式（fs- 前缀，与既有模块区分）
   ============================================================ */

/* 服务体系四层 */
.fs-layer__wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.fs-ly{
  position:relative; background:var(--cream-100); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:28px 24px; transition:all .4s var(--ease);
}
.fs-ly:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--brown-500); }
.fs-ly::before{
  content:""; position:absolute; left:24px; top:-1px; width:36px; height:3px;
  background:var(--brown-500); border-radius:2px;
}
.fs-ly b{ display:block; font-size:16px; color:var(--green-800); margin-bottom:10px; }
.fs-ly p{ font-size:13.5px; color:var(--muted); line-height:1.95; }

/* 备考路径 */
.fs-path__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.fs-pp{
  background:var(--cream-50); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:32px 28px; transition:all .4s var(--ease);
}
.fs-pp:hover{ box-shadow:var(--shadow-md); transform:translateY(-6px); }
.fs-pp__tag{
  display:inline-block; font-size:12.5px; letter-spacing:.16em; color:var(--cream-50);
  background:var(--brown-600); padding:5px 14px; border-radius:var(--radius-round); margin-bottom:16px;
}
.fs-pp h3{ font-size:18px; margin-bottom:10px; }
.fs-pp p{ font-size:14px; color:var(--muted); line-height:1.95; }

/* 效果衡量 */
.fs-effect{ background:var(--cream-100); }
.fs-effect__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center;
  background:var(--cream-50); border:1px solid var(--line); border-radius:var(--radius-l); padding:40px;
}
.fs-effect__copy .eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.3em; color:var(--brown-600); margin-bottom:14px;
}
.fs-effect__copy h2{ margin-bottom:14px; }
.fs-effect__copy > p{ font-size:14.5px; color:var(--muted); line-height:2; margin-bottom:20px; }
.fs-effect__copy img{ width:100%; height:220px; object-fit:cover; border-radius:var(--radius-m); }
.fs-effect__list{ display:grid; gap:14px; }
.fs-effect__list li{
  position:relative; padding:16px 18px 16px 52px; background:var(--cream-100);
  border:1px solid var(--line); border-radius:var(--radius-m);
  font-size:14.5px; color:var(--ink-soft); line-height:1.7;
}
.fs-effect__list li::before{
  content:"✓"; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--green-800); color:var(--cream-50);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}

@media (max-width:1024px){
  .fs-layer__wrap{ grid-template-columns:1fr 1fr; }
  .fs-path__grid{ grid-template-columns:1fr; }
  .fs-effect__inner{ grid-template-columns:1fr; padding:28px 24px; }
}
@media (max-width:640px){
  .fs-layer__wrap{ grid-template-columns:1fr; }
}