/* ============================================================
   adaptive.css — 拾光课栈（chaohangedu.com）响应式适配层
   ------------------------------------------------------------
   原则：
   1. ≥1440px 与设计稿像素一致：凡全局规则，均构造为在 1440px
      视口处恰好取设计稿原值（vw 系数 = 原值/14.4，或 clamp 上限
      恰好命中），不做任何改变桌面渲染的覆盖；
   2. 1440px 以下平滑降级至 320px，任何视口不出现横向滚动；
   3. 模板全部为内联样式，覆盖一律 !important；
   4. 老内核（微信 X5）降级：每条 clamp 前先写 vw/px 回退声明；
      overflow-x 先写 hidden 再写 clip（支持 clip 的内核优先，
      clip 不产生滚动容器，保住 sticky）。
   依赖 DOM 契约钩子：#page-root #site-nav [data-nav] [data-h]；
   无钩子处用 section id + 直接子代/nth 结构选择器定位。
   ============================================================ */

/* ---------- 0. 滚动体验与横向溢出兜底 ---------- */
html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* 老内核回退 */
  overflow-x: clip;   /* 优先生效：clip 不是滚动容器，sticky 不失效 */
}

#page-root section,
#page-root footer {
  scroll-margin-top: 80px;
}

/* ---------- 1. 根容器：全幅铺满 + 放开固定尺寸（原内联 1440x5400 overflow:hidden） ----------
   宽屏不再限制 max-width（背景全幅铺满）；≥1440px 的内容版心锁定
   见文件末尾 @media (min-width: 1440px) 块，1440px 以下行为不变。 */
#page-root {
  width: 100% !important;
  margin: 0 auto !important;
  height: auto !important;      /* 原内联 height:5400px，允许移动端内容撑高 */
  overflow: visible !important; /* 原内联 hidden 会成为滚动容器、吞掉 sticky，必须放开 */
}

/* ---------- 2. 导航：所有尺寸 sticky 置顶 ---------- */
#site-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 600 !important; /* 高于铺底画布与菜单浮层(500)，展开菜单时汉堡仍可点 */
}

/* 锚点链接触控目标 ≥40px（上下对称加垫，桌面视觉不变） */
#site-nav [data-nav="links"] > a {
  padding: 10px 2px !important;
}

/* ---------- 3. 画布铺底 + 1440px 宽元素兜底 ---------- */
#page-root canvas {
  width: 100% !important;
  display: block;
}
/* 高度由 adaptive.js 按 section 实际渲染高度写入 style.height
   （CSS 百分比高度在 height:auto 的 section 上不生效）。
   兜底：同时覆盖画布与装饰性 1440px 宽元素。 */
#page-root [style*="width: 1440px"] {
  width: 100% !important;
}

/* ---------- 4. 首屏版式（clamp 上限在 ≥1440 处命中设计稿原值） ---------- */
#top h1 {
  font-size: 15vw !important;                           /* 老内核回退 */
  font-size: clamp(44px, 9.45vw, 136px) !important;     /* 136/14.4 ≈ 9.45vw */
  letter-spacing: 2px !important;
  letter-spacing: clamp(2px, 0.7vw, 10px) !important;
}
#top h1 + p {
  font-size: 7vw !important;
  font-size: clamp(15px, 2vw, 28px) !important;
  letter-spacing: 2px !important;
  letter-spacing: clamp(2px, 0.42vw, 6px) !important;
}
#top > p { text-align: center; } /* 单行时无视觉差，窄屏多行时居中 */

/* 定宽网格改弹性（1440 处 100% 恰为原定宽：1200 / 1080） */
[data-h="hero-cards"]   { width: 100% !important; max-width: 1200px; }
[data-h="pricing-grid"] { width: 100% !important; max-width: 1080px; }

/* #about 统计大数字：≥768px 视口保持 46px 原值 */
#about > div:nth-of-type(2) strong {
  font-size: 6vw !important;
  font-size: clamp(30px, 6vw, 46px) !important;
}

/* ---------- 5. 各 section：height → min-height（保留原值），左右 padding 收窄 ---------- */
#top, #institution, #parents, #service,
#pricing, #about, #contact {
  height: auto !important;
  padding-left: 8vw !important;
  padding-left: clamp(20px, 8vw, 120px) !important; /* 8vw@1440=115 → 封顶 120 */
  padding-right: 8vw !important;
  padding-right: clamp(20px, 8vw, 120px) !important;
}
#top         { min-height: 848px; }
#institution { min-height: 720px; }
#parents     { min-height: 720px; }
#service     { min-height: 1240px; } /* 原 #delivery(780)+#rhythm(620) 合并 */
#pricing     { min-height: 740px; }
#about       { min-height: 680px; }
#contact     { min-height: 340px; }

/* ---------- 6. 汉堡按钮（adaptive.js 注入；>1080px 隐藏） ---------- */
#sg-nav-burger {
  display: none;
  box-sizing: border-box;
  width: 44px;              /* 触控目标 ≥40px */
  height: 44px;
  margin: 0 0 0 10px;
  padding: 0;
  border: 1px solid #1A2F66;
  border-radius: 4px;
  background: #0C1D48;
  cursor: pointer;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
#sg-nav-burger .sg-burger-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 2.5px 0;
  border-radius: 1px;
  background: #F2F5FF;
  transition: transform .2s ease, opacity .2s ease;
}
#sg-nav-burger.is-open .sg-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#sg-nav-burger.is-open .sg-burger-bar:nth-child(2) { opacity: 0; }
#sg-nav-burger.is-open .sg-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 7. 全屏菜单浮层（adaptive.js 注入 #sg-menu） ---------- */
#sg-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0; /* 不用 inset：兼容老 X5 */
  z-index: 500;                          /* 低于 #site-nav(600)：汉堡常驻可点 */
  box-sizing: border-box;
  padding: 92px 24px 48px;
  background: rgba(5, 13, 34, 0.97);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
#sg-menu.is-open { opacity: 1; visibility: visible; }
#sg-menu .sg-menu__title {
  margin: 0 0 14px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #7E8CB5;
}
#sg-menu .sg-menu__item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 54px;      /* 触控目标 ≥40px */
  margin: 0 0 12px;
  padding: 12px 18px;
  border: 1px solid #1A2F66;
  border-radius: 4px;
  background: #0C1D48;
  color: #F2F5FF !important;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
#sg-menu .sg-menu__item:active { background: #122861; }
#sg-menu .sg-menu__item--cta { background: #E9A23B; border-color: #E9A23B; color: #1A1408 !important; }
#sg-menu .sg-menu__item--wb  { background: #081636; border-color: #3A5AA8; }

/* 展开时锁 body 滚动（adaptive.js 同步切换 body.sg-lock） */
body.sg-lock { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  #sg-menu,
  #sg-nav-burger .sg-burger-bar { transition: none; }
}

/* ============================================================
   断点（自宽到窄，互不重叠）
   ============================================================ */

/* ---------- 8. ≤1439.98px：导航/标题收窄 + 触控目标（≥1440 不受影响） ---------- */
@media (max-width: 1439.98px) {
  #site-nav {
    padding-left: 4vw !important;
    padding-left: clamp(12px, 4vw, 120px) !important;
    padding-right: 4vw !important;
    padding-right: clamp(12px, 4vw, 120px) !important;
  }
  /* h2 逐段缩放：#institution 44 / 中段 48 / #about 56（上限=原值，≥1440 恒为原值） */
  #institution h2 {
    font-size: 32px !important;
    font-size: clamp(28px, 5vw, 44px) !important;
  }
  #parents h2, #service h2, #pricing h2 {
    font-size: 34px !important;
    font-size: clamp(28px, 5vw, 48px) !important;
  }
  #about h2 {
    font-size: 38px !important;
    font-size: clamp(30px, 5vw, 56px) !important;
  }
  /* 触控目标 ≥40px（仅 ≤1439，避免桌面页脚高度变化） */
  #contact a[href^="#"] { padding: 10px 0 !important; }
  #delivery > div:nth-of-type(1) > a { padding: 12px 14px !important; }
}

/* ---------- 9. ≤1080px：链接收进汉堡；两栏堆叠；多列网格 auto-fit ---------- */
@media (max-width: 1080px) {
  /* 导航 */
  #site-nav [data-nav="links"] { display: none !important; }
  #sg-nav-burger { display: flex !important; }
  #site-nav [data-nav="workbench"] { margin-left: auto !important; } /* 右侧聚拢，始终可见 */

  /* #service 内部网格：auto-fit 自适应列数
     （#rhythm/#delivery 为合并板块内部锚点 div：节奏网格是其第 1 个 div 子元素，
      #delivery 的交付网格仍是第 2 个 div 子元素——头部行在前） */
  #delivery > div:nth-of-type(2),
  #rhythm > div:nth-of-type(1) {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  }
  #delivery > div:nth-of-type(2) > div,
  #rhythm > div:nth-of-type(1) > div,
  [data-h="hero-cards"] > div { height: auto !important; }
  #delivery > div:nth-of-type(1) {
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }

  /* #institution 两栏堆叠：540px 文本列放开、500px 面板改自适应 */
  #institution, #parents {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 44px !important;
  }
  #institution > div:nth-of-type(1) { width: 100% !important; }
  #institution > div:nth-of-type(2) { height: auto !important; }
  #institution > div:nth-of-type(2) div { min-width: 0 !important; } /* 面板内步骤文本可换行 */

  /* #parents 错题本 mockup：绝对定位整体改文档流、宽度自适应 */
  #parents > div:nth-of-type(1) {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }
  #parents > div:nth-of-type(1) > div:nth-child(1) { display: none !important; } /* 纯装饰投影纸 */
  #parents > div:nth-of-type(1) > div:nth-child(2) {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  #parents > div:nth-of-type(1) > div:nth-child(3) { /* 「周末重练」贴纸改挂右下角 */
    left: auto !important;
    right: 6px !important;
    top: auto !important;
    bottom: -16px !important;
    width: 120px !important;
    height: auto !important;
    padding: 10px 8px !important;
  }
}

/* ---------- 10. ≤900px：about 行堆叠、统计两列、订阅双列、页脚换行 ---------- */
@media (max-width: 900px) {
  #about > div:nth-of-type(1) {
    flex-direction: column !important;
    gap: 28px !important;
  }
  #about > div:nth-of-type(1) > div:nth-of-type(1) { width: 100% !important; }
  #about > div:nth-of-type(2) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #about > div:nth-of-type(2) > div:nth-child(3) { border-left: 0 !important; padding-left: 0 !important; }

  [data-h="pricing-grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-h="pricing-grid"] > div { height: auto !important; }
  [data-h="pricing-grid"] > div:last-child { grid-column: 1 / -1 !important; }
  [data-h="pricing-grid"] > div:not(:last-child) > div > strong { font-size: clamp(26px, 6vw, 50px) !important; }
  [data-h="pricing-grid"] > div:last-child > div > strong { font-size: clamp(20px, 5vw, 36px) !important; }

  #contact > div:nth-of-type(1) {
    flex-direction: column !important;
    gap: 32px !important;
  }
  #contact > div:nth-of-type(1) > div:nth-child(2) {
    flex-wrap: wrap !important;
    gap: 32px 40px !important;
  }

  #delivery, #rhythm { gap: 16px !important; } /* 合并板块内部子块间距收紧 */
  #pricing  { gap: 32px !important; }
  #about    { gap: 40px !important; }
}

/* ---------- 11. ≤760px：首页卡片单列、CTA 行换行 ---------- */
@media (max-width: 760px) {
  [data-h="hero-cards"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-h="hero-cta"] { flex-wrap: wrap !important; }
}

/* ---------- 12. ≤640px：手机（CTA 收进菜单，工作台入口保持可见） ---------- */
@media (max-width: 640px) {
  #site-nav { height: 60px !important; }
  #site-nav > a:first-child > span:last-child { font-size: 18px !important; letter-spacing: 2px !important; }
  #site-nav [data-nav="workbench"] { height: 40px !important; padding: 0 12px !important; font-size: 13px !important; }
  #site-nav [data-nav="cta"] { display: none !important; } /* 预约咨询收进菜单 */

  [data-h="pricing-grid"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-h="pricing-grid"] > div:last-child { grid-column: auto !important; }

  #parents > div:nth-of-type(2) > div:nth-of-type(2) { grid-template-columns: minmax(0, 1fr) !important; }
  #about > div:nth-of-type(2) { grid-template-columns: minmax(0, 1fr) !important; }
  #about > div:nth-of-type(2) > div {
    border-left: 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid #25408C !important;
    padding-top: 20px !important;
  }
  #about > div:nth-of-type(2) > div:first-child { border-top: 0 !important; padding-top: 0 !important; }
  #about > p { margin: 8px 0 0 !important; } /* 撤掉 -40px 叠印 */

  #institution > div:nth-of-type(1) > div:nth-of-type(3),
  #parents > div:nth-of-type(2) > div:nth-of-type(3) { flex-wrap: wrap !important; }

  #contact > div:nth-of-type(1) > div:nth-child(2) {
    flex-direction: column !important;
    gap: 28px !important;
  }
  #contact > div:nth-of-type(2) {
    flex-direction: column !important;
    gap: 10px !important;
  }

  #sg-menu { padding: 84px 16px 40px; }
}

/* ============================================================
   13. ≥1440px：宽屏全幅铺满，内容列随视口拉伸
   ------------------------------------------------------------
   内容列 = 视口宽 - 2×120px 设计边距（不再锁 1200px 版心）：
   - 1440px 视口仍为设计原值（内容列 1200px、左右各 120px）；
   - 更宽时卡片/面板随内容列一起拉伸，背景全幅不变；
   - 仅保留 120px 左右边距，上下内边距不碰。
   与技术无关的窄屏规则（≤1439.98px 及更窄断点）宽度区间互斥，
   逐字节未动；本块放文件末尾，覆盖基础块的 clamp 左右 padding。
   ============================================================ */
@media (min-width: 1440px) {
  #page-root section,
  #page-root footer {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  #site-nav {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
  /* 解除网格上限（1200/1080 仅窄屏生效）：卡片随内容列拉伸 */
  [data-h="hero-cards"],
  [data-h="pricing-grid"] {
    max-width: none !important;
  }
}

/* ============================================================
   14. 全屏翻页：逐屏呈现 + 右侧圆点导航（adaptive.js 注入 #sg-dots）
   ------------------------------------------------------------
   - 每个 section 拉伸为整屏：min-height 取「设计稿原值」与
     「视口高 − sticky 导航」的较大者；max()/svh 不被识别的内核
     回退前一条声明（保持设计稿原值）；
   - html 以 scroll-padding-top 预留导航高度，section 吸附停在
     导航正下方；旧的 scroll-margin-top: 80px 归零，避免与
     scroll-padding 叠加造成双重偏移；
   - >1080px 强制逐屏吸附（mandatory + snap-stop：一次滚动恰好
     翻一屏）；≤1080px 温和吸附（proximity），重排后的长页仍可
     自由停留；
   - prefers-reduced-motion：关闭整页吸附（避免大幅位移动画）。
   ============================================================ */
html {
  scroll-padding-top: 72px; /* 回退值：桌面导航高（≤640px 断点覆盖为 60px） */
  scroll-snap-type: y proximity;
}
#page-root section,
#page-root footer {
  scroll-margin-top: 0;
  scroll-snap-align: start;
}
#top         { min-height: max(848px, calc(100vh - 72px)); min-height: max(848px, calc(100svh - 72px)); }
#institution { min-height: max(720px, calc(100vh - 72px)); min-height: max(720px, calc(100svh - 72px)); }
#parents     { min-height: max(720px, calc(100vh - 72px)); min-height: max(720px, calc(100svh - 72px)); }
#service     { min-height: max(1240px, calc(100vh - 72px)); min-height: max(1240px, calc(100svh - 72px)); }
#pricing     { min-height: max(740px, calc(100vh - 72px)); min-height: max(740px, calc(100svh - 72px)); }
#about       { min-height: max(680px, calc(100vh - 72px)); min-height: max(680px, calc(100svh - 72px)); }
#contact     { min-height: max(340px, calc(100vh - 72px)); min-height: max(340px, calc(100svh - 72px)); }

@media (min-width: 1081px) {
  html { scroll-snap-type: y mandatory; }
  #page-root section,
  #page-root footer { scroll-snap-stop: always; }
}

/* ≤640px：导航降为 60px，吸附预留同步收窄 */
@media (max-width: 640px) {
  html { scroll-padding-top: 60px; }
}

/* ---------- 右侧圆点导航（adaptive.js 注入与高亮） ---------- */
#sg-dots {
  position: fixed;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 450; /* 高于画布与内容，低于菜单浮层(500)与导航(600) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 5px;
  border-radius: 999px;
  background: rgba(8, 22, 54, 0.42);
}
#sg-dots button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#sg-dots button:focus-visible { outline: 2px solid #E9A23B; outline-offset: -2px; }
#sg-dots .sg-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(242, 245, 255, 0.45);
  transition: background-color .2s ease, transform .2s ease;
}
#sg-dots button:hover .sg-dot { background: rgba(242, 245, 255, 0.8); }
#sg-dots button.is-active .sg-dot {
  background: #E9A23B;
  transform: scale(1.3);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  #sg-dots .sg-dot { transition: none; }
}

/* ============================================================
   15. 手机端排版收紧（≤640px）
   ------------------------------------------------------------
   既有断点只做了「重排」（栏目堆叠、网格降列），桌面的大留白
   与大构件原样下放，小屏观感像放大的桌面页。本块在重排基础上
   压缩竖向留白与构件尺寸：顶部 96/104px → 48px，底部为 0 的
   板块补齐呼吸空间，首屏大字/大按钮、卡片内边距同步收小。
   ============================================================ */
@media (max-width: 640px) {
  /* 板块竖向留白（左右已由全局 clamp 收窄，此处只动上下） */
  #top, #institution, #parents, #service,
  #pricing, #about, #contact {
    padding-top: 48px !important;
    padding-bottom: 44px !important;
  }
  #contact { padding-bottom: 32px !important; }

  /* 首屏：标题、卡片、CTA 收小 */
  #top h1 {
    font-size: 34px !important;                       /* 老内核回退 */
    font-size: clamp(34px, 11vw, 44px) !important;
  }
  [data-h="hero-cards"] { margin-top: 28px !important; }
  [data-h="hero-cards"] > div { padding: 18px !important; gap: 8px !important; }
  [data-h="hero-cards"] h3 { font-size: 19px !important; }
  [data-h="hero-cta"] { margin-top: 20px !important; }
  [data-h="hero-cta"] a {
    height: 46px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
  }

  /* 机构/家长板块：面板与错题本样张收小 */
  #institution > div:nth-of-type(2) { padding: 20px !important; gap: 10px !important; }
  #institution > div:nth-of-type(2) > div[style*="18px 20px"] { padding: 14px 16px !important; }
  #parents > div:nth-of-type(1) > div:nth-child(2) { padding: 22px !important; gap: 12px !important; }

  /* 交付内容卡片：文字区收窄（h4=错题集名，h3=子标题） */
  #delivery > div:nth-of-type(2) > div > div:nth-child(2) { padding: 20px !important; }
  #delivery h3, #delivery h4 { font-size: 20px !important; }

  /* 服务节奏卡片（h4=卡片标题，h3=子标题） */
  #rhythm > div:nth-of-type(1) > div { padding: 20px !important; }
  #rhythm > div:nth-of-type(1) > div > span:first-child { font-size: 28px !important; }
  #rhythm h3, #rhythm h4 { font-size: 18px !important; }

  /* 订阅卡片 */
  [data-h="pricing-grid"] > div { padding: 22px 18px !important; }

  /* 圆点导航贴边收窄，减少遮挡正文 */
  #sg-dots { right: 6px; padding: 6px 4px; gap: 2px; }
  #sg-dots button { width: 18px; height: 18px; }
  #sg-dots .sg-dot { width: 6px; height: 6px; }
}