/* ── Courses page ────────────────────────────────────────────────────────── */
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.course-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--pk-shadow); transition: all 0.25s; display: block; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--pk-shadow-lg); }
.course-card-top { padding: 32px 20px 24px; text-align: center; position: relative; }
.course-icon { font-size: 44px; font-weight: 900; color: #fff; display: block; }
.course-badge { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: var(--pk-radius-pill); background: rgba(255,255,255,0.25); color: #fff; font-size: 11px; font-weight: 700; }
.course-card-body { padding: 18px 20px 20px; }
.course-card-body h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.course-meta { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--pk-text-soft); }
.course-arrow { color: var(--pk-coral); font-weight: 700; opacity: 0; transition: opacity 0.2s; }
.course-card:hover .course-arrow { opacity: 1; }


@media (max-width: 768px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }