/* RADIO JOX podcasts section (/podcasts). Loaded only by the podcasts templates, after app.css.
   Reads the shared spacing tokens from app.css (sitewide spacing pass 2026-10-30): --maxw, --section-gap, --block-gap,
   --heading-gap, --card-gap, --text-gap. Width = --maxw: min(90vw,1600px) desktop / 95vw phones. */
.pod { width: var(--maxw, min(90vw, 1600px)); max-width: none; margin-inline: auto; padding-block: var(--block-gap, 2rem) var(--section-gap, 4.5rem); }
.pod-head { margin-block-end: var(--section-gap, 3rem); }
.pod-head h1 { margin-block: var(--space-4, 1rem) var(--space-3, .75rem); }
.pod-intro { max-width: 70ch; margin-block-end: var(--heading-gap, 1.5rem); line-height: 1.6; }
.pod-genres ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3, .75rem); }
.pod-genres a { display: inline-block; padding: var(--space-2, .5rem) var(--space-4, 1rem); border: 1px solid currentColor; border-radius: 999px; text-decoration: none; opacity: .9; }
.pod-genres a:hover, .pod-genres a:focus-visible { opacity: 1; }
.pod-genres--foot { margin-block-start: var(--section-gap, 4.5rem); }
.pod-genres--foot h2 { margin-block-end: var(--heading-gap, 1rem); }
.pod-sec { margin-block: 0 var(--section-gap, 3rem); }
.pod-sec h2 { margin-block-end: var(--heading-gap, 1.5rem); }
.pod-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4, 1rem); flex-wrap: wrap; }
.pod-more { white-space: nowrap; }
.pod-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--card-gap, 1.5rem); }
@media (max-width: 700px) { .pod-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5, 1.5rem) var(--space-4, 1rem); } }
.pod-card__link { display: flex; flex-direction: column; gap: var(--space-2, .5rem); text-decoration: none; color: inherit; }
.pod-card__art { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: rgba(127,127,127,.15); }
.pod-card__title { font-weight: 600; line-height: 1.3; }
.pod-card__author { font-size: .9em; opacity: .75; line-height: 1.3; }
.pod-card__link:hover .pod-card__title, .pod-card__link:focus-visible .pod-card__title { text-decoration: underline; }
.pod-e { display: inline-block; min-width: 1.35em; padding: 0 .3em; border-radius: 3px; font-size: .72em; font-weight: 700; line-height: 1.35; text-align: center;
  text-decoration: none; vertical-align: .12em; }
.pod-e { background: #555; color: #fff; }
.pod-show { display: grid; grid-template-columns: minmax(160px, 300px) 1fr; gap: var(--block-gap, 3rem); align-items: start; margin-block-end: var(--section-gap, 3rem); }
@media (max-width: 700px) { .pod-show { grid-template-columns: 1fr; gap: var(--space-5, 1.5rem); } .pod-show__art { max-width: 220px; } }
.pod-show__art { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.pod-show__main h1 { margin-block: var(--space-2, .5rem) var(--space-3, .75rem); }
.pod-kicker { text-transform: uppercase; letter-spacing: .06em; font-size: .85em; opacity: .8; margin: 0; }
.pod-show__author { margin-block: 0 var(--space-4, 1rem); opacity: .85; }
.pod-show__desc { max-width: 75ch; line-height: 1.65; margin-block-end: var(--heading-gap, 1.5rem); }
.pod-show__desc p + p { margin-block-start: var(--text-gap, 1.1em); }
.pod-show__links { display: flex; gap: var(--space-5, 1.5rem); flex-wrap: wrap; }
.pod-eps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--card-gap, 1.5rem); }
.pod-ep { display: grid; grid-template-columns: 1fr minmax(260px, 420px); gap: var(--space-4, 1rem) var(--space-6, 2rem); align-items: center;
  padding-block-end: var(--space-5, 1.5rem); border-bottom: 1px solid rgba(127,127,127,.25); }
@media (max-width: 800px) { .pod-ep { grid-template-columns: 1fr; } }
.pod-ep__meta { display: flex; flex-direction: column; gap: var(--space-1, .25rem); }
.pod-ep__title { font-weight: 600; line-height: 1.35; }
.pod-ep__audio { width: 100%; }
.pod-note { margin-block-start: var(--section-gap, 4.5rem); max-width: 75ch; font-size: .92em; }