/* ============================================================
   移动端适配（集中管理）
   ------------------------------------------------------------
   本文件须在所有其它样式表之后加载，移动端规则统一在此维护，
   避免在 style.css / part1.css / part3.css / merge.css 中散落。
   按断点从大到小排列，每段标注作用组件。
   ============================================================ */

/* ---------- 断点 ≤860px ---------- */
@media (max-width: 860px) {
  /* 导航：隐藏整合站第二组标签（光影群像兼容组） */
  .nav__grp { display: none; }

  /* 核心特质 / 劳模：网格转单列；翻转卡转 2 列（保留 3D，点击触发） */
  .overview, .traits { grid-template-columns: 1fr; }
  .pin { flex: 1 1 30%; min-width: 128px; max-width: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }

  /* 翻转卡：移动端保留 3D 翻转，点击切换 .flipped，2 列布局 */
  .traits { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .flip__inner { height: 190px; touch-action: manipulation; }
  .flip__name { font-size: 22px; }
  .flip__tag { font-size: 13px; }
  .flip__b { font-size: 13px; line-height: 1.7; }
  .flip__inner.flipped { transform: rotateY(180deg); }

  /* 时间轴（原竖向 timeline）：左对齐单列 */
  .timeline__line, .timeline__progress { left: 18px; }
  .tl-item { width: 100%; left: 0 !important; text-align: left !important; padding: 14px 0 14px 46px; }
  .tl-item:nth-child(odd) { text-align: left; }
  .tl-item__dot { left: 11px !important; right: auto !important; }
  .tl-card { max-width: none; }
  .reveal--l, .reveal--r { transform: translateY(26px); }
}

/* ---------- 断点 ≤760px ---------- */
@media (max-width: 760px) {
  /* 发展历程：横向时间轴改为可横向滚动，避免窄屏挤成一团 */
  .htimeline-wrap { overflow-x: auto; padding-bottom: 10px; }
  .htimeline { width: max-content; justify-content: flex-start; }
  .ht-node { min-width: 170px; }
}

/* ---------- 断点 ≤720px ---------- */
@media (max-width: 720px) {
  /* 导航：折叠为汉堡菜单；移动端显示「向奋斗者致敬」于左侧、汉堡于右侧 */
  .nav__list {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 0; margin-left: 0;
  }
  .nav__list.open { display: flex; }
  .nav__list a { display: block; border-radius: 0; padding: 12px 22px; }
  .nav__toggle { display: block; margin-left: auto; }
  .nav__hint { display: block; margin-left: 0; font-size: 14px; }
  /* 事件卡：图文上下堆叠 */
  .ev, .ev--flip { flex-direction: column; gap: 16px; }
  .ev__txt, .ev__pic { min-width: 0; width: 100%; }
  /* Hero 内边距收紧 */
  .hero { padding: 64px 20px 56px; }
}

/* ---------- 断点 ≤640px ---------- */
@media (max-width: 640px) {
  /* 红底 Hero 印章在窄屏隐藏，避免压字 */
  .hero__seal { display: none; }
  /* 第四部分视频：满宽 */
  .video-block { max-width: 100%; }
  /* 照片墙：缩小卡片宽度，轨道随之变矮（轨道高度由 wall.js 动态计算） */
  :root { --card-w: 200px; }
  .sHead__idx { font-size: 38px; line-height: 1; }
  .sHead__name { font-size: 27px; line-height: 1.25; }
  .lm-stream-head .s-no { font-size: 22px; line-height: 1.2; }
  .lm-stream-head .s-tag { font-size: 19px; }
}

/* ---------- 断点 ≤520px ---------- */
@media (max-width: 520px) {
  .pin { flex: 1 1 46%; }
}

/* ---------- 断点 <=360px：窄屏标题与翻转卡兜底 ---------- */
@media (max-width: 360px) {
  .flip__inner { height: 230px; }
  .flip__b { font-size: 12.5px; line-height: 1.65; }

  .lm-stream-head {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 2px;
  }
  .lm-stream-head .s-tag {
    min-width: 0;
    font-size: 18px;
  }
  .lm-stream-head .s-name {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    max-width: none;
  }
}