/* =====================================================================
 * Podcasts System V1 — Series page
 * Inherits shared component styles from /styles/modules/podcasts-system.css
 * (scoped under .pcst-sys). The classes below are Series-page specific.
 * ===================================================================== */

.pcst-srs.v1 {
    /* ---------- HERO ---------- */
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 3rem);
        align-items: start;

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }

        .hero-cover {
            box-shadow:
                0 20px 50px -15px hsl(from var(--text-color) h s l / 0.35),
                0 0 0 1px hsl(from var(--text-color) h s l / 0.05);

            @media (max-width: 768px) {
                max-width: 220px;
                margin-inline: auto;
            }
        }
    }

    .title {
        line-height: 1.05;
        letter-spacing: -0.02em;
    }

    .desc {
        line-height: 1.6;
        max-width: 58ch;
    }

    .tags {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* ---------- LATEST CARD ---------- */
    .latest {
        .latest-card {
            border-left-width: 4px;
            border-left-style: solid;
            padding: var(--sp-qk);
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 24px hsl(from var(--text-color) h s l / 0.08);
            }
        }
    }

    /* `.play-cta` typography delegated to kicker — apply
       `fnt_t-4` alongside `play-cta`. */

    /* Medium cover size for latest card (Series override) */
    .cover--md {
        width: 120px;

        @media (max-width: 768px) {
            width: 80px;
        }
    }
}