/* /sahi/courses/ (Learn > Courses). sahi.com's night sky with shooting stars, a
   bright horizon at its foot, and the course cards on a large rounded panel
   that rises into it. On a phone sahi.com pulled the panel up over the hero's
   subtitle; here the hero always leaves room for the panel's lift. */

.page-courses { --lift: clamp(80px, 11vw, 160px); }

/* ---- Hero ----------------------------------------------------------------- */
.courses-hero { overflow: hidden; padding-bottom: calc(var(--lift) + clamp(48px, 7vw, 96px)); }
.courses-hero .h1 { max-width: 16ch; }
.courses-hero .lead { max-width: 680px; }
/* The horizon: the page colour rising as a soft ellipse behind the panel
   (white in light theme, the dark page in dark theme, so it never glares). */
.courses-hero::after { content: ""; position: absolute; left: 50%; bottom: calc(-1 * (var(--lift) + 72px)); z-index: -1; width: max(1400px, 150vw); height: calc(2 * (var(--lift) + 72px)); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--bg) 38%, color-mix(in srgb, var(--bg) 55%, transparent) 62%, transparent); pointer-events: none; }
/* The horizon runs on into the page below, so no rule line under the hero in dark theme. */
:root[data-theme="dark"] .courses-hero { border-bottom: 0; }
:root[data-theme="dark"] .courses-hero::after { background: radial-gradient(closest-side, var(--bg) 40%, color-mix(in srgb, #66033C 34%, #0A0A0A) 66%, transparent); }

/* Stars and two shooting stars: decoration only. They twinkle and fly only when
   motion is allowed; otherwise they stay still. */
.courses-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.star { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #FAFAFA; box-shadow: 0 0 8px color-mix(in srgb, #FAFAFA 90%, transparent); opacity: .75; }
.star:nth-child(3n) { width: 2px; height: 2px; }
html.motion .star { animation: courses-twinkle 3.4s ease-in-out var(--t) infinite alternate; }
@keyframes courses-twinkle { from { opacity: .2; } to { opacity: .95; } }
.streak { position: absolute; width: clamp(110px, 14vw, 200px); height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, #FAFAFA 85%, transparent)); transform: rotate(-24deg); transform-origin: right center; }
.streak::after { content: ""; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #FAFAFA; box-shadow: 0 0 10px #FAFAFA; }
.streak--a { left: 9%; top: 24%; }
.streak--b { right: 12%; top: 52%; }
html.motion .streak { animation: courses-shoot 8s var(--ease) infinite; }
html.motion .streak--b { animation-delay: 4s; }
@keyframes courses-shoot {
  0%, 62% { opacity: 0; translate: -90px 40px; }
  70% { opacity: 1; }
  100% { opacity: 0; translate: 140px -62px; }
}

/* ---- Course panel ----------------------------------------------------------- */
.courses { padding-top: 0; }
.courses-panel { position: relative; z-index: 1; max-width: 1040px; margin: calc(-1 * var(--lift)) auto 0; padding: clamp(20px, 3.4vw, 40px); border: 1px solid var(--line); border-radius: clamp(24px, 3vw, 34px); background: var(--surface); box-shadow: var(--shadow-3); }
.courses-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 36px); margin: 0; padding: 0; list-style: none; }
.course { position: relative; display: flex; flex-direction: column; }
.course__media { margin-bottom: 20px; aspect-ratio: 1.9 / 1; border-radius: 12px; overflow: hidden; background: var(--bg-alt); }
.course__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.course:hover .course__media img { transform: scale(1.02); }
.course__title { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -.025em; }
.course__title a { color: var(--ink); text-decoration: none; }
.course__title a::after { content: ""; position: absolute; inset: -8px; border-radius: var(--radius-sm); }
.course__title a:focus-visible { outline: none; }
.course:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 8px; border-radius: var(--radius-sm); }
.course:hover .course__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.course__meta { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; color: var(--brand-ink); }
.course__meta svg { flex: none; width: 16px; height: 16px; }
.course__text { margin-top: 14px; max-width: 30rem; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 760px) {
  .courses-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .streak--b { display: none; }
}
@media (prefers-reduced-motion: reduce) { .course:hover .course__media img { transform: none; } }

/* The Real-Time Volume Indicators card: its cover is a sample chart drawn in
   SVG (scripts/sahi-site/volume-charts.mjs, styled by volume-course.css), on
   the near-black of a SAHI chart in both themes. */
.course__media--chart { display: grid; place-items: center; padding: 18px 16px 12px; background: var(--stage); }
.course__media--chart .vchart__svg { width: 100%; height: 100%; }
.course__media--chart .vc-sep { stroke: var(--stage-line); }
.course__media--chart .vc-up { fill: #5ACFE0; stroke: #5ACFE0; }
.course__media--chart .vc-down { fill: #EE807B; stroke: #EE807B; }