/* courses.css — all styles live in product.css which is shared */
/* This file exists so courses.html has a clean separate link */
/* All course index styles are defined in css/product.css */

.courses-quiz-spotlight {
  position: relative;
  z-index: 2;
  margin-top: -44px;
  padding: 0 0 40px;
  background:
    linear-gradient(180deg, rgba(8, 15, 26, 0) 0, rgba(8, 15, 26, 0) 40px, var(--off-white, #F4F7FB) 40px),
    radial-gradient(circle at top right, rgba(22, 119, 190, 0.08), transparent 32%),
    var(--off-white, #F4F7FB);
}
.courses-quiz-spotlight__card {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.95fr);
  gap: 32px;
  padding: 36px;
  border: 1px solid rgba(13, 24, 39, 0.08);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(22, 119, 190, 0.07), rgba(22, 119, 190, 0)) top / 100% 120px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.98));
  color: var(--text);
  box-shadow: 0 22px 46px rgba(8, 15, 26, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.courses-quiz-spotlight__copy .label { color: var(--blue); }
.courses-quiz-spotlight__copy h2 {
  color: var(--text);
  margin-bottom: 16px;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 1.04;
}
.courses-quiz-spotlight__copy p {
  max-width: 56ch;
  color: var(--text);
}
.courses-quiz-spotlight__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.courses-quiz-spotlight__points span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid rgba(13, 24, 39, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
}
.courses-quiz-spotlight__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(8, 15, 26, 0.97), rgba(13, 24, 39, 0.93));
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--white);
}
.courses-quiz-spotlight__eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 213, 228, 0.78);
}
.courses-quiz-spotlight__actions .btn { width: 100%; }
.courses-quiz-spotlight__actions p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.6;
}

.course-tile--quiz {
  position: relative;
  border-color: rgba(22, 119, 190, 0.18);
  background:
    radial-gradient(circle at top right, rgba(22, 119, 190, 0.12), transparent 42%),
    linear-gradient(160deg, rgba(244, 247, 251, 0.88), rgba(255, 255, 255, 1));
}
.course-tile--quiz:hover {
  border-color: rgba(22, 119, 190, 0.36);
  box-shadow: 0 12px 36px rgba(8, 15, 26, 0.12);
}
.course-tile--quiz .course-tile__body--cta {
  background: transparent;
}
.course-tile__tag--quiz {
  background: rgba(22, 119, 190, 0.12);
  color: var(--blue);
}
.course-tile--quiz .course-tile__icon {
  background: rgba(22, 119, 190, 0.12);
}
.course-tile__price--quiz {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .courses-quiz-spotlight__card {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }
  .courses-quiz-spotlight {
    margin-top: -28px;
    padding-bottom: 32px;
  }
}
@media (max-width: 640px) {
  .courses-quiz-spotlight {
    margin-top: -16px;
    padding: 0 0 24px;
  }
  .courses-quiz-spotlight__card {
    gap: 24px;
    padding: 24px 20px;
    border-radius: 20px;
  }
  .courses-quiz-spotlight__actions {
    padding: 18px;
  }
  .course-tile__price--quiz {
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .courses-quiz-spotlight__card {
    transition: none;
  }
}