/* 首页私有样式。共享令牌与通用组件在 renyimen.css，不要在这里重复定义。
   本文件补 renyimen.css 里没有的首页区块（热度排行 / 近期开课 / 为什么值得来 / 搜索与折叠筛选 /
   卡片封面与热度行），以及移动端打磨（家长基本从微信里用手机打开）。 */

/* ---------- 通用：区块与标题 ---------- */
.block{padding:44px 0 0}
.s-head{margin:0 0 16px}
.s-head h2{margin:0 0 6px;font-size:clamp(21px,3vw,27px);font-weight:800;letter-spacing:-.018em}
.s-note{margin:0;font-size:14.5px;color:var(--soft);max-width:62ch;line-height:1.65;text-wrap:pretty}
.s-load{margin:0;font-size:14.5px;color:var(--mut)}
main section[id],.block{scroll-margin-top:76px}
/* 窄屏别把「带走」拆到两行 */
h1 .th{white-space:nowrap}
/* .sr-only 已搬进 renyimen.css（跳转链接、播报区、表单标签全站都要用），这里不再重复定义 */
/* #grid 是跳转落点，需要 scroll-margin，否则吸顶的搜索条会盖住列表开头 */
#grid{scroll-margin-top:120px}

/* ---------- 热度排行 ---------- */
.bandtabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px}
.hot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hot-r{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md)}
.hot-n{flex:none;width:30px;height:30px;line-height:30px;text-align:center;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:14px;font-weight:700;color:var(--mut);background:var(--bg2)}
.hot-m{flex:1;min-width:0;display:block;color:inherit}
.hot-t{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hot-m:hover .hot-t{color:var(--pd)}
.hot-meta{display:block;font-size:12.5px;color:var(--mut);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hot-v{flex:none;font-size:12.5px;color:var(--soft);white-space:nowrap}
.hot-v b{font-family:var(--mono);font-size:17px;color:var(--ink);margin-right:3px;
  font-variant-numeric:tabular-nums}
.hot-a{flex:none}
.voted.vsm{font-size:12.5px;white-space:nowrap}
/* 前三名：卡片抬起来，名次牌换语义色 */
.hot-r.m1,.hot-r.m2,.hot-r.m3{border-color:var(--line);box-shadow:var(--sh-soft);padding:13px 14px}
.hot-r.m1 .hot-n{background:var(--suns);color:var(--sun-deep)}
.hot-r.m2 .hot-n{background:var(--ps);color:var(--pd)}
.hot-r.m3 .hot-n{background:var(--mints);color:var(--mint)}
.hot-r.m1 .hot-t{font-size:17.5px}
.hot-r.m2 .hot-t,.hot-r.m3 .hot-t{font-size:16.5px}
/* 还没有票的课：虚线、名次留空，绝不给假名次 */
.hot-r.noseat{background:transparent;border-style:dashed}
.hot-r.noseat .hot-n{background:transparent;color:var(--mut);font-weight:400}
.hot-seedhead{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);margin:18px 0 8px}
.hot-cold{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:20px 22px;margin-bottom:16px}
.hc-t{margin:0 0 6px;font-size:16.5px;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.hc-s{margin:0;font-size:13.5px;color:var(--soft);line-height:1.65;max-width:56ch}
.hot-more{margin:14px 0 0;font-size:13.5px}

/* ---------- 近期开课 ---------- */
.ses-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.ses{display:flex;align-items:flex-start;gap:16px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh-soft)}
.ses-d{flex:none;width:58px;text-align:center;background:var(--ps);border-radius:var(--r-md);
  padding:8px 4px;line-height:1.2}
.ses-d b{display:block;font-family:var(--mono);font-size:17px;color:var(--pd);font-weight:700}
/* 原来这里有 opacity:.8，把 --pd 在 --ps 上的 5.49:1 压到 3.79:1，不够 4.5 —— 去掉 */
.ses-d span{font-size:11.5px;color:var(--pd)}
.ses-m{flex:1;min-width:0}
.ses-m h3{margin:0 0 3px;font-size:16.5px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.ses-m h3 a{color:var(--ink)}
.ses-m h3 a:hover{color:var(--pd)}
.ses-meta{margin:0;font-size:13px;color:var(--soft)}
.ses-venue{margin:2px 0 0;font-size:13px;color:var(--mut)}
.ses-s{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.ses-n{font-family:var(--mono);font-size:11.5px;color:var(--mut);white-space:nowrap}
/* 没排班时只占一行，别让空态挤掉下面真正有货的区块 */
.ses-empty{margin:0;font-size:14px;color:var(--soft);background:var(--surface);
  border:1px dashed var(--line);border-radius:var(--r-md);padding:14px 16px;line-height:1.6}

/* ---------- 为什么值得来 ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.why-c{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:20px}
.why-c i{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pd);display:block;margin-bottom:10px}
.why-c b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.why-c p{margin:0;font-size:13.5px;color:var(--soft);line-height:1.65;text-wrap:pretty}

/* ---------- 课程卡 ---------- */
.c-hit{display:flex;flex-direction:column;gap:12px;color:inherit}
.c h3,.c .sub,.c .dv,.c .pbl{overflow-wrap:anywhere}
/* 封面：图没到位时整块被 JS 摘掉，这里的底色只是加载中的占位 */
.cover{aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--bg2)}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.pbl{margin:0;font-size:13.5px;color:var(--ink);line-height:1.55}
.pbl em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pd);display:block;margin-bottom:2px}
.heat{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;padding-top:11px;
  border-top:1px solid var(--line-soft);font-size:13px;color:var(--soft)}
.heat-n b{font-family:var(--mono);font-size:19px;color:var(--ink);margin-right:3px;
  font-variant-numeric:tabular-nums}
.heat-r{font-size:12px;color:var(--pd);background:var(--ps);padding:2px 10px;border-radius:var(--r-pill)}
.heat-z{font-size:12.5px;color:var(--mut)}
.grid-top{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));padding-bottom:0}
.c-top{border-color:var(--line);box-shadow:var(--sh-card)}
.c-top .rank{margin:0;align-self:flex-start;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pd);background:var(--ps);
  padding:4px 11px;border-radius:var(--r-pill)}
.c-top .rank b{font-size:11.5px;font-weight:700}
.c-top h3{font-size:19px}
/* 全表卡：同样的信息骨架，密度收紧一档 */
.c-lite{padding:16px 16px 14px;box-shadow:var(--sh-soft)}
.c-lite .c-hit{gap:10px}
.c-lite h3{font-size:16.5px}
.c-lite .sub{font-size:13px}
.c-lite .dv{font-size:13px;padding:8px 11px;background:transparent;border:1px solid var(--line-soft)}
/* 全表 51 张卡，长文截断一档，完整内容在详情页 */
.c-lite .sub,.c-lite .pbl{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.c-lite .sub{-webkit-line-clamp:1}
.c-lite .pbl{-webkit-line-clamp:2}
.c-lite .pbl em{display:inline;margin:0 6px 0 0}   /* 标签转行内，clamp 才按文字算行数 */

/* ---------- 搜索 + 筛选 ---------- */
.fbar{display:flex;gap:10px;align-items:center}
.fsearch{position:relative;flex:1;min-width:0}
/* 搜索框也是「只靠边框才认得出是个控件」的那一类，用 --line-strong（3.1:1） */
.fsearch input{width:100%;padding:11px 44px 11px 14px;border-radius:var(--r-md);
  border:1px solid var(--line-strong);background:var(--surface);font-size:16px;font-family:inherit;
  color:var(--ink);-webkit-appearance:none;appearance:none}
.fsearch input::-webkit-search-decoration,
.fsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.fsearch input::placeholder{color:var(--mut)}
/* 不写 outline:none —— 写了键盘用户就看不出焦点在搜索框里 */
.fsearch input:focus{border-color:var(--p);background:var(--surface)}
.fq-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;
  border:0;background:transparent;color:var(--mut);font-size:21px;line-height:1;cursor:pointer;
  border-radius:var(--r-pill)}
.fq-x:hover{color:var(--ink);background:var(--bg2)}
.fbtn{display:none}
.fbody{margin-top:12px}
.freset{display:none}
.freset.show{display:flex}

/* ---------- 移动端优先打磨：375px 第一屏要能看到排行榜前几名 ---------- */
@media(max-width:760px){
  /* 首屏压缩：去掉装饰性 kick，轮次 pill 收成一行横滑 */
  .hero{padding:22px 0 18px}
  .kick{display:none}
  .lede{font-size:15.5px;line-height:1.62}
  .roundbar{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-top:14px;padding-bottom:2px;
    scrollbar-width:none}
  .roundbar::-webkit-scrollbar{display:none}
  .pill{flex:none;white-space:nowrap}
  .block{padding-top:28px}
  #hot{padding-top:18px}
  .s-head{margin-bottom:10px}
  .s-head h2{font-size:20.5px}
  .s-note{font-size:13.5px}
  .wide-only{display:none}          /* 次要的一句在手机上省掉，把排行榜顶进第一屏 */

  /* .btn / .btn.sm / .chip / .nav a.lnk 的 44px 都已统一挪到 renyimen.css，全站生效。
     这里只留首页独有的那几个。 */
  .fq-x{width:44px;height:44px}
  /* 排行行的课程链接原来只有 38px 高；它是这一屏最主要的点击目标，必须够 44 */
  .hot-m{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  /* 「往下看全部课程与筛选」是一个独立成段的导航链接，不是行文里的内联链接，
     所以按可点区域算，要够 44px 高 */
  .hot-more a{display:inline-flex;align-items:center;min-height:44px}

  /* 排行榜：年级档一行横滑，行内保持「名次 / 课程 / 人数 / 想上」四段 */
  .bandtabs{flex-wrap:nowrap;overflow-x:auto;gap:7px;margin-bottom:12px;padding-bottom:2px;
    scrollbar-width:none}
  .bandtabs::-webkit-scrollbar{display:none}
  .hot-r{gap:10px;padding:9px 12px}
  .hot-r.m1,.hot-r.m2,.hot-r.m3{padding:11px 12px}
  .hot-n{width:26px;height:26px;line-height:26px;font-size:13px}
  .hot-t{font-size:14.5px}
  .hot-r.m1 .hot-t{font-size:16px}
  .hot-r.m2 .hot-t,.hot-r.m3 .hot-t{font-size:15px}
  .hot-v{font-size:11.5px}
  .hot-v b{font-size:15px}
  .hot-a .btn.sm{padding:8px 12px}
  .hot-cold{padding:13px 15px;margin-bottom:12px}
  .hc-t{font-size:15px;line-height:1.4;margin-bottom:5px}
  .hc-s{font-size:12.5px;line-height:1.55}

  /* 搜索常驻吸顶，筛选收成一枚按钮；展开时取消吸顶，免得盖住卡片 */
  .filters{position:sticky;top:62px;padding:10px 0}
  .filters.fopen{position:static}
  .fsearch input{padding:12px 48px 12px 14px;font-size:16px}   /* 16px 防 iOS 聚焦时缩放 */
  .fbtn{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:48px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
    padding:8px 13px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
  .fbtn.has{border-color:var(--p);background:var(--ps);color:var(--pd)}
  .fbtn-s{font-family:var(--mono);font-size:11px;background:var(--p);color:#fff;
    min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:var(--r-pill)}
  .fbtn-i{width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
    transform:rotate(45deg) translate(-2px,-2px);transition:.18s}
  .fbtn.has .fbtn-i{border-color:var(--pd)}
  .fbtn[aria-expanded="true"] .fbtn-i{transform:rotate(225deg) translate(-2px,-2px)}
  .fbody{display:none;padding-top:10px;margin-top:0}
  .fbody.open{display:block}
  .frow{flex-wrap:nowrap;align-items:center;gap:8px;margin-bottom:8px}
  .flab{width:34px;flex:none;font-size:10px}
  .frow>span:not(.flab){display:flex;flex:1;min-width:0;gap:7px;overflow-x:auto;
    padding-bottom:2px;scrollbar-width:none}
  .frow>span:not(.flab)::-webkit-scrollbar{display:none}
  .chip{flex:none;white-space:nowrap}

  /* 卡片：手机上一列 */
  .count{margin:14px 0 12px}
  .grid{gap:12px;padding-bottom:56px}
  /* 「首批推荐」原来在手机上仍是 minmax(340px,1fr)：340 比 320px 机型的内容宽（288）
     还大，整页被撑出横向滚动条。手机一律一列。 */
  .grid-top{grid-template-columns:1fr;gap:12px}
  .ses-list{grid-template-columns:1fr}
  .ses{padding:14px;gap:12px;flex-wrap:wrap}
  .ses-s{flex:1 0 100%;flex-direction:row;align-items:center;justify-content:flex-start;
    flex-wrap:wrap;gap:8px;text-align:left}
  .why-grid{grid-template-columns:1fr;gap:10px}
  .why-c{padding:16px 18px}
  .c{padding:16px 16px 14px}
  .acts{gap:8px}
  .acts .btn{flex:1}
  .voted{align-self:center}
}

/* 很窄的机型（390px 及以下）再收一档，保证不横向溢出 */
@media(max-width:390px){
  h1{font-size:28px}
  .ses-d{width:52px}
  .ses{gap:10px}
  .c-top h3{font-size:17.5px}
  .tag{font-size:11px;padding:2px 8px}
  .hot-r{gap:8px}
  .hot-v{font-size:11px}
}