/* ============================================================
   North Aero - Chart lesson pages (sectional chart series now,
   airport diagram and prog chart series later).
   Pages are built by tools/build_chart_series.py.
   Uses the design tokens in css/style.css.
   ============================================================ */

/* ---------- lesson page hero ---------- */
.cs-hero { padding: var(--space-2xl) 0 var(--space-xl); }
.cs-hero h1 { margin: 0; text-wrap: balance; }
.cs-crumbs { font-size: 14px; color: var(--hangar-400); margin-bottom: var(--space-md); }
.cs-crumbs a { color: var(--hangar-300); text-decoration: none; }
.cs-crumbs a:hover { color: #fff; text-decoration: underline; }
.cs-eyebrow { color: var(--runway-300); }
.cs-eyebrow .mono { font-size: 13px; letter-spacing: 0; }
.cs-dot { margin: 0 4px; }
.section--dark p.cs-lead { color: var(--hangar-300); max-width: 62ch; margin-top: var(--space-md); font-size: 17px; }

/* ---------- player (loads YouTube only after a click) ---------- */
.cs-lesson { padding-top: var(--space-xl); }
.cs-player {
  position: relative; aspect-ratio: 16 / 9; max-width: 100%;
  background: var(--hangar-900); border-radius: var(--radius-md); overflow: hidden;
}
.cs-player img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-play {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; display: block;
}
.cs-play::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,27,29,0) 55%, rgba(26,27,29,0.55) 100%);
}
.cs-play__icon {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  background: var(--runway-500); box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .15s, background .15s;
}
.cs-play__icon::before {
  content: ""; position: absolute; left: 35px; top: 26px;
  border-style: solid; border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent #fff;
}
.cs-play:hover .cs-play__icon, .cs-play:focus-visible .cs-play__icon { transform: scale(1.06); background: var(--runway-600); }
.cs-play:focus-visible { outline: 3px solid var(--runway-400); outline-offset: -3px; }
.cs-play__label {
  position: absolute; left: var(--space-md); bottom: var(--space-md); z-index: 1;
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; font-size: 15px;
}
.cs-player--soon .cs-play__label {
  background: rgba(26,27,29,.8); padding: var(--space-xs) var(--space-md); border-radius: 999px;
}
.cs-player-note { font-size: 13px; color: var(--na-fg-muted); margin-top: var(--space-sm); max-width: none; }

/* ---------- lesson body ---------- */
.cs-grid { display: grid; gap: var(--space-2xl); margin-top: var(--space-xl); }
@media (min-width: 960px) {
  .cs-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .cs-side { position: sticky; top: 104px; }
}
.cs-main h2 { font-size: 22px; margin: 0 0 var(--space-md); }
.cs-main h2 + * { margin-top: 0; }
.cs-points { margin: 0 0 var(--space-2xl); padding-left: 1.2em; display: grid; gap: var(--space-xs); }
.cs-points li { max-width: 62ch; }
.cs-transcript { display: grid; gap: var(--space-md); }
.cs-transcript p { margin: 0; max-width: 66ch; color: var(--na-fg-2); }
.cs-fine { font-size: 13px; color: var(--na-fg-muted); margin-top: var(--space-xl); max-width: none; }

.cs-side { display: grid; gap: var(--space-md); }
.cs-card {
  display: grid; gap: var(--space-sm);
  background: var(--na-surface); border: 1px solid var(--na-border);
  border-radius: var(--radius-md); padding: var(--space-lg);
}
.cs-card h3 { margin: 0; font-size: 20px; }
.cs-card p { margin: 0; font-size: 15px; color: var(--na-fg-2); }
.cs-card .eyebrow { margin: 0; }
.cs-card--quiz { border-top: 4px solid var(--runway-500); }
.cs-card--quiz .btn { justify-self: start; margin-top: var(--space-xs); }
.cs-next { text-decoration: none; color: var(--na-fg); transition: border-color .15s; }
.cs-next:hover { border-color: var(--runway-400); }
.cs-next img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.cs-next__title { font-weight: 600; }
.cs-next__title .mono { color: var(--runway-700); margin-right: 4px; }
.cs-next__len { font-size: 13px; color: var(--na-fg-muted); }
.cs-pager { display: grid; gap: var(--space-xs); font-size: 14px; padding: 0 var(--space-xs); }

/* ---------- series page ---------- */
.cs-hub-hero { padding: var(--space-4xl) 0 var(--space-2xl); }
.section--dark p.cs-hub-lead { color: var(--hangar-300); max-width: 60ch; margin-top: var(--space-md); }

.cs-module { margin-bottom: var(--space-3xl); scroll-margin-top: 96px; }
.cs-module__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--na-border); padding-bottom: var(--space-sm); margin-bottom: var(--space-lg);
}
.cs-module__key {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--runway-700);
  min-width: 1.4em;
}
.cs-module__head h2 { margin: 0; font-size: 26px; flex: 1 1 auto; }
.cs-module__meta { font-size: 13px; color: var(--na-fg-muted); }

.cs-cards { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cs-vcard {
  display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--space-xs);
  text-decoration: none; color: var(--na-fg);
  background: var(--na-surface); border: 1px solid var(--na-border); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-sm) var(--space-md); transition: border-color .15s, transform .15s;
}
.cs-vcard:hover { border-color: var(--runway-400); transform: translateY(-2px); }
.cs-vcard:focus-visible { outline: 2px solid var(--runway-500); outline-offset: 2px; }
.cs-vcard img { width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: var(--space-xs); }
.cs-vcard__meta { font-size: 13px; color: var(--runway-700); padding: 0 var(--space-xs); }
.cs-vcard__title { font-weight: 700; font-size: 17px; padding: 0 var(--space-xs); }
.cs-vcard__lead { font-size: 14px; color: var(--na-fg-2); padding: 0 var(--space-xs); }

.cs-quizband {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg);
  background: var(--hangar-900); color: #fff; border-radius: var(--radius-md); padding: var(--space-xl);
}
.cs-quizband > div { flex: 1 1 360px; min-width: 0; }
.cs-quizband h2 { color: #fff; margin: 0 0 var(--space-sm); }
.cs-quizband p { color: var(--hangar-300); margin: 0; }
.cs-quizband .eyebrow { color: var(--runway-300); }

@media (max-width: 640px) {
  .cs-play__icon { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  .cs-play__icon::before { left: 27px; top: 20px; border-width: 14px 0 14px 22px; }
  .cs-module__head h2 { font-size: 22px; }
  .cs-quizband { padding: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-vcard, .cs-play__icon { transition: none; }
  .cs-vcard:hover { transform: none; }
}