/* landing/wide.css — arrangement: a full-bleed hero band, a full-width row of widgets, then one
   full-width column. Positioning, as arrangements are — with one exception: the hero's scrim and light
   text, because words over a photograph have to stay readable whichever theme is on. A theme can
   override either by styling .landing-hero. */
.shell { max-width: 75rem; }

/* The hero breaks out of the padded shell without 100vw, so it never brings a sideways scrollbar. */
.landing-hero {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    display: flex;
    align-items: center;
    min-height: 24rem;
    padding: 3.5rem 1.25rem;
    background-size: cover;
    background-position: center;
}
.landing-hero.has-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / .25), rgb(0 0 0 / .55));
}
.landing-hero.has-banner, .landing-hero.has-banner a { color: #fff; }
.landing-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 75rem; margin: 0 auto; }

/* The row's columns come from the shared .region.is-row grid in base.css. */
.region-feature { margin: 2.5rem 0; }

.page-landing { display: block; }
.page-landing .region-main { min-width: 0; }

/* A band sized for a desktop is most of a phone screen before a word of content, so bring it in. */
@media (max-width: 48rem) {
    .landing-hero { min-height: 15rem; padding: 2.25rem 1rem; }
    .region-feature { margin: 1.75rem 0; }
}