/* Podcast promo: show panel and newest episode panel, used on black sections. */
.podcast-promo { color: var(--c-surface, #fff); }

.podcast-promo__title { text-align: center; margin-bottom: 40px; }

.podcast-promo__panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 0;
}

.podcast-promo__panel + .podcast-promo__panel {
    border-top: 1px solid rgba(var(--c-surface-rgb, 255, 255, 255), .15);
}

.podcast-promo__media { display: block; flex: 0 0 auto; }

.podcast-promo__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.podcast-promo__body { min-width: 0; }

.podcast-promo__name,
.podcast-promo__heading {
    font-family: var(--lh-font-display);
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1;
    margin: 0 0 16px;
    color: var(--c-surface, #fff);
}

.podcast-promo__text {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 24px;
    color: var(--c-surface, #fff);
    opacity: .9;
}

.podcast-promo__episode { margin: 0 0 24px; font-weight: 600; }

.podcast-promo__episode a { color: var(--c-surface, #fff); text-decoration: underline; text-underline-offset: 3px; }

.podcast-promo__episode a:hover { color: var(--c-primary, #b72025); }

/* Platform buttons, shared with the single episode page. */
.podcast-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.podcast-platform {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background-color .2s, color .2s, border-color .2s;
}

.podcast-platform svg { flex: 0 0 auto; }

.podcast-platform:hover,
.podcast-platform:focus-visible {
    background: var(--c-primary, #b72025);
    border-color: var(--c-primary, #b72025);
    color: var(--c-on-primary, #fff);
}

@media (min-width: 768px) {
    .podcast-promo__panel {
        flex-direction: row;
        align-items: center;
        gap: 48px;
        padding: 48px 0;
    }

    .podcast-promo__media { flex: 0 0 38%; max-width: 480px; }

    .podcast-promo__body { flex: 1 1 auto; }
}