/* ============================================================
   jikao-moni.css · 机考模拟页专属布局
   ============================================================ */

/* ---------- 首屏：渐变底 + 左文右图 ---------- */
.moni-hero{
  background:linear-gradient(160deg,#EAF6EF 0%,#F6FAF7 100%);
  padding-top:110px;
}
.moni-hero .ph-wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:center;
  padding-bottom:66px;
}
.moni-title{ font-size:clamp(28px,4.2vw,50px); line-height:1.2; margin:14px 0 18px; }
.moni-hero .ph-desc{ color:#2E4A50; line-height:1.9; }
.ph-media img{
  width:100%; border-radius:18px; display:block;
  box-shadow:0 22px 46px rgba(21,50,56,.18);
}

/* ---------- 功能四宫格 ---------- */
.func-grid{ margin-top:34px; }
.func-card{ padding:24px 22px; transition:transform .2s ease, box-shadow .2s ease; }
.func-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(21,50,56,.12); }
.func-card h3{ color:#153238; margin-bottom:8px; }
.func-card p{ color:#2E4A50; line-height:1.8; }

/* ---------- 界面示意：图 + 标注 ---------- */
.moni-layout{
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
  margin-top:30px;
}
.moni-photo{ margin:0; }
.moni-photo img{
  width:100%; border-radius:16px; display:block;
  box-shadow:0 18px 40px rgba(21,50,56,.14);
}
.moni-photo figcaption{ text-align:center; font-size:13px; color:#8AA3AA; margin-top:10px; }
.moni-anno{ list-style:none; padding-left:0; margin:0; }
.moni-anno li{
  padding:12px 0 12px 22px; border-left:3px solid #4493C4;
  margin-bottom:10px; color:#2E4A50; line-height:1.7;
  background:#fff; border-radius:0 10px 10px 0;
}
.moni-anno b{ color:#153238; }

/* ---------- 三轮练习卡 ---------- */
.round-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px;
}
.round-card{ padding:24px 22px; }
.round-no{
  display:inline-block; font-size:13px; font-weight:700; color:#41B383;
  background:#EAF6EF; padding:4px 12px; border-radius:999px; margin-bottom:10px;
}
.round-card h3{ color:#153238; margin-bottom:8px; }
.round-card p{ color:#2E4A50; line-height:1.8; }
.night-photo{ margin-top:30px; }
.night-photo img{
  width:100%; border-radius:16px; display:block;
  box-shadow:0 16px 36px rgba(21,50,56,.14);
}
.night-photo figcaption{ text-align:center; font-size:13px; color:#8AA3AA; margin-top:10px; }

/* ---------- 常见问题 ---------- */
.acc-list{ margin-top:26px; }
.acc{ margin-bottom:12px; }

/* ---------- 相关服务 ---------- */
.rel-grid{ margin-top:26px; }
.rel-card{ display:block; transition:transform .2s ease, box-shadow .2s ease; }
.rel-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(21,50,56,.12); }
.rel-card h3{ color:#153238; margin-bottom:6px; }
.rel-card p{ color:#58727A; font-size:14px; }

/* ---------- 折线分割 ---------- */
.split{ display:block; line-height:0; overflow:hidden; }
.split svg{ display:block; width:100%; height:64px; }

/* ---------- 平板 ---------- */
@media (max-width:900px){
  .moni-hero .ph-wrap{ grid-template-columns:1fr; gap:26px; }
  .moni-layout{ grid-template-columns:1fr; gap:22px; }
  .round-row{ grid-template-columns:1fr; }
  .rel-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .rel-grid{ grid-template-columns:1fr; }
  .split svg{ height:40px; }
}