/* 课 · 三门课 演示稿第五版（2026-09-29）
   老板：「参考现在的课程教育网站：逻辑好、链路短、排版时尚。」
   照大牌课程站的做法：开场一句话一个按钮 → 三门课做成海报（她本人当封面）→ 三步怎么学
   → 十三节课一行一节、点哪节进哪节（不再多一层目录页）→ 收口。
   只叠在全站样式上，颜色字号都用站里的变量，白天 / 夜晚都对。 */

.kx{max-width:var(--wrap);margin:0 auto;padding:0 2.5rem 6rem;--r:22px;--r-s:12px}
.kx-sec{padding-top:clamp(5rem,8vw,7.5rem)}
.kx-head{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2.4rem}
.kx-head h2{margin:0;font-size:var(--fs-6);line-height:1.15;letter-spacing:-.01em}
.kx-head p{margin:0;font-size:var(--fs-3);color:var(--text-secondary);text-wrap:balance}
.kx-head.split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem}
.kx-head.split>div{display:flex;flex-direction:column;gap:.6rem}
.btn-lg{padding:1.1rem 2.1rem;font-size:var(--fs-3)}
.kx-cta{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.8rem}
.kx-link{font-weight:600;color:var(--text-primary);border-bottom:1px solid var(--gold);padding-bottom:.1rem}
.kx-link:hover{color:var(--gold)}

/* ---------- 1 开场 ---------- */
/* 开场版式三页统一，以营页 camps.css 的 .cx-hero 为准（老板 10-02：测一测、营、课 对齐和图片一个标准）*/
.kx-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding:clamp(3rem,6vw,5rem) 0 0;min-height:min(86vh,800px)}
.kx-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.kx-kicker{margin:0;font-size:var(--fs-1);font-weight:600;letter-spacing:.06em;color:var(--gold)}
.kx-hero h1{margin:0;font-size:clamp(2.2rem,3.6vw,3.1rem);line-height:1.15;letter-spacing:-.01em}
.kx-hero h1 span{display:block;white-space:nowrap}
.kx-hero .lede{margin:0;max-width:26em;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.75;color:var(--text-secondary);text-wrap:balance}
.kx-proof{list-style:none;margin:.6rem 0 0;padding:1.2rem 0 0;display:flex;gap:2.4rem;border-top:1px solid var(--border)}
.kx-proof li{display:flex;flex-direction:column;gap:.1rem}
.kx-proof b{font-family:var(--serif);font-size:clamp(1.7rem,2.4vw,2.2rem);line-height:1;font-weight:700;color:var(--text-primary)}
.kx-proof span{font-size:var(--fs-0);color:var(--text-muted);white-space:nowrap}
.kx-host{position:relative;margin:0;aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.6)}
.kx-host img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.kx-host::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,8,6,.78) 100%);pointer-events:none}
.kx-host figcaption{position:absolute;left:1.6rem;right:1.6rem;bottom:1.4rem;z-index:1;display:flex;flex-direction:column;gap:.2rem;color:#f3eee4}
.kx-host figcaption b{font-family:var(--serif);font-size:var(--fs-4);font-weight:700}
.kx-host figcaption span{font-size:var(--fs-0);letter-spacing:.06em;opacity:.8}

/* ---------- 2 三门课：海报 ---------- */
.kx-posters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.kp{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);border:1px solid var(--border);background:var(--gray-100);color:#fff;isolation:isolate}
.kp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s var(--ease)}
.kp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.2) 55%,rgba(0,0,0,.85) 100%);pointer-events:none}
.kp-top,.kp-body{position:relative;z-index:1}
.kp-top{position:absolute;left:1.4rem;right:1.4rem;top:1.3rem;display:flex;align-items:center;justify-content:space-between}
.kp-top em{font-style:normal;font-family:var(--serif);font-size:var(--fs-4);font-weight:700;letter-spacing:.06em}
.kp-top i{font-style:normal;padding:.28rem .65rem;border-radius:999px;font-size:var(--fs-0);font-weight:600;letter-spacing:.04em;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.kp.on .kp-top i{background:var(--gold);border-color:var(--gold);color:#15120f}
.kp-body{position:absolute;left:1.4rem;right:1.4rem;bottom:1.4rem;display:flex;flex-direction:column;gap:.45rem}
.kp-body b{font-family:var(--serif);font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:1.1;font-weight:900;letter-spacing:.02em}
.kp-body span{font-size:var(--fs-1);line-height:1.6;color:rgba(255,255,255,.82);text-wrap:balance}
.kp-body small{margin-top:.4rem;font-size:var(--fs-1);font-weight:600;color:#fff}
a.kp:hover img{transform:scale(1.05)}
a.kp:hover{border-color:var(--gold)}
.kp:not(.on) img{filter:grayscale(.35) brightness(.8)}
.kp:not(.on) .kp-body b{color:rgba(255,255,255,.7)}
.kp:not(.on) .kp-body small{color:rgba(255,255,255,.7);font-weight:500}

/* ---------- 2.5 原话 ---------- */
.kx-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.kq{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:2.2rem 2rem 1.8rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-s)}
.kq blockquote{position:relative;margin:0;padding-top:2.2rem;font-family:var(--serif);font-size:var(--fs-5);line-height:1.5;font-weight:700;color:var(--text-primary);text-wrap:balance}
.kq blockquote::before{content:"“";position:absolute;left:-.05em;top:-.6rem;font-size:3.6rem;line-height:1;color:var(--gold)}
.kq figcaption{display:flex;flex-direction:column;gap:.15rem;padding-top:1.1rem;border-top:1px solid var(--border)}
.kq figcaption b{font-size:var(--fs-1);font-weight:600}
.kq figcaption span{font-size:var(--fs-0);color:var(--text-muted)}
@media(max-width:860px){.kx-quotes{grid-template-columns:1fr}.kq{gap:1.4rem;padding:1.8rem 1.5rem 1.5rem}}

/* ---------- 3 三步 ---------- */
.kx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.kx-steps li{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:2rem 1.8rem 1.9rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-s)}
.kx-steps .n{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:#15120f;font-family:var(--serif);font-weight:700;font-size:var(--fs-3);margin-bottom:.4rem}
body:not(.study) .kx-steps .n{color:#fff}
.kx-steps b{font-family:var(--serif);font-size:var(--fs-4)}
.kx-steps p{margin:0;font-size:var(--fs-1);line-height:1.7;color:var(--text-secondary);text-wrap:balance}

/* ---------- 4 十三节课：一行一节 ---------- */
.kx-seg{margin-top:2.6rem}
.kx-seg-head{display:flex;align-items:baseline;gap:.9rem;padding-bottom:.9rem;margin-bottom:.4rem;border-bottom:1px solid var(--border)}
.kx-seg-head span{font-size:var(--fs-0);font-weight:600;letter-spacing:.1em;color:var(--gold)}
.kx-seg-head h3{margin:0;font-size:var(--fs-4)}
.kx-seg-head i{margin-left:auto;font-style:normal;font-size:var(--fs-0);color:var(--text-muted);font-variant-numeric:tabular-nums}
.kl{display:grid;grid-template-columns:52px 2.6rem minmax(0,1fr) auto auto;align-items:center;gap:1.2rem;padding:.9rem .9rem .9rem .6rem;margin:0 -.6rem;border-radius:var(--r-s);color:var(--text-primary);border-bottom:1px solid var(--border);transition:background .2s}
.kl:last-child{border-bottom:none}
.kl:hover{background:var(--panel)}
.kl img{width:52px;height:70px;object-fit:cover;border-radius:6px;background:var(--gray-100)}
.kl-n{font-family:var(--serif);font-size:var(--fs-3);font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.kl.free .kl-n{color:var(--gold)}
.kl-t{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.kl-t b{font-size:var(--fs-3);font-weight:700;line-height:1.4}
.kl-t span{font-size:var(--fs-1);line-height:1.55;color:var(--text-secondary);text-wrap:balance}
.kl-out{font-size:var(--fs-0);font-weight:500;color:var(--gold);white-space:nowrap}
.kl-out::before{content:"做出 · ";color:var(--text-muted)}
.kl-st{display:inline-flex;align-items:center;gap:.35rem;min-width:3.2rem;justify-content:flex-end;font-size:var(--fs-0);font-weight:600;color:var(--text-muted)}
.kl-st svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kl.free .kl-st{color:#15120f;background:var(--gold);padding:.3rem .65rem;border-radius:999px}
body:not(.study) .kl.free .kl-st{color:#fff}
.kl.free .kl-st svg{fill:currentColor;stroke:none;width:11px;height:11px}
.kl:hover .kl-t b{color:var(--gold)}

/* 没有小封面的课表行（领导力 / 判断力，视频还没做） */
.kl.nt{grid-template-columns:2.6rem minmax(0,1fr) auto auto;padding:1.1rem .9rem 1.1rem .6rem}

@media(max-width:1100px){.kl.nt{grid-template-columns:2.4rem minmax(0,1fr) auto}}
@media(max-width:640px){.kl.nt{grid-template-columns:2rem minmax(0,1fr) auto}}

/* ---------- 5 收口 ---------- */
/* 09-29 老板：「这块 ui 不好看」（原来右边一颗黑按钮 + 一行小链接，跟「每门课先免费学一节」对不上）→ 三门的免费课各一张卡，并排 */
.kx-end{display:flex;flex-direction:column;align-items:center;gap:2rem;margin-top:clamp(5rem,8vw,7.5rem);padding:3.4rem 3rem 3rem;border-radius:var(--r);background:var(--deep);border:1px solid var(--border);text-align:center}
.kx-end h2{margin:0 0 .7rem;font-size:var(--fs-6);line-height:1.2}
.kx-end p{margin:0 auto;max-width:30em;font-size:var(--fs-3);line-height:1.75;color:var(--text-secondary);text-wrap:balance}
.kx-free{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;width:100%}
.kf{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem 1.4rem 1.3rem;text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-s);color:var(--text-primary);transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.kf:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 24px 44px -32px rgba(0,0,0,.5)}
.kf span{font-size:var(--fs-0);font-weight:600;letter-spacing:.06em;color:var(--gold)}
.kf b{font-family:var(--serif);font-size:var(--fs-4);line-height:1.35}
.kf i{margin-top:auto;padding-top:.8rem;font-style:normal;font-size:var(--fs-1);font-weight:600;color:var(--text-primary)}
.kf:hover i{color:var(--gold)}


/* ---------- 窄一点的电脑 / 平板 ---------- */
@media(max-width:1100px){
  .kl{grid-template-columns:52px 2.4rem minmax(0,1fr) auto;gap:1rem}
  .kl-out{display:none}
}
@media(max-width:1024px){
  .kx-hero{grid-template-columns:1fr;min-height:0}
  .kx-host{max-width:520px}
}
@media(max-width:860px){
  .kx{padding:0 1.5rem 4rem}
  .kx-posters{grid-template-columns:1fr;gap:1rem}
  .kp{aspect-ratio:16/10}
  .kp img{object-position:center 30%}
  .kx-steps{grid-template-columns:1fr}
  .kx-head.split{flex-direction:column;align-items:flex-start}
  .kx-end{padding:2.4rem 1.3rem 2rem}
  .kx-free{grid-template-columns:1fr}
}
/* ---------- 手机 ---------- */
@media(max-width:640px){
  .kx{padding:0 1.15rem 3.5rem}
  .kx-hero h1{font-size:clamp(1.75rem,8vw,2.3rem)}
  .kx-proof{gap:1.5rem}
  .kx-hero{padding-top:2rem}
  .kp{aspect-ratio:4/3}
  .kp-body b{font-size:2rem}
  .kl{grid-template-columns:44px 2rem minmax(0,1fr) auto;gap:.7rem;padding:.8rem .4rem}
  .kl img{width:44px;height:58px}
  .kl-t b{font-size:var(--fs-2)}
  .kl-t span{font-size:var(--fs-0)}
  .btn-lg{padding:1rem 1.6rem;font-size:var(--fs-2)}
  /* 手机：短句只在标点处换行、占满整行，不再把「算力」「判断力」拆成两半 */
  .kq blockquote,.kx-hero .lede,.kx-head p,.kx-steps p,.kx-end p,.kl-t span{word-break:keep-all;overflow-wrap:anywhere;max-width:none}
}