/* Watch page: the season strip and the collapse control on the Related rail.
   Both were built without any styling, so the season cards rendered as bare
   links and the "View all" toggle had nothing to hide. */

/* ---- Seasons ---------------------------------------------------------- */

.os-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.os-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ak-bg-2, #142030);
    text-decoration: none;
}

.os-item:hover {
    text-decoration: none;
}

/* Sits behind the label rather than beside it, so a long season name still
   gets the full width of the card. */
.os-item .season-poster {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    opacity: .3;
    transition: opacity .2s, transform .2s;
}

.os-item:hover .season-poster {
    opacity: .45;
    transform: scale(1.04);
}

.os-item .title {
    position: relative;
    width: 100%;
    padding: 8px 10px;
    color: #e8eef4;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.os-item:hover .title {
    color: #fff;
}

.os-item.active {
    box-shadow: inset 0 0 0 2px var(--ak-accent, #26a3d6);
}

.os-item.active .season-poster {
    opacity: .45;
}

.os-item.active .title {
    color: var(--ak-accent, #26a3d6);
}

/* ---- Related rail: "View all" -----------------------------------------
   The inline script toggles this class on items past the tenth and swaps the
   caret character itself, so nothing here needs to animate. */

.rel-collapse-hidden {
    display: none !important;
}

.rel-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    color: #b8c5d3;
    font-size: .9rem;
    line-height: 1.2;
    cursor: pointer;
}

.rel-collapse-toggle:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}