/* SchoolCMS – Page banner (image and video variants)
   Rendered by template-parts/banner/banner.php on every page.
   Innermedia base styling, simplified from the Rikkyo build: a
   full-bleed media box held at a ratio between a phone floor and a
   desktop cap, a bottom scrim for legibility and the H1 ranged
   bottom-left over it behind an orange rule. Restyle per site from
   Figma. */

.pageBanner {
    position:    relative;
    display:     flex;
    align-items: flex-end;
    /* clamp, not media queries, so the crop scales continuously */
    height:      clamp(280px, 36vw, 560px);
    overflow:    hidden;
    background:  var(--color-black);

    .bannerImage,
    .videoframe {
        position: absolute;
        inset:    0;

        img,
        video {
            width:      100%;
            height:     100%;
            object-fit: cover;
        }
    }

    /* Bottom scrim under the title – any banner with media behind it;
       clicks fall through to an unmuted video's controls */
    &.hasBannerImage::after,
    &.banner-video::after {
        content:        '';
        position:       absolute;
        inset:          0;
        background:     linear-gradient(to top, rgba(18, 29, 33, 0.75), rgba(18, 29, 33, 0) 55%);
        pointer-events: none;
    }

    .bannerContent {
        position:       relative;
        z-index:        2;
        padding-bottom: var(--space-lg);
        /* the title is display only – video controls stay clickable */
        pointer-events: none;

        @media (min-width: 992px) {
            padding-bottom: var(--space-xl);
        }
    }

    .bannerTitle {
        margin:       0;
        padding-left: var(--space-md);
        border-left:  6px solid var(--color-orange);
        color:        var(--color-white);
    }
}

/* ── Missing-fallback notice (admins only – see banner.php) ── */
.bannerFallbackWarning {
    background: var(--color-teal);
    /* teal is a light accent – dark text on it */
    color:      var(--color-black);
    padding:    var(--space-xs) 0;
    font:       var(--text-14or);

    p {
        margin: 0;
    }

    a {
        color:           inherit;
        text-decoration: underline;
    }
}