/* ==========================================================================
   All Things PM, Podcast Summaries styles
   Loaded ALONGSIDE /blog/style.css (see scripts/site-chrome.mjs's `head()`,
   `extraStyleHref`). Every generic rule a podcast page needs already exists
   there (theme tokens, site topbar/mobile-tabbar/footer, .btn/.tag, .page/.frame,
   .masthead, .grid/.blog-card/.featured, .poster, .crumbs, .article-head/.cover,
   .article-grid/.post-body/.sidebar/.side-toc/.side-cta). This file only adds
   what's genuinely new: the show-page header, the audio player, and notes-body
   heading/blockquote overrides for the podcast-notes format (H1 = top-level
   section, H2 = sub-item within a section; blog's h2/h3 sizes don't apply here).
   ========================================================================== */

/* Real cover art (hot-linked from the feed), never grayscale-filtered like
   the site's hand-drawn ink illustrations. If the URL 404s, just hide the
   broken image and let the illustration slot's own background show through
   (coverInner's onerror in build-podcasts.mjs adds this class). */
.illo.illo-broken img { display: none; }

/* Show page header: cover art beside name/description/tags, mirrors the
   article cover treatment but as a two-column header instead of full-width. */
.show-head {
  display: flex; gap: 32px; padding: 40px 40px 36px; border-bottom: 2px solid var(--color-line);
  flex-wrap: wrap;
}
.show-cover { width: 220px; height: 220px; flex: none; border: 2px solid var(--color-line); }
.show-head-body { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.show-head-body h1 { font-size: 40px; line-height: 1.02; letter-spacing: -0.02em; }
.show-head-body .tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* Episode hero: square cover art beside the title/tags/lede/meta, replacing
   blog/style.css's .article-head + full-width .cover (which stacked a
   horizontal banner image above the title). Same two-column shape as
   .show-head, just with the episode's own typography. */
.episode-head {
  display: flex; gap: 28px; padding: 40px 40px 32px; border-bottom: 2px solid var(--color-line);
  flex-wrap: wrap;
}
.episode-cover { width: 200px; height: 200px; flex: none; border: 2px solid var(--color-line); }
.episode-head-body { flex: 1; min-width: 260px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.episode-head-body .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.episode-head-body h1 { font-size: 34px; line-height: 1.06; letter-spacing: -0.015em; }
.episode-head-body .lede { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--color-neutral-700); max-width: 620px; }
.episode-head-body .meta { margin-top: 14px; font-size: 13px; }

/* Audio player: streams directly from the feed's own enclosure URL (see
   audioPlayer() in build-podcasts.mjs and player.js for the behavior).
   Bordered "Modernist" shell matching the rest of the site's controls. */
.player {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 24px 40px 0; padding: 16px; border: 2px solid var(--color-line);
}
.player-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 2px solid var(--color-line); color: var(--color-text);
  cursor: pointer; padding: 0;
}
.player-skip { width: 34px; height: 34px; }
.player-play {
  width: 48px; height: 48px; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg);
}
.player-play .ic-pause { display: none; }
.player-play.playing .ic-play { display: none; }
.player-play.playing .ic-pause { display: block; }
.player-time { font-size: 12px; font-weight: 600; color: var(--color-neutral-600); width: 38px; text-align: center; }
.player-track { flex: 1; min-width: 80px; height: 6px; background: var(--color-neutral-300); cursor: pointer; }
.player-track-fill { height: 100%; width: 0%; background: var(--color-accent); pointer-events: none; }
.player-rate {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  background: none; border: 1px solid var(--color-accent); color: var(--color-accent);
  padding: 5px 9px; cursor: pointer;
}

/* View-episode link row, between the player and the article body. */
.player-source-row { padding: 16px 40px 0; }

/* Episode notes heading hierarchy: H1 marks a top-level section (Context,
   Key Insights, ...), H2 a named sub-item within one (an insight title, a
   framework name, ...). Overrides blog/style.css's .post-body h2/h3 sizes,
   which were tuned for a long-form article's own two-level structure, not
   this format's denser one. The sidebar TOC only lists H1s (see
   extractToc(html, max, [1]) in build-podcasts.mjs) so it stays a clean
   section list, not cluttered with every sub-item.

   Spacing is deliberately asymmetric: generous space ABOVE a heading (to
   separate it from the previous group) and tight space BELOW it (to bind
   it to its own paragraph/list/table). blog/style.css's generic
   `.post-body > * + * { margin-top: 22px }` gives every element the same
   gap regardless of what it follows, which is what made every insight
   blend into the next with no visible grouping, this makes a heading read
   as one visual unit with the content under it instead. */
.post-body h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.015em; margin-top: 40px; }
.post-body h2 { font-size: 21px; line-height: 1.25; letter-spacing: -0.005em; margin-top: 32px; }
.post-body h3 { font-size: 17px; line-height: 1.3; margin-top: 22px; }
.post-body > h1:first-child, .post-body > h2:first-child { margin-top: 0; }
.post-body h1 + *, .post-body h2 + *, .post-body h3 + * { margin-top: 10px; }

/* Pull-quotes (The Big Idea / Bottom Line): sized between the body text
   (17px, from blog/style.css) and an H1 (32px, above) so it reads as
   emphasis on the surrounding text, not its own oversized headline the
   way blog/style.css's original article pull-quote (28px) was tuned for. */
.post-body blockquote p { font-size: 20px; line-height: 1.35; }

/* Tables inside episode notes (Resources Mentioned, Tools & Products, etc.).
   blog/style.css's .post-body covers the surrounding typography; this just
   styles the table itself. */
.post-body .table-wrap { overflow-x: auto; margin: 22px 0; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.post-body th, .post-body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.post-body th { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-neutral-600); border-bottom: 2px solid var(--color-line); }
.post-body tr:last-child td { border-bottom: 0; }

@media (max-width: 900px) {
  .show-head { padding: 28px 20px 24px; gap: 20px; }
  .show-cover { width: 140px; height: 140px; }
  .show-head-body h1 { font-size: 30px; }
  .episode-head { padding: 28px 20px 24px; gap: 20px; }
  .episode-cover { width: 120px; height: 120px; }
  .episode-head-body h1 { font-size: 26px; }
  .player { margin: 20px 20px 0; gap: 10px; }
  .player-source-row { padding: 14px 20px 0; }
}