/* ============================================================
   POONJEE — learn.css
   Loads AFTER style.css. Uses the same tokens.
   ============================================================ */

/* ---------- learning path ---------- */
.path-wrap{max-width:800px;margin:0 auto}
.stage{
  display:grid;grid-template-columns:52px 1fr;gap:22px;
  padding:0 0 34px;position:relative;
}
.stage:not(:last-child)::before{
  content:"";position:absolute;left:25px;top:52px;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--line),transparent);
}
.stage-num{
  width:52px;height:52px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-m);font-size:.92rem;color:var(--gold);font-weight:600;
}
.stage-body h3{font-family:var(--font-d);font-size:1.14rem;color:var(--ink);margin:12px 0 8px}
.stage-body p{color:var(--mut);font-size:.97rem;line-height:1.75;margin:0}

/* ---------- topic groups ---------- */
.topic-group{margin-bottom:52px}
.topic-head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:24px;border-bottom:1px solid var(--line-soft);
}
.topic-head h3{font-family:var(--font-d);font-size:1.26rem;color:var(--ink);margin:0}
.topic-head span{
  font-family:var(--font-m);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);
}

.topics{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

.topic{
  display:block;text-decoration:none;
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--rad);padding:24px 26px;
  transition:transform .3s,border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.topic::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;transition:opacity .3s;
}
a.topic:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 16px 40px rgba(0,0,0,.4)}
a.topic:hover::before{opacity:1}

.topic .tstate{
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:10px;display:block;
}
.topic .tstate.live{color:var(--green)}
.topic .tstate.soon{color:var(--mut);opacity:.6}

.topic h4{
  font-family:var(--font-d);font-size:1.06rem;color:var(--ink);
  margin:0 0 8px;line-height:1.4;
}
.topic p{color:var(--mut);font-size:.92rem;line-height:1.65;margin:0}

.topic.soon{opacity:.52;cursor:default}
.topic.soon h4{color:var(--mut)}

.topic .arrow{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-family:var(--font-m);font-size:.78rem;color:var(--gold);
}
.topic .arrow::after{content:"→"}

/* ---------- note ---------- */
.learn-note{
  max-width:760px;margin:0 auto;
  border:1px solid var(--line-soft);border-left:2px solid var(--gold);
  border-radius:var(--rad);padding:26px 30px;background:var(--panel);
}
.learn-note p{color:var(--mut);font-size:.97rem;line-height:1.8;margin:0 0 12px}
.learn-note p:last-child{margin-bottom:0}
.learn-note strong{color:var(--ink)}

@media (max-width:820px){
  .topics{grid-template-columns:1fr}
  .stage{grid-template-columns:44px 1fr;gap:16px}
  .stage-num{width:44px;height:44px;border-radius:12px;font-size:.85rem}
  .stage:not(:last-child)::before{left:21px;top:44px}
}