/*
 * CSEA local fixes
 * ----------------
 * Loaded last, after the vendored theme, so nothing in assets/css/ is edited.
 * Remove this one <link> in front/layouts/app.blade.php to revert everything here.
 *
 * 1. Hero caption legibility.
 *    The theme gives .vs-blog-content white text on NO background:
 *      .style-dark / .style-dark-sm  -> only `color: var(--white-color)`
 *      .overlay-bottom               -> position/padding, no background
 *      .overlay-bottom-sm            -> explicitly `background-color: transparent`
 *    White-on-white on light artwork. We add a gradient scrim. Using
 *    background-IMAGE composes with .overlay-bottom-sm's transparent
 *    background-color rather than fighting it for specificity.
 *
 * 2. Hero crop position.
 *    Slide art is often portrait (e.g. 1655x2340) with the headline baked in.
 *    `object-fit: cover` in a ~470x445 box crops the vertical CENTRE - exactly
 *    where that baked-in headline sits - so it collided with the HTML caption.
 *    The template sets object-fit inline but not object-position, so this
 *    applies with no !important needed.
 */

.vs-hero-wrapper .vs-blog-content.overlay-bottom,
.vs-hero-wrapper .vs-blog-content.overlay-bottom-sm {
    background-image: linear-gradient(to top,
        rgba(0, 0, 0, .97)   0%,
        rgba(0, 0, 0, .93)  22%,
        rgba(0, 0, 0, .78)  48%,
        rgba(0, 0, 0, .40)  74%,
        rgba(0, 0, 0, 0)   100%);
    padding-top: 64px;
}

.vs-hero-wrapper .vs-blog-content .blog-title a,
.vs-hero-wrapper .vs-blog-content .blog-meta,
.vs-hero-wrapper .vs-blog-content .blog-meta a {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.vs-hero-wrapper .vs-blog-image img {
    object-position: top center;
}