/* How to Mahjong, one scrollable course: episodes in order, on the Island Path's cards. */
.course {
  display: grid;
  gap: 28px;
  max-width: 720px;
  margin: 0 auto;
}

.course-part {
  margin: 18px 0 -8px;
  color: #2d4c36;
  font: 800 1.35rem / 1.1 "Google Sans Flex", sans-serif;
  letter-spacing: -0.01em;
}

.course-episode {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 252, 244, 0.9);
  box-shadow: 0 10px 30px rgba(28, 41, 36, 0.08);
  scroll-margin-top: 90px;
}

.course-episode-head h3 {
  margin: 0;
  color: #1c2924;
  font: 800 1.6rem / 1.1 "Google Sans Flex", sans-serif;
  letter-spacing: -0.02em;
}

.course-question {
  margin: 8px 0 16px;
  color: #3d4b45;
  font-size: 1.05rem;
}

.course-film {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  border-radius: 16px;
  background: #0e2b22;
  aspect-ratio: 16 / 9;
}

.course-episode.is-locked {
  opacity: 0.82;
}

.course-lock p {
  margin: 0;
  color: #3d4b45;
}

.course-lock-cta {
  margin-top: 8px !important;
  color: #b07d1a !important;
  font-weight: 800;
}

.course-episode.is-done .course-episode-head .path-kicker::after {
  content: " · Done";
}

/* The journey map above the episodes: each lesson stop, then its smaller quiz stop, then the unit's checkpoint. */
.journey {
  margin-bottom: 40px;
}

.journey-quiz .path-node {
  width: 50px;
  height: 50px;
  margin-left: 7px;
}

.journey-quiz .path-node-mark {
  font-size: 1.3rem;
}

.journey-checkpoint .path-node {
  background: #f2c75c;
  box-shadow: 0 6px 0 #c4962c;
  color: #3b2b06;
}

.path-check {
  scroll-margin-top: 90px;
}