@import url("global-styles.css");
@import url("header.css");
@import url("footer.css");

/* ============================================================
   SERIES LIST PAGE
   ============================================================ */

.series-intro { text-align: center; margin: 2.5rem 0 1.5rem; }
.series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 1100px;
    margin: 3rem 3rem;
    padding: 0 1rem;
}
.series-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(153,153,153,.25);
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.series-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -22px rgba(13,22,44,.5);
    border-color: rgba(43,95,176,.45);
}
.series-card__title { font-family: Montserrat, sans-serif; color: #2a3a58; margin: 0 0 .5rem; font-size: 1.25rem; }
.series-card__desc { color: #5a6781; margin: 0 0 1rem; line-height: 1.5; }
.series-card__count { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #2b5fb0; }
.series-empty { text-align: center; color: #5a6781; margin: 3rem auto; }

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

.series-intro__desc { max-width: 720px; margin: .75rem auto 0; color: #5a6781; text-align: center; }
.series-player {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 1100px;
    margin: 1.5rem auto 2rem;
    padding: 0 1rem;
}
.series-player__video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
.series-player__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.series-playlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.series-playlist__item {
    display: flex; align-items: center; gap: .85rem; width: 100%;
    background: #fff; border: 1px solid rgba(153,153,153,.25); border-radius: 11px;
    padding: .5rem .65rem; cursor: pointer; text-align: left;
    transition: border-color .15s ease, background .15s ease;
}
.series-playlist__item:hover { border-color: rgba(43,95,176,.45); }
.series-playlist__item.is-active { border-color: #2b5fb0; background: #f3f7fd; }
.series-playlist__thumb { width: 104px; height: 58px; object-fit: cover; border-radius: 7px; flex: none; }
.series-playlist__label { font-family: Montserrat, sans-serif; color: #2a3a58; font-size: .95rem; line-height: 1.3; }
.series-back { text-align: center; margin: 1rem 0 3rem; }

@media (min-width: 900px) {
    .series-player { grid-template-columns: 1.8fr 1fr; align-items: start; }
    .series-playlist { max-height: 520px; overflow-y: auto; }
}