/*
  Podcast Platform — Phase 1-2 additions only.
  Reuses existing premium primitives (.glass, .acard, .grid, .page-hero,
  .status-pill, .btn) wherever possible; only genuinely new UI shapes
  (audio embed frame, subject chips, chapters, transcript) live here.
*/

/* Responsive 16:9 embed frame for Spotify/YouTube iframes */
.podcast-player{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:var(--navy-800);
  border:1px solid var(--line);
}
.podcast-player iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Knowledge Subject chip — deliberately distinct from .status-pill, which
   is reserved for "coming soon/demo" state flags, not real classification */
.subject-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--glass);
  color:var(--muted);
  font-size:13px;
  font-weight:500;
}
.subject-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Chapters */
.chapters-list{list-style:none;padding:0;margin:0}
.chapters-list li{
  display:flex;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
  color:var(--muted);
}
.chapters-list li:last-child{border-bottom:none}
.chapters-list .chap-time{
  font-family:var(--sans);
  font-weight:600;
  color:var(--gold-soft);
  min-width:56px;
}

/* Transcript — collapsible, no JS required */
.transcript-box summary{
  cursor:pointer;
  color:var(--gold-soft);
  font-weight:600;
  padding:14px 0;
}
.transcript-box .transcript-body{
  color:var(--muted);
  line-height:1.8;
  white-space:pre-line;
  padding-top:8px;
}

/* Simple client-side episode filter (only rendered when >1 episode exists) */
.podcast-filter{
  width:100%;
  max-width:420px;
  margin:0 auto 32px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--glass);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
}
.podcast-filter::placeholder{color:var(--muted-2)}

@media(max-width:760px){
  .podcast-player{border-radius:8px}
  .chapters-list li{font-size:14px}
}