/* The course catalog (generated by /var/lib/algocademy-tests/courses_gen.py; this file is hand-written), in the
   landing's look (landing.css, algocademy.css). 2026-11-14: the index is the paths as cards in four groups, and each
   path has a landing page: top with the path's facts, what you build, tools, the syllabus, questions. */

/* ---- the index */
.academy-page .cx-hero{display:block;text-align:center;padding-block:56px 26px}
.academy-page .cx-hero h1{font-size:clamp(40px,5.6vw,72px);letter-spacing:-2.6px;line-height:1.04;margin:24px auto 22px;max-width:900px}
.cx-hero .hero-description{max-width:620px;margin-inline:auto}
.cx-group{padding-top:34px}
.cx-group h2{font-size:24px;letter-spacing:-.8px;margin:0 0 16px;padding-top:26px;border-top:1px solid var(--line)}
.cx-paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.cx-path{position:relative;display:flex;flex-direction:column;padding:22px 22px 20px;border:1px solid #ccd7cb;border-top:5px solid #7b9653;border-radius:16px;background:#edf2e5;color:var(--ink);transition:border-color .18s,transform .18s,box-shadow .18s}
.cx-path:hover{border-color:#7b9653;transform:translateY(-2px);box-shadow:0 10px 24px -18px #233b4b55}
.cx-path-level{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:22px;font-size:10px;letter-spacing:1.5px;font-weight:650;color:#647255;margin:0 0 10px}
.cx-path h3{font-size:22px;letter-spacing:-.8px;line-height:1.2;margin:0 0 8px}
.cx-path>p:not(.cx-meta):not(.cx-path-level){font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.cx-badge{display:inline-block;padding:4px 8px;border-radius:5px;font-size:10px;letter-spacing:.8px;font-weight:700;white-space:nowrap}
.cx-free{background:#dcecbf;color:#3f5a1c}
.cx-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:auto 0 0;font-size:12px;color:#647255;font-weight:550;line-height:1.4}
.cx-meta span+span:before{content:'·';margin-right:14px;color:#a3ad9c}
.cx-also{font-size:13px;color:var(--muted);margin:16px 0 0}
.cx-also a,.cx-note a,.cx-crumb a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.academy-page .final-cta{margin-top:70px;margin-bottom:70px}
.academy-page .final-cta h2{margin-bottom:24px}
.academy-page .final-cta h2+p{margin-top:-4px}
.academy-page .final-cta .cta-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px}

/* ---- a path's page: the top */
.cx-lhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:56px;align-items:center;padding-block:46px 40px}
.cx-crumb{display:flex;flex-wrap:wrap;gap:6px 9px;font-size:12px;font-weight:550;color:#647255;margin:0 0 20px}
.cx-crumb span{color:#a3ad9c}
.cx-lhero h1{font-size:clamp(34px,4.1vw,54px);line-height:1.1;letter-spacing:-2.2px;margin:0 0 20px;text-wrap:balance}
.cx-lhero .hero-description{max-width:640px;margin-bottom:26px}
.cx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.cx-lhero .hero-notes{justify-content:flex-start;flex-wrap:wrap;gap:8px 22px;margin-top:22px}
.cx-langs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:22px 0 0;font-size:12px}
.cx-langs span{color:#647255;font-weight:600;margin-right:4px}
.cx-langs a{padding:6px 11px;border:1px solid #ccd7cb;border-radius:30px;background:#fff;font-weight:550;line-height:1.3;transition:border-color .18s}
.cx-langs a:hover{border-color:#7b9653}
.cx-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;border:1px solid #ccd7cb;border-top:5px solid #7b9653;border-radius:16px;background:#ccd7cb;overflow:hidden}
.cx-facts div{padding:15px 18px;background:#edf2e5}
.cx-facts dt{font-size:10px;letter-spacing:1.3px;font-weight:650;text-transform:uppercase;color:#647255;margin-bottom:5px}
.cx-facts dd{margin:0;font-size:21px;font-weight:650;letter-spacing:-.6px;line-height:1.25}
.cx-facts .cx-fact-wide{grid-column:1/-1}
.cx-facts .cx-fact-wide dd{font-size:14px;font-weight:500;letter-spacing:0;line-height:1.5;color:#3c4f4b}
/* An odd number of small facts: the last one takes the row. */
.cx-facts div:nth-last-child(2):nth-child(odd){grid-column:1/-1}

/* ---- what you build, tools */
.cx-sec{padding-block:44px 6px}
.cx-sec>h2{font-size:30px;letter-spacing:-1.2px;margin:0 0 22px;padding-top:40px;border-top:1px solid var(--line)}
.cx-builds{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:14px}
.cx-builds article{padding:18px 20px;border:1px solid #ccd7cb;border-radius:14px;background:#fff}
.cx-builds h3{font-size:16px;letter-spacing:-.3px;line-height:1.3;margin:0 0 6px}
.cx-builds p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0}
.cx-sub{font-size:13px;letter-spacing:0;font-weight:650;color:#647255;margin:28px 0 12px}
.cx-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.cx-chips li{padding:6px 12px;border-radius:30px;background:#edf2e5;border:1px solid #dce5d4;font-size:13px;font-weight:550;line-height:1.3}

/* ---- the syllabus */
.cx-note{font-size:14px;line-height:1.55;color:#3c4f4b;background:#edf2e5;border:1px solid #dce5d4;border-radius:12px;padding:13px 16px;margin:0 0 18px}
.cx-note a{white-space:nowrap}
.cx-shown{font-size:13px;color:var(--muted);margin:-10px 0 16px}
.cx-syllabus{border-top:1px solid var(--line)}
.cx-ch{border-bottom:1px solid var(--line)}
.academy-page .cx-ch summary{display:grid;grid-template-columns:34px minmax(0,1fr) auto 22px;align-items:center;gap:10px;padding:15px 0;font-size:16px}
.cx-ch summary b{font-size:11px;font-weight:650;letter-spacing:.8px;color:#8a9a7c}
.cx-ch summary strong{font-weight:600;letter-spacing:-.3px}
.cx-ch summary em{font-style:normal;font-size:12px;font-weight:550;color:#647255;white-space:nowrap}
.cx-ch summary>span{text-align:center}
.cx-ch summary:hover strong{color:var(--blue)}
.cx-lessons{columns:3 250px;column-gap:36px;margin:0 0 20px;padding:0 0 0 44px;list-style:decimal;font-size:13.5px;line-height:1.45;color:#8a9a7c}
.cx-lessons li{break-inside:avoid;padding:3.5px 0 3.5px 2px}
.academy-page .cx-lessons a{color:#33484a;text-decoration:none}
.academy-page .cx-lessons a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.cx-lessons i{font-style:normal;margin-left:7px;padding:1px 6px;border-radius:4px;background:#dcecbf;color:#3f5a1c;font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;vertical-align:1px}

/* ---- questions, other paths */
.academy-page .cx-faq{margin-top:44px;padding-block:44px 10px}
.cx-faq h2{font-size:30px;letter-spacing:-1.2px}
.cx-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:44px;margin-bottom:0;font-size:13px}
.cx-more span{color:#647255;font-weight:600;margin-right:6px}
.cx-more a{padding:7px 13px;border:1px solid #ccd7cb;border-radius:30px;background:#fff;font-weight:550;line-height:1.3;transition:border-color .18s}
.cx-more a:hover{border-color:#7b9653}
.cx-more+.final-cta{margin-top:44px}

@media(max-width:900px){
  .cx-builds{grid-template-columns:1fr 1fr}
  .cx-lhero{grid-template-columns:1fr;gap:30px;padding-block:34px 30px}
  .cx-facts{grid-template-columns:repeat(3,1fr)}
  .cx-facts div:nth-last-child(2):nth-child(odd){grid-column:auto}
}
@media(max-width:520px){
  .academy-page .cx-hero{padding-block:40px 14px}
  .academy-page .cx-hero h1{font-size:38px;letter-spacing:-1.6px}
  .cx-group{padding-top:26px}
  .cx-group h2{font-size:21px;padding-top:22px}
  .cx-paths{grid-template-columns:1fr;gap:12px}
  .cx-path{padding:18px 18px 16px}
  .cx-path h3{font-size:20px}
  .cx-lhero h1{font-size:31px;letter-spacing:-1.3px}
  .cx-lhero .hero-notes{font-size:11px;gap:6px 14px}
  .cx-actions .button{font-size:14px;gap:16px;min-height:50px}
  .cx-facts{grid-template-columns:1fr 1fr}
  .cx-facts div{padding:12px 14px}
  .cx-facts dd{font-size:18px}
  .cx-facts .cx-fact-wide dd{font-size:13px}
  .cx-facts div:nth-last-child(2):nth-child(odd){grid-column:1/-1}
  .cx-sec{padding-block:30px 4px}
  .cx-sec>h2,.cx-faq h2{font-size:25px;letter-spacing:-.9px}
  .cx-sec>h2{padding-top:30px;margin-bottom:18px}
  .cx-builds{grid-template-columns:1fr;gap:10px}
  .academy-page .cx-ch summary{grid-template-columns:26px minmax(0,1fr) auto 18px;gap:8px;font-size:15px;padding:14px 0}
  .cx-lessons{columns:1;padding-left:34px;font-size:14px}
  .cx-lessons li{padding-block:5px}
  .academy-page .cx-faq{margin-top:34px}
  .cx-more{margin-top:34px}
}