/* ============================================================
   yikeyichi.com · teding-mulu.html 专属样式
   布局原型：L1 斜切对角 —— hero 斜切深绿块 / 错位图文 / 阶梯卡片
   ============================================================ */

/* ---------- Hero：斜切对角 ---------- */
.ml-hero{
  position:relative; min-height:76vh; display:flex; align-items:center;
  padding:calc(var(--header-h) + 50px) 0 90px; overflow:hidden; background:var(--green-950);
}
.ml-hero__media{ position:absolute; inset:0; }
.ml-hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.ml-hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(27,42,33,.96) 18%,rgba(34,57,46,.7) 55%,rgba(34,57,46,.2) 100%);
  clip-path:polygon(0 0, 78% 0, 62% 100%, 0 100%);
}
.ml-hero__content{ position:relative; z-index:2; }
.ml-hero .breadcrumb{ margin-bottom:20px; }
.ml-hero .breadcrumb a{ color:rgba(251,248,241,.6); }
.ml-hero .breadcrumb .cur{ color:rgba(251,248,241,.92); }
.ml-hero__eyebrow{
  font-size:13px; letter-spacing:.42em; color:var(--brown-500); margin-bottom:16px;
}
.ml-hero h1{
  color:var(--cream-50); font-size:clamp(34px,5.4vw,60px); line-height:1.26; margin-bottom:20px;
}
.ml-hero__lead{
  color:rgba(251,248,241,.82); font-size:16px; line-height:2; max-width:580px; margin-bottom:32px;
}
.ml-hero__actions{ display:flex; flex-wrap:wrap; gap:16px; }

/* ---------- 目录结构：错位图文 ---------- */
.intro{ background:var(--cream-50); }
.intro__grid{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,64px); align-items:center;
}
.intro__pic img{
  width:100%; height:400px; object-fit:cover; border-radius:var(--radius-m);
  box-shadow:var(--shadow-lg); transform:rotate(1.6deg);
}
.intro__copy .eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.32em; color:var(--brown-600); margin-bottom:14px;
}
.intro__copy .eyebrow::before{ content:""; width:34px; height:1px; background:var(--brown-500); }
.intro__copy h2{ margin-bottom:16px; }
.intro__copy p{ font-size:15px; line-height:2; margin-bottom:14px; }
.intro__points{ margin-top:18px; }
.intro__points li{
  position:relative; padding-left:28px; margin-bottom:10px;
  font-size:14.5px; color:var(--green-800); font-weight:600;
}
.intro__points li::before{
  content:""; position:absolute; left:0; top:4px; width:16px; height:16px;
  background:var(--brown-500); transform:rotate(45deg);
}

/* ---------- 总览表 ---------- */
.table-sec__wrap{ overflow-x:auto; border-radius:var(--radius-m); box-shadow:var(--shadow-sm); }
.table-sec__wrap .tbl{ min-width:660px; background:var(--cream-50); }
.table-sec__wrap .tbl td a{ color:var(--green-700); font-weight:600; }
.table-sec__note{
  margin-top:18px; font-size:13px; color:var(--muted); padding-left:14px;
  border-left:2px solid var(--brown-500);
}

/* ---------- 报考入口：阶梯卡片 ---------- */
.trades{ background:var(--cream-50); }
.trades__stairs{
  display:flex; flex-direction:column; gap:18px; max-width:960px; margin-inline:auto;
}
.tcard{
  display:grid; grid-template-columns:90px 1fr auto; gap:24px; align-items:center;
  background:var(--cream-100); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:24px 30px; transition:all .4s var(--ease);
}
.tcard:nth-child(1){ transform:translateX(0); }
.tcard:nth-child(2){ transform:translateX(36px); }
.tcard:nth-child(3){ transform:translateX(0); }
.tcard:nth-child(4){ transform:translateX(36px); }
.tcard:nth-child(5){ transform:translateX(0); }
.tcard:hover{ transform:translateX(0) translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--green-700); }
.tcard__no{
  font-family:var(--font-serif); font-size:34px; color:var(--brown-500); line-height:1;
}
.tcard h3{ font-size:19px; margin-bottom:6px; }
.tcard p{ font-size:13.5px; color:var(--muted); }
.tcard i{ font-style:normal; font-size:13.5px; font-weight:600; color:var(--green-700); white-space:nowrap; }

/* ---------- 目录外作业 ---------- */
.out__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,60px); align-items:center;
}
.out__copy .eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.32em; color:var(--brown-500); margin-bottom:14px;
}
.out__copy .eyebrow::before{ content:""; width:34px; height:1px; background:var(--brown-500); }
.out__copy h2{ margin-bottom:16px; }
.out__copy p{ font-size:15px; line-height:2; margin-bottom:14px; }
.out__list{ display:flex; flex-direction:column; gap:12px; }
.out__list .orow{
  background:rgba(251,248,241,.06); border:1px solid rgba(251,248,241,.14);
  border-radius:var(--radius-m); padding:16px 20px; border-left:3px solid var(--brown-500);
}
.out__list .orow b{ display:block; color:var(--cream-100); font-size:15.5px; margin-bottom:4px; }
.out__list .orow p{ font-size:13.5px; color:rgba(251,248,241,.68); }

/* ---------- FAQ：斜签折叠 ---------- */
.faq{ background:var(--cream-50); }
.faq__list{ max-width:840px; margin-inline:auto; }
.faq-item{
  border:1px solid var(--line); border-radius:var(--radius-s);
  margin-bottom:12px; background:var(--cream-100); padding:0 26px;
}
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:18px; padding:20px 0;
  font-family:var(--font-serif); font-size:16.5px; color:var(--green-900);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary span{
  width:22px; height:22px; flex:none; background:var(--green-800); position:relative;
  transform:rotate(45deg); transition:transform .4s var(--ease);
}
.faq-item summary span::before{
  content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px;
  background:var(--cream-50); transform:translate(-50%,-50%);
}
.faq-item[open] summary span{ transform:rotate(225deg); }
.faq-item p{ padding:0 0 22px; font-size:14.5px; line-height:2; }

/* ---------- CTA：斜切块 ---------- */
.cta{ background:var(--cream-50); padding-bottom:clamp(60px,8vw,100px); }
.cta__block{
  position:relative; border-radius:var(--radius-l); padding:clamp(36px,5vw,60px);
  background:linear-gradient(120deg,var(--green-900),var(--green-700));
  color:var(--cream-50); overflow:hidden;
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
}
.cta__block::before{
  content:""; position:absolute; left:-40px; top:-40px; width:200px; height:200px;
  background:rgba(176,141,102,.18); border-radius:50%;
}
.cta__copy{ position:relative; max-width:560px; }
.cta__copy h2{ color:var(--cream-100); margin-bottom:10px; }
.cta__copy p{ color:rgba(251,248,241,.8); }
.cta__actions{ position:relative; display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .intro__grid,.out__grid{ grid-template-columns:1fr; }
  .ml-hero__veil{ clip-path:none; background:rgba(27,42,33,.78); }
}
@media (max-width:640px){
  .tcard{ grid-template-columns:1fr; gap:10px; }
  .tcard:nth-child(2),.tcard:nth-child(4){ transform:none; }
}