/* =========================================================
   Learning Videos — only what this page does not share with
   its sibling. Everything general lives in ../resources.css.

   NOTHING HERE IS A PLAYER. There are no thumbnails, no play
   buttons and no duration badges over an image, because none
   of the episodes exist yet and a page should not imply that
   they do. An episode is a row: number, title, runtime.
   ========================================================= */

/* the production status, stated at the top rather than buried */
.lv-status {
  display: flex; align-items: flex-start; gap: calc(12 * var(--u));
  max-width: calc(760 * var(--u));
  margin-top: calc(34 * var(--u));
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  border: 1px solid var(--rule);
  border-left: calc(3 * var(--u)) solid var(--lime-ico);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--soft);
  font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u));
  color: var(--muted);
}
.lv-status b { font-weight: 600; color: var(--ink); }
.lv-status .i { margin-top: calc(4 * var(--u)); color: var(--lime-ink); }

/* ---------- the curriculum ---------- */
.lv-tracks { display: grid; gap: calc(20 * var(--u)); }
.lv-track {
  display: grid;
  grid-template-columns: calc(300 * var(--u)) minmax(0, 1fr);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
}
.lv-track__head {
  display: grid; align-content: start; gap: calc(9 * var(--u));
  padding: calc(28 * var(--u));
  border-right: 1px solid var(--rule);
  background: #fcfcfb;
}
.lv-track__head .rs-tag { justify-self: start; margin-top: calc(6 * var(--u)); }
.lv-track__n { font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.lv-track__sub { font-size: calc(15.5 * var(--u)); line-height: calc(24 * var(--u)); color: var(--muted); }

.lv-eps { display: grid; }
.lv-eps > li {
  display: grid;
  grid-template-columns: calc(30 * var(--u)) minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: calc(18 * var(--u));
  padding: calc(18 * var(--u)) calc(26 * var(--u));
}
.lv-eps > li + li { border-top: 1px solid var(--rule); }
.lv-ep__n { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.lv-ep__t { display: grid; gap: calc(4 * var(--u)); min-width: 0; }
.lv-ep__t b { font-size: calc(17 * var(--u)); line-height: calc(25 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.lv-ep__t span { font-size: calc(15 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }
.lv-ep__d { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-ep__d .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* ---------- what to read instead ---------- */
.lv-links { display: grid; border-top: 1px solid var(--rule); }
.lv-links > li { border-bottom: 1px solid var(--rule); }
.lv-links a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: calc(32 * var(--u));
  padding: calc(26 * var(--u)) 0;
  transition: padding-left .2s var(--ease);
}
.lv-links a:hover { padding-left: calc(10 * var(--u)); }
.lv-links a:hover b { color: var(--lime-ink); }
.lv-links__t { display: grid; gap: calc(6 * var(--u)); }
.lv-links__t b { font-family: var(--font-head); font-size: calc(24 * var(--u)); line-height: calc(31 * var(--u)); font-weight: 500; letter-spacing: -.028em; transition: color .15s ease; }
.lv-links__t span { max-width: calc(660 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); color: var(--muted); }
.lv-links .i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--muted); transition: transform .2s var(--ease); }
.lv-links a:hover .i { transform: translateX(calc(4 * var(--u))); color: var(--ink); }

@media (max-width: 1179px) {
  .lv-status { max-width: none; padding: 16px 18px; font-size: 15px; line-height: 24px; margin-top: 26px; }
  .lv-tracks { gap: 14px; }
  .lv-track { grid-template-columns: minmax(0, 1fr); }
  .lv-track__head { border-right: 0; border-bottom: 1px solid var(--rule); padding: 20px; }
  .lv-eps > li { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 16px 20px; }
  .lv-ep__d { grid-column: 2; }
  .lv-ep__t b { font-size: 16px; line-height: 24px; }
  .lv-ep__t span { font-size: 14.5px; line-height: 22px; }
  .lv-links a { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 20px 0; }
  .lv-links a:hover { padding-left: 0; }
  .lv-links__t b { font-size: 19px; line-height: 26px; }
  .lv-links__t span { max-width: none; font-size: 15px; line-height: 23px; }
}