/***
 * podcast.css — styles for the /podcast listing page.
 * Extracted from site/templates/podcast.php heredoc (Sprint 12 Batch C).
 ***/

.podcast-wrap { padding-top: 7rem; padding-bottom: 4rem; }
.podcast-intro { color: var(--text-mid); margin: 0 0 2.6rem; }
.podcast-intro p { margin: 0; }
.ep-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.ep-head h1 { margin: 0; }
.ep-head .count { font-size: .82rem; color: var(--text-light); letter-spacing: .02em; }
.ep-list { display: flex; flex-direction: column; gap: 1.2rem; }
.ep { display: grid; grid-template-columns: 220px 1fr; gap: 1.8rem; align-items: start; padding: 1.6rem; }
.ep-cover { width: 220px; height: 220px; position: relative; overflow: hidden; border-radius: 4px; border: 1px solid var(--rule); flex: 0 0 auto; }
.ep-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-cover.is-empty { background: var(--brand-soft); }
.ep-body { padding-top: .15rem; min-width: 0; }
.ep-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .82rem; color: var(--text-light); margin-bottom: .25rem; }
.ep-eyebrow .num { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--brand); }
.ep-eyebrow .sep { color: var(--rule); }
.ep-title { font-size: 1.55rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--text); margin: 0 0 .6rem; }
.ep:hover .ep-title { color: var(--brand); }
.ep-desc { font-size: 1rem; line-height: 1.55; color: var(--text-mid); margin: 0 0 1rem; max-width: 52ch; }
.ep-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: .82rem; color: var(--text-light); }
.ep-foot .by { color: var(--text-mid); }
.ep-foot .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rule); }
.ep-foot .arrow { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; color: var(--text-light); transition: color .15s, gap .15s; }
.ep-foot .arrow svg { width: 14px; height: 14px; }
.ep:hover .ep-foot .arrow { color: var(--brand); gap: .55rem; }
.ep-pagination { display: flex; justify-content: space-between; margin-top: 2rem; }
.ep-pagination a { color: var(--brand); text-decoration: none; }
.subscribe { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.subscribe .label { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--text-light); }
.subscribe a { color: var(--text); font-size: .82rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: color .15s, border-color .15s; }
.subscribe a:hover { color: var(--brand); border-bottom-color: var(--brand); }
@media (max-width: 720px) {
  .ep { grid-template-columns: 1fr; gap: 1.2rem; }
  .ep-cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}