/* =========================================================
   JaVo — Single Episode
   Minimal / Editorial / Responsive
========================================================= */

.javo-single-episode {
    box-sizing: border-box;
    width: 100%;
    padding: 28px 16px 40px;

    color: #f8fbff;
}

.javo-single-episode .javo-single-episode__article {
    display: block;

    width: 100%;
    max-width: 820px;

    margin: 0 auto;
    padding: 0;

    color: #f8fbff;

    overflow-wrap: anywhere;
    transition: none;
}


/* =========================================================
   Episode Header
========================================================= */

.javo-single-episode__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        200px;

    grid-template-areas:
        "channel artwork"
        "title artwork"
        "meta artwork"
        "play artwork"
        "engagement artwork";

    align-items: start;

    gap: 12px 26px;
}


/* =========================================================
   Channel
========================================================= */

.javo-single-episode__channel {
    grid-area: channel;

    margin: 0;

    color: #B3E7FF;

    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.6;
}

.javo-single-episode__channel a {
    color: #B3E7FF;
    text-decoration: none;

    transition:
        color 160ms ease,
        opacity 160ms ease;
}

@media (hover: hover) {
    .javo-single-episode__channel a:hover {
        color: #ffffff;
    }
}


/* =========================================================
   Episode Title
========================================================= */

.javo-single-episode__title {
    grid-area: title;

    margin: 0;

    color: #ffffff;

    font-size: clamp(1.5rem, 2.3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.6;

    text-wrap: balance;
}


/* =========================================================
   Artwork
========================================================= */

.javo-single-episode__artwork {
    grid-area: artwork;

    display: block;

    width: 200px;
    height: auto;

    aspect-ratio: 1;

    object-fit: cover;

    border-radius: 14px;

    box-shadow:
        0 8px 28px rgba(15, 23, 42, 0.12);
}


/* =========================================================
   Meta
========================================================= */

.javo-single-episode__meta {
    grid-area: meta;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 7px 10px;

    margin: 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.7;
}

.javo-single-episode__meta time,
.javo-single-episode__meta span {
    color: inherit;
}


/* =========================================================
   Play
========================================================= */

.javo-single-episode__play {
    grid-area: play;

    display: flex;
    align-items: center;

    margin-top: 2px;
}


/* =========================================================
   Engagement
========================================================= */

.javo-single-episode__engagement {
    grid-area: engagement;

    display: flex;
    align-items: center;

    min-width: 0;

    margin-top: 2px;
}

.javo-single-episode__engagement .javo-episode-engagement {
    color: #B3E7FF;
}

.javo-single-episode__engagement
:is(
    .javo-episode-play-count,
    .javo-episode-like-trigger,
    .javo-episode-save-trigger
) {
    color: #B3E7FF;
}

.javo-single-episode__engagement
.javo-episode-save-trigger.is-saved,
.javo-single-episode__engagement
.javo-episode-like-trigger.is-liked {
    color: #ffffff;
}


/* =========================================================
   Main Sections
========================================================= */

.javo-single-episode__description,
.javo-single-episode__related {
    margin-top: 34px;
}


/* =========================================================
   Section Headings
========================================================= */

.javo-single-episode h2 {
    margin: 0 0 14px;

    color: #B3E7FF;

    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.7;
}


/* =========================================================
   Episode Description
========================================================= */

.javo-single-episode__description {
    color: rgba(255, 255, 255, 0.88);

    font-size: 0.98rem;
    font-weight: 400;
    line-height: 2;
}

.javo-single-episode__description p {
    margin: 0 0 17px;

    color: inherit;
}

.javo-single-episode__description p:last-child {
    margin-bottom: 0;
}

.javo-single-episode__description :is(ul, ol) {
    margin: 10px 0 18px;

    padding-inline-start: 24px;

    color: inherit;
}

.javo-single-episode__description li {
    margin-block: 5px;
}

.javo-single-episode__description strong,
.javo-single-episode__description b {
    color: #ffffff;
    font-weight: 750;
}

.javo-single-episode__description a {
    color: #B3E7FF;

    font-weight: 600;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* =========================================================
   Related Episodes
========================================================= */

.javo-single-episode__related {
    padding-top: 4px;
}


/* List */

.javo-single-episode__related ul {
    display: grid;

    gap: 10px;

    list-style: none;

    margin: 0;
    padding: 0;
}


/* Related Episode Card */

.javo-single-episode__related li {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px 20px;

    min-width: 0;

    padding: 14px 16px;

    background: rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(179, 231, 255, 0.16);

    border-radius: 14px;

    box-sizing: border-box;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}


/* Related Episode Title */

.javo-single-episode__related li a {
    display: block;

    min-width: 0;

    color: #ffffff;

    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.75;

    text-decoration: none;

    overflow-wrap: anywhere;

    transition:
        color 160ms ease;
}


/* Related Episode Date */

.javo-single-episode__related time {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    padding: 5px 9px;

    color: rgba(255, 255, 255, 0.64);

    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.4;

    white-space: nowrap;

    background: rgba(255, 255, 255, 0.055);

    border-radius: 999px;
}


/* Hover */

@media (hover: hover) {

    .javo-single-episode__related li:hover {
        background: rgba(179, 231, 255, 0.075);

        border-color:
            rgba(179, 231, 255, 0.30);

        transform: translateY(-1px);
    }

    .javo-single-episode__related li:hover a {
        color: #B3E7FF;
    }
}


/* =========================================================
   Generic Links
========================================================= */

.javo-single-episode a {
    text-decoration-skip-ink: auto;
}

.javo-single-episode :is(a, button):focus-visible {
    outline: 2px solid #B3E7FF;
    outline-offset: 3px;
}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

    .javo-single-episode {
        padding:
            18px
            max(14px, env(safe-area-inset-right))
            32px
            max(14px, env(safe-area-inset-left));
    }


    /* Header */

    .javo-single-episode__header {
        grid-template-columns:
            minmax(0, 1fr);

        grid-template-areas:
            "channel"
            "title"
            "artwork"
            "meta"
            "play"
            "engagement";

        gap: 12px;
    }


    /* Channel */

    .javo-single-episode__channel {
        font-size: 0.88rem;
    }


    /* Title */

    .javo-single-episode__title {
        font-size: clamp(1.35rem, 6vw, 1.7rem);
        line-height: 1.65;
    }


    /* Artwork */

    .javo-single-episode__artwork {
        width: min(220px, 60vw);

        margin-top: 4px;

        justify-self: center;

        border-radius: 16px;
    }


    /* Meta */

    .javo-single-episode__meta {
        justify-content: center;

        margin-top: 2px;

        font-size: 0.82rem;

        text-align: center;
    }


    /* Play */

    .javo-single-episode__play {
        justify-content: center;

        margin-top: 4px;
    }


    /* Engagement */

    .javo-single-episode__engagement {
        justify-content: center;
    }


    /* Main Sections */

    .javo-single-episode__description,
    .javo-single-episode__related {
        margin-top: 30px;
    }


    /* Description */

    .javo-single-episode__description {
        font-size: 0.94rem;
        line-height: 1.95;
    }


    /* Related Cards */

    .javo-single-episode__related ul {
        gap: 9px;
    }

    .javo-single-episode__related li {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 7px;

        padding: 13px 14px;

        border-radius: 13px;
    }

    .javo-single-episode__related li a {
        font-size: 0.91rem;
        line-height: 1.75;
    }

    .javo-single-episode__related time {
        justify-self: start;

        padding: 4px 8px;

        font-size: 0.72rem;
    }
}


/* =========================================================
   Very Small Mobile
========================================================= */

@media (max-width: 380px) {

    .javo-single-episode {
        padding-inline: 12px;
    }

    .javo-single-episode__artwork {
        width: min(205px, 62vw);
    }

    .javo-single-episode__title {
        font-size: 1.3rem;
    }

    .javo-single-episode__related li {
        padding: 12px;
    }
}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .javo-single-episode__channel a,
    .javo-single-episode__related li,
    .javo-single-episode__related li a {
        transition: none;
    }

    .javo-single-episode__related li:hover {
        transform: none;
    }
}