/* ============================================================
   MY MUSIC JOURNEY (Prompt 9) — learning-path presentation.
   Light surface; CJ Blue progression line; mobile vertical path,
   horizontal snap journey on larger screens. No-JS safe.
   ============================================================ */

.journey { background: var(--cj-background); padding-block: var(--cj-space-16) var(--cj-space-20); }
.journey-head { max-width: 680px; margin: 0 auto var(--cj-space-12); text-align: center; }
.journey-head h2 { font-size: clamp(1.75rem, 4.5vw, 2.75rem); }
.journey-intro { color: var(--color-text-muted); font-size: clamp(1rem, 2.4vw, 1.125rem); line-height: 1.65; }

/* Personal card (real student data only). */
.journey-personal {
  max-width: 720px; margin: 0 auto var(--cj-space-12);
  background: #fff; border: 1px solid var(--cj-border); border-radius: var(--radius-xl);
  padding: var(--cj-space-6); box-shadow: var(--shadow-md);
  display: grid; gap: var(--space-2);
}
.journey-personal h3 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.625rem); }
.journey-personal .cj-btnrow { margin-top: var(--space-2); }

/* Stage track: vertical timeline on mobile. */
.journey-track { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); position: relative; }
.journey-stage { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; position: relative; padding-left: var(--space-1); }
.journey-stage::before {
  content: ""; position: absolute; left: 19px; top: 44px; bottom: -18px; width: 2px;
  background: linear-gradient(var(--cj-primary), var(--cj-border));
}
.journey-stage:last-child::before { display: none; }
.journey-dot {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--cj-primary); color: var(--cj-primary);
  font-family: var(--font-display); font-weight: 800; font-size: 0.8125rem;
}
.journey-stage h3 { font-size: 1.0625rem; margin-bottom: var(--space-1); }
.journey-stage p { color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.6; margin: 0; }

.journey-foot { text-align: center; margin-top: var(--cj-space-12); }

/* Horizontal journey on larger screens. */
@media (min-width: 768px) {
  .journey-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--space-4) * -1); padding: var(--space-2) var(--space-4) var(--space-4); gap: var(--cj-space-6); }
  .journey-track::-webkit-scrollbar { display: none; }
  .journey-track::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 2px; background: linear-gradient(90deg, var(--cj-primary), var(--cj-border)); }
  .journey-stage { flex: 0 0 240px; scroll-snap-align: start; display: block; padding-left: 0; padding-top: 0; }
  .journey-stage::before { display: none; }
  .journey-dot { margin-bottom: var(--space-3); background: #fff; position: relative; z-index: 1; }
}
@media (min-width: 1280px) {
  .journey-track { overflow: visible; margin-inline: 0; padding-inline: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-3); }
  .journey-stage { min-width: 0; }
  .journey-stage h3 { font-size: 0.9375rem; }
  .journey-stage p { font-size: 0.8125rem; }
}