/* /styles/components/university-stream.css
 *
 * Hub-page stream view: 4 Parts × flat EP grid, matching the /watch/
 * viewer's shape but rendered as a static page (not a SPA overlay).
 * Plus the lesson-video-embed styles used on every standalone sub-guide
 * article. All cyberpunk-themed; per-Part color flows from --part-accent.
 */

/* ── Part section ───────────────────────────────────────────────────── */
.hub-part {
  --part-accent: #00f4ff;
  margin: 2.5rem auto 0;
  max-width: 1280px;
  padding: 0 1.25rem;
  position: relative;
  /* Rail part links scroll here — clear the sticky site header. */
  scroll-margin-top: 96px;
}
/* Topmost (current) Part: the page intro already orients the user, so
   we hide the per-Part banner here to avoid a duplicate header right
   below the intro. Continue banner + EP grid stay. */
.hub-part--current > .hub-part-head { display: none; }
/* Completed Parts get demoted to the bottom of the hub and visually
   dimmed so an unfinished Part is always what's "above the fold." */
.hub-part--complete {
  opacity: 0.6;
  filter: saturate(0.7);
}
.hub-part--complete .hub-part-watch {
  background: transparent;
  color: var(--part-accent) !important;
  border: 1px solid color-mix(in srgb, var(--part-accent) 55%, transparent);
}
.hub-part-head {
  position: relative;
  padding: 1.5rem 1.75rem 1.25rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--part-accent) 14%, transparent),
    color-mix(in srgb, var(--part-accent) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--part-accent) 35%, transparent);
  border-radius: 2px;
  margin-bottom: 1rem;
}
.hub-part-eyebrow {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--part-accent);
}
.hub-part-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 700;
  color: #fff; margin: 0.35rem 0 0.25rem; letter-spacing: 0.01em;
}
.hub-part-subtitle {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem; color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0.6rem;
}
.hub-part-synopsis {
  font-size: 0.92rem; line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 0.9rem;
  max-width: 88ch;
}
.hub-part-stats {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  font-family: 'Share Tech Mono', monospace; font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hub-part-stat-val {
  color: var(--part-accent);
  font-size: 0.9rem;
  margin-right: 0.3rem;
}
.hub-part-watch {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.55rem 1rem;
  background: var(--part-accent);
  color: #03050a !important;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem; font-weight: 600;
  text-decoration: none !important;
  border-radius: 2px;
  letter-spacing: 0.02em;
  transition: filter 0.15s, box-shadow 0.15s;
}
.hub-part-watch:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 28px -10px color-mix(in srgb, var(--part-accent) 80%, transparent);
}

/* ── Continue banner (per Part on the hub) ──────────────────────────── */
.hub-continue {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 1rem;
  margin-bottom: 0.8rem;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--part-accent) 16%, transparent),
    color-mix(in srgb, var(--part-accent) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--part-accent) 45%, transparent);
  border-radius: 2px;
  text-decoration: none !important;
  font-family: 'Share Tech Mono', monospace; font-size: 0.78rem;
  transition: background 0.15s, border-color 0.15s;
}
.hub-continue:hover {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--part-accent) 24%, transparent),
    color-mix(in srgb, var(--part-accent) 8%, transparent));
  border-color: color-mix(in srgb, var(--part-accent) 65%, transparent);
}
.hub-continue-icon { color: var(--part-accent); font-size: 0.9rem; }
.hub-continue-label {
  color: var(--part-accent); letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 0.66rem;
}
.hub-continue-title {
  color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 600;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-continue-pct {
  color: rgba(255, 255, 255, 0.55); font-size: 0.7rem; letter-spacing: 0.06em;
}

/* ── Part TOC (hub catalog: list of lesson links, no thumbnails) ─────── */
.hub-part-toc {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hub-part-toc-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hub-part-toc-link {
  font-family: var(--watch-font-display, 'Rajdhani', sans-serif);
  font-size: 1rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  flex: 1 1 auto;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s, border-color 0.15s;
}
.hub-part-toc-link:hover {
  color: var(--part-accent, #00f4ff);
  border-bottom-color: color-mix(in srgb, var(--part-accent, #00f4ff) 50%, transparent);
}
.hub-part-toc-kind {
  font-family: var(--watch-font-mono, 'Share Tech Mono', monospace);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

/* ── EP grid + cards ────────────────────────────────────────────────── */
.hub-ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.hub-ep {
  --kind-color: var(--part-accent);
  display: flex; flex-direction: column;
  background: rgba(7, 8, 13, 0.55);
  border: 1px solid var(--watch-border, rgba(255, 255, 255, 0.1));
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.hub-ep:hover {
  border-color: var(--kind-color);
  transform: translateY(-2px);
}
.hub-ep[data-kind="framework"] { --kind-color: #d580ff; }
.hub-ep[data-kind="tactic"]    { --kind-color: #00ff88; }
.hub-ep[data-kind="catalog"]   { --kind-color: #ffe600; }
.hub-ep[data-kind="checklist"] { --kind-color: #ff5b88; }
.hub-ep[data-kind="core"]      { --kind-color: var(--part-accent); }
.hub-ep-thumb {
  position: relative; display: block;
  aspect-ratio: 16/9; background: #000;
  overflow: hidden;
  text-decoration: none !important;
}
.hub-ep-cover {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hub-ep-cover--placeholder {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--kind-color) 25%, transparent) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 30px),
    #07090f;
}
.hub-ep-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}
.hub-ep-index {
  position: absolute; top: 0.55rem; left: 0.6rem;
  font-family: 'Share Tech Mono', monospace; font-size: 0.7rem;
  color: var(--kind-color); letter-spacing: 0.1em;
  padding: 0.15rem 0.4rem;
  background: rgba(7, 8, 13, 0.7); backdrop-filter: blur(4px);
}
.hub-ep-tag {
  position: absolute; top: 0.55rem; right: 0.6rem;
  font-family: 'Share Tech Mono', monospace; font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  background: rgba(7, 8, 13, 0.7);
}
.hub-ep-tag--new   { border: 1px solid #00ff88; color: #00ff88; }
.hub-ep-tag--moved { border: 1px solid #ffe600; color: #ffe600; }
.hub-ep-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 2px solid var(--kind-color);
  background: rgba(7, 8, 13, 0.55); backdrop-filter: blur(3px);
  color: var(--kind-color); font-size: 1rem;
  opacity: 0; transition: opacity 0.2s;
}
.hub-ep:hover .hub-ep-play { opacity: 1; }
.hub-ep-bottom {
  position: absolute; bottom: 0.5rem; left: 0.6rem; right: 0.6rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: 'Share Tech Mono', monospace;
}
.hub-ep-kind {
  font-size: 0.62rem; padding: 0.15rem 0.4rem;
  background: rgba(7, 8, 13, 0.75); backdrop-filter: blur(4px);
  border: 1px solid var(--kind-color);
  color: var(--kind-color);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.hub-ep-dur {
  font-size: 0.72rem; padding: 0.2rem 0.4rem;
  background: rgba(7, 8, 13, 0.85);
  color: #fff;
}
.hub-ep-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(255, 255, 255, 0.12);
}
.hub-ep-progress-bar {
  height: 100%; background: var(--kind-color);
  box-shadow: 0 0 8px var(--kind-color);
}
.hub-ep-meta {
  padding: 0.75rem 0.85rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.hub-ep-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.98rem; font-weight: 600; line-height: 1.25;
  color: #fff !important;
  text-decoration: none !important;
}
.hub-ep-title:hover { color: var(--kind-color) !important; }
.hub-ep-actions {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.hub-chip {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.06em;
  padding: 0.25rem 0.5rem;
  background: rgba(7, 8, 13, 0.55);
  border: 1px solid var(--watch-border, rgba(255, 255, 255, 0.14));
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hub-chip:hover {
  background: rgba(7, 8, 13, 0.8);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.hub-chip--watch { --chip-color: var(--part-accent); }
.hub-chip--read  { --chip-color: var(--part-accent); }
.hub-chip--quiz.is-passed { --chip-color: #00ff88; }
.hub-chip--quiz.is-retry  { --chip-color: #ffe600; }
.hub-chip--quiz.is-start  { --chip-color: #d580ff; }
.hub-chip--pdf   { --chip-color: #ffe600; }
.hub-chip--watch, .hub-chip--read,
.hub-chip--quiz.is-passed, .hub-chip--quiz.is-retry, .hub-chip--quiz.is-start,
.hub-chip--pdf {
  color: var(--chip-color);
  border-color: color-mix(in srgb, var(--chip-color) 55%, transparent);
}
.hub-chip--watch:hover, .hub-chip--read:hover,
.hub-chip--quiz:hover, .hub-chip--pdf:hover {
  background: color-mix(in srgb, var(--chip-color) 18%, transparent);
  color: var(--chip-color);
  border-color: var(--chip-color);
}

@media (max-width: 600px) {
  .hub-ep-grid { grid-template-columns: 1fr; }
}

/* ── Lesson video embed (top of every sub-guide article) ────────────── */
.lesson-video-embed {
  margin: 1.5rem auto 2rem;
  max-width: 960px;
}
.lesson-video-eyebrow {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyber-green, #00ff88);
  margin-bottom: 0.5rem;
}
.lesson-video-wrap {
  position: relative;
  background: #000;
  border: 1px solid rgba(0, 255, 136, 0.25);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 12px 36px -16px rgba(0, 0, 0, 0.6);
}
.lesson-video {
  display: block;
  width: 100%; height: auto;
  background: #000;
}
.lesson-video-note {
  margin-top: 0.5rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Paper (light) theme ─────────────────────────────────────────────────────
   The stream is neon-on-dark by default; its white body text vanishes on the
   paper canvas. Under [data-theme="paper"] swap the white text for ink and
   darken the per-Part neon accent toward ink (via color-mix, preserving hue)
   so accent-coloured text stays legible. Text that sits OVER the dark video
   thumbnails (.hub-ep-index / -tag / -bottom / -dur / -kind, .hub-ep-play,
   .lesson-video-wrap) is intentionally left as-is — its backdrop is a black
   video still regardless of page theme. */
[data-theme="paper"] .hub-part-eyebrow,
[data-theme="paper"] .hub-part-stat-val,
[data-theme="paper"] .hub-continue-icon,
[data-theme="paper"] .hub-continue-label {
  color: color-mix(in srgb, var(--part-accent, #0b6b78) 55%, #1c1813) !important;
}
[data-theme="paper"] .hub-part-subtitle { color: #2b2f3a; }
[data-theme="paper"] .hub-part-synopsis { color: #44403a; }
[data-theme="paper"] .hub-part-stats { color: #6b6358; }
[data-theme="paper"] .hub-continue-title { color: #1c1813; }
[data-theme="paper"] .hub-continue-pct { color: #6b6358; }
[data-theme="paper"] .hub-part-toc { border-top-color: rgba(0, 0, 0, 0.1); }
[data-theme="paper"] .hub-part-toc-item { border-bottom-color: rgba(0, 0, 0, 0.08); }
[data-theme="paper"] .hub-part-toc-link { color: #20242e; }
[data-theme="paper"] .hub-part-toc-kind { color: #8a8276; }

/* EP cards (the /watch grid + any hub EP grid) — card body goes light;
   thumbnail overlays stay light-on-dark as noted above */
[data-theme="paper"] .hub-ep { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); }
[data-theme="paper"] .hub-ep-title { color: #1c1813 !important; }
[data-theme="paper"] .hub-chip { background: rgba(0, 0, 0, 0.04); color: #44403a; border-color: rgba(0, 0, 0, 0.14); }
[data-theme="paper"] .hub-chip:hover { background: rgba(0, 0, 0, 0.08); color: #1c1813; border-color: rgba(0, 0, 0, 0.3); }

/* Lesson video embed caption (appears on lesson pages, which load this sheet) */
[data-theme="paper"] .lesson-video-eyebrow { color: #0e7c5a; }
[data-theme="paper"] .lesson-video-note { color: #6b6358; }