/* applied-home/wide.css — arrangement: full-bleed HERO banner (holds the overlay text area) → a
   full-width WIDGETS ROW → a full-width CONTENT column. POSITIONING only (widths/display/full-bleed);
   colour, the banner scrim, and type are the theme's. This is the arrangement half of the split. */
.shell { max-width: 75rem; }

/* HERO: a full-bleed band that breaks out of the padded .shell (same trick the chrome banner uses —
   no 100vw so no scrollbar overflow). The placed hero widgets sit in a centred inner column as the
   banner's overlay "text area". background-size/position position the image; the image itself is the
   data-driven inline background from site_banner (set in the base php). */
.applied-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;
}
.applied-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 75rem; margin: 0 auto; }

/* WIDGETS ROW below the hero — the columns come from the generic `.region.is-row` grid in base.css. */
.region-feature { margin: 2.5rem 0; }

/* CONTENT: one full-width column. */
.page-applied-home { display: block; }
.page-applied-home .region-main { min-width: 0; }

/* Narrow screens. The hero is sized for a desktop band — 24rem tall with 3.5rem of padding is most of a
   phone screen before a word of content, so it is brought in. The full-bleed margins are left alone:
   they are correct as long as the page does not overflow horizontally, which base.css now guards. */
@media (max-width: 48rem) {
    .applied-hero { min-height: 15rem; padding: 2.25rem 1rem; }
    .region-feature { margin: 1.75rem 0; }
}