/* ============================================================
   Series Spoke Styles (Step 3A)
   Episode block — media block variant
   Season block — media collection playlist variant
   ============================================================ */

/* Episode block */
.o-block-episode-cover { width: 64px; height: 64px; object-fit: cover; }
.o-block-episode-title { font-size: 1.1rem; font-weight: 600; }
.o-block-episode-badge .badge { font-size: 0.7rem; }

/* Season block */
.o-block-season-title { font-size: 1.2rem; font-weight: 600; }

.o-block-season-track-thumb { width: 40px; height: 40px; overflow: hidden; border-radius: 0.25rem; }
.o-block-season-track-thumb img { width: 100%; height: 100%; object-fit: cover; }

.o-block-season-track-title { font-weight: 500; }
.o-block-season-track-info { min-width: 0; }

.o-block-season-track {
  border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.05));
  cursor: pointer;
}
.o-block-season-track:last-child { border-bottom: none; }
.o-block-season-track:hover { background: var(--bs-light, #f8f9fa); }
/* Text-only episode info card (shown briefly during playlist advance) */
.o-block-season-text-card {
  aspect-ratio: 16 / 9;
  background-color: #1a1a2e;
  background-size: cover;
  background-position: center;
  position: relative;
}
.o-block-season-text-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.o-block-season-track.m-playlist-track--active {
  background: rgba(0,0,0,0.06);
  border-left: 3px solid var(--kon-brand-color, #cf0015);
  padding-left: calc(0.5rem - 3px);
}

/* ============================================================
   Series Lightbox (Step 3B)
   Overlay + panel for series info and episode listing
   ============================================================ */

/* Overlay */
.m-series-lightbox {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.85);
  display: none; align-items: center; justify-content: center;
}

/* Panel */
.m-series-lightbox-panel {
  background: #fff; max-width: 650px; width: 90%; max-height: 90vh;
  border-radius: 0.75rem; display: flex; flex-direction: column;
  overflow: hidden;
}

/* Header */
.m-series-lightbox-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.m-series-lightbox-close-btn {
  background: none; border: none; font-size: 1.25rem; cursor: pointer;
  color: inherit; padding: 0.25rem;
}

/* Info section */
.m-series-lightbox-info { display: flex; gap: 1rem; padding: 1rem; flex-shrink: 0; }
.m-series-lightbox-cover {
  width: 120px; height: 120px; border-radius: 0.5rem;
  object-fit: cover; flex-shrink: 0; background: #f0f0f0;
}
.m-series-lightbox-meta { flex: 1; min-width: 0; }

/* Body (scrollable episode list) */
.m-series-lightbox-body { flex: 1; overflow-y: auto; padding: 0 1rem 1rem; }

/* Season section */
.m-series-lightbox-season { margin-bottom: 0.5rem; }
.m-series-lightbox-season-header {
  font-weight: 600; padding: 0.75rem 0 0.5rem;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: #666;
}
.m-series-lightbox-season-count {
  font-weight: 400; font-size: 0.8rem; color: #999;
  text-transform: none; letter-spacing: normal;
}

/* Episode row */
.m-series-lightbox-episode {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem; border-radius: 0.375rem; cursor: pointer;
}
.m-series-lightbox-episode:hover { background: rgba(0,0,0,0.04); }

.m-series-lightbox-ep-thumb {
  width: 48px; height: 48px; border-radius: 0.25rem;
  overflow: hidden; flex-shrink: 0; background: #f0f0f0;
}
.m-series-lightbox-ep-thumb img { width: 100%; height: 100%; object-fit: cover; }

.m-series-lightbox-ep-info { flex: 1; min-width: 0; }
.m-series-lightbox-ep-title {
  display: block; font-weight: 500; font-size: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-series-lightbox-ep-type {
  display: inline-block; font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: #999; margin-top: 0.15rem;
}

.m-series-lightbox-ep-play {
  color: var(--kon-brand-color, #cf0015); font-size: 1.25rem; flex-shrink: 0;
}
.m-series-lightbox-ep-duration {
  font-size: 0.8rem; color: #999; flex-shrink: 0; min-width: 3rem; text-align: right;
}

/* In-post highlight (episodes from current post in series episode list) */
.m-series-lightbox-episode--in-post {
  border-left: 3px solid var(--kon-brand-color, #cf0015);
  padding-left: calc(0.75rem - 3px);
  background: rgba(207, 0, 21, 0.05);
}

/* Picker */
.m-series-picker-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.m-series-picker-row:hover { background: rgba(0,0,0,0.03); }
.m-series-picker-row:last-child { border-bottom: none; }
.m-series-picker-cover {
  width: 60px; height: 60px; border-radius: 0.375rem; object-fit: cover;
}

/* Mobile: fullscreen panel */
@media (max-width: 767.98px) {
  .m-series-lightbox-panel {
    width: 100%; height: 100%; max-width: 100%; max-height: 100%;
    border-radius: 0;
  }
}