/* 畅途 · 课程与实践 / 活动与机会
   只被 courses.html 与 activities.html 引用。

   表面沿用全站玻璃体系，不另起一套：
   底是 body 上的固定光场，卡片是 --glass-2 那三层（半透白底 + 白边 +
   顶部内高光 + 蓝环境影）。这里不写任何 background 给 body 或 section，
   也不给板块铺底色——那会把一张连续的光场切成一段一段。

   这两页与其它页的差别只在版式：卡片两列，图在上、字在下。 */

/* ===== 首屏 =====
   左右双栏 45 / 55，图在右。上内边距 64，下边距只留到第一个区块的一半，
   剩下的一半交给 .cat-sec 的上内边距——两边各给一次会变成两倍。 */
/* 高度锁死 471、内容区垂直居中。471 = 64 + 387 + 20，
   387 是原来右栏那张 3:2 图的实高（(1112-56)×0.55×2/3）。
   锁死之后，课程页换成整条融合大图、活动页还是右边一张卡，
   两页 h1 都落在 260，换页标题不动。 */
.cat-hero{display:flex;align-items:center;min-height:471px;padding:64px 0 20px;}
.cat-hero > .wrap{width:100%;}
.cat-hero .wrap{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  gap:56px;align-items:center;}
.cat-hero h1{margin:0;font-size:clamp(34px,3.6vw,46px);line-height:1.2;
  letter-spacing:-1.2px;font-weight:800;color:var(--ink);}
/* 副标统一按两行留高。两页文案长短不一样——一页折两行、一页一行——
   align-items:center 之后 h1 会跟着上下跳十几个像素，翻页看着就是"标题在动"。
   留够两行，h1 就固定在同一个高度。 */
.cat-hero .lead{margin-top:18px;max-width:520px;font-size:16px;line-height:1.85;
  min-height:calc(2 * 1.85em);color:var(--ink-2);text-wrap:pretty;}
.cat-hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}

/* ===== 首屏融合大图 =====
   课程与实践用这一版：图铺满整条首屏，不是右边一张卡。
   文字占 9%–44%，所以 0–36% 完全不出图，给标题和说明留干净底子；
   44%–85% 走完"若隐若现 → 清晰"；最右 7% 淡出收口——
   容器两侧各有留白，不收口就是一条竖直硬边，一眼看出是贴上去的矩形。

   三层叠出过渡，单靠透明度会像一层灰纱：
   ① 横向 alpha 遮罩，中段走非线性曲线，不是匀速渐变
   ② 图上再叠纵向遮罩，把上下两条硬边化掉
   ③ 中段一道带遮罩的 backdrop 虚焦——"轻雾化"落在这里，
      对比度降下去但轮廓还在，右侧清晰区一点不碰
   全层没有圆角、描边、投影：图和页面光场是同一张底。 */
.cat-hero.has-art{position:relative;isolation:isolate;}
.cat-hero.has-art .wrap{position:relative;z-index:1;}
.cat-hero-art{position:absolute;inset:0;z-index:0;margin:0;padding:0;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%,rgba(0,0,0,0) 36%,rgba(0,0,0,.07) 45%,rgba(0,0,0,.26) 53%,
    rgba(0,0,0,.54) 61%,rgba(0,0,0,.80) 69%,rgba(0,0,0,.95) 77%,
    #000 85%,#000 93%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%,rgba(0,0,0,0) 36%,rgba(0,0,0,.07) 45%,rgba(0,0,0,.26) 53%,
    rgba(0,0,0,.54) 61%,rgba(0,0,0,.80) 69%,rgba(0,0,0,.95) 77%,
    #000 85%,#000 93%,rgba(0,0,0,0) 100%);}
/* 图挂了就整条不显示，不留半截空盒子 */
.cat-hero-art:not(.is-filled){display:none;}
.cat-hero-art img{width:100%;height:100%;display:block;
  object-fit:cover;object-position:100% 50%;
  /* 压一档色温与饱和：这张照片原色偏亮偏艳，不压会盖过左边的标题。
     只压 7%，清晰度不动——右侧仍是视觉落点。 */
  filter:saturate(.93) brightness(1.04) contrast(.99);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 15%,#000 84%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 15%,#000 84%,rgba(0,0,0,0) 100%);}
.cat-hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-backdrop-filter:blur(7px) saturate(.92);
  backdrop-filter:blur(7px) saturate(.92);
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 40%,rgba(0,0,0,.9) 50%,rgba(0,0,0,.6) 60%,rgba(0,0,0,0) 72%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0) 40%,rgba(0,0,0,.9) 50%,rgba(0,0,0,.6) 60%,rgba(0,0,0,0) 72%);}

/* 活动页首屏矮一档：这一页要尽快露出分类条和活动 */

/* ===== 图片声明 =====
   活动卡用的是主办方主视觉与示意素材，不是每场都实拍。
   只放活动与机会页——四个分类页是纯文字列表，不出图，写这条反而是噪音。 */
.act-note{margin:0 0 34px;font-size:12.5px;line-height:1.8;
  color:var(--text-3);text-wrap:pretty;}

/* ===== 区块 =====
   44 + 44 = 88 的分节距离，和四个分类页一致。
   标题走全站三层结构（英文微标签 → 中文标题），不另写一套字号。 */
.cat-sec{padding:44px 0;}
.cat-sec[id]{scroll-margin-top:132px;}
/* 页脚没有自己的上边距，全站靠最后一个 section 的 padding-bottom 撑开。
   这里最后一块也是 44，补 44 凑够全站的 88，页脚才不至于贴住正文。 */
.page-courses main{padding-bottom:44px;}
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:24px;}
.cat-head .sec-head{margin-bottom:0;}
/* 「查看全部」跟着标题基线走，不下沉到卡片那一行 */
.cat-more{display:inline-flex;align-items:center;gap:6px;padding-bottom:4px;
  font-size:13.5px;font-weight:700;color:var(--blue);text-decoration:none;
  white-space:nowrap;transition:gap .16s;}
.cat-more:hover{gap:10px;}

/* ===== 课程卡 =====
   两张一行，图在上、字在下，同一张卡里中间不留缝。
   有详情页的整张卡是 <a>；没有详情页的是 <article>，外观一致但不可点，
   也不给「查看课程详情」四个字——不放假入口。 */
.crs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.crs-card{
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
  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:transform .22s var(--ease),background .22s var(--ease),
             box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.crs-card:hover{transform:translateY(-3px);background:var(--glass-2-bg-hover);
  border-color:rgba(255,255,255,.94);
  box-shadow:var(--glass-inner-strong),var(--glass-shadow-hover);}
.crs-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
/* 卡片图 16:9：两列下卡片宽 552，3:2 的图高 368，一屏只放得下两张卡。
   16:9 收到 310，六张卡三行能连着看下来。 */
.crs-card .img-ph{aspect-ratio:16 / 9;border-radius:0;background-color:rgba(11,99,197,.05);}
.crs-card .img-ph img{transition:transform .5s var(--ease);}
.crs-card:hover .img-ph img{transform:scale(1.035);}
/* 文字区就是卡片本身的玻璃，不再叠一层白——首页案例卡也是这么做的。
   两层半透明白叠起来会比卡片更实，卡内反而多出一个"白条"。
   图与字的分界交给图区自己的底色和底部蒙层。 */
.crs-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px;}
.crs-body h3{margin:0;font-size:20px;font-weight:800;line-height:1.4;
  letter-spacing:-.3px;color:var(--ink);}
.crs-body p{margin:8px 0 0;font-size:14.5px;line-height:1.75;color:var(--ink-2);text-wrap:pretty;}
.crs-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);transition:gap .16s;}
.crs-card:hover .crs-go{gap:10px;}

/* ===== 教学支持 =====
   左边标题与说明，右边三条玻璃长条。
   长条和课程卡刻意不同：课程卡是「大图 + 两行字」的方块，
   这里是「小图标 + 两行字」的横条，一眼能看出是另一种东西。 */
.sup-wrap{display:grid;grid-template-columns:1fr;gap:28px;}
.sup-wrap .sec-head{margin-bottom:0;}
/* 标题在上、三条在下之后，横条整宽会把说明挤到最左边、右边空一大片。
   改成三列并排，密度和原来左右两栏时一致。 */
.sup-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.sup-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;
  padding:20px 22px;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);}
.sup-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:14px;background:var(--glass-3-bg);
  border:1px solid var(--glass-3-edge);color:var(--blue);}
.sup-ico svg{width:20px;height:20px;display:block;}
.sup-row h3{margin:0;font-size:16.5px;font-weight:800;line-height:1.45;
  letter-spacing:-.1px;color:var(--ink);}
.sup-row p{margin:6px 0 0;font-size:14px;line-height:1.75;color:var(--ink-2);text-wrap:pretty;}

/* ===== 分类条 =====
   胶囊本身沿用全站那套（projects.css 里 .act-nav / .act-pill），这里只补一件事：
   它是 sticky 的，往下滚会浮在卡片上，卡片从下面划过去时被一条硬边切断。
   在它周围铺一层从浅到透明的全宽过渡，内容是淡出而不是被切断。
   只在真的贴住顶部时才出现——停在首屏时它下面是空的，不该有这块白。 */
.act-nav::before{
  content:"";position:absolute;left:calc(50% - 50vw);width:100vw;
  top:-20px;bottom:-40px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(246,250,255,0) 0%,rgba(246,250,255,.90) 30%,
    rgba(246,250,255,.72) 66%,rgba(246,250,255,0) 100%);
  opacity:0;transition:opacity .2s var(--ease);
}
.act-nav.is-stuck::before{opacity:1;}
.act-pill{position:relative;z-index:1;}

/* ===== 活动卡 =====
   和课程卡同一套表面、同一套圆角，但内容是信息型的：
   图 → 状态 → 名称 → 时间 / 城市 / 适龄 → 报名截止 → 入口。
   图比课程卡扁一档（16:9），同一行里两张卡不会因为文字多寡而高低不齐。 */
.pj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.pj-card{padding:0;overflow:hidden;}
.pj-card .img-ph{aspect-ratio:16 / 9;border-radius:0;
  background-color:rgba(11,99,197,.05);}
.pj-card .img-ph img{transition:transform .5s var(--ease);}
.pj-card:hover .img-ph img{transform:scale(1.035);}
.pj-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px;}
.pj-card h3{margin:12px 0 8px;font-size:20px;}
.pj-body .pj-dl{margin-bottom:14px;}

/* 空态：一行字，不占一张卡的高度。
   限定在 [data-cat] 里——四个分类页的空态也在用 .pj-empty，
   那边是一整块带边的提示框，不能被这条冲掉。 */
[data-cat] .pj-empty{padding:0;background:none;border:0;box-shadow:none;text-align:left;
  font-size:14px;line-height:1.8;color:var(--ink-2);}

/* ===== 响应式 ===== */
@media (max-width:1023px){
  .cat-hero .wrap{grid-template-columns:minmax(0,48fr) minmax(0,52fr);gap:36px;}
  .sup-wrap{grid-template-columns:1fr;gap:32px;}
  .sup-list{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .cat-hero{display:block;min-height:0;padding:44px 0 16px;}
  .cat-hero .wrap{grid-template-columns:1fr;gap:28px;}
  .cat-hero h1{font-size:clamp(30px,8vw,38px);letter-spacing:-.8px;}
  /* 单列之后首屏图铺满整宽，3:2 会顶到半屏高，扁一档 */
  .cat-hero .img-ph{aspect-ratio:16 / 9;}
  /* 融合大图在窄屏退回文档流：文字在上、图在下。
     图上压字在 820 以下没法保证——标题 475 宽，图的干净区只有 36%，
     字必然落到人影上。虚焦层一并去掉，小屏不值得为它付性能。
     遮罩改成两端短淡出：图已经不在字下面，只需要不出现硬边。 */
  .cat-hero.has-art{min-height:0;padding-bottom:0;}
  .cat-hero-art{position:relative;inset:auto;aspect-ratio:2 / 1;margin-top:22px;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 10%,#000 88%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 10%,#000 88%,rgba(0,0,0,0) 100%);}
  .cat-hero-art img{object-position:78% 50%;}
  .cat-hero-art::after{display:none;}
  .cat-hero .lead{font-size:15px;min-height:0;}
  .cat-hero-acts{margin-top:24px;}
  .cat-hero-acts .btn{flex:1;min-width:0;padding:11px 16px;font-size:14.5px;}
  .cat-sec{padding:36px 0;}
  .cat-head{gap:14px;}
  .crs-grid{gap:16px;}
  .crs-body{padding:18px 18px 20px;}
  .crs-body h3{font-size:18px;}
  .pj-body{padding:18px 18px 20px;}
  .pj-card h3{font-size:18px;}
  .sup-row{padding:18px;gap:14px;}
}
@media (max-width:760px){
  /* 手机上一列。两张卡一行会窄到图只剩 170 宽，文字也排不开 */
  .crs-grid,.pj-grid{grid-template-columns:1fr;}
}