/* =====================================================================
 * Podcasts System V1 — Episode page — Episode-specific styles only.
 * Cross-component styles live in /styles/modules/podcasts-system.css.
 * ===================================================================== */

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

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

        .hero-art {
            text-decoration: none;
            color: inherit;
            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);
        }
    }

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

    .desc {
        line-height: 1.65;
    }

    /* ---------- ABOUT + CHAPTERS ---------- */
    .about {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 3.5rem);

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

    .about-body {
        font-size: 1.1875rem;
        line-height: 1.65;
    }

    .host {
        font-size: 0.875rem;
    }

    /* `.chapters-label` typography delegated to kicker — apply
       `fnt_t-4` alongside `chapters-label`. */
    .chapters-label {
        color: hsl(from var(--text-color) h s l / 0.6);
        margin-bottom: 0.875em;
    }

    .chapters {
        list-style: none;
        padding: 0;
        margin: 0;
        background: hsl(from var(--bdr-clr) h s l / 0.2);
    }

    .chapter {
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: 0.875em;
        padding: 0.75em 1em;
        border-bottom: 1px solid var(--bdr-clr);
        align-items: center;

        &:last-child {
            border-bottom: none;
        }

        .chapter-time {
            font-family: ui-monospace, monospace;
            font-size: 0.8125rem;
            color: var(--link-color);
            font-variant-numeric: tabular-nums;
        }

        .chapter-label {
            font-size: 0.9375rem;
        }
    }

    /* ---------- PREV / NEXT ---------- */
    .prev-next {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75em;

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

    .pn-card {
        padding: 1.25em 1.5em;

        &:hover {
            background: hsl(from var(--bdr-clr) h s l / 0.3);
        }

        &.pn-card--next {
            text-align: right;
        }

        /* `.pn-label` typography delegated to kicker — apply
           `fnt_t-4` alongside `pn-label`. */
        &.pn-card--next .pn-label {
            justify-content: flex-end;
        }
    }

    .pn-title {
        line-height: 1.3;
        letter-spacing: -0.01em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pn-spacer {
        display: none;

        @media (min-width: 769px) {
            display: block;
        }
    }

    /* ---------- MORE FROM SHOW (compact rows) ---------- */
    /* `.view-all` typography delegated to kicker — apply
       `fnt_t-4` alongside `view-all`. */
    .view-all {
        text-decoration: none;
        color: var(--link-color);
        transition: opacity 0.15s;

        &:hover {
            opacity: 0.7;
        }
    }

    .ep-list {
        &.ep-list--compact .cover--row {
            width: 56px;
        }
    }

    .ep-link {
        &.ep-link--compact {
            display: grid;
            grid-template-columns: 56px minmax(0, 1fr) auto;
            gap: 0.875em;
            padding: 0.875em 0.5em;
        }
    }

    .ep-play {
        &.ep-play--sm {
            width: 30px;
            height: 30px;

            svg {
                width: 10px;
                height: 10px;
            }
        }
    }
}

/* =====================================================================
 * ORPHANED SELECTORS — no matching class found in PodcastsSystemEpisodeV1.html.
 * Review and delete manually if no longer needed.
 *   .ep-play--sm   (HTML uses `.ep-play`, never the `--sm` modifier)
 * ===================================================================== */