/* ------------------------------------------------------------------
   PODCAST: the latest-episode card (Home and Podcast page), the player, reactions and the archive.
   Styles hang off the component classes (.pcast, .pcp, .pcr, .pca) so they work on any page that includes them.
------------------------------------------------------------------- */
.pcast, .pca { --pc-up: var(--accent); }
.pcast { display: block; padding: 14px; min-width: 0; }
.pcast-label { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--gold); }
.pcast-head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 10px; }
.pcast-art { display: block; width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: var(--card-fill); }
.pcast-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.pcast-meta { margin: 4px 0 0; font-size: 13px; color: var(--ink-faint); }
.pcast-sum { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.pcast-next { margin: 12px 0 0; font-size: 13px; color: var(--ink-faint); }
.pcast-foot { margin: 12px 0 0; }
.pcast-all { display: inline-block; padding: 7px 14px; border: 1px solid var(--accent-2); border-radius: 10px; background: var(--royal); color: var(--ink); font-size: 14px; text-decoration: none; }
.pcast-all:hover { background: var(--accent-2); color: var(--sky-top); }

/* player */
.pcp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "play seek speed" "play times times"; gap: 4px 10px; align-items: center; }
.pcp audio { display: none; }
.pcp-play { grid-area: play; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pcp-play:focus-visible, .pcp-skip:focus-visible, .pcp-speed:focus-visible, .pcr-b:focus-visible, .pca-btn:focus-visible, .pcast-all:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pcp-play .i-pause { display: none; }
.pcp.is-playing .pcp-play .i-play { display: none; }
.pcp.is-playing .pcp-play .i-pause { display: inline; }
.pcp-seek { grid-area: seek; width: 100%; margin: 0; accent-color: var(--accent-2); height: 24px; }
.pcp-cur, .pcp-dur { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.pcp-cur { grid-area: times; justify-self: start; }
.pcp-dur { grid-area: times; justify-self: end; }
.pcp-skip, .pcp-speed { border: 1px solid var(--card-border); border-radius: 8px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 12px; padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.pcp-skip { display: none; }
.pcp-speed { grid-area: speed; }

/* reactions */
.pcr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pcr-b { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 11px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--card-fill); color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer; }
.pcr-b:nth-of-type(1) .pcr-i { color: var(--accent); }
.pcr-b:nth-of-type(2) .pcr-i { color: var(--gold); }
.pcr-b:nth-of-type(3) .pcr-i { color: var(--accent-2); }
.pcr-b:nth-of-type(4) .pcr-i { color: var(--gold); }
.pcr-b.on { border-color: var(--accent); background: rgba(242,44,247,.22); color: var(--ink); }
.pcr-b:disabled { opacity: .6; cursor: default; }
.pcr-ls { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-faint); }
.pcr-ls[hidden] { display: none; }

/* archive */
.pca > h2 { margin: 0 4px; font-size: 22px; font-weight: 600; }
.pca-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 4px; }
.pca-tab { padding: 6px 12px; border: 1px solid var(--card-border); border-radius: 10px; color: var(--ink-soft); font-size: 14px; text-decoration: none; }
.pca-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pca-list { padding: 4px 14px; }
.pca-row { padding: 10px 0; border-top: 1px solid var(--hair); }
.pca-row:first-child { border-top: 0; }
.pca-main { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pca-btn { width: 34px; height: 34px; border: 1.5px solid var(--accent-2); border-radius: 50%; background: transparent; color: var(--accent-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pca-btn.off { border-color: var(--hair); color: var(--ink-faint); cursor: default; }
.pca-row.open .pca-btn { background: var(--accent-2); color: var(--sky-top); }
.pca-num { font-size: 13px; color: var(--ink-faint); min-width: 34px; }
.pca-text { min-width: 0; }
.pca-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pca-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.pca-mini { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink-faint); }
.pca-mini span { display: inline-flex; align-items: center; gap: 4px; }
.pca-sum { margin: 6px 0 0 44px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.pca-panel { margin: 12px 0 4px 44px; }
.pca-panel[hidden] { display: none; }
.pc-h1 { margin: 6px 4px 12px; font-size: 22px; font-weight: 600; }

@media (max-width: 479px) {
  .pca-main { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .pca-num { display: none; }
  .pca-sum, .pca-panel { margin-left: 0; }
}
@media (min-width: 480px) {
  .pcp-skip { display: inline-block; }
  .pcp { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "play skip seek speed" "play skip times times"; }
}
@media (min-width: 1000px) {
  .pcast { padding: 20px 22px; }
  .pcast-head { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .pcast-art { width: 96px; height: 96px; }
  .pcast-title { font-size: 21px; }
  .pcast-sum { font-size: 15px; }
  .p-podcast .pcast-head { grid-template-columns: 140px minmax(0, 1fr); }
  .p-podcast .pcast-art { width: 140px; height: 140px; }
  .p-podcast .pcast-title { font-size: 26px; }
  .pca > h2, .pc-h1 { font-size: 27px; }
}