/* ========================================================================== 
   CenterPRO LMS — Skillshare-inspired visual system
   Based on the supplied Refero Skillshare style reference.
   ========================================================================== */

:root {
  --cp-black: #000000;
  --cp-white: #ffffff;
  --cp-ink: #0b1215;
  --cp-graphite: #394649;
  --cp-fog: #e0e0e0;
  --cp-ash: #757575;
  --cp-charcoal: #232424;
  --cp-green: #55da9b;
  --cp-neon: #00ff84;
  --cp-cyan: #24c2f2;
  --cp-violet: #6927ef;
  --cp-violet-dark: #5620c1;
  --cp-amber: #f6b60b;
  --cp-max: 1280px;
  --cp-radius: 4px;
  --cp-radius-lg: 8px;
  --cp-shadow: rgba(0,0,0,.10) 0 2px 4px 0;
  --cp-ease: cubic-bezier(.2,.7,.2,1);
}

html { scroll-behavior: smooth; }
body.cp-archive-courses,
body.cp-single-course,
body.cp-profile {
  background: var(--cp-white) !important;
  color: var(--cp-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.cp-archive-courses *,
body.cp-single-course *,
body.cp-profile * { box-sizing: border-box; }

/* ---------- Navigation ---------- */
.cp-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 64px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(11,18,21,.06);
}
.cp-nav-inner {
  width: min(var(--cp-max), calc(100% - 40px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.cp-nav-logo { display:flex; align-items:center; min-width: 150px; color:var(--cp-ink); text-decoration:none; }
.cp-nav-logo img { display:block; max-height:38px; width:auto; max-width:180px; object-fit:contain; }
.cp-nav-brand { font-size:20px; line-height:1; font-weight:700; letter-spacing:-.03em; }
.cp-nav-spacer { flex:1; }
.cp-nav-right { display:flex; align-items:center; gap:14px; }
.cp-nav-back,
.cp-nav-name,
.cp-nav-logout { color:var(--cp-ink); text-decoration:none; font-size:14px; font-weight:500; transition:opacity .2s ease; }
.cp-nav-back:hover,.cp-nav-name:hover,.cp-nav-logout:hover { opacity:.62; }
.cp-nav-avatar {
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--cp-black); color:var(--cp-white); font-size:13px; font-weight:700;
}
.cp-nav-logout {
  background:var(--cp-green); color:var(--cp-ink); border-radius:var(--cp-radius);
  padding:8px 14px; font-weight:600;
}
.cp-nav-logout:hover { opacity:1; transform:translateY(-1px); }

/* ---------- Shared page shell ---------- */
.cp-page { width:min(var(--cp-max), calc(100% - 40px)); margin:0 auto; }
.cp-page-header { padding:72px 0 44px; max-width:850px; }
.cp-eyebrow {
  margin:0 0 14px; color:var(--cp-ash); font-size:11px; line-height:1.45;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.cp-page-title,
.cp-course-title {
  margin:0; color:var(--cp-ink); font-weight:700; letter-spacing:-.045em;
  line-height:.96; font-size:clamp(42px, 5vw, 68px);
}
.cp-page-sub { margin:20px 0 0; color:#4c5659; max-width:680px; font-size:18px; line-height:1.5; }

/* ---------- Homepage / course archive ---------- */
.cp-archive-courses .cp-page { padding-bottom:100px; }
.cp-archive-courses .cp-page-header {
  position:relative; min-height:330px; max-width:none; display:flex; flex-direction:column; justify-content:center;
  padding:72px clamp(28px,5vw,80px); margin-left:calc((min(var(--cp-max),100vw) - min(var(--cp-max),calc(100% - 40px)))/-2);
  margin-right:calc((min(var(--cp-max),100vw) - min(var(--cp-max),calc(100% - 40px)))/-2);
  overflow:hidden; background:var(--cp-black); color:var(--cp-white);
}
.cp-archive-courses .cp-page-header::after {
  content:""; position:absolute; width:380px; height:380px; right:8%; top:-150px; border:1px solid rgba(85,218,155,.45);
  border-radius:50%; box-shadow:0 0 0 32px rgba(85,218,155,.035), 0 0 0 72px rgba(85,218,155,.025); pointer-events:none;
}
.cp-archive-courses .cp-page-header .cp-eyebrow { color:var(--cp-green); position:relative; z-index:1; }
.cp-archive-courses .cp-page-title { color:var(--cp-white); max-width:850px; position:relative; z-index:1; }
.cp-archive-courses .cp-page-sub { color:#b7c0c2; position:relative; z-index:1; }
.cp-archive-courses .cp-page-header::before {
  content:""; position:absolute; left:clamp(28px,5vw,80px); bottom:30px; width:76px; height:4px; background:var(--cp-green); z-index:1;
}

.cp-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; position:relative; z-index:1; }
.cp-cta {
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:8px 18px;
  background:var(--cp-green); color:var(--cp-ink); border-radius:var(--cp-radius); font-size:14px; font-weight:700;
  text-decoration:none; transition:transform .2s var(--cp-ease), background .2s ease;
}
.cp-cta:hover { color:var(--cp-ink); transform:translateY(-2px); background:#6ee3aa; }
.cp-cta--dark { background:var(--cp-charcoal); color:var(--cp-white); }
.cp-cta--dark:hover { color:var(--cp-white); background:#303232; }

/* ---------- Metrics ---------- */
.cp-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 calc((100vw - min(var(--cp-max), calc(100% - 40px)))/-2);
  padding:64px max(20px, calc((100vw - var(--cp-max))/2 + 20px)); background:var(--cp-black);
}
.cp-stat {
  min-height:112px; padding:20px; background:var(--cp-charcoal); border-radius:var(--cp-radius-lg);
}
.cp-stat-num { color:var(--cp-white); font-size:38px; line-height:1; font-weight:700; letter-spacing:-.04em; }
.cp-stat-label { margin-top:10px; color:var(--cp-ash); font-size:11px; line-height:1.45; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }

/* Existing templates use direct children rather than .cp-stat wrappers. */
.cp-stats > div { min-height:112px; padding:20px; background:var(--cp-charcoal); border-radius:var(--cp-radius-lg); }

/* ---------- Course grid ---------- */
.cp-course-section { padding-top:88px; }
.cp-section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.cp-section-title { margin:0; font-size:38px; line-height:1.02; letter-spacing:-.04em; font-weight:700; color:var(--cp-ink); }
.cp-section-copy { margin:8px 0 0; color:var(--cp-ash); font-size:15px; line-height:1.5; }
.cp-course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 16px; }
.cp-course-card {
  min-width:0; background:var(--cp-white); border-radius:var(--cp-radius) var(--cp-radius) var(--cp-radius-lg) var(--cp-radius-lg);
  box-shadow:var(--cp-shadow); border:1px solid #ededed; overflow:hidden; transition:transform .25s var(--cp-ease), box-shadow .25s ease;
}
.cp-course-card:hover { transform:translateY(-5px); box-shadow:0 12px 30px rgba(0,0,0,.10); }
.cp-course-card-media { display:block; aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--cp-charcoal); }
.cp-course-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--cp-ease); }
.cp-course-card:hover .cp-course-card-media img { transform:scale(1.045); }
.cp-course-card-media::after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.62)); pointer-events:none; }
.cp-course-card-tag { position:absolute; z-index:1; left:14px; bottom:12px; color:#fff; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.cp-course-card-body { padding:18px 16px 16px; }
.cp-course-card-title { margin:0; color:var(--cp-ink); font-size:22px; line-height:1.12; font-weight:700; letter-spacing:-.025em; }
.cp-course-card-excerpt { margin:10px 0 16px; color:#687174; font-size:14px; line-height:1.5; }
.cp-course-card-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid #ededed; }
.cp-course-progress { flex:1; min-width:0; }
.cp-course-progress-track { height:5px; border-radius:100px; overflow:hidden; background:#e7e9e9; }
.cp-course-progress-fill { height:100%; background:var(--cp-green); border-radius:inherit; }
.cp-course-progress-label { margin-top:6px; display:block; color:var(--cp-ash); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.cp-course-card-link { flex:none; color:var(--cp-ink); text-decoration:none; font-size:13px; font-weight:700; }
.cp-course-card-link:hover { color:var(--cp-violet); }
.cp-course-card-link--cta { background:var(--cp-green); padding:8px 12px; border-radius:var(--cp-radius); }
.cp-empty { padding:64px 24px; text-align:center; background:#f7f8f8; border:1px solid #e5e7e7; }

/* ---------- Dark feature band ---------- */
.cp-feature-band { margin-top:96px; margin-left:calc((100vw - min(var(--cp-max), calc(100% - 40px)))/-2); margin-right:calc((100vw - min(var(--cp-max), calc(100% - 40px)))/-2); padding:88px max(20px, calc((100vw - var(--cp-max))/2 + 20px)); background:var(--cp-black); color:#fff; }
.cp-feature-grid { max-width:var(--cp-max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.cp-feature-title { margin:0; color:#fff; font-size:clamp(34px,4vw,48px); line-height:.96; letter-spacing:-.04em; }
.cp-feature-list { display:grid; gap:18px; }
.cp-feature-item { display:flex; align-items:flex-start; gap:12px; color:#fff; font-size:16px; line-height:1.5; }
.cp-feature-item::before { content:"✓"; flex:none; color:var(--cp-neon); font-size:20px; line-height:1.25; font-weight:800; }

/* ---------- LearnDash generic content ---------- */
.cp-ld-content { padding:72px 0 96px; }
.cp-ld-content a { color:var(--cp-ink); }
.cp-ld-content a:hover { color:var(--cp-violet); }
.cp-ld-content .learndash-wrapper { max-width:none; color:var(--cp-ink); font-family:inherit; }
.cp-ld-content .learndash-wrapper .ld-course-list,
.cp-ld-content .learndash-wrapper .ld-item-list { margin:0; }
.cp-ld-content .learndash-wrapper .ld-item-list .ld-item-list-item { border:1px solid #e4e6e6; border-radius:var(--cp-radius); margin-bottom:10px; overflow:hidden; background:#fff; }
.cp-ld-content .learndash-wrapper .ld-item-list .ld-item-list-item:hover { border-color:#cdd2d2; }
.cp-ld-content .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-name { font-weight:600; }
.cp-ld-content .learndash-wrapper .ld-button,
.cp-ld-content .learndash-wrapper .ld-status,
.cp-ld-content .learndash-wrapper a.ld-button {
  border-radius:var(--cp-radius); font-family:inherit; font-weight:600; box-shadow:none;
}
.cp-ld-content .learndash-wrapper .ld-button { background:var(--cp-green); color:var(--cp-ink); }
.cp-ld-content .learndash-wrapper .ld-button:hover { background:#6ee3aa; color:var(--cp-ink); }

/* If another LearnDash addon outputs its own course grid, keep the same visual language. */
.cp-ld-content .ld-course-list-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 16px; }
.cp-ld-content .ld-course-list-items .ld_course_grid { margin:0; width:auto; }
.cp-ld-content .ld-course-list-items .thumbnail { margin:0; border-radius:var(--cp-radius) var(--cp-radius) 0 0; overflow:hidden; box-shadow:none; }
.cp-ld-content .ld-course-list-items .thumbnail img { width:100%; aspect-ratio:16/9; object-fit:cover; }

/* ---------- Single course ---------- */
.cp-single-course .cp-course-hero { min-height:430px; position:relative; background-size:cover; background-position:center; overflow:hidden; }
.cp-course-hero-overlay { min-height:430px; display:flex; align-items:end; padding:72px max(20px, calc((100vw - var(--cp-max))/2 + 20px)); background:linear-gradient(180deg,rgba(0,0,0,.02) 15%,rgba(0,0,0,.82) 100%); }
.cp-course-hero-inner { width:min(var(--cp-max),100%); margin:0 auto; }
.cp-single-course .cp-course-hero .cp-eyebrow { color:var(--cp-green); }
.cp-single-course .cp-course-title { color:#fff; max-width:900px; }
.cp-course-hero--no-image { min-height:360px; background:var(--cp-black); display:flex; align-items:end; padding:72px max(20px, calc((100vw - var(--cp-max))/2 + 20px)); }
.cp-course-hero--no-image .cp-course-hero-inner { width:min(var(--cp-max),100%); margin:0 auto; }
.cp-course-hero--no-image .cp-course-title { color:#fff; }
.cp-hero-progress { width:min(520px,100%); margin-top:24px; }
.cp-hero-progress-bar { height:6px; background:rgba(255,255,255,.25); border-radius:100px; overflow:hidden; }
.cp-hero-progress-fill { height:100%; background:var(--cp-green); border-radius:inherit; }
.cp-hero-progress-label { display:block; margin-top:8px; color:#d8dddd; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.cp-page--single-course .cp-ld-content { padding-top:64px; }
.cp-page--single-course .learndash-wrapper .ld-section-heading h2,
.cp-page--single-course .learndash-wrapper .ld-course-status h2 { color:var(--cp-ink); font-weight:700; letter-spacing:-.03em; }

/* ---------- Profile ---------- */
.cp-page--profile .cp-page-header { padding-bottom:36px; }
.cp-profile .cp-page-title { font-size:clamp(40px,5vw,60px); }
.cp-page--profile .cp-ld-profile { padding-top:56px; }
.cp-page--profile .learndash-wrapper .ld-profile-summary { background:var(--cp-black); color:#fff; border-radius:var(--cp-radius-lg); padding:28px; }
.cp-page--profile .learndash-wrapper .ld-profile-heading { color:#fff; }
.cp-page--profile .learndash-wrapper .ld-profile-avatar { border-radius:50%; }
.cp-page--profile .learndash-wrapper .ld-profile-stat { background:var(--cp-charcoal); border-radius:var(--cp-radius); }

/* ---------- Motion ---------- */
@keyframes cp-rise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
.cp-page-header > * { animation:cp-rise .7s var(--cp-ease) both; }
.cp-page-header > *:nth-child(2) { animation-delay:.08s; }
.cp-page-header > *:nth-child(3) { animation-delay:.16s; }
.cp-course-card { animation:cp-rise .65s var(--cp-ease) both; }
.cp-course-card:nth-child(2){animation-delay:.05s}.cp-course-card:nth-child(3){animation-delay:.1s}.cp-course-card:nth-child(4){animation-delay:.15s}.cp-course-card:nth-child(5){animation-delay:.2s}.cp-course-card:nth-child(6){animation-delay:.25s}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cp-nav { height:60px; }
  .cp-nav-inner { width:min(var(--cp-max),calc(100% - 28px)); gap:12px; }
  .cp-nav-logo { min-width:auto; }
  .cp-nav-name { display:none; }
  .cp-nav-back { display:none; }
  .cp-nav-right { margin-left:auto; }
  .cp-page { width:min(var(--cp-max),calc(100% - 28px)); }
  .cp-stats { grid-template-columns:1fr; padding:48px 20px; }
  .cp-course-grid,.cp-ld-content .ld-course-list-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cp-feature-grid { grid-template-columns:1fr; gap:36px; }
  .cp-course-hero-overlay,.cp-course-hero--no-image { padding:56px 28px; }
}

@media (max-width: 620px) {
  .cp-page-header { padding:52px 0 32px; }
  .cp-archive-courses .cp-page-header { margin-left:-14px; margin-right:-14px; padding:56px 28px; min-height:360px; }
  .cp-page-title,.cp-course-title { font-size:42px; }
  .cp-page-sub { font-size:16px; }
  .cp-section-head { display:block; }
  .cp-course-grid,.cp-ld-content .ld-course-list-items { grid-template-columns:1fr; }
  .cp-feature-band { margin-left:-14px; margin-right:-14px; padding:64px 28px; }
  .cp-feature-grid { gap:28px; }
  .cp-stats { margin-left:-14px; margin-right:-14px; }
  .cp-course-hero,.cp-course-hero-overlay { min-height:360px; }
  .cp-course-hero-overlay,.cp-course-hero--no-image { padding:44px 20px; }
  .cp-nav-logo img { max-width:135px; max-height:32px; }
  .cp-nav-logout { padding:7px 11px; font-size:12px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; }
}