/* ==========================================================================
   Courses — Premium 3D cards (extends features-premium)
   ========================================================================== */

.courses--premium {
  position: relative;
  overflow: hidden;
}

.courses__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.courses__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.4;
}

.courses__orb--emerald {
  width: min(380px, 50vw);
  height: min(380px, 50vw);
  top: 10%;
  left: -6%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
}

.courses__orb--amber {
  width: min(300px, 42vw);
  height: min(300px, 42vw);
  bottom: 0;
  right: -4%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
}

.courses__container {
  position: relative;
  z-index: 1;
}

.courses__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  max-width: 1120px;
  margin-inline: auto;
  perspective: 1200px;
}

@media (min-width: 640px) {
  .courses__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .courses__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

/* Course-specific card polish */
.courses--premium .feature-card--course .feature-card__surface {
  min-height: 100%;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 250, 252, 0.95) 100%
  );
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 12px 32px rgba(15, 23, 42, 0.07);
}

.courses--premium .feature-card--course .feature-card__surface::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-5);
  right: var(--space-5);
  height: 3px;
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  background: linear-gradient(90deg, var(--emerald-600, #059669), var(--emerald-400, #34d399));
  opacity: 0.85;
  z-index: 5;
  pointer-events: none;
}

.courses--premium .feature-card--course.is-hovered .feature-card__surface::after {
  opacity: 1;
  height: 4px;
}

.courses--premium .feature-card--course .feature-card__body {
  min-height: 260px;
}

.courses__tag {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: rgba(236, 253, 245, 0.9);
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: var(--radius-full);
  transform: translateZ(16px);
  transition:
    transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.18s ease,
    color 0.18s ease;
}

.courses--premium .feature-card--course.is-hovered .courses__tag {
  transform: translateZ(28px) scale(1.04);
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
}

.courses__link {
  font-weight: 600;
}

/* Stagger reveal — 4 cards */
.courses--premium .feature-card--premium:nth-child(1) { transition-delay: 0ms; }
.courses--premium .feature-card--premium:nth-child(2) { transition-delay: 60ms; }
.courses--premium .feature-card--premium:nth-child(3) { transition-delay: 120ms; }
.courses--premium .feature-card--premium:nth-child(4) { transition-delay: 180ms; }

@media (max-width: 1023px) {
  .courses--premium .feature-card--course .feature-card__body {
    min-height: 220px;
  }
}