/*
    Home page. Layout and type come from maintenance.css (.sp-page, .sp-page-header, .sp-split, .sp-notice);
    this file only adapts them to the home page's one photo and the line breaks left over from the old site.
*/

/* the <br> pairs were the old page's spacing; the maintenance margins do that job now */
.page-home .home-text br {
    display: none;
}

/* equal columns: at maintenance's 3fr/2fr the wide photo shrinks to a thumbnail */
.page-home .home-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    margin-bottom: 0;
}

.page-home .home-text > p {
    margin-bottom: 2rem;
}

.page-home .sp-notice {
    margin-bottom: 0;
}

/*
    The photo is a CSS background (set in spectron.css). It used to show at its natural size inside an 80vh box,
    which cropped a 2500x1213 photo to a narrow upright slice. Sizing the box to the photo's own ratio shows all of it.
*/
.page-home .image-section {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 2500 / 1213;
    background-size: cover;
}

@media (max-width: 900px) {
    .page-home .home-split {
        grid-template-columns: 1fr;
    }
}

/* spectron.css hides the photo below 768px; keep it, under the text, like the photos on the maintenance page */
@media (max-width: 768px) {
    .page-home .image-section {
        display: block;
    }
}

/* ------------------------------------------------------------ centred */
/* the intro text and the commitment statement sit in the middle of their space, not against the left edge */
.page-home .sp-prose,
.page-home .sp-notice {
    margin-left: auto;
    margin-right: auto;
}

.page-home .sp-split {
    align-items: center;
}

    .page-home .sp-split > * {
        justify-self: center;
    }

/* ------------------------------------------------------------ fit on one screen (1440x900 and up) */
@media (min-width: 751px) {
    .page-home .sp-page {
        padding-bottom: 1.5rem;
    }

    .page-home .sp-page-header h1 {
        margin-bottom: 1.25rem;
    }

    .page-home .home-text > p {
        margin-bottom: 1.25rem;
    }
}