/* COURSE CARDS SOFT - Courses page only */

#coursesGrid .course-card {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(130% 95% at 0% 0%, rgba(140,180,255,.08), transparent 58%),
    linear-gradient(160deg, #16212f, #0d1520);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.28);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
#coursesGrid .course-card:hover {
  border-color: rgba(255,255,255,.17) !important;
  background:
    radial-gradient(130% 95% at 0% 0%, rgba(140,180,255,.13), transparent 60%),
    linear-gradient(160deg, #1a283b, #0e1826);
}

/* Details row: neutral chips above a thin divider */
#coursesGrid .course-meta {
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.07);
  gap: .45rem;
}
#coursesGrid .course-duration,
#coursesGrid .course-lessons {
  display: inline-flex;
  align-items: center;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-size: .7rem;
  color: #aab6c6;
}

/* DESCRIPTION GLOW - the description brightens on card hover; text stays normal so the ... always shows */
#coursesGrid .course-desc {
  color: #a9b6c8;
  transition: color .4s ease, text-shadow .4s ease, transform .4s ease;
}

@media (hover: hover) and (pointer: fine) {
  #coursesGrid .course-card:hover .course-desc {
    color: #eef4fb;
    text-shadow: 0 0 14px rgba(170,200,255,.28);
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #coursesGrid .course-desc { transition: none !important; transform: none !important; }
}

/* DIFFICULTY SIZE - bigger difficulty label on Courses page cards */
#coursesGrid .course-diff-meter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}
#coursesGrid .course-diff-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 15px;
}
#coursesGrid .course-diff-bar { width: 4px; }