/* ==========================================================================
   IFT LEARNINGS — course detail pages
   --------------------------------------------------------------------------
   Loaded after site.css on the six course pages only.

   Each page sets its track colour once, on <body>:
       <body style="--ca:#FFC24B">
   Everything below reads var(--ca), so a whole page recolours from that one
   declaration — the same trick config/iftechie.php pulls with its `wa` key.
   ========================================================================== */

/* ============================== HERO ============================== */
.c-hero{
  position:relative;overflow:hidden;
  min-height:88vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav-h) + 12vh) 4vw 8vh;
}
.c-num{
  position:absolute;top:6vh;right:-1vw;line-height:1;pointer-events:none;z-index:0;
  font-family:var(--font-d);font-weight:800;font-size:clamp(7rem,24vw,20rem);
  color:transparent;-webkit-text-stroke:1.5px rgba(243,233,235,.11);
}
.c-hero > *{position:relative;z-index:1}
.c-tier{
  display:inline-flex;align-items:center;gap:.5em;
  border:1px solid var(--ca);border-radius:999px;padding:6px 15px;margin-bottom:1.2rem;
  font-size:.63rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ca);
  animation:tierPulse 2.6s ease-in-out infinite;
}
@keyframes tierPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 0 22px -4px var(--ca)}
}
.c-hero h1{
  font-family:var(--font-d);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.4rem,7.2vw,7.5rem);line-height:.9;letter-spacing:-.018em;margin-top:1.3rem;
}
.c-hero .lead{margin-top:1.9rem;color:rgba(243,233,235,.78);max-width:54ch}

/* fact chips — duration, level, mode, format */
.c-facts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2.2rem}
.chip{
  border:1px solid rgba(243,233,235,.22);border-radius:999px;padding:9px 18px;
  font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(243,233,235,.84);
  display:inline-flex;align-items:center;gap:.55em;
}
.chip b{color:var(--ca);font-weight:600}
.chip svg{width:14px;height:14px;color:var(--ca);flex:none}
.c-cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2.8rem}

/* SECTION LABEL — moved to site.css.
   The home page and /voices use .sec-label but do not load course.css, so the
   labels rendered as bare, oversized <h2> text there. It belongs in the
   stylesheet every page loads. --ca falls back to --accent off course pages. */

/* ============================== MODULES ============================== */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:1000px){.mods{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.mods{grid-template-columns:1fr}}
.mod{
  border:1px solid var(--line);border-radius:10px;padding:1.9rem 1.6rem;
  background:var(--panel);position:relative;overflow:hidden;
  transition:border-color .45s ease,transform .55s var(--ease);
}
.mod:hover{border-color:var(--ca);transform:translateY(-5px)}
/* a thin accent bar wipes in from the left on hover */
.mod::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ca);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.mod:hover::after{transform:scaleY(1)}
.mod b{
  display:block;font-family:var(--font-d);font-weight:700;font-size:.78rem;
  letter-spacing:.2em;color:var(--ca);margin-bottom:.9rem;
}
.mod h3{font-family:var(--font-d);font-weight:700;font-size:1.12rem;line-height:1.3}
.mod p{color:var(--muted);font-size:.9rem;line-height:1.62;margin-top:.6rem}

/* ============================== CURRICULUM PHASES ============================== */
.phase{
  display:grid;grid-template-columns:8rem 1fr;gap:2.5vw;
  padding:2.8rem 1vw;border-top:1px solid var(--line);
  transition:padding-left .5s var(--ease);
}
.phase:last-child{border-bottom:1px solid var(--line)}
.phase:hover{padding-left:2.4vw}
.phase .p-tag{
  font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ca);
  line-height:1.6;
}
.phase .p-tag span{display:block;color:var(--muted);letter-spacing:.14em;margin-top:.35rem}
.phase h3{font-family:var(--font-d);font-weight:800;text-transform:uppercase;font-size:clamp(1.2rem,2.7vw,1.9rem)}
.phase > div > p{color:var(--muted);margin-top:.8rem;max-width:60ch;line-height:1.7}
.phase ul{
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem;
  margin-top:1.4rem;padding:0;list-style:none;
}
.phase li{
  position:relative;padding-left:1.3rem;color:var(--muted);font-size:.92rem;line-height:1.6;
}
.phase li::before{
  content:'';position:absolute;left:0;top:.6em;width:7px;height:1px;background:var(--ca);
}
@media(max-width:760px){
  .phase{grid-template-columns:1fr;gap:1rem}
  .phase ul{grid-template-columns:1fr}
}

/* ============================== TOOLS ============================== */
.tools{display:flex;gap:.6rem;flex-wrap:wrap}
.tool{
  border:1px solid var(--line);border-radius:8px;padding:11px 18px;
  font-size:.85rem;color:var(--fg);background:var(--panel);
  transition:border-color .35s ease,color .35s ease,transform .4s var(--ease);
}
.tool:hover{border-color:var(--ca);color:var(--ca);transform:translateY(-3px)}

/* ============================== PROJECTS ============================== */
.projects{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media(max-width:760px){.projects{grid-template-columns:1fr}}
.proj{
  border:1px solid var(--line);border-radius:10px;padding:1.9rem 1.7rem;
  background:var(--panel);display:flex;gap:1.3rem;align-items:flex-start;
  transition:border-color .45s ease;
}
.proj:hover{border-color:var(--ca)}
.proj .pn{
  flex:none;width:42px;height:42px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--font-d);font-weight:800;font-size:.9rem;
  color:var(--ca);border:1px solid var(--ca);
}
.proj h3{font-family:var(--font-d);font-weight:700;font-size:1.06rem;line-height:1.3}
.proj p{color:var(--muted);font-size:.9rem;line-height:1.62;margin-top:.5rem}

/* ============================== CAREER OUTCOMES ============================== */
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line)}
.role{
  background:var(--bg);padding:1.7rem 1.5rem;position:relative;
  transition:background-color .4s ease;
}
.role:hover{background:var(--panel)}
.role b{font-family:var(--font-d);font-weight:700;font-size:1rem;display:block}
.role span{display:block;color:var(--muted);font-size:.84rem;margin-top:.45rem;line-height:1.55}
.role::before{
  content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:var(--ca);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.role:hover::before{transform:scaleX(1)}

/* ============================== AUDIENCE ============================== */
.who{display:grid;grid-template-columns:1fr 1fr;gap:4vw}
@media(max-width:760px){.who{grid-template-columns:1fr;gap:2.4rem}}
.who h3{
  font-family:var(--font-d);font-weight:800;text-transform:uppercase;font-size:1.05rem;
  letter-spacing:.03em;margin-bottom:1.2rem;display:flex;align-items:center;gap:.7em;
}
.who h3::before{content:'';width:24px;height:1px;background:var(--ca);flex:none}
.who ul{list-style:none;padding:0}
.who li{
  position:relative;padding-left:1.6rem;margin-bottom:.85rem;
  color:var(--muted);line-height:1.65;
}
.who li::before{
  content:'';position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:2px;
  border:1px solid var(--ca);
}
.who.no li::before{border-color:var(--muted);opacity:.5}

/* ============================== ACCENT BAND ============================== */
.band{
  margin:0 4vw;padding:9vh 5vw;border-radius:12px;
  position:relative;overflow:hidden;border:1px solid var(--line);
}
.band::before{
  content:'';position:absolute;inset:0;opacity:.14;
  background:radial-gradient(80% 120% at 20% 0%,var(--ca),transparent 60%);
}
.band > *{position:relative}
.band h2{
  font-family:var(--font-d);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,5vw,3.8rem);line-height:1;
}
.band h2 em{font-style:normal;color:var(--ca)}
.band p{margin-top:1.5rem;color:rgba(243,233,235,.8);max-width:58ch;line-height:1.75}
.band .note{
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:.88rem;max-width:66ch;
}

/* ============================== CLOSING CTA ============================== */
.c-close{padding:14vh 4vw 10vh}
.c-close .big{
  display:inline-block;margin-top:1.8rem;
  font-family:var(--font-d);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.3rem,9.5vw,8rem);line-height:.95;transition:color .5s ease;
}
.c-close .big:hover{color:var(--ca)}
.c-close .big .arr{color:var(--ca);display:inline-block;transition:transform .6s var(--ease)}
.c-close .big:hover .arr{transform:translate(.08em,-.08em)}

/* ============================== OTHER TRACKS ============================== */
.other{padding:0 4vw 12vh;display:flex;gap:.7rem;flex-wrap:wrap}
.other a{
  border:1px solid var(--line);border-radius:999px;padding:11px 21px;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  transition:color .3s ease,border-color .3s ease;
}
.other a:hover{color:var(--fg);border-color:var(--tc,var(--accent))}