/* ==========================================================================
   巧思AI · 外壳层页面样式（page-shell.css）
   服务对象：首页 / 选课中心 / 课包详情 / 登录 / 注册 / 通用提示页这六张端上模板。
   叠在 base.css + theme.css 之后加载，只做两件半事：
     1) 补 base.css 里缺的类；2) 把字号与热区抬到「平板可点、正文可读」的下限；
     3) 按 320 / 560 / 768 / 1024 / 1440 / 2560 加固断点。
   颜色一律走 theme.css 的 var(--ms-*)，这里不出现任何写死的色值。
   ========================================================================== */

/* ---------- 一、正文下限：base.css 的 body 是 clamp(15px…) ，这里抬到 16px ---------- */
body { font-size: var(--ms-fs-body); }

/* 成句的辅助文字（不是标签/徽标）都按正文处理 */
.ms-hero__text,
.ms-auth__sub,
.ms-help,
.ms-note,
.ms-empty,
.ms-strip .ms-sub,
.ms-item__meta > span:not(.ms-badge) { font-size: var(--ms-fs-body); }

/* 栅格里最容易被长标题撑破的一列：显式声明可以被压缩 */
.ms-hero__inner > *,
.ms-page__main,
.ms-page__side,
.ms-grid > *,
.ms-strip > * { min-width: 0; }

/* ---------- 二、base.css 里缺的那一个类 ---------- */
/* notice 页大号提示符号：与 denied 页的锁同一枚视觉重量，只靠 mark 的字号撑不住 */
.ms-notice__sign { font-size: 34px; line-height: 1; }

/* ---------- 三、首页首屏：大屏改成「左介绍 / 右动作 + 数据」，留白更足 ---------- */
.ms-hero__intro { align-self: center; }
.ms-hero__title { letter-spacing: -.02em; }

@media (min-width: 1025px) {
  .ms-hero__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
    grid-template-areas:
      "intro acts"
      "intro stats";
    align-items: start;
    gap: clamp(18px, 2.2vw, 34px);
  }
  .ms-hero__intro { grid-area: intro; }
  .ms-hero__acts  { grid-area: acts; justify-content: flex-end; }
  .ms-hero__stats { grid-area: stats; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ---------- 四、断点加固 ---------- */

/* ≤560 手机：欢迎区里的按钮一整行，别挤成两枚半宽 */
@media (max-width: 560px) {
  .ms-hero__acts { flex-direction: column; align-items: stretch; }
  .ms-hero__acts .ms-btn { width: 100%; }
  .ms-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 561-768（平板竖屏 / 小平板）：卡片两列刚好，作业摘要与题型入口也走两列 */
@media (min-width: 561px) and (max-width: 768px) {
  .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 769-1024（平板横屏 / iPad 竖屏放大）：课包卡片三列 */
@media (min-width: 769px) and (max-width: 1024px) {
  .ms-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
}

/* 横屏矮窗口（平板横过来上课）：首屏压扁一点，一屏内就能看到课包卡片 */
@media (orientation: landscape) and (min-width: 700px) and (max-height: 700px) {
  .ms-hero { padding: clamp(18px, 2.6vw, 30px); }
  .ms-hero__stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .ms-section { margin-bottom: 18px; }
}

/* ≥1440 电脑：一行不必拉太长，卡片之间多给空隙。
   这里**不再写 `.ms-main{padding}`**：全站的内容盒边距只有 `base.css:63` 那条 `clamp(14px, 2.6vw, 30px)` 说了算。
   本文件被 7 个模板链接（首页、课包三页、登录注册、公告），旧声明让这 7 页在 ≥1440 各多出一截：
   实测 2560 上 `package/center` 的 `paddingLeft` 是 44px 而其余页 30px（删前那一跑），1920 上折成内容左缘就是 284 对 270，
   点进做题页时卡片整块横跳 14px——正是「跟其他页面宽度不一致」的那个观感（`/tmp/wide2560.mjs`、`/tmp/equalwidth.mjs`）。 */
@media (min-width: 1440px) {
  .ms-hero { padding: clamp(34px, 3vw, 56px); }
  .ms-grid { gap: clamp(18px, 1.6vw, 26px); }
  .ms-section { margin-bottom: clamp(26px, 2.4vw, 42px); }
}

/* ≥2560 大屏：正文行长不跟着屏幕变长。
   这里**不再写 `.ms-main{max-width}`，也不再写 `.ms-auth{max-width}`**：
   内容盒上限由 `base.css:689` 那条 `min-width:1921px → 1560px` 一处管，登录卡那三级宽度整条搬回 `base.css`。
   原来本文件在 2560 块里又写了一遍 `.ms-main{max-width:1680px}`，与 `base.css` 同特异性、不同断点、还只被 7 个模板链接——
   实测 2560 上 `package/center` 1680 而 `learn/index` 1560，同一块屏差 120px（`/tmp/wide2560.mjs`）。 */
@media (min-width: 2560px) {
  .ms-hero__text { max-width: 62ch; }
}

/* ---------- 五、平板（粗指针）：小按钮也抬到 44px 热区 ---------- */
@media (pointer: coarse) {
  .ms-btn--sm { min-height: 44px; padding: 0 16px; }
  /* 顶栏那颗配色键的热区在 base.css（每页都加载），这里不再重复 */
  .ms-nav__link { min-height: 48px; }
  .ms-item__title { display: inline-flex; align-items: center; min-height: 44px; }
  /* 区块标题右侧那个文字链接（全部作业 / 回选课中心）单独成行，热区补足 44px */
  .ms-section__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  /* 登录 / 注册卡片底部那两行出口链接 */
  .ms-auth__foot p { display: flex; justify-content: center; flex-wrap: wrap; }
  .ms-auth__foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
}

/* ---------- 六、课包卡片：整张卡是链接，脚部那枚「按钮」只是装饰，别让它换行错位 ---------- */
.ms-pack__foot .ms-btn--sm { pointer-events: none; }
.ms-pack__foot .ms-badge { flex: none; }

/* 选课中心的筛选条与它下面的卡片墙之间要留一段：
   几行年级/标签胶囊直接压在卡片上时，看不出一组筛选和一组结果是两件事 */
.ms-filter { margin: 10px 0 clamp(18px, 2.4vw, 28px); }
.ms-filter .ms-sub { margin-top: 10px; }

/* 登录 / 注册：卡片在超宽屏上不至于贴着导航条铺开 */
@media (min-width: 1025px) {
  .ms-auth { margin-top: clamp(24px, 6vh, 84px); }
}