/* ============================================================
   baokao-tiaojian.css —— 报考条件 · 原型 L8 圆润错位
   大圆角容器 + 漂浮圆点装饰，图文上下错位叠放；hero 圆角大图+角标
   ============================================================ */

/* ---------- Hero L8 ---------- */
.hero{
  position:relative; padding:calc(var(--header-h) + 60px) 0 90px; overflow:hidden;
  background:linear-gradient(160deg,var(--cream-50) 0%,var(--cream-100) 100%);
}
.hero__inner{
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,5vw,64px); align-items:center;
}
.hero__text .breadcrumb{ margin-bottom:22px; }
.hero__eyebrow{ color:var(--brown-600); letter-spacing:.34em; font-size:13px; margin-bottom:16px; }
.hero h1{ font-size:clamp(40px,6vw,66px); line-height:1.15; margin-bottom:20px; }
.hero__lead{ font-size:16.5px; max-width:460px; margin-bottom:28px; }
.hero__pic{ position:relative; }
.hero__pic img{
  border-radius:34px; box-shadow:var(--shadow-lg); transform:translateY(24px) translateX(18px);
}
.hero__badge{
  position:absolute; left:-24px; top:-20px; background:var(--green-800); color:var(--cream-50);
  padding:16px 20px; border-radius:22px; font-size:14px; line-height:1.6; text-align:center;
  box-shadow:var(--shadow-md); transform:rotate(-6deg);
}
/* 漂浮圆点 */
.dot{ position:absolute; border-radius:50%; background:rgba(176,141,102,.25); }
.dot--1{ width:90px; height:90px; right:8vw; top:18%; }
.dot--2{ width:46px; height:46px; left:6vw; bottom:16%; background:rgba(76,114,90,.22); }
.dot--3{ width:24px; height:24px; right:30%; bottom:12%; background:var(--brown-500); opacity:.5; }

/* ---------- 小节头 ---------- */
.sec-head{ margin-bottom:36px; max-width:700px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head .eyebrow{ display:block; margin-bottom:12px; }
.sec-head h2{ margin-bottom:10px; }
.sec-head .sub{ color:var(--muted); font-size:15px; }

/* ---------- 四大门槛（大圆角错落卡） ---------- */
.gates__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.gate{
  background:var(--cream-50); border-radius:26px; padding:32px 26px;
  box-shadow:var(--shadow-sm); border:1px solid var(--line);
  transition:all .35s var(--ease);
}
.gate:nth-child(even){ transform:translateY(22px); }
.gate:hover{ transform:translateY(22px) translateY(-6px); box-shadow:var(--shadow-md); }
.gate__num{
  display:inline-flex; width:52px; height:52px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--green-800); color:var(--cream-50); font-family:var(--font-serif); font-size:22px; margin-bottom:18px;
}
.gate h3{ font-size:20px; margin-bottom:10px; }
.gate p{ font-size:14.5px; }
.gates__lead{ max-width:720px; margin:-14px auto 30px; text-align:center; font-size:15.5px; }

/* ---------- 差异表 ---------- */
.diff__wrap{ overflow-x:auto; border-radius:22px; box-shadow:var(--shadow-sm); }

/* ---------- 体检图文错位 ---------- */
.medical__split{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,5vw,56px); align-items:center; }
.medical__text .eyebrow{ display:block; margin-bottom:12px; }
.medical__text h2{ margin-bottom:16px; }
.medical__text p{ margin-bottom:14px; }
.medical__pic img{ border-radius:28px; box-shadow:var(--shadow-md); }

/* ---------- 学历三卡 ---------- */
.edu__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.edu-card{
  background:var(--cream-100); border-radius:24px; padding:28px 26px;
}
.edu-card h3{ font-size:18.5px; margin-bottom:10px; color:var(--green-800); }
.edu-card p{ font-size:14.5px; }
.edu-card a{ color:var(--green-700); font-weight:600; }

/* ---------- 条件不符（深色圆角） ---------- */
.rescue__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.rescue-step{
  background:rgba(251,248,241,.06); border-radius:24px; padding:30px 26px;
  border:1px solid rgba(251,248,241,.12);
}
.rescue-step b{ font-family:var(--font-serif); font-size:38px; color:var(--brown-500); display:block; line-height:1; margin-bottom:14px; }
.rescue-step h3{ color:var(--cream-100); font-size:19px; margin-bottom:10px; }
.rescue-step p{ color:rgba(251,248,241,.72); font-size:14.5px; }

/* ---------- 自查清单（圆角气泡） ---------- */
.check-list{ max-width:680px; margin-inline:auto; }
.check-list li{
  display:flex; align-items:center; gap:16px; padding:18px 24px; margin-bottom:14px;
  background:var(--cream-100); border-radius:20px; font-size:16px; color:var(--ink);
}
.check-list li span{
  flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--green-700); position:relative;
}
.check-list li span::after{
  content:""; position:absolute; left:7px; top:3px; width:6px; height:11px;
  border:solid var(--green-700); border-width:0 2px 2px 0; transform:rotate(45deg);
}

/* ---------- FAQ ---------- */
.faq__list{ max-width:800px; margin-inline:auto; }
.faq-item{
  background:var(--cream-100); border-radius:20px; margin-bottom:14px; overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:19px 24px; font-weight:600; color:var(--green-900); font-family:var(--font-serif); font-size:17px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary span{
  flex:none; width:26px; height:26px; border-radius:50%; background:rgba(176,141,102,.2); position:relative;
}
.faq-item summary span::before,.faq-item summary span::after{
  content:""; position:absolute; background:var(--brown-600); top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-item summary span::before{ width:10px; height:1.6px; }
.faq-item summary span::after{ width:1.6px; height:10px; transition:opacity .3s; }
.faq-item[open] summary span::after{ opacity:0; }
.faq-item p{ padding:0 24px 20px; font-size:15px; }

/* ---------- 预约（大圆角盒子） ---------- */
.booking__box{
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,56px);
  background:var(--cream-100); border-radius:34px; padding:clamp(30px,5vw,56px);
}
.booking__text h2{ margin:10px 0 14px; }
.booking__phone{ margin-top:20px; }
.booking__phone a{ color:var(--green-700); font-weight:700; font-size:20px; }
.booking__form{ display:grid; gap:15px; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__pic img{ transform:none; }
  .gates__grid{ grid-template-columns:1fr 1fr; }
  .gate:nth-child(even){ transform:none; }
  .medical__split,.edu__cards,.rescue__steps,.booking__box{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .gates__grid{ grid-template-columns:1fr; }
}
