/* ============================================================
   topic.css · 报考专题页族（平顶山/漯河专题、考试批次、
   报名条件、费用、考点、证书用途、企业合作）
   布局：左文右悬浮卡片 Hero + 错落 Bento + 流程步 + 时间线
        + 双城对比 + 材料清单 + 迷你问答
   ============================================================ */

/* ---------- Hero：左文 + 右侧悬浮卡片组 ---------- */
.hero-topic{ min-height:600px; padding:170px 0 110px; }
.hero-topic .ht-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero-topic .kicker.light::before,.hero-topic .kicker.light::after{ background:rgba(255,255,255,.5); }
.hero-topic .kicker.light{ color:#F5E3B3; }
.hero-topic h1{ color:#FFF; margin-bottom:18px; text-shadow:0 2px 18px rgba(0,0,0,.25); }
.hero-topic .ht-content p{ color:rgba(255,255,255,.88); max-width:560px; margin-bottom:28px; }
.ht-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.btn-ghost.light{ border-color:rgba(255,255,255,.55); color:#FFF; }
.btn-ghost.light:hover{ border-color:#FFF; color:#FFF; }
.ht-meta{ display:flex; gap:10px; flex-wrap:wrap; }
.ht-meta span{
  display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  color:#FFF; font-size:13px; font-weight:600; border:1px solid rgba(255,255,255,.28);
}
.ht-meta svg{ color:#F5E3B3; }

/* 右侧悬浮卡片：错落层次 */
.ht-cards{ position:relative; min-height:430px; }
.ht-card{
  position:absolute; background:#FFF; border-radius:20px; box-shadow:var(--shadow-l);
  padding:22px 24px; width:min(300px,78%); z-index:2; border:1px solid var(--line);
  animation:floaty 6s ease-in-out infinite;
}
.ht-card.c1{ top:0; right:12%; transform:rotate(-2deg); z-index:3; }
.ht-card.c2{ top:150px; right:0; animation-delay:1.2s; transform:rotate(2deg); }
.ht-card.c3{ top:270px; left:0; animation-delay:2.1s; background:linear-gradient(140deg,#FBF3E2,#F6DDD3); }
.ht-card .hc-num{ font-size:30px; font-weight:800; color:var(--amber); line-height:1; }
.ht-card.c3 .hc-num{ color:var(--rose); }
.ht-card .hc-t{ font-weight:700; margin:8px 0 4px; font-size:16px; }
.ht-card .hc-d{ font-size:13px; color:var(--ink-2); }
.ht-card .hc-ico{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px; background:var(--yellow); margin-bottom:10px; color:var(--amber); }
.ht-card.c3 .hc-ico{ background:var(--pink); color:var(--rose); }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* ---------- Bento 错落数据区 ---------- */
.bento-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:22px; }
.bento-item{
  background:#FFF; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-c);
  padding:28px; transition:transform .35s,box-shadow .35s; position:relative; overflow:hidden;
}
.bento-item:hover{ transform:translateY(-8px); box-shadow:var(--shadow-l); }
.bento-item .bi-ico{ width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--yellow); color:var(--amber); margin-bottom:16px; }
.bento-item.pink .bi-ico{ background:var(--pink); color:var(--rose); }
.bento-item h3{ font-size:17px; margin-bottom:10px; }
.bento-item p{ font-size:14px; }
.bento-item .bi-num{ font-size:40px; font-weight:800; color:var(--amber); line-height:1; margin-bottom:6px; }
.bento-item.pink .bi-num{ color:var(--rose); }
/* 错落浮动位置（偶数项下沉） */
.bento-grid .b1{ grid-column:span 4; }
.bento-grid .b2{ grid-column:span 4; margin-top:34px; }
.bento-grid .b3{ grid-column:span 4; margin-top:14px; }
.bento-grid .b4{ grid-column:span 5; }
.bento-grid .b5{ grid-column:span 4; margin-top:30px; }
.bento-grid .b6{ grid-column:span 3; margin-top:8px; }

/* ---------- 流程步骤 ---------- */
.flow-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:flow; }
.fstep{
  background:#FFF; border:1px solid var(--line); border-radius:20px; padding:30px 24px;
  box-shadow:var(--shadow-c); position:relative; transition:transform .35s,box-shadow .35s;
}
.fstep:hover{ transform:translateY(-6px); box-shadow:var(--shadow-l); }
.fstep::before{
  counter-increment:flow; content:counter(flow,decimal-leading-zero);
  position:absolute; top:18px; right:20px; font-size:34px; font-weight:800; color:var(--bg-2); line-height:1;
}
.fstep .fs-ico{ width:50px; height:50px; border-radius:15px; background:linear-gradient(135deg,#F6E7C8,#F3D3C7); display:flex; align-items:center; justify-content:center; color:var(--amber); margin-bottom:16px; }
.fstep h3{ font-size:16px; margin-bottom:8px; }
.fstep p{ font-size:13.5px; }
.fstep .fs-tag{ position:absolute; top:18px; left:20px; }

/* ---------- 时间线（考试批次） ---------- */
.tline{ position:relative; padding-left:34px; }
.tline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--yellow-2),var(--pink-2)); border-radius:2px; }
.tline-item{ position:relative; padding:20px 24px; background:#FFF; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-c); margin-bottom:20px; transition:transform .3s; }
.tline-item:hover{ transform:translateX(6px); }
.tline-item::before{
  content:""; position:absolute; left:-29px; top:26px; width:14px; height:14px; border-radius:50%;
  background:var(--amber); border:3px solid var(--bg); box-shadow:0 0 0 3px var(--yellow-2);
}
.tline-item.pink::before{ background:var(--rose); box-shadow:0 0 0 3px var(--pink-2); }
.tline-item .tl-date{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--amber); margin-bottom:6px; }
.tline-item.pink .tl-date{ color:var(--rose); }
.tline-item h3{ font-size:17px; margin-bottom:6px; }
.tline-item p{ font-size:14px; }

/* ---------- 双城对比 ---------- */
.duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.duo-card{
  background:#FFF; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-c);
}
.duo-card .dc-img{ position:relative; height:220px; overflow:hidden; }
.duo-card .dc-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.duo-card:hover .dc-img img{ transform:scale(1.06); }
.duo-card .dc-img .dc-city{ position:absolute; left:18px; bottom:14px; background:rgba(255,255,255,.92); border-radius:999px; padding:7px 16px; font-weight:700; font-size:14px; box-shadow:var(--shadow-s); }
.duo-card .dc-body{ padding:26px 26px 30px; }
.duo-card .dc-body ul li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); margin-bottom:11px; }
.duo-card .dc-body ul svg{ flex:none; margin-top:5px; color:var(--amber); }
.duo-card .dc-body a{ color:var(--amber); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:6px; margin-top:8px; }

/* ---------- 材料清单 ---------- */
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.check-item{
  display:flex; gap:14px; align-items:flex-start; background:#FFF; border:1px solid var(--line);
  border-radius:16px; padding:20px 22px; box-shadow:var(--shadow-c); transition:transform .3s;
}
.check-item:hover{ transform:translateX(6px); }
.check-item .ck-ico{ flex:none; width:44px; height:44px; border-radius:13px; background:var(--yellow); color:var(--amber); display:flex; align-items:center; justify-content:center; }
.check-item.pink .ck-ico{ background:var(--pink); color:var(--rose); }
.check-item h4{ font-size:15px; margin-bottom:4px; }
.check-item p{ font-size:13.5px; }

/* ---------- 迷你问答 ---------- */
.faq-mini{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.faq-mini .fm-item{ background:#FFF; border:1px solid var(--line); border-radius:16px; padding:22px 24px; box-shadow:var(--shadow-c); }
.faq-mini .fm-item h4{ display:flex; gap:10px; font-size:15px; margin-bottom:8px; }
.faq-mini .fm-item h4::before{ content:"Q"; flex:none; width:26px; height:26px; border-radius:9px; background:var(--pink); color:var(--rose); font-size:13px; display:flex; align-items:center; justify-content:center; font-weight:800; }
.faq-mini .fm-item p{ font-size:13.5px; }

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-topic .ht-grid{ grid-template-columns:1fr; }
  .ht-cards{ display:none; }
  .bento-grid .b1,.bento-grid .b2,.bento-grid .b3,.bento-grid .b4,.bento-grid .b5,.bento-grid .b6{ grid-column:span 6; margin-top:0; }
  .flow-steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .bento-grid .b1,.bento-grid .b2,.bento-grid .b3,.bento-grid .b4,.bento-grid .b5,.bento-grid .b6{ grid-column:span 12; }
  .flow-steps{ grid-template-columns:1fr; }
  .duo-grid,.check-grid,.faq-mini{ grid-template-columns:1fr; }
  .hero-topic{ padding:130px 0 70px; }
}