/* For the taxonomy header and widget. Appears on taxonomy archive pages and articles. */
.series-header-container {
    position: relative;
    width: 100%;
    color: var(--text-contrast);
    line-height: 0; /* I have no idea, but there's space at the bottom otherwise. */
    background-image: linear-gradient(180deg,#fff,#000);
    min-height: 150px;
    margin-bottom: 5px;
}

.series-header-container img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    /*
    we align the image a bit above vertical center
    because that's usually where the focal point is, usually...
    */
    object-position: 50% 30%;
    opacity: .9; /* darken w/bg so text stands out more */
}

.series-header-container.no-img {
    min-height: unset;
    background-color: var(--brand);
    padding: 10px;
    padding-left: 0;
}

.series-header-title {
    font-size: 3.1rem;
    line-height: 1.3;
    position: absolute;
    bottom: 20px;
    margin-bottom: 0;
    margin-left: 30px;
    color: var(--text-contrast);
    text-shadow: 2px 2px 4px #000;
    z-index: 2;
}

.no-img .series-header-title {
    position: static;
}

.longname .series-header-title {
    font-size: 2.25rem;
    margin-right: 30px;
    line-height: 1.1;
}

.series-description {
    margin: 30px;
    line-height: 1.5;
    p {
        margin-bottom: 15px;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

@media screen and (max-width: 480px) { /* bp-mobile */
    .series-header-title {
        font-size: 2.25rem;
        padding-right: 10px;
        hyphens: auto;
        margin-left: 15px;
    }
    .series-description {
        margin: 15px 0 30px;
    }
}

/* Widget */
.series-post-widget {
    background-color: #1a1a1a;
    margin: 20px auto;
    width: 100%;
    max-width: 560px;
}

.series-posts-list {
    padding: 10px 15px;
}

.series-posts-list p {
    margin-bottom: 10px;
    line-height: 1.2;
}

.series-posts-list p.nav-link {
    text-align: right;
    margin-top: 20px;
}

.series-posts-list a {
    color: #fff;
    font-weight: 400;
    font-size: 1rem;
    transition: color 0.15s;
}
.series-posts-list a.nav {
    font-weight: 600;
}

.series-posts.list a:hover {
    color: var(--brand);
}