/* ==========================================================================
   history.css —— 发展历程页样式
   布局：中央竖轴双列时间轴（grid 三列法左右交替）+ 超大年份背景 +
        节点数据卡 + 城市成长图文 + 未来展望
   ========================================================================== */

/* ---------- 2. 中央竖轴时间轴（grid 三列法） ---------- */
.hs-timeline{
  display:grid;
  grid-template-columns:1fr 64px 1fr;
  row-gap:8px;
  max-width:1080px;margin:0 auto;
}
/* 中央竖线（只在中列绘制） */
.hs-timeline::before{
  content:"";position:absolute;
}
.hs-timeline-sec .hs-timeline{position:relative}
.hs-timeline-sec .hs-timeline::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;
  width:3px;transform:translateX(-50%);
  background:linear-gradient(180deg,#9B8AEA,#FF7EBC,#8FD0F7);
  border-radius:3px;opacity:.6;
}
.hs-node{position:relative;padding:18px 0}
.hs-node.left{grid-column:1;text-align:right;padding-right:36px}
.hs-node.right{grid-column:3;text-align:left;padding-left:36px}
.hs-node-spine{grid-column:2;position:relative}
.hs-node-spine span{
  position:absolute;top:38px;left:50%;transform:translate(-50%,0);
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:4px solid var(--purple);
  box-shadow:0 0 0 6px var(--purple-mist);
}
.hs-node-left-space,.hs-node-right-space{min-height:1px}

/* 年份大卡 */
.hs-card{
  position:relative;overflow:hidden;
  background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 24px;
  box-shadow:var(--shadow-sm);
  transition:transform .35s,box-shadow .35s;
}
.hs-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.hs-year-bg{
  position:absolute;top:-14px;right:-6px;
  font-size:78px;font-weight:800;line-height:1;
  color:rgba(155,138,234,.13);pointer-events:none;
  font-family:Arial,sans-serif;letter-spacing:-2px;
}
.hs-node.left .hs-year-bg{right:auto;left:-6px}
.hs-card h3{font-size:19px;margin:12px 0 8px;position:relative}
.hs-card p{font-size:14px;color:var(--ink-2);position:relative}
.hs-card .tag{position:relative}
.hs-card.hs-now{background:linear-gradient(150deg,#EDE6FC,#FDF1F8)}
.hs-card-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  color:var(--purple-deep);font-weight:600;font-size:14px;position:relative;
}
.hs-card-link svg{width:15px;height:15px}

/* ---------- 3. 节点数据卡 ---------- */
.hs-data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hs-dcard{padding:30px 24px;text-align:center}
.hs-dcard .num{font-size:clamp(34px,4vw,48px);font-weight:800}
.hs-dcard p{margin-top:8px;font-size:14px;color:var(--ink-3)}

/* ---------- 4. 城市成长图文 ---------- */
.hs-story-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(26px,4vw,54px);align-items:center}
.hs-story-img{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.hs-story-img img{width:100%;height:380px;object-fit:cover}
.hs-story-img figcaption{
  position:absolute;bottom:16px;left:16px;
  font-size:13px;color:#fff;background:rgba(58,53,80,.6);
  padding:6px 14px;border-radius:var(--r-full);
}
.hs-story-img{position:relative}
.hs-story-txt h2{font-size:clamp(24px,3vw,34px);margin:12px 0 16px}
.hs-story-txt p{margin-bottom:14px}
.hs-story-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.hs-story-imgs img{border-radius:var(--r-md);height:150px;width:100%;object-fit:cover}

/* ---------- 5. 未来展望 ---------- */
.hs-future-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hs-f{padding:28px 24px}
.hs-f h3{font-size:19px;margin-bottom:10px}
.hs-f p{font-size:14.5px;color:var(--ink-2)}

/* ---------- 6. CTA ---------- */
.hs-cta{padding:clamp(60px,8vw,100px) 0;text-align:center;background:linear-gradient(150deg,#FDF1F8,#DDF1FD)}
.hs-cta h2{font-size:clamp(24px,3.2vw,38px);margin-bottom:14px}
.hs-cta p{margin-bottom:26px;color:var(--ink-3)}
.hs-cta .btn{margin:0 6px}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hs-story-wrap{grid-template-columns:1fr}
  .hs-story-img img{height:280px}
  .hs-data-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  /* 移动端时间轴改为单列：竖线靠左 */
  .hs-timeline{grid-template-columns:40px 1fr}
  .hs-timeline-sec .hs-timeline::before{left:19px;transform:none}
  .hs-node.left,.hs-node.right{grid-column:2;text-align:left;padding:14px 0 14px 18px}
  .hs-node.left{grid-column:2}
  .hs-node-spine{display:none}
  .hs-node-left-space,.hs-node-right-space{display:none}
  .hs-year-bg{font-size:56px}
  .hs-future-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .hs-data-grid{grid-template-columns:1fr 1fr;gap:14px}
  .hs-story-imgs{grid-template-columns:1fr}
  .hs-card{padding:20px 16px}
}

/* ---------- 新板块：现状分析图文 ---------- */
.hs-now-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(26px,4vw,50px);align-items:center}
.hs-now-img{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.hs-now-img img{width:100%;height:360px;object-fit:cover}
.hs-now-txt h2{font-size:clamp(22px,3vw,32px);margin:12px 0 16px}
.hs-now-txt p{margin-bottom:14px;color:var(--ink-2)}

/* ---------- 新板块：阶段清单勾选 ---------- */
.hs-check-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:960px;margin:0 auto}
.hs-check-item{display:flex;gap:14px;align-items:center;padding:20px 22px}
.ck-box{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--grad-pink);color:#fff}
.ck-box svg{width:18px;height:18px}
.hs-check-item p{font-size:15px;color:var(--ink)}

@media (max-width:768px){.hs-now-wrap{grid-template-columns:1fr}.hs-check-list{grid-template-columns:1fr}}