/* 畅途 · 活动与机会：二级导航 / 项目卡 / 项目行 / 分页 / 系列筛选
   只被 activities.html 与四个 activities-*.html 引用。 */

/* ===== 标题 =====
   区块头交还给 site.css 的三层结构：英文微标签在上、中文标题在下，标签前一枚
   6px 渐变小方块。这里原来把 h2 改回 block、把小标签压到中文下方，
   于是活动页的每个区块头都和首页反着长。
   hero 的英文小标同理：原来它跟在中文后面、字距 3.4px，是另一套写法，
   现在和区块头共用一套微标签。 */

/* 首屏标题靠左。
   .pg-hero .wrap 默认 max-width:900（给带导语的页留阅读宽度），
   而下面四个板块用的是 1160 的 .wrap，于是标题比板块内容右移 130px，
   两段对不齐。这一族五个页（activities + 四个 activities-*）的正文
   全部是 1160 的左对齐列表，hero 跟着走同一条左线。
   和 .page-courses 同一个处理。 */
.page-activities .pg-hero .wrap{max-width:1160px;}

.pg-hero h1{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px;}
.pg-hero h1 small{display:inline-flex;align-items:center;gap:9px;margin-top:0;
  font-size:10.5px;font-weight:700;letter-spacing:.22em;line-height:1;
  color:var(--text-muted);text-transform:uppercase;}
.pg-hero h1 small::before{content:"";width:6px;height:6px;border-radius:2px;flex:none;
  background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-purple) 100%);
  box-shadow:0 0 0 3px rgba(11,99,197,.09);}

/* ===== 分类条 =====
   原来是一条整宽白条，横贯页面，把连续的光场切成上下两半；
   而且白条 + 下边框这套是"区块容器"的语言，首页已经不用了。
   改成一颗玻璃胶囊：滚到顶部时浮在光场上，和首页的切换条同一套材质。

   胶囊靠左，和下面四个板块的内容列同一条左线。原来是 fit-content + margin:auto
   居中，标题靠左之后它就悬在两段左对齐的内容中间，右边空掉半行。
   对齐没有在 margin-left 上写 calc：那种写法只在某一个宽度区间成立。
   这里让 .act-nav 用和 main>section 完全相同的盒子（calc(100% - 56px) / 1360），
   胶囊再放进 .wrap（1160 / 24）里，从 480 到 1920 每一档都自动落到同一条线。 */
.act-nav{
  position:sticky;top:86px;z-index:50;
  width:calc(100% - 56px);max-width:1360px;margin:26px auto 0;
  pointer-events:none;   /* 整条是透明的，别挡住从下面划过去的卡片 */
}
.act-nav .wrap{display:flex;}
.act-pill{
  display:flex;align-items:center;gap:4px;padding:4px;max-width:100%;
  overflow-x:auto;scrollbar-width:none;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);
  border:1px solid var(--glass-2-edge);
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  pointer-events:auto;
}
.act-pill::-webkit-scrollbar{display:none;}
/* a 是分类页的页间切换，button 是首页的原地筛选，两种都吃这一套 */
.act-pill > a,.act-pill > button{
  flex-shrink:0;font:inherit;font-size:14px;font-weight:600;line-height:1.5;
  padding:11px 22px;border-radius:var(--r-pill);white-space:nowrap;
  color:var(--ink-2);background:none;border:0;text-decoration:none;
  cursor:pointer;transition:background .16s,color .16s,box-shadow .16s;
}
.act-pill > a:hover,.act-pill > button:hover{background:rgba(255,255,255,.62);color:var(--blue);}
.act-pill > a[aria-current="page"],
.act-pill > button[aria-pressed="true"]{color:#fff;
  background:linear-gradient(158deg,var(--brand-blue) 0%,var(--brand-hover) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 8px 18px -12px rgba(11,99,197,.95);}

/* ===== 板块 =====
   不再画横贯的 border-top：那条线会横穿光场，把"一张连续底图"切成一段一段。
   区块之间靠间距分节。
   间距 44+44=88：板块内部最大的一处间距是「标题 → 近期赛事」的 32，
   分节距离取它的 2.75 倍，读起来是一节接一节；原来是 60+56=116，
   是 32 的 3.6 倍，四节看下来像四张断开的页面。 */
.act-sec{padding:44px 0;}
.act-sec[id]{scroll-margin-top:156px;}
/* 筛选时整节收起。[hidden] 要自己补 display:none，
   这一条不是多余的——同一个坑在 .mo / .fm / .pj-filter 上都踩过。 */
.act-sec[hidden]{display:none;}
.act-sub{display:flex;align-items:baseline;gap:10px;margin:-14px 0 18px;}
.act-sub b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.1px;}
.act-sub span{font-size:12.5px;color:var(--text-3);}
.act-more{display:inline-flex;align-items:center;gap:7px;margin-top:22px;
  font-size:14px;font-weight:700;color:var(--blue);text-decoration:none;transition:gap .16s;}
.act-more:hover{gap:12px;color:var(--blue-deep);}

/* ===== 项目卡（活动与机会页预览） =====
   和首页的能力卡、阶段卡用同一套 Level 2 玻璃：透底 + 内高光 + 蓝调细影。
   原来是纯白实底 + 灰边，在一张光场上就是一块贴上去的白纸。 */
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pj-card{display:flex;flex-direction:column;overflow:hidden;padding:0;
  background:var(--glass-2-bg);border:1px solid var(--glass-2-edge);border-radius:var(--r-card);
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
  transition:background .18s,box-shadow .18s,transform .18s,border-color .18s;}
.pj-card:hover{transform:translateY(-3px);background:var(--glass-2-bg-hover);
  box-shadow:var(--glass-inner-strong),var(--glass-shadow-hover);
  border-color:rgba(255,255,255,.94);}
/* 卡片内边距挪到 .pj-body：图片贴到卡片边缘，和课程与实践页的课程卡同一种做法。
   两页结构几乎一样，翻页时不该看出字号和留白变了。 */
.pj-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px;}
.pj-card h3{margin:12px 0 8px;font-size:20px;font-weight:800;color:var(--ink);
  line-height:1.4;letter-spacing:-.3px;}
.pj-meta{margin:0 0 6px;font-size:14.5px;line-height:1.75;color:var(--ink-2);}
.pj-dl{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--text-3);}
.pj-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;
  font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;transition:gap .16s;}
.pj-card:hover .pj-go{gap:10px;color:var(--blue-deep);}

/* ===== 状态 ===== */
.pj-st{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:800;letter-spacing:.2px;
  padding:3px 10px;border-radius:6px;border:1px solid transparent;}
.pj-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pj-st[data-s="open"]{color:#0B6B43;background:#E9F7EF;border-color:#C3E7D3;}
/* 常年开放用蓝色：它和「报名中」都是现在能报，区别是没有截止日，
   同一个绿会让两件事看起来一样。 */
.pj-st[data-s="year"]{color:var(--blue-700);background:#EAF3FE;border-color:#CFE4FB;}
.pj-st[data-s="soon"]{color:#8A5A12;background:#FDF6E7;border-color:#EFDDB4;}
.pj-st[data-s="done"]{color:#5C6675;background:#F2F4F7;border-color:#E1E6EE;}

/* ===== 项目行（品类页） =====
   整块列表装进一张玻璃卡，和活动页的项目卡是同一块材质。
   行与行之间只留一条极淡的分隔线，线不再横贯页面——
   横贯的线会把光场切成两半，也是首页已经去掉的那套写法。 */
.pj-list{
  background:var(--glass-2-bg);border:1px solid var(--glass-2-edge);
  border-radius:var(--r-card);box-shadow:var(--glass-inner),var(--glass-shadow-sm);
  padding:2px 24px 12px;
}
.pj-grp{display:flex;align-items:baseline;gap:10px;padding:22px 0 6px;}
.pj-grp:first-child{padding-top:16px;}
.pj-grp b{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.4px;}
.pj-grp span{font-size:12px;color:var(--text-3);}
.pj-row{display:grid;grid-template-columns:minmax(0,1fr) 272px 116px 92px;
  gap:20px;align-items:center;padding:17px 12px;margin:0 -12px;
  border-bottom:1px solid rgba(11,99,197,.09);border-radius:12px;
  transition:background .16s;}
.pj-row:last-child{border-bottom:0;}
.pj-row:hover{background:rgba(255,255,255,.52);}
.pj-name{min-width:0;}
.pj-name > a{display:block;font-size:15.5px;font-weight:800;color:var(--ink);
  text-decoration:none;line-height:1.5;letter-spacing:-.1px;}
.pj-name > a:hover{color:var(--blue);}
.pj-series{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:600;
  color:var(--text-3);letter-spacing:.2px;}
.pj-col{font-size:13px;line-height:1.65;color:var(--text-2);}
.pj-col-dl{font-size:12px;color:var(--text-3);line-height:1.5;}
.pj-col-dl b{display:inline-block;margin-top:3px;font-size:13.5px;font-weight:700;color:var(--ink);}
.pj-row-go{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;
  font-size:13px;font-weight:700;color:var(--blue);text-decoration:none;white-space:nowrap;}
.pj-row:hover .pj-row-go{color:var(--blue-deep);}

/* ===== 分页 ===== */
.pj-page{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:30px;}
.pj-page button{font:inherit;font-size:13px;font-weight:600;min-width:36px;height:36px;
  padding:0 12px;border-radius:9px;cursor:pointer;
  color:var(--ink-2);background:var(--glass-2-bg);border:1px solid var(--glass-2-edge);
  box-shadow:var(--glass-inner);transition:.16s;}
.pj-page button:hover:not(:disabled){border-color:rgba(11,99,197,.34);color:var(--blue);
  background:var(--glass-2-bg-hover);}
.pj-page button[aria-current="true"]{background:var(--blue);border-color:var(--blue);color:#fff;}
.pj-page button:disabled{opacity:.42;cursor:not-allowed;}

/* ===== 系列筛选（页面最下方） ===== */
.pj-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:34px;padding:16px 18px;border-radius:var(--r-card);
  background:var(--glass-2-bg);border:1px solid var(--glass-2-edge);
  box-shadow:var(--glass-inner);}
.pj-filter b{flex-shrink:0;margin-right:4px;font-size:11.5px;font-weight:800;
  letter-spacing:1px;color:var(--text-3);}
.pj-filter button{font:inherit;font-size:12.5px;font-weight:600;line-height:1.5;
  padding:6px 13px;border-radius:8px;cursor:pointer;
  color:var(--ink-2);background:rgba(255,255,255,.62);border:1px solid var(--glass-2-edge);transition:.16s;}
.pj-filter button:hover{border-color:var(--blue);color:var(--blue);}
.pj-filter button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff;}
.pj-filter[hidden]{display:none;}

/* ===== 空态 ===== */
/* 虚线框是"占位符"的语言。这一块是"这个方向暂时没有开放场次"，
   它仍然是页面内容的一部分，所以用和项目卡同一块玻璃，只把文字调淡。 */
.pj-empty{padding:52px 24px;text-align:center;border-radius:var(--r-card);
  background:var(--glass-2-bg);border:1px solid var(--glass-2-edge);
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
  font-size:14px;line-height:1.85;color:var(--text-2);}
.pj-empty a{color:var(--blue);font-weight:700;}
.pj-empty-btn{font:inherit;font-size:13px;font-weight:700;margin-left:8px;padding:4px 12px;
  border-radius:8px;cursor:pointer;color:var(--blue);background:var(--surface);
  border:1px solid var(--border);}

/* ===== 响应式 ===== */
@media (max-width:1020px){
  .pj-grid{grid-template-columns:1fr 1fr;}
  .pj-row{grid-template-columns:minmax(0,1fr) 200px 100px 84px;gap:14px;}
  .pj-col-meta{font-size:12.5px;}
}
@media (max-width:820px){
  .pj-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:18px 12px;}
  .pj-col-meta{grid-column:1;grid-row:2;font-size:12.5px;color:var(--text-3);}
  .pj-col-dl{grid-column:1;grid-row:3;font-size:12px;}
  .pj-col-dl br{display:none;}
  .pj-col-dl b{display:inline;margin:0 0 0 4px;font-size:13px;}
  .pj-row-go{grid-column:2;grid-row:1 / span 3;align-self:center;}
}
@media (max-width:760px){
  /* 窄屏胶囊占满整行，五个按钮等分：390 下按内容排要 330 宽，
     多出来的那个被挤进横向滚动，看起来像只有四个。
     宽度不改，还跟着 main>section 那套盒子走，左边缘和标题同一条线 */
  .act-nav{top:76px;margin-top:20px;}
  .act-pill{width:100%;}
  .act-pill > a,.act-pill > button{flex:1;min-width:0;font-size:13.5px;padding:10px 0;text-align:center;}
  .act-sec{padding:36px 0;}
  .pj-grid{grid-template-columns:1fr;}
  .act-sub{margin-top:-8px;}
}
@media (max-width:560px){
  /* 窄屏一行放不下三块信息，查看详情单独落一行，靠左读起来才顺 */
  .pj-row{grid-template-columns:1fr;gap:6px;padding:16px 12px;}
  .pj-row-go{grid-column:1;grid-row:4;justify-content:flex-start;align-self:auto;margin-top:4px;}
}