/* Shared hero for individual Bible teaching posts */
.post-series-hero {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    min-height: 500px;
    padding: 95px 25px 55px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(90deg, rgba(8, 30, 52, .48), rgba(8, 30, 52, .86));
    background-size: cover;
    background-position: center;
    color: #fff;
}

.post-series-hero .hero-inner { width: 100%; max-width: 1050px; margin: 0 auto; }
.post-series-hero .hero-label { font-size: 13px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.post-series-hero h1 { font-size: 42px; line-height: 1.2; margin: 0 0 18px; color: #fff; }
.post-series-hero .hero-subtitle { max-width: 760px; font-size: 17px; line-height: 1.8; margin: 0 0 24px; color: #fff; }
.post-series-hero .hero-meta,
.post-series-hero .hero-meta a { font-size: 14px; color: #fff; }
.post-series-hero .hero-meta a { text-decoration: none; }
.post-series-hero .hero-meta a:hover { text-decoration: underline; }

/* The blog page uses .series-hero rather than .post-series-hero. */
.series-hero { position: relative; }

/* Shared breadcrumb styling for blog, series and post heroes */
.post-series-hero .mod-breadcrumbs,
.series-hero .mod-breadcrumbs {
    position: absolute;
    right: 28px;
    bottom: 16px;
    top: auto;
    left: auto;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.4;
    text-align: right;
    color: #fff;
    z-index: 2;
}

.post-series-hero .mod-breadcrumbs a,
.series-hero .mod-breadcrumbs a {
    color: #fff;
    text-decoration: none;
}

.post-series-hero .mod-breadcrumbs a:hover,
.series-hero .mod-breadcrumbs a:hover {
    color: #fff;
    text-decoration: underline;
}

.post-series-hero .mod-breadcrumbs-slash,
.series-hero .mod-breadcrumbs-slash {
    color: rgba(255, 255, 255, 0.6);
}

.post-browse-all { margin-top: 50px; }

@media (max-width: 767px) {
    .post-series-hero { min-height: 340px; padding: 85px 20px 45px; }
    .post-series-hero h1 { font-size: 32px; }
    .post-series-hero .mod-breadcrumbs,
    .series-hero .mod-breadcrumbs {
        right: 18px;
        bottom: 12px;
        font-size: 12px;
    }
}