/* stylelint-disable selector-class-pattern */

/* ============================================================
   history.css —— 发展历程页
   设计稿：3发展历程5.psd（内容区 1920×1300，banner 以下至 footer）
   实现思路：
   · 桌面端（>1200px）为「等比舞台」：.middle-wrap-box 按 1920:1300
     锁定纵横比，时间轴容器开启 container-type，全部定位与尺寸
     使用 cqw（1cqw = 舞台宽 1% ≈ 19.2px@1920），1920px 宽时
     与设计稿 1:1，其余宽度整体等比缩放；
   · ≤1200px 切换为纵向时间轴（左侧轨道 + 节点列表），
     字号回归全站 --fs-* 流式令牌，保证小屏可读性。
   设计稿取色：主粉 #e5126e（年份/圆点/连线），描述灰 #4e4d4d。
   ============================================================ */

/* ================= 内容区舞台（大理石纹理背景） ================= */
.middle-wrap-box {
  position: relative;
  overflow: hidden; /* 裁掉飘带左右出血（设计稿飘带超出画布） */
  width: 100%;
  aspect-ratio: 1920 / 1300; /* 设计内容区比例，高度随宽度等比 */
  background: url("../images/history/bg.png") center / 100% 100% no-repeat;
}

/* 设计稿面包屑居中、无底边线 */
.breadcrumb {
  background-color: transparent;

  /* border-bottom: 0; */
  text-align: left;
}

.page-main {
  background-color: transparent;
}

/* 桌面端按设计稿对齐：面包屑距内容区顶 32px，标题文字顶 128px */
@media (min-width: 1201px) {
  /* .breadcrumb {
    padding-top: 2rem;
  } */

  .page-main .title {
    margin-top: 3.7rem;
  }
}

/* ================= 时间轴舞台（桌面端等比定位） ================= */
.timeline {
  /* 舞台尺寸令牌：均以 cqw 表示，随舞台宽度等比缩放 */
  --tl-pink: #e5126e; /* 设计稿主粉色 */
  --tl-gray: #4e4d4d; /* 设计稿描述灰 */
  --tl-dot: 2.03cqw; /* 圆点外径 39px@1920 */
  --tl-dot-in: 1.15cqw; /* 圆点实心内芯 22px@1920 */
  --tl-line-w: 0.14cqw; /* 连线宽 ≈2.7px@1920 */
  --tl-gap: 2.6cqw; /* 圆点与文字间距 50px@1920 */
  --tl-text-w: 13.6cqw; /* 文字块宽 ≈261px@1920 */
  --tl-fs-year: 2.4cqw; /* 年份字号 ≈46px@1920（图形化舞台局部比例量） */
  --tl-fs-desc: 1cqw; /* 描述字号 ≈19px@1920 */

  position: absolute;
  inset: 0;
  container-type: inline-size;
  pointer-events: none; /* 覆盖层不拦截面包屑 / 标题的点击 */
}

/* 蓝色飘带：设计稿左缘超出画布 559px，整体宽 3152px */
.timeline__ribbon {
  position: absolute;
  left: -29.11cqw;
  top: 4.11cqw; /* 图片顶部含透明留白，不透明区自 284px@1920 起 */
  width: 164.17cqw;
  max-width: none; /* 覆盖 reset.css 的 img{max-width:100%} */
  pointer-events: none;
}

/* ================= 时间节点 ================= */
.tl-node {
  position: absolute;
  left: var(--x); /* 节点坐标由行内自定义属性注入（cqw） */
  top: var(--y);
  width: var(--tl-dot);
  height: var(--tl-dot);
  pointer-events: auto;
}

/* 圆点：白色底 + 粉色细环 + 实心内芯 */
.tl-node__dot {
  position: absolute;
  inset: 0;
  z-index: 1; /* 压在连线端头之上 */
  background: #fff;
  border: 0.11cqw solid var(--tl-pink);
  border-radius: 50%;
  transition: transform 0.35s var(--ttf);
}

.tl-node__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--tl-dot-in);
  height: var(--tl-dot-in);
  border-radius: 50%;
  background: var(--tl-pink);
}

/* 竖直连线：自圆心引向飘带 */
.tl-node__line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--tl-line-w);
  background: var(--tl-pink);
}

.tl-node--above .tl-node__line {
  top: 50%;
  height: var(--lh); /* 线长由行内 --lh 注入 */
}

.tl-node--below .tl-node__line {
  bottom: 50%;
  height: var(--lh);
}

/* 文字块：统一位于圆点右侧，年份与描述上下排布（间距可取节点行内 --gap） */
.tl-node__text {
  position: absolute;
  left: calc(100% + var(--gap, var(--tl-gap)));
  top: -0.15cqw;
  width: var(--tl-text-w);
}

.tl-node__year {
  margin-bottom: 0;
  font-size: var(--tl-fs-year);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tl-pink);
  white-space: nowrap;
}

.tl-node__desc {
  margin: 0.9cqw 0 0;
  font-size: var(--tl-fs-desc);
  line-height: 1.4;
  color: var(--tl-gray);
}

@media (hover: hover) {
  .tl-node:hover .tl-node__dot {
    transform: scale(1.15);
  }
}

/* ================= ≤1200px：纵向时间轴 ================= */
@media (max-width: 1200px) {
  .middle-wrap-box {
    aspect-ratio: auto; /* 高度交还内容流 */
  }

  .timeline {
    position: static;
    container-type: normal;
    pointer-events: auto;
    padding: 0 1.5%;
  }

  .timeline__ribbon {
    display: none; /* 小屏隐藏飘带装饰，保证阅读 */
  }

  /* 左侧纵向轨道 */
  .timeline__list {
    position: relative;
    padding: 0.4rem 0 1.2rem;
  }

  .timeline__list::before {
    content: "";
    position: absolute;
    left: calc(0.7rem - 1px);
    top: 1.1rem;
    bottom: 1.8rem;
    width: 2px;
    background: rgba(229, 18, 110, 0.22);
  }

  .tl-node {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    padding: 0 0 1.7rem 2.4rem;
  }

  .tl-node:last-child {
    padding-bottom: 0.4rem;
  }

  .tl-node__dot {
    inset: auto;
    left: 0;
    top: 0.3rem;
    width: 1.4rem;
    height: 1.4rem;
    border-width: 2px;
  }

  .tl-node__dot::after {
    width: 0.7rem;
    height: 0.7rem;
  }

  .tl-node__line {
    display: none;
  }

  .tl-node__text {
    position: static;
    width: auto;
  }

  /* 阅读文本回归全站流式字号令牌 */
  .tl-node__year {
    font-size: var(--fs-h3);
    white-space: normal;
  }

  .tl-node__desc {
    margin-top: 0.35rem;
    font-size: var(--fs-body);
    line-height: 1.7;
  }
}

/* 小屏手机：边距与 page-main 对齐，面包屑回归全站左对齐 */
@media (max-width: 768px) {
  .timeline {
    padding: 0 0.5rem;
  }

  .breadcrumb {
    text-align: left;
  }
}