/*
 * Shared full-bleed hero mechanics, used by every page-*.php template's
 * hero section. One background image spans the entire section edge to
 * edge; a white gradient fades in from the left so heading/lede/buttons
 * (and, where a page has one, an accessory like the on-air-now card) sit
 * directly on top of the image instead of living in a separate boxed-off
 * column beside it. Matches the Home hero's confirmed sizing exactly —
 * every page-*-hero.css file only adds page-specific text/heading
 * overrides on top of this, never redefines the mechanics.
 */
.sfm-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 380px; display: flex; align-items: center; padding-block: 2rem; }
.sfm-hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--sfm-bg-blue-50); }
/* object-position's Y value matters far more than X here: the bundled
   placeholder photos are small mockup assets (not wide photography), so
   object-fit: cover scales them up to match the section's width and only
   a thin horizontal slice of their height stays visible — biasing that
   slice toward the top keeps a face/subject in frame. Upload a real, wide
   (1920x800px+) photo via each page's Featured Image for a sharp, well
   framed result. */
.sfm-hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.sfm-hero__bg-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        95deg,
        var(--sfm-white) 0%,
        var(--sfm-white) 32%,
        rgba(255, 255, 255, 0.85) 45%,
        rgba(255, 255, 255, 0.35) 62%,
        rgba(255, 255, 255, 0) 80%
    );
}

.sfm-hero__grid { position: relative; width: 100%; }

@media (min-width: 960px) {
    .sfm-hero { min-height: 440px; }
}

@media (max-width: 640px) {
    /* A left-to-right fade doesn't work once content stacks full-width;
       wash the image with a stronger top-heavy white gradient instead so
       the text stays readable without losing the photo underneath. */
    .sfm-hero { min-height: 480px; padding-block: 1.75rem; }
    .sfm-hero__bg-overlay {
        background: linear-gradient(
            180deg,
            var(--sfm-white) 0%,
            var(--sfm-white) 55%,
            rgba(255, 255, 255, 0.55) 75%,
            rgba(255, 255, 255, 0.15) 100%
        );
    }
}

/* Heroes with a second element beside the copy (Home/Shows' on-air-now
   card) — page-specific CSS sets grid-template-columns/areas on top of
   this at the >=960px breakpoint; this covers the shared single-column
   mobile stack and right-alignment default. */
.sfm-hero__grid--split {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "accessory";
}
.sfm-hero__grid--split .sfm-hero__copy { grid-area: copy; }
.sfm-hero__accessory { grid-area: accessory; justify-self: end; width: 100%; max-width: 320px; }
@media (min-width: 960px) {
    .sfm-hero__grid--split {
        grid-template-columns: 1.3fr 1fr;
        grid-template-areas: "copy accessory";
        align-items: center;
    }
}
@media (max-width: 640px) {
    .sfm-hero__accessory { max-width: none; }
}