/* Video Library (2026-11-03): /videos/ and /videos/{slug}/. Builds on tutorials.css (.t-hero, .topics, .lib, .tut); only the
   library's own parts live here: hero numbers, topic sections, covers with this device's progress, continue watching, the series page. */
.vl-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 0; font: 400 var(--fs-label)/1.4 var(--font-mono); color: var(--muted); }
.vl-stats b { display: block; font: 700 clamp(22px, 2.4vw, 28px)/1.1 var(--font-display); color: var(--text); letter-spacing: -.01em; }
.vl-tools { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); background: var(--bg); padding-top: 16px; }
.vl-group { scroll-margin-top: calc(var(--nav-h) + 80px); }
.vl-group + .vl-group { margin-top: 24px; }
.vl-group[hidden] { display: none; }
.vl-group .lib-head { display: block; }
.vl-note { margin: 6px 0 0; font: 400 var(--fs-label)/1.5 var(--font-mono); color: var(--muted); max-width: 70ch; }
.vl-cover { aspect-ratio: 16 / 9; overflow: hidden; }
.vl-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tut:hover .vl-cover img { transform: scale(1.03); }
.vl-prog { position: absolute; left: 0; bottom: 0; z-index: 1; height: 4px; width: 0; background: var(--accent-bright); transition: width var(--t-toggle) var(--ease); }
.vl-card.is-done .vl-prog { background: var(--ok); }
.vl-card.is-done [data-vl-done]::before { content: "✓ "; color: var(--ok); }
.vl-continue .lib-head h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 4px 0; border-radius: 50%; background: var(--accent-bright); vertical-align: middle; }
.vl-next { font: 400 var(--fs-meta)/1.4 var(--font-mono); color: var(--accent-bright); }
.vl-none, .vl-nomatch { margin-top: 32px; }
/* the library lists every series in its topic: no "first card wide" layout (that is the lessons page's featured lesson) */
.vl-group .lib > .tut:first-child, .vl-row > .tut:first-child { grid-column: auto; grid-template-columns: none; grid-template-rows: auto 1fr; }
.vl-group .lib > .tut:first-child .thumb, .vl-row > .tut:first-child .thumb { border-right: 0; border-bottom: 1px solid var(--line); }

/* series page */
.vl-head .lede { max-width: 70ch; }
.vl-player .vlp { margin-top: 8px; }
.vl-more { padding-top: 24px; }
.vl-back { margin: 0; }
@media (max-width: 1100px) { .vl-group .lib, .vl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .vl-group .lib, .vl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vl-tools { position: static; } }
/* phones: the lessons page turns cards into small rows; a series keeps its full cover card (few cards, the cover sells them) */
@media (max-width: 719px) {
  .vl-card { grid-template-columns: none; grid-template-rows: auto 1fr; }
  .vl-card .thumb { display: block; border-right: 0; border-bottom: 1px solid var(--line); }
  .vl-card .thumb .dur { top: 10px; bottom: auto; right: 10px; padding: 4px 7px; }
  .vl-card .body { padding: 14px 16px 16px; }
  .vl-card .body > p:not([class]) { display: block; }
}
@media (max-width: 560px) { .vl-group .lib, .vl-row { grid-template-columns: minmax(0, 1fr); gap: 14px; } }