/* 播客详情页样式 */
:root {
  --primary-color: #5c6ac4;
  --secondary-color: #8a94e2;
  --accent-color: #ff6b6b;
  --text-color: #333333;
  --light-text: #777777;
  --border-color: #e0e0e0;
  --background-color: #f8f8f8;
  --card-background: #ffffff;
}

.podcast-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* 播客头部信息 */
.podcast-header {
  margin-bottom: 30px;
}

.podcast-theme {
  display: inline-block;
  font-size: 14px;
  color: var(--primary-color);
  margin-bottom: 10px;
  font-weight: 500;
  background-color: rgba(92, 106, 196, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  transition: all 0.2s ease;
}

.podcast-theme a {
  text-decoration: none;
  color: inherit;
}

.podcast-theme:hover {
  background-color: rgba(92, 106, 196, 0.2);
}

.podcast-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 15px;
  line-height: 1.3;
}

.podcast-meta {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: var(--light-text);
}

.podcast-date {
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.podcast-date:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("../images/calendar.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 6px;
}

.podcast-duration {
  display: flex;
  align-items: center;
}

.podcast-duration:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("../images/time.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 6px;
}

.podcast-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.tag {
  padding: 6px 12px;
  border-radius: 20px;
  background-color: #f0f0f0;
  font-size: 13px;
  color: var(--text-color);
  font-weight: 500;
  transition: all 0.2s ease;
}

.tag:hover {
  background-color: var(--secondary-color);
  color: white;
}

/* 播客封面 */
.podcast-media {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.podcast-product-card {
  margin-bottom: 0px;
  border-radius: 16px;

  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.podcast-product-card a {
    display: flex;
    gap: 14px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    outline: none;
}

.podcast-product-card a:focus,
.podcast-product-card a:focus-visible {
    outline: none;
}

.podcast-product-image {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.podcast-product-image img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.podcast-product-info {
  flex: 1;
  min-width: 0;
}

.podcast-product-title {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.4;

  overflow: hidden;
  text-overflow: ellipsis;
}

.podcast-product-desc {
  margin-top: 6px;
  font-size: 13px;
  color: #64748b;

  overflow: hidden;
  text-overflow: ellipsis;
}

.podcast-product-cta {
  margin-top: 8px;
  font-size: 12px;
  color: #10b981;
  font-weight: 600;
}

.podcast-cover {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.podcast-cover:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.podcast-cover img {
  width: 100%;
  display: block;
}

/* 粘性播放器 */
.sticky-player {
  position: fixed;
  bottom: calc(var(--footer-height) + 20px);
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 800px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 15px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  transform: translateX(-50%) translateY(20px);
}

.sticky-player.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sticky-player-inner {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (min-width: 768px) {
  .sticky-player-inner {
    flex-direction: row;
    align-items: center;
  }

  .player-info {
    width: 30%;
  }

  .player-container {
    width: 70%;
  }
}

.player-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.player-cover {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.player-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-details {
  flex: 1;
  min-width: 0;
}

.player-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.player-author {
  font-size: 13px;
  color: var(--light-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-container {
  flex: 1;
  min-width: 0;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .podcast-container {
    padding: 0px;
  }

  .podcast-title {
    font-size: 22px;
  }

  .sticky-player {
    width: 100%;
    padding: 10px;
  }

  .player-cover {
    width: 50px;
    height: 50px;
  }
}

/* =========================================================
   WeChat-friendly Markdown CSS (for .markdown-body)
   Style goal: clean, calm, professional, easy to read on mobile
   Primary accent: WeChat Green #07C160
   ========================================================= */

/* ----------- Base ----------- */
.markdown-body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #1f1f1f;
  letter-spacing: 0.02em;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Better spacing in WeChat narrow UI */
.markdown-body > *:first-child {
  margin-top: 0 !important;
}
.markdown-body > *:last-child {
  margin-bottom: 0 !important;
}

/* ----------- Headings ----------- */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  font-weight: 600;
  line-height: 1.35;
  margin: 1.4em 0 0.6em;
  scroll-margin-top: 72px; /* helpful in embedded viewers */
}

.markdown-body h1 {
  font-size: 1.9em;
  font-weight: 650;
  color: #1f1f1f;
  border-left: 4px solid #07c160;
  padding-left: 12px;
  margin-top: 1.2em;
}

.markdown-body h2 {
  font-size: 1.6em;
  color: #2ba471;
  margin-top: 1.6em;
}

.markdown-body h3 {
  font-size: 1.45em;
  font-weight: 600;
  color: #07c160;
  margin-top: 1.4em;
}

.markdown-body h4 {
  font-size: 1.15em;
  font-weight: 600;
  color: #5c5c5c;
  margin-top: 1.2em;
}

/* Optional: subtle divider under h2/h3 (enable if you like)
.markdown-body h2 { padding-bottom: .25em; border-bottom: 1px solid #EDEDED; }
.markdown-body h3 { padding-bottom: .2em; border-bottom: 1px dashed #EDEDED; }
*/

/* ----------- Text / Paragraphs ----------- */
.markdown-body p {
  margin: 0.85em 0;
}

.markdown-body strong {
  font-weight: 650;
  color: #2ba471; /* WeChat-friendly emphasis instead of pure black */
}

.markdown-body em {
  font-style: italic;
  color: #3a3a3a;
}

.markdown-body small {
  font-size: 0.92em;
  color: #8a8a8a;
}

.markdown-body a {
  color: #07c160;
  text-decoration: none;
  border-bottom: 1px solid rgba(7, 193, 96, 0.35);
}
.markdown-body a:active {
  opacity: 0.75;
}

/* ----------- Horizontal rule ----------- */
.markdown-body hr {
  border: none;
  height: 1px;
  background: #ededed;
  margin: 1.6em 0;
}

/* ----------- Blockquote (great for conclusions/notes) ----------- */
.markdown-body blockquote {
  margin: 1em 0;
  padding: 0.85em 1em;
  background: #f7f9f8;
  border-left: 4px solid #07c160;
  color: #4a4a4a;
  border-radius: 10px;
}
.markdown-body blockquote p {
  margin: 0.4em 0;
}

/* ----------- Lists ----------- */
.markdown-body ul,
.markdown-body ol {
  margin: 0.8em 0;
  padding-left: 1.25em;
}

.markdown-body li {
  margin: 1.65em 0;
  line-height: 1.65;
}

.markdown-body ul li::marker {
  color: rgba(7, 193, 96, 0.9);
}

.markdown-body ol li::marker {
  color: rgba(43, 164, 113, 0.95);
  font-weight: 600;
}

/* Nested lists spacing */
.markdown-body li > ul,
.markdown-body li > ol {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

/* ----------- Code ----------- */
.markdown-body code {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.92em;
  background: #f3f5f7;
  padding: 0.15em 0.35em;
  border-radius: 6px;
  color: #2b2b2b;
}

.markdown-body pre {
  background: #0f172a; /* calm dark */
  color: #e5e7eb;
  padding: 12px 14px;
  border-radius: 12px;
  overflow: auto;
  margin: 1em 0;
  -webkit-overflow-scrolling: touch;
}
.markdown-body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 0.92em;
  line-height: 1.65;
}

/* ----------- Tables ----------- */
.markdown-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1em 0;
  font-size: 0.95em;
  overflow: hidden;
  border: 1px solid #ededed;
  border-radius: 12px;
}

.markdown-body th,
.markdown-body td {
  padding: 10px 12px;
  border-bottom: 1px solid #ededed;
  vertical-align: top;
}

.markdown-body th {
  text-align: left;
  background: #f7f9f8;
  color: #2b2b2b;
  font-weight: 650;
}

.markdown-body tr:last-child td {
  border-bottom: none;
}

/* Zebra stripes for readability */
.markdown-body tbody tr:nth-child(2n) td {
  background: #fbfcfc;
}

/* ----------- Images ----------- */
.markdown-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.9em auto;
  border-radius: 12px;
}

/* Captions (if you write: <p class="caption"> ) */
.markdown-body .caption {
  margin-top: -0.4em;
  font-size: 0.92em;
  color: #8a8a8a;
  text-align: center;
}

/* ----------- “Card” blocks (use: <div class="card"> ... ) ----------- */
.markdown-body .card {
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 1em 0;
}
.markdown-body .card .title {
  font-weight: 650;
  color: #1f1f1f;
  margin-bottom: 0.35em;
}
.markdown-body .card .meta {
  font-size: 0.92em;
  color: #8a8a8a;
}

/* ----------- Callouts (use: <div class="callout ok|warn|info"> ) ----------- */
.markdown-body .callout {
  border-radius: 14px;
  padding: 12px 14px;
  margin: 1em 0;
  border: 1px solid #ededed;
  background: #f7f9f8;
}

.markdown-body .callout.ok {
  border-left: 4px solid #07c160;
}

.markdown-body .callout.info {
  border-left: 4px solid #2ba471;
}

.markdown-body .callout.warn {
  border-left: 4px solid #f59e0b; /* warm amber */
  background: #fffbeb;
  border-color: #fde68a;
}

/* ----------- Subtle highlight line (use: <span class="hl"> ) ----------- */
.markdown-body .hl {
  background: linear-gradient(transparent 60%, rgba(7, 193, 96, 0.18) 0);
  padding: 0 2px;
  border-radius: 4px;
}

/* ----------- Footnotes / muted sections (use: <div class="muted"> ) ----------- */
.markdown-body .muted {
  color: #8a8a8a;
  font-size: 0.95em;
}

/* ----------- Selection (nice touch) ----------- */
.markdown-body ::selection {
  background: rgba(7, 193, 96, 0.18);
}

/* ----------- Mobile fine-tuning ----------- */
@media (max-width: 420px) {
  .markdown-body {
    font-size: 16px;
    line-height: 1.78;
  }
  .markdown-body h1 {
    font-size: 1.75em;
  }
  .markdown-body h2 {
    font-size: 1.5em;
  }
  .markdown-body h3 {
    font-size: 1.35em;
  }
  .markdown-body h4 {
    font-size: 1.12em;
  }
  .markdown-body table {
    font-size: 0.94em;
  }
}

/* =========================================================
   WeChat-style article section (podcast content area)
   ========================================================= */
:root {
  --wechat-green: #07c160;
  --wechat-green-ink: #0b5c3c;
  --wechat-jade: #2ba471;
  --wechat-bg: #f4fbf7;
  --wechat-ink: #1f2d2b;
  --wechat-muted: #6b7c75;
  --wechat-border: #e3efe8;
  --wechat-card: #ffffff;
  --wechat-shadow: 0 14px 40px rgba(7, 193, 96, 0.08);
}

.content-section {
  background: linear-gradient(180deg, #f7fcf9 0%, #ffffff 45%, #f5faf7 100%);
}

.content-section .section-card {
  position: relative;
  background: var(--wechat-card);

  border-radius: 16px;
  box-shadow: var(--wechat-shadow);
  padding: 26px 24px;
}

.content-section .section-card::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 4px;
  height: 56px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #07c160 0%, #2ba471 100%);
}

.content-section .summary-card::before {
  background: linear-gradient(180deg, #07c160 0%, #56c48b 100%);
}

.content-section .viewpoint-card::before {
  background: linear-gradient(180deg, #2ba471 0%, #6cc6a1 100%);
}

.content-section .content-card::before {
  background: linear-gradient(180deg, #0f8c5a 0%, #2ba471 100%);
}

.content-section .section-title {
  font-family:
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Helvetica, Arial,
    sans-serif;
  font-size: 1.55rem;
  font-weight: 650;
  color: var(--wechat-green-ink);
  margin: 0 0 18px 0;
  padding: 8px 12px;
  border: 1px solid rgba(7, 193, 96, 0.14);
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(7, 193, 96, 0.12),
    rgba(7, 193, 96, 0.02)
  );
  letter-spacing: 0.02em;
}

.content-section .summary-content-markdown-content,
.content-section .viewpoint-content-markdown-content,
.content-section .markdown-content {
  font-family:
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Helvetica, Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--wechat-ink);
  letter-spacing: 0.01em;
  margin-top: -20px;
}

.content-section .summary-content-markdown-content p,
.content-section .viewpoint-content-markdown-content p,
.content-section .markdown-content p {
  margin: 0 0 1em 0;
  text-align: justify;
}

.content-section .summary-content-markdown-content h2,
.content-section .summary-content-markdown-content h3,
.content-section .summary-content-markdown-content h4,
.content-section .viewpoint-content-markdown-content h2,
.content-section .viewpoint-content-markdown-content h3,
.content-section .viewpoint-content-markdown-content h4,
.content-section .markdown-content h2,
.content-section .markdown-content h3,
.content-section .markdown-content h4 {
  font-weight: 650;
  color: var(--wechat-green-ink);
  margin: 1.2em 0 0.6em;
  letter-spacing: 0.01em;
  line-height: 1.35em;
}
.content-section .markdown-content h1,
.content-section .viewpoint-content-markdown-content h1,
.content-section .summary-content-markdown-content h1 {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.25;
  color: #111827;

  /* 超大间距，彻底拉开层级 */

  padding: 1rem 0 1rem;

  /* 居中+底部双线条装饰，层次感更强 */
  text-align: center;
  width: 100%;
  max-width: 800px;
  border-bottom: 2px solid #999;


  /* 字间距+行间距优化，阅读无压力 */
  letter-spacing: 0.05em;
  word-spacing: 0.08em;

  /* 轻微文字阴影，立体突出，不刺眼 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);

  /* 禁止用户选中主标题（可选，提升体验） */
  user-select: none;

.content-section .summary-content-markdown-content h2,
.content-section .viewpoint-content-markdown-content h2,
.content-section .markdown-content h2 {
  color: var(--wechat-jade);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(7, 193, 96, 0.18);
}

.content-section .summary-content-markdown-content a,
.content-section .viewpoint-content-markdown-content a,
.content-section .markdown-content a {
  color: var(--wechat-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(7, 193, 96, 0.35);
}

.content-section .summary-content-markdown-content blockquote,
.content-section .viewpoint-content-markdown-content blockquote,
.content-section .markdown-content blockquote {
  margin: 1em 0;
  padding: 12px 16px;
  background: var(--wechat-bg);
  border-left: 4px solid var(--wechat-green);
  color: var(--wechat-muted);
  border-radius: 12px;
}

.content-section .summary-content-markdown-content strong,
.content-section .viewpoint-content-markdown-content strong,
.content-section .markdown-content strong {
  color: var(--wechat-jade);
  font-weight: 650;
}

.content-section .summary-content-markdown-content code,
.content-section .viewpoint-content-markdown-content code,
.content-section .markdown-content code {
  background: #f2f7f4;
  color: #24433a;
  border-radius: 6px;
  padding: 0.15em 0.4em;
}

.content-section .summary-content-markdown-content pre,
.content-section .viewpoint-content-markdown-content pre,
.content-section .markdown-content pre {
  background: #0d1b1a;
  color: #e6f4ef;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 12px 26px rgba(13, 27, 26, 0.18);
}

.content-section .disclaimer-text {
  color: var(--wechat-muted);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}