/* Side banners in the margins either side of the 1100px content column, on screens 1240px and wider.
   One set of rules draws the two strips; each page says what goes in them with the --banner-* variables. The strips
   hang off <body> so they run the whole page, header and footer included, behind everything else. */
@media (min-width: 1240px) {
    .site {
        position: relative;
        min-height: 100vh;
        --banner-size: auto 100vh;
        --banner-attachment: fixed;
        --banner-left: left center;
        --banner-right: right center;
        --banner-edge: 1px solid var(--sp-rule);
        --banner-opacity: 0.75;
        --banner-filter: none;
        /* for photos too small to fill the screen height: fades the photo's top and bottom into the page, sized and
           fixed exactly like the photo, so it ends softly instead of in a hard line */
        --banner-fade: linear-gradient(#fff, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 85%, #fff);
    }

    .site::before,
    .site::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: calc((100% - 1100px) / 2);
        z-index: -1;
        pointer-events: none;
        background-image: var(--banner-image, none);
        background-size: var(--banner-size);
        background-attachment: var(--banner-attachment);
        background-repeat: no-repeat;
        opacity: var(--banner-opacity);
        filter: var(--banner-filter);
    }

    .site::before {
        left: 0;
        background-position: var(--banner-left);
        border-right: var(--banner-edge);
    }

    .site::after {
        right: 0;
        background-position: var(--banner-right);
        border-left: var(--banner-edge);
    }

    /* ---------------------------------------------------------------- photos big enough to fill the screen height */
    body:has(.page-home) {
        --banner-image: url("https://images.squarespace-cdn.com/content/v1/6491f209a0e73807b876bb2a/d1fd47b3-2e4c-4a9a-b082-8990ae01d17a/AdobeStock_487164188.jpeg");
    }

    body:has(.page-contact) {
        --banner-image: url("/images/ContactAssets/AdobeStock_387786624.jpeg");
    }

    /* Lookout Mountain, Golden, by Steven Miller, CC BY 2.0: the licence asks for the credit line in about.html */
    body:has(.page-about) {
        --banner-image: url("/images/AboutAssets/lookout-mountain-steven-miller-cc-by.jpg");
    }

    /* ---------------------------------------------------------------- smaller photos, drawn shorter and faded at the ends */
    /* this drawing is only 738px wide, so it is shown fainter and greyer to hide how soft it gets when enlarged; the
       left strip is shifted 250px so the cockpit HUD shows, not just the pilot's helmet */
    body:has(.page-dash-system) {
        --banner-image: var(--banner-fade), url("/images/DashSystemAssets/Cockpit_Missle+Drawing.jpg");
        --banner-size: 100% 80vh, auto 80vh;
        --banner-left: center, left -250px center;
        --banner-right: center, right center;
        --banner-opacity: 0.6;
        --banner-filter: saturate(0.85);
    }

    /* the F-15 is in the middle of the photo, so the left strip shows sky and the tail, the right one the nose */
    body:has(.page-custom-solutions) {
        --banner-image: var(--banner-fade), url("/images/CustomSolutionsAssets/f15-asset.jpeg");
        --banner-size: 100% 70vh, auto 70vh;
        --banner-left: center, left center;
        --banner-right: center, right center;
        --banner-opacity: 0.6;
        --banner-filter: saturate(0.85);
    }

    /* ---------------------------------------------------------------- no photo */
    /* the 2024 page's orange gradient, recoloured to the site's red and fading to white */
    body:has(.page-optix) {
        --banner-image: linear-gradient(to bottom, var(--sp-red), #fff);
        --banner-size: 100% 100%;
        --banner-attachment: scroll;
        --banner-edge: none;
        --banner-opacity: 1;
    }

    /* the page owners must read, so the least: a thin line in the colours of the logo's rays, with a dotted line either
       side like the logo's dotted rays; white stripes laid over the outer two cut them into 3px dots, 10px apart */
    body:has(.page-maintenance) {
        --spectrum: linear-gradient(to bottom, #e7191a, #f7941d, #ffd200, #39b54a, #1c75bc, #662d91);
        --dots: repeating-linear-gradient(to bottom, transparent 0 3px, #fff 3px 10px);
        --banner-image: linear-gradient(#fff, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 85%, #fff),
            var(--dots), var(--dots), var(--spectrum), var(--spectrum), var(--spectrum);
        --banner-size: 100% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%;
        --banner-left: center, calc(50% - 16px) 0, calc(50% + 16px) 0, center, calc(50% - 16px) 0, calc(50% + 16px) 0;
        --banner-right: var(--banner-left);
        --banner-attachment: scroll;
        --banner-edge: none;
        --banner-opacity: 0.6;
    }

    /* ---------------------------------------------------------------- the picture moves out of the column */
    /* on these pages the banner photo was the picture beside the opening text, so the text takes the centred column */
    .page-home .image-section,
    .page-contact .contact-photo,
    .page-dash-system .ds-intro .ds-photo {
        display: none;
    }

    .page-home .home-split,
    .page-contact .contact-split,
    .page-dash-system .ds-intro .ds-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-home .home-text,
    .page-contact .contact-text,
    .page-dash-system .ds-intro .ds-split p {
        max-width: 72ch;
        margin: 0 auto;
    }
}