/* ============================================================
   kaoshi-yugao.css · 新乡考试预告页专属布局
   依赖全站设计系统 style.css，这里只写本页结构与响应式
   ============================================================ */

/* ---------- 首屏 ---------- */
.yugao-hero{
  position:relative;
  overflow:hidden;
  color:#153238;
}
.yugao-hero .ph-bg{
  position:absolute; inset:0; z-index:0;
}
.yugao-hero .ph-bg img{
  width:100%; height:100%; object-fit:cover;
}
/* 首屏暗色遮罩，保证文字可读 */
.yugao-hero .ph-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(246,250,247,.96) 0%, rgba(246,250,247,.82) 46%, rgba(246,250,247,.35) 100%);
}
.yugao-hero .ph-wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px;
  align-items:center;
  padding-top:120px; padding-bottom:90px;
}
.yugao-title{ font-size:clamp(28px,4.4vw,52px); line-height:1.18; margin:14px 0 18px; }
.yugao-title .line{ display:block; }
.yugao-hero .ph-desc{ max-width:560px; font-size:16px; line-height:1.9; color:#2E4A50; }

/* ---------- 倒计时式日历卡 ---------- */
.cal-card{ padding:22px 22px 18px; }
.cal-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
}
.cal-month{ font-weight:700; font-size:18px; color:#153238; }
.cal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cal-cell{
  border:1px solid #D7EEE2; border-radius:12px; padding:12px 14px;
  background:#F6FAF7; display:flex; flex-direction:column; gap:4px;
}
.cal-cell b{ font-size:20px; color:#153238; }
.cal-dot{ font-size:13px; font-weight:600; }
.dot-green{ color:#41B383; }
.dot-blue{ color:#4493C4; }
.dot-yellow{ color:#C79A1E; }
.cal-cell em{ font-style:normal; font-size:12px; color:#8AA3AA; }
.cal-note{ font-size:13px; line-height:1.8; color:#58727A; margin-top:14px; }

/* ---------- 批次表下方提示 ---------- */
.yugao-notice{ margin-top:18px; }

/* ---------- 报名窗口期三卡 ---------- */
.window-grid{ margin-top:34px; }

/* ---------- 提醒服务左右栏 ---------- */
.remind-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.remind-media img{
  width:100%; border-radius:16px; display:block;
  box-shadow:0 18px 40px rgba(21,50,56,.14);
}
.remind-body h2{ font-size:clamp(22px,2.6vw,32px); margin:6px 0 14px; }
.remind-body p{ color:#2E4A50; line-height:1.9; }
.remind-list{ margin:18px 0 8px; padding-left:0; list-style:none; }
.remind-list li{
  position:relative; padding:10px 0 10px 30px;
  border-bottom:1px dashed #D7EEE2; color:#2E4A50; line-height:1.7;
}
.remind-list li::before{
  content:""; position:absolute; left:4px; top:16px;
  width:12px; height:12px; border-radius:50%;
  background:#41B383; box-shadow:0 0 0 4px #EAF6EF;
}

/* ---------- 县区四卡 ---------- */
.county-grid{ margin-top:30px; }
.county-grid .card h3{ margin-bottom:8px; color:#153238; }
.county-grid .card p{ color:#2E4A50; line-height:1.85; }

/* ---------- 相关服务导航卡 ---------- */
.rel-grid{ margin-top:30px; }
.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; }

/* ---------- 实景照片（图注） ---------- */
.local-photo{ margin:26px 0 8px; }
.local-photo img{
  width:100%; border-radius:16px; display:block;
  box-shadow:0 14px 34px rgba(21,50,56,.14);
}
.local-photo figcaption{
  text-align:center; font-size:13px; color:#8AA3AA; margin-top:10px;
}
.window-photo{ margin-top:26px; }
.window-photo img{
  width:100%; border-radius:16px; display:block;
  box-shadow:0 14px 34px rgba(21,50,56,.12);
}
.window-photo figcaption{
  text-align:center; font-size:13px; color:#8AA3AA; margin-top:10px;
}

/* ---------- 平板 768 ---------- */
@media (max-width:900px){
  .yugao-hero .ph-wrap{ grid-template-columns:1fr; gap:26px; padding-top:104px; }
  .remind-wrap{ grid-template-columns:1fr; gap:26px; }
  .window-grid{ grid-template-columns:1fr; }
  .county-grid{ grid-template-columns:1fr; }
  .rel-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- 手机 375 ---------- */
@media (max-width:560px){
  .cal-grid{ grid-template-columns:1fr 1fr; }
  .rel-grid{ grid-template-columns:1fr; }
  .yugao-hero .ph-wrap{ padding-bottom:60px; }
  .split svg{ height:40px; }
}