/* Podcast — layout only. Type lives in css/common.css. */

.podcast-list {
    display: grid;
    gap: var(--space-xl);
}

.podcast-episode {
    background: var(--color-bg-white);
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--space-sm);
}

.podcast-episode-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0 0 var(--space-md);
}

.podcast-player {
    display: block;
    width: 100%;
    margin: 0 0 var(--space-md);
}

/* #319 color pass: white sections become dark bands (charcoal gray here, v4), same treatment as
   .band in css/common.css. Cards inside keep their own background and dark
   text, so every text rule below skips anything inside a card. */

.podcast {
    background: var(--color-slate);
    color: var(--color-on-primary);
}

:is(.podcast) :is(.podcast-episode) {
    color: var(--color-text);
}

:is(.podcast) :is(h1, h2, h3, h4, h5, h6, .kicker):not(:is(.podcast-episode) *) {
    color: var(--color-on-primary);
}

:is(.podcast) :is(p, li, .text-muted):not(:is(.podcast-episode), :is(.podcast-episode) *) {
    color: var(--color-on-primary-muted);
}

:is(.podcast) p a:not(.btn, .h-btn, :is(.podcast-episode) *) {
    color: inherit;
    text-decoration: underline;
}

:is(.podcast) p a:not(.btn, .h-btn, :is(.podcast-episode) *):hover {
    color: var(--color-on-primary);
}

:is(.podcast) .btn-primary:not(:is(.podcast-episode) *) {
    background: var(--color-bg-white);
    color: var(--color-primary);
}

:is(.podcast) .btn-primary:not(:is(.podcast-episode) *):hover {
    background: var(--color-bg-luxury);
    color: var(--color-primary);
}