/* Solid brand blue, no hero photo.

   These banners used to carry the WordPress Smush markup
   `class="lazyload" style="background:inherit" data-bg="<gradient>, url(<photo>)"`.
   No lazyload script was ever ported, so `data-bg` never applied and every
   banner rendered `background: inherit` (white) behind `color: white !important`
   below. That is what produced the 2 thresholded color-contrast errors on
   /services/accessibility-auditing/ in .pa11yci.

   Restoring the photo does not fix it either: axe reports a color-contrast
   error for any text over a background image and does not fall back to the
   color underneath, so a photo fails the pa11y gate even behind a 0.9-alpha
   brand gradient. White on --ee-blue is 10.9:1 and needs no threshold.

   If a hero photo is wanted later it needs a solid scrim panel behind the text,
   or a documented .pa11yci threshold. Do not add one silently. */
/* Banner text is set left, not centered.

   Centered text gives every line a different starting point, so the eye has to
   find the left edge again on each one. That costs the least on a single short
   line and the most on the subhead, which wraps to two or three. Left-aligned,
   the h1 and the subhead share one vertical line and the banner reads as part
   of the page rather than as a separate centered object above it.

   --ee-banner-column reproduces .whole_page_text_wrap's column at each of its
   breakpoints (style.css: 768px -> 640px, 1280px -> 1200px, 1920px -> 1440px),
   so all six service banners start on the site's standard content edge.

   That edge is deliberately NOT matched to whatever sits directly below each
   banner, because there is no single answer to match: at 1440px the first
   content section starts at 0 on /legal-expertise/, 120 on the standard column,
   140 on /accessibility-review/ (.accessibility-review-intro adds 20px of its
   own), 160 on /accessibility-auditing/, and 320 on /training/ and
   /xr-services/. Those sections each carry bespoke page CSS. Anchoring the
   banners to one shared column makes the six headers agree with each other,
   which is the thing a visitor moving between service pages actually sees. */
.ee-banner {
    position: relative;
    /* min-height: 320px; */
    min-height: 240px;
    background-color: var(--ee-blue);
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 0 240px 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    --ee-banner-column: 100%;
    padding-inline: max(20px, (100% - var(--ee-banner-column)) / 2);
    box-sizing: border-box;
}

@media only screen and (min-width: 768px) {
    .ee-banner { --ee-banner-column: 640px; }
}

@media only screen and (min-width: 1280px) {
    .ee-banner { --ee-banner-column: 1200px; }
}

@media only screen and (min-width: 1920px) {
    .ee-banner { --ee-banner-column: 1440px; }
}

.ee-banner h1,
.ee-banner p {
    color: white !important;
    text-align: left;
}

.ee-banner h1 {
    font-size: 4.5rem;
}

/* Measure, not position: the subhead keeps a readable line length but starts on
   the same edge as the h1, so `margin: 0` rather than the `0 auto` that used to
   centre the box. */
.ee-banner p {
    max-width: 58ch;
    margin: 0;
    padding-bottom: 1rem;
    font-size: 1.25rem;
}

@media (max-width: 750px) {
    .ee-banner {
        min-height: 200px;
        border-radius: 0 0 80px 80px;
    }

    .ee-banner h1 {
        font-size: 2.25rem;
        /* Was `margin: 13px`, which now doubles up with the banner's own
           inline padding and pushes the h1 off the content edge. */
        margin: 13px 0;
    }

    .ee-banner p {
        /* max-width: 290px; */
        padding: 0 0 40px 0;
    }
}