/* ============================= */
/* GLOBAL PAGE BACKGROUND FIX */
/* ============================= */

/* Force pure black background (no gradient, no image) */
.episode-area {
    background: #000 !important;
    background-image: none !important;
    padding: 60px 0;
    min-height: 100vh;
}

/* Remove background from parent if inherited */
body, html {
    background-color: #000;
}


/* ============================= */
/* CONTAINER STYLING */
/* ============================= */

.episode-area .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}


/* ============================= */
/* TITLE SECTION */
/* ============================= */

.section-title {
    margin-bottom: 30px;
    text-align: left;
}

    .section-title .title {
        color: #ffffff;
        font-size: 34px;
        font-weight: 700;
        letter-spacing: 0.5px;
        border-left: 4px solid #e50914;
        padding-left: 12px;
    }


/* ============================= */
/* CONTENT AREA (IMPORTANT) */
/* ============================= */

/* This targets your dynamic @Html.Raw(Model.content) */
.episode-area p,
.episode-area span,
.episode-area li,
.episode-area div {
    color: #d1d1d1;
    font-size: 15px;
    line-height: 1.8;
}

/* Headings inside content */
.episode-area h1,
.episode-area h2,
.episode-area h3,
.episode-area h4,
.episode-area h5,
.episode-area h6 {
    color: #ffffff;
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Lists */
.episode-area ul,
.episode-area ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.episode-area li {
    margin-bottom: 8px;
}

/* Links */
.episode-area a {
    color: #e50914;
    text-decoration: none;
}

    .episode-area a:hover {
        text-decoration: underline;
    }


/* ============================= */
/* CARD-LIKE READABILITY EFFECT */
/* ============================= */

.episode-top-wrap + * {
    background: #111;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #222;
}


/* ============================= */
/* RESPONSIVE DESIGN */
/* ============================= */

/* Tablet */
@media (max-width: 991.98px) {
    .section-title .title {
        font-size: 28px;
    }

    .episode-area {
        padding: 40px 0;
    }
}

/* Mobile */
@media (max-width: 575.98px) {

    .section-title .title {
        font-size: 24px;
    }

    .episode-area .container {
        padding: 0 15px;
    }

    .episode-area p,
    .episode-area li {
        font-size: 14px;
        line-height: 1.7;
    }

    .episode-top-wrap + * {
        padding: 18px;
    }
}


/* ============================= */
/* SMALL UX IMPROVEMENTS */
/* ============================= */

/* Smooth text rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Better spacing between sections */
.episode-area h2,
.episode-area h3 {
    margin-top: 30px;
}

/* Prevent overflow issues */
.episode-area {
    overflow-x: hidden;
}