/* =========================================
   COURSES
========================================== */
.course-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.course-card{
  background: var(--parchment-card);
  border: 1px solid rgba(36,24,19,0.12);
  border-radius: var(--radius);
  padding: 28px 26px;
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  opacity:0; transform: translateY(10px);
}
.course-card.in-view{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease; }
.course-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(36,24,19,0.35);
  border-color: rgba(107,30,30,0.3);
}
.course-card .course-meta{ display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.course-card .status-tag{
  font-size:0.68rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  padding: 3px 9px; border-radius: 10px;
  color: var(--leaf-deep); background: rgba(47,75,60,0.1);
}
.course-card h3{
  font-family: var(--font-en-display);
  font-size: 1.2rem; font-weight:600; color: var(--ink);
  margin-bottom: 6px;
}
.course-card h3 .kn{ display:block; font-family: var(--font-kn-body); font-size:0.8rem; color: var(--maroon-deep); font-weight:500; margin-top:3px; }
.course-card p.excerpt{ font-size:0.9rem; color: var(--ink-soft); margin-bottom:16px; flex:1; }
.course-stats{ display:flex; gap:18px; margin-bottom:16px; }
.course-stats .cs-item{ display:flex; align-items:center; gap:6px; font-size:0.8rem; color: var(--ink-soft); }
.course-stats svg{ width:14px; height:14px; flex-shrink:0; }
.course-card .progress-track{ margin-bottom:8px; }
.course-card .progress-caption{ font-size:0.78rem; color: var(--ink-soft); margin-bottom:16px; }
.course-card .btn{ width:100%; justify-content:center; margin-top:auto; }