/* Course detail page (course.php). Scoped to .cp. */
.cp{--cp-ink:#13284b;--cp-text:#33465f;--cp-muted:#617089;--cp-line:#e1e8f2;--cp-blue:#2563eb;--cp-green:#14996b;
  width:min(1400px,100% - 64px);margin:0 auto;padding:20px 0 56px;color:var(--cp-text);font-size:16px;line-height:1.6}
.cp *,.cp *::before,.cp *::after{box-sizing:border-box}
.cp :where(h1,h2,p,ul,ol){margin:0}
.cp :where(h1,h2){color:var(--cp-ink);letter-spacing:-.02em;line-height:1.2}
.cp :where(a){color:inherit;text-decoration:none}
.cp :where(img){display:block;max-width:100%}
.cp-crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:13px;color:var(--cp-muted);margin-bottom:18px}
.cp-crumbs a{color:var(--cp-blue)}
.cp-crumbs strong{color:var(--cp-ink);font-weight:600}
.cp-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center;padding:28px;border-radius:24px;background:linear-gradient(120deg,#eaf3ff,#f6f9ff 60%,#eef6ff);border:1px solid #dbe7f7;margin-bottom:24px}
.cp-tag{display:inline-block;padding:5px 12px;border-radius:999px;background:#fff;color:var(--cp-blue);font-size:13px;font-weight:700;margin-bottom:12px}
.cp-hero h1{font-size:clamp(28px,4vw,46px);margin-bottom:10px}
.cp-hero-copy>p{font-size:17px;max-width:60ch}
.cp-facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;margin:18px 0 22px}
.cp-facts li{display:flex;flex-direction:column;font-size:13px;color:var(--cp-muted)}
.cp-facts b{font-size:26px;color:var(--cp-ink);line-height:1.1}
.cp-hero-img{width:100%;max-width:520px;justify-self:center;aspect-ratio:16/10;object-fit:cover;border-radius:20px;box-shadow:0 16px 36px #13284b26}
.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border-radius:12px;font-weight:600;font-size:15px;line-height:1.3;text-align:center}
.cp-btn-primary{background:var(--cp-blue);color:#fff;box-shadow:0 6px 16px #2563eb30}
.cp-wide{width:100%}
.cp-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.cp-aside{display:grid;gap:16px}
.cp-card{background:#fff;border:1px solid var(--cp-line);border-radius:18px;padding:24px;box-shadow:0 4px 18px #1d35570a;min-width:0}
.cp-card h2{font-size:19px;margin-bottom:12px}
.cp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.cp-head h2{margin:0;font-size:22px}
.cp-head span,.cp-muted{color:var(--cp-muted);font-size:14px}
.cp-lessons{list-style:none;padding:0;display:grid;gap:12px}
.cp-lesson{display:flex;align-items:center;gap:16px;padding:12px;border:1px solid var(--cp-line);border-radius:16px;transition:border-color .15s,box-shadow .15s,transform .15s}
.cp-lesson:hover{border-color:#b9cdf0;box-shadow:0 8px 22px #1d35570f;transform:translateY(-1px)}
.cp-thumb{position:relative;flex:none;width:132px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#eaf1ff}
.cp-thumb img{width:100%;height:100%;object-fit:cover}
.cp-no{position:absolute;left:8px;top:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cp-ink);color:#fff;font-size:13px;font-weight:700}
.cp-lesson.is-done .cp-no{background:var(--cp-green)}
.cp-lesson-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.cp-lesson-body strong{color:var(--cp-ink);font-size:17px;line-height:1.35}
.cp-lesson-body small{color:var(--cp-muted);font-size:14px}
.cp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.cp-meta span{padding:2px 9px;border-radius:999px;background:#f1f5fb;font-size:12px;font-weight:600;color:#3e5374}
.cp-go{font-size:24px;color:#94a3b8}
.cp-progress-row{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.cp-progress-row b{font-size:22px;color:var(--cp-blue)}
.cp-progress-row progress{flex:1;height:8px;border:0;border-radius:99px;overflow:hidden;background:#e8eef8;appearance:none}
.cp-progress-row progress::-webkit-progress-bar{background:#e8eef8}
.cp-progress-row progress::-webkit-progress-value{background:var(--cp-green)}
.cp-progress-row progress::-moz-progress-bar{background:var(--cp-green)}
.cp-aside .cp-btn{margin-top:14px}
.cp-list{list-style:disc;padding-left:20px;display:grid;gap:6px;font-size:14px}
@media (min-width:900px){.cp-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding:40px}}
@media (min-width:1024px){.cp-shell{grid-template-columns:minmax(0,1fr) 320px}}
@media (max-width:767px){
  .cp{width:calc(100% - 32px);padding-top:14px}
  .cp-hero{padding:20px}
  .cp-card{padding:18px}
  .cp-lesson{gap:12px;padding:10px}
  .cp-thumb{width:88px}
  .cp-go{display:none}
  .cp-btn-primary{width:100%}
}
@media (max-width:359px){
  .cp{width:calc(100% - 24px)}
  .cp-lesson{flex-direction:column;align-items:stretch}
  .cp-thumb{width:100%;aspect-ratio:16/9}
}