/* ============================================================
   SHIVORAA — course.css  |  macOS Premium Theme

   Cards follow the same conventions as services.css: surface
   background, accent bar that wipes in on hover, --c per card for
   the accent colour.
============================================================ */

#courses { background: var(--bg); }

.course-grid {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  align-items: start;
}
@media (min-width: 768px)  { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .course-grid { grid-template-columns: repeat(3, 1fr); } }

.course-card {
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.course-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--c, var(--blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
  border-radius: 3px 3px 0 0;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.course-card:hover::before { transform: scaleX(1); }

/* Sits in normal flow above the title. An earlier version pinned this
   to the top-right corner and reserved a fixed gutter on the title,
   which collided as soon as the badge text was longer than the gutter. */
.course-badge {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--c, var(--blue));
  background: color-mix(in srgb, var(--c, #4F46E5) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #4F46E5) 25%, transparent);
}

.course-name {
  margin: 0 0 10px;
  font-size: 1.15rem; font-weight: 700; line-height: 1.35;
  color: var(--text);
}
.course-desc {
  margin: 0 0 18px; font-size: 0.9rem; line-height: 1.65; color: var(--text3);
}

.course-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.course-meta span {
  padding: 5px 11px; border-radius: 7px;
  font-size: 0.74rem; font-weight: 500;
  color: var(--text2); background: var(--surface2);
  border: 1px solid var(--border2);
}

.course-points {
  margin: 0 0 20px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 9px;
}
.course-points li {
  position: relative; padding-left: 22px;
  font-size: 0.85rem; line-height: 1.55; color: var(--text2);
}
/* Tick drawn in CSS so the markup stays copy-pasteable. */
.course-points li::before {
  content: ''; position: absolute; left: 2px; top: 6px;
  width: 5px; height: 9px;
  border: solid var(--c, var(--blue));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.course-tags {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px;
}
.course-tags span {
  padding: 5px 11px; border-radius: 7px;
  font-size: 0.72rem; font-weight: 500;
  color: var(--c, var(--blue));
  background: color-mix(in srgb, var(--c, #4F46E5) 9%, transparent);
}

/* margin-top:auto keeps the button on the bottom edge so cards of
   differing length still line their buttons up across a row. */
.course-cta {
  margin-top: auto; width: 100%; text-align: center;
  padding: 12px 18px; font-size: 0.85rem; border-radius: 10px;
}

.course-note {
  margin-top: 48px; padding: 28px 32px; text-align: center;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
}
.course-note p { margin: 0; font-size: 0.9rem; color: var(--text2); }
.course-note a { color: var(--blue); font-weight: 600; }
.course-note a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .course-card { padding: 26px 22px; }
  .course-badge { white-space: normal; }
}