/* ==========================================================================
   BANNER — full-bleed photo bands and the page banner
   ==========================================================================
   .banner         an article holding one image element: the photo runs edge
                   to edge at a fixed height and is cropped by object-fit
                   (Squarespace's index-section banners, measured: 573px at
                   1440 → 420px at 390). --banner-h adjusts one band.
   .banner--tall   the closing band on Home (688px → 463px).
   .banner--dim    the same with Hayden's dark overlay (the old home page's
                   first band).
   .focus-upper / .focus-top   where the crop sits: wide bands cut ~40% of a 3:2
                   photo's height, and a centred crop loses the heads. Default
                   is 50% 40%; .focus-upper 50% 25%; .focus-top 50% 10%.
   .page-banner    a banner in the Hero section with the page title over it
                   (the old Enrollment page: 86px light type, white). On a
                   page that has one, the header turns transparent over it
                   until the page scrolls (body class .has-page-banner).
   .page-banner--home  Home's: taller, with a label line and two buttons

   Markup: article.mod_article.banner.bleed-x > .content-image > figure > img
           article.page-banner > .content-image + .content-text > h1
   ========================================================================== */

#main .banner {
    --banner-h: clamp(420px, 14.57vw + 363.2px, 573px);
    margin-block: 96px;
    position: relative;
}
#main .banner--tall { --banner-h: clamp(463px, 21.43vw + 379.4px, 688px); }
.banner .content-image,
.banner figure { margin: 0; }
/* (1,2,1): outranks the generic #main .content-image img { height: auto } */
#main .banner .content-image img {
    display: block;
    width: 100%;
    height: var(--banner-h);
    object-fit: cover;
    object-position: var(--focus, 50% 40%);
}
.focus-upper { --focus: 50% 25%; }
.focus-top { --focus: 50% 10%; }
.banner--dim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.28);
    pointer-events: none;
}

.page-banner {
    position: relative;
    display: grid;
    margin-top: -112px;          /* sit under the transparent header */
}
.page-banner > * { grid-area: 1 / 1; margin: 0; }
.page-banner img {
    display: block;
    width: 100%;
    height: clamp(420px, 52vw, 760px);
    object-fit: cover;
}
.page-banner::after {
    content: "";
    grid-area: 1 / 1;
    background: rgb(0 0 0 / 0.3);
}
.page-banner .content-text {
    z-index: 1;
    align-self: center;
    padding-top: 112px;          /* centre the title in the photo below the header */
    text-align: center;
}
.page-banner h1 {
    margin: 0;
    font-size: clamp(48px, 6vw, 86px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--white);
}

.page-banner .label { color: var(--white); margin-bottom: 12px; }
.page-banner .hero-sub {
    margin: 10px 0 0;
    font-family: var(--type-display);
    font-size: clamp(20px, 1.4vw + 14px, 30px);
    font-weight: 300;
    color: var(--white);
}
/* Contao wraps responsive images in <picture>: let it fill like the <img> */
.banner picture, .page-banner picture { display: block; }
.page-banner .btn,
.page-banner a.btn { margin: 28px 6px 0; }
.page-banner--home img { height: clamp(520px, 62vw, 860px); }
.page-banner--home .content-text { padding-inline: 20px; }

/* The transparent header over a page banner */
body.has-page-banner #header { transition: background-color 0.25s ease; }
html:not(.is-scrolled) body.has-page-banner #header { background-color: transparent; }

@media (max-width: 640px) {
    #main .banner { margin-block: 20px; }
    .page-banner { margin-top: -72px; }
    .page-banner .content-text { padding-top: 72px; }
    .page-banner--home img { height: 620px; }
    .page-banner .label { font-size: 14px; }
}