/* SchoolCMS – Page banner (template-parts/banner/banner.php)
   Burlington House School, from Figma heKkCZqetGZ4Jss8DyuX3n: inner
   `banner` 10001:1338 (photo band 652 tall at 1560), `breadcrumbs`
   10001:1335 and the H1 10001:1332 below it in the content column. The
   home page's opening band is the Home Banner block
   (blocks/home/home-banner/), not a banner type.

   The band is its drawn 652, not the 732 built in September: the file
   tucks the photo's first 80px behind the nav band and the build stretched
   the photo up to fill that instead. Now the shell starts below the band
   (default.css) so none of the photograph is covered, and the band is the
   height the file gives it. */

.pageBanner {
    position:   relative;
    overflow:   hidden;
    background: var(--color-purple);

    /* ── Inner types: the photo / video band ── */
    &.banner-image,
    &.banner-video {
        /* 652/1560 = 41.79vw, floored for phones and capped at the drawn height */
        height: clamp(320px, 41.79vw, 652px);
    }

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

        picture,
        img,
        video {
            position:        absolute;
            inset:           0;
            width:           100%;
            height:          100%;
            object-fit:      cover;
            object-position: center top;
        }
    }

    /* Image Position – the Banner block's button group. A photograph is
       nearly always taller than the band (a 16:9 photo loses a third of
       its height to the 652 band at 1718), so which part survives the
       crop is an editorial decision. TOP is the default (was Centre until
       2026-09-29): faces sit in the upper half of nearly every school
       photograph, and the centred crop was taking the heads off along the
       top edge of every banner (Feedbucket #1002704). Centre and Bottom
       are the editor's per-page choices. */
    &.pos-center {
        .bannerImage img {
            object-position: center center;
        }
    }

    &.pos-bottom {
        .bannerImage img {
            object-position: center bottom;
        }
    }
}

/* ── Inner page title row – after the breadcrumbs, in the content column ── */
.pageTitle {
    padding-top: 48px;

    @media (min-width: 992px) {
        padding-top: 126px;
    }

    .bannerTitle {
        margin: 0;
        font:   var(--text-70cl);
        color:  var(--color-purple);
    }
}

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

    p {
        margin: 0;
    }

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