@import '_content/CMS.Foundation/CMS.Foundation.fqfeh0z5kd.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
    A delivered site's chrome.                                                      (T-0150)

    Quiet, because the page is the point. A hospital's visitor arrived looking for one thing -
    visiting hours, a phone number, what a diagnosis means - and the header's job is to say whose
    site this is and get out of the way.

    Every value is a token, so a department's brand is its ThemeToken rows and nothing else
    (E3, ADR-0026). Every property is logical (E6).
*/

.site-header[b-uqux9szdnr] {
    border-block-end: var(--cms-border-width) solid var(--cms-color-border);
    background-color: var(--cms-color-surface);
}

.site-header__inner[b-uqux9szdnr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cms-space-4);
    padding-block: var(--cms-space-4);
}

/*
    The masthead. A link home, because that is what a masthead is - which also means the
    navigation does not spend its first and most-read position going where this already goes.
*/
.site-header__name[b-uqux9szdnr] {
    font-family: var(--cms-font-heading);
    font-size: var(--cms-font-size-lg);
    font-weight: var(--cms-font-weight-bold);
    color: var(--cms-color-on-surface);
    text-decoration: none;
}

.site-header__name:hover[b-uqux9szdnr] {
    text-decoration: underline;
}

/*
    THE PHONE NUMBER, pushed to the far end and styled as the one action in the header. On a
    hospital's website it is the most-used thing on the page, and on a phone it is a tap.
*/
.site-header__phone[b-uqux9szdnr] {
    margin-inline-start: auto;
    padding-block: var(--cms-space-2);
    padding-inline: var(--cms-space-4);
    border-radius: var(--cms-radius-pill);
    background-color: var(--cms-color-primary);
    color: var(--cms-color-on-primary);
    font-weight: var(--cms-font-weight-bold);
    text-decoration: none;

    /* WCAG 2.2 2.5.8. */
    min-block-size: 24px;
}

.site-nav__list[b-uqux9szdnr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cms-space-4);
    margin-block: 0;
    padding-inline-start: 0;
    list-style: none;
}

.site-nav__link[b-uqux9szdnr] {
    display: inline-flex;
    align-items: center;
    padding-block: var(--cms-space-1);
    border-block-end: 2px solid transparent;
    color: var(--cms-color-on-surface);
    font-weight: var(--cms-font-weight-medium);
    text-decoration: none;
    min-block-size: 24px;
}

.site-nav__link:hover[b-uqux9szdnr], .site-nav__link:focus-visible[b-uqux9szdnr] {
    color: var(--cms-color-on-header);
    text-decoration: underline;
}

/*
    A two-level navigation, with no script.                                 (T-0153)

    Delivery is static SSR by decision (ADR-0006), so a submenu opens on :hover
    and on keyboard-visible focus. Pointer focus must not hold a menu open after
    the mouse leaves it (T-0252). Both
    are needed and neither is optional: hover alone is unreachable from a
    keyboard, and focus alone is unreachable from a mouse.

    EVERY LINK IS IN THE DOCUMENT EITHER WAY. What the closed state hides is the
    visual rendering; a screen reader still reads the list, find-in-page still
    finds it, and a crawler still indexes it.
*/
.site-nav__item[b-uqux9szdnr] {
    position: relative;
}

/*
    A heading with nothing to click. Muted so it does not read as a link that
    has stopped working, and NOT an anchor with no href - an anchor without one
    is not focusable and is not announced as a link, which is worse than text.
*/
.site-nav__link--heading[b-uqux9szdnr] {
    color: var(--cms-color-on-surface-muted);
    cursor: default;
}

.site-nav__submenu[b-uqux9szdnr] {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 100%;
    z-index: 20;

    display: none;
    min-inline-size: 14rem;
    margin-block: 0;
    padding-block: var(--cms-space-2);
    padding-inline: 0;

    border: var(--cms-border-width) solid var(--cms-color-border);
    border-radius: var(--cms-radius-md);
    background-color: var(--cms-color-surface);
    box-shadow: var(--cms-shadow-md);
    list-style: none;
}

.site-nav__item:hover > .site-nav__submenu[b-uqux9szdnr],
.site-nav__item:focus-within:not(:has(> .site-nav__link:focus:not(:focus-visible))) > .site-nav__submenu[b-uqux9szdnr] {
    display: block;
}

.site-nav__link--child[b-uqux9szdnr] {
    display: block;
    padding-block: var(--cms-space-2);
    padding-inline: var(--cms-space-4);
    border-block-end: 0;
}

/*
    A pointer travelling from a top-level item to the submenu under it crosses
    the gap the header's padding leaves. Bridging it with padding rather than a
    negative offset keeps the submenu's own edge where it looks like it is.
*/
.site-nav__submenu[b-uqux9szdnr]::before {
    content: "";
    position: absolute;
    inset-block-end: 100%;
    inset-inline: 0;
    block-size: var(--cms-space-2);
}

/*
    A phone is not a pointer: there is no hover, and :focus-within opens the
    submenu only after the reader has tabbed to it. Below the break the whole
    menu is a list, always open, which is what a small screen can actually
    operate.
*/
@media (max-width: 48rem) {
    .site-nav__submenu[b-uqux9szdnr] {
        position: static;
        display: block;
        min-inline-size: 0;
        border: 0;
        box-shadow: none;
        padding-inline-start: var(--cms-space-4);
    }
}

/*
    The page being read. Two signals, not one: colour alone is not a distinction for everybody
    (WCAG 1.4.1), so the rule under it carries the same meaning.
*/
.site-nav__link[aria-current="page"][b-uqux9szdnr] {
    border-block-end-color: currentColor;
    color: var(--cms-color-on-header);
    font-weight: var(--cms-font-weight-bold);
}

.site-footer[b-uqux9szdnr] {
    margin-block-start: var(--cms-space-12);
    border-block-start: var(--cms-border-width) solid var(--cms-color-border);
    background-color: var(--cms-color-surface-muted);
}

.site-footer__inner[b-uqux9szdnr] {
    display: flex;
    flex-direction: column;
    gap: var(--cms-space-2);
    padding-block: var(--cms-space-8);
}

.site-footer__name[b-uqux9szdnr] {
    margin-block: 0;
    font-family: var(--cms-font-heading);
    font-size: var(--cms-font-size-lg);
    font-weight: var(--cms-font-weight-bold);
}

.site-footer__tagline[b-uqux9szdnr] {
    margin-block: 0;
    color: var(--cms-color-on-surface-muted);
}

.site-footer__contact[b-uqux9szdnr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cms-space-4);
    margin-block: var(--cms-space-2) 0;
    padding-inline-start: 0;
    list-style: none;
    color: var(--cms-color-on-surface-muted);
}

/* ==========================================================================
   The utility bar, the masthead's logo, the call to action, and the footer
   the original has.                                                (T-0157)
   ========================================================================== */

/*
    The strip above the header. In the brand's own dark colour, because it is
    the one band on the page that is not content and should not read as any.
*/
.site-utility[b-uqux9szdnr] {
    background-color: var(--cms-color-primary);
    color: var(--cms-color-on-primary);
    font-size: var(--cms-font-size-sm);
}

.site-utility__inner[b-uqux9szdnr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
    gap: var(--cms-space-4);
    padding-block: var(--cms-space-2);
}

.site-utility__list[b-uqux9szdnr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cms-space-4);
    margin-block: 0;
    padding-inline-start: 0;
    list-style: none;
}

/*
    Inherit, not a colour of its own: the bar's foreground is already the one
    that contrasts with its background, and a link colour here would be a second
    decision that has to be kept in step with the first.
*/
.site-utility__phone[b-uqux9szdnr],
.site-utility__link[b-uqux9szdnr] {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    color: inherit;
    text-decoration: none;
}

.site-utility__phone[b-uqux9szdnr] {
    font-weight: var(--cms-font-weight-bold);
}

.site-utility__phone:hover[b-uqux9szdnr],
.site-utility__link:hover[b-uqux9szdnr] {
    text-decoration: underline;
}

/*
    The logo. Capped by BLOCK size rather than inline, because a mark may be
    wide or square and what has to stay constant is the height of the masthead.
*/
.site-header__logo[b-uqux9szdnr] {
    display: block;
    max-block-size: 3rem;
    inline-size: auto;
}

/*
    The one call to action. Pushed to the end of the header, which is where a
    reader of a hospital site looks for it - and given a real target size
    (WCAG 2.5.8) because it is the control the site most wants pressed.
*/
.site-header__action[b-uqux9szdnr] {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-block: var(--cms-space-2);
    padding-inline: var(--cms-space-4);
    border-radius: var(--cms-radius-md);
    background-color: var(--cms-color-secondary);
    color: var(--cms-color-on-secondary);
    font-weight: var(--cms-font-weight-bold);
    text-decoration: none;
}

.site-header__action:hover[b-uqux9szdnr] {
    text-decoration: underline;
}

/* ---- the footer -------------------------------------------------------- */

.site-footer__inner[b-uqux9szdnr] {
    display: grid;
    gap: var(--cms-space-8);
    padding-block: var(--cms-space-12);
}

/*
    The columns. auto-fit, so three menus make three columns and two make two -
    the layout follows what the site has rather than reserving space for what it
    might have.
*/
.site-footer__columns[b-uqux9szdnr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--cms-space-8);
}

.site-footer__heading[b-uqux9szdnr] {
    margin-block: 0 var(--cms-space-3);
    font-size: var(--cms-font-size-md);
}

.site-footer__links[b-uqux9szdnr] {
    display: flex;
    flex-direction: column;
    gap: var(--cms-space-2);
    margin-block: 0;
    padding-inline-start: 0;
    list-style: none;
}

.site-footer__links a[b-uqux9szdnr] {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
}

.site-footer__organisation[b-uqux9szdnr] {
    display: flex;
    flex-direction: column;
    gap: var(--cms-space-2);
}

.site-footer__name[b-uqux9szdnr] {
    margin-block: 0;
    font-family: var(--cms-font-heading);
    font-weight: var(--cms-font-weight-bold);
}

.site-footer__tagline[b-uqux9szdnr] {
    margin-block: 0;
    color: var(--cms-color-on-surface-muted);
}

/*
    An <address> is italic by default in every browser, which says nothing here
    and reads as emphasis nobody meant.
*/
.site-footer__contact[b-uqux9szdnr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cms-space-4);
    font-style: normal;
}

.site-footer__contact a[b-uqux9szdnr],
.site-footer__social a[b-uqux9szdnr] {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
}

.site-footer__social[b-uqux9szdnr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cms-space-4);
    margin-block: 0;
    padding-inline-start: 0;
    list-style: none;
}

/*
    The accreditations. A row rather than a column, because a seal is a small
    square and a column of them is a lot of empty page.                 (T-0158)
*/
.site-footer__badge-list[b-uqux9szdnr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cms-space-4);
    margin-block: 0;
    padding-inline-start: 0;
    list-style: none;
}

.site-footer__badge-list a[b-uqux9szdnr] {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
}

/*
    Capped by block size, so seals of different proportions sit on one line at
    the same height - which is what makes a row of them read as a row rather
    than as three unrelated pictures.
*/
.site-footer__badge[b-uqux9szdnr] {
    block-size: 4.5rem;
    min-inline-size: 4.5rem;
    max-block-size: 4.5rem;
    inline-size: auto;
    object-fit: contain;
}

/* ---- the legal bar ----------------------------------------------------- */

.site-legal[b-uqux9szdnr] {
    border-block-start: var(--cms-border-width) solid var(--cms-color-border);
    background-color: var(--cms-color-surface);
    font-size: var(--cms-font-size-sm);
}

.site-legal__inner[b-uqux9szdnr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cms-space-4);
    padding-block: var(--cms-space-4);
}

.site-legal__line[b-uqux9szdnr] {
    margin-block: 0;
    color: var(--cms-color-on-surface-muted);
}

.site-legal__links[b-uqux9szdnr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cms-space-4);
    margin-block: 0;
    padding-inline-start: 0;
    list-style: none;
}

.site-legal__links a[b-uqux9szdnr] {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
}

/*
    The withdrawal control, made to look like the legal links beside it.
    A button and not an anchor, because a GET that changes something is a
    decision a preloading browser can make for the visitor.          (T-0206)
*/
.site-legal__button[b-uqux9szdnr] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cms-color-link);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
}

.site-legal__button:hover[b-uqux9szdnr] {
    color: var(--cms-color-link-hover);
}

/*
    The header's search box.                                                (T-0092)

    Given a width rather than allowed to take the slack, so it does not push
    the call to action off the row on a medium screen - and hidden below the
    break, where the box, the navigation and the button together are more than
    a header can hold. The search page is still one tap away from the footer's
    own links.
*/
.site-header__search[b-uqux9szdnr] {
    flex: 0 1 14rem;
}

@media (max-width: 60rem) {
    .site-header__search[b-uqux9szdnr] {
        display: none;
    }
}

/* T-0249: independently theme the masthead, utility strip and footer. */
.site-header[b-uqux9szdnr] { background-color: var(--cms-color-header); color: var(--cms-color-on-header); }
.site-header__inner[b-uqux9szdnr] { padding-block: var(--cms-header-padding); }
.site-header__name[b-uqux9szdnr], .site-nav__link[b-uqux9szdnr] { color: var(--cms-color-on-header); }
.site-nav__link[b-uqux9szdnr] { font-size: var(--cms-header-nav-size); }
.site-nav__submenu[b-uqux9szdnr] { background-color: var(--cms-color-header); }
.site-header__logo[b-uqux9szdnr] { max-block-size: var(--cms-header-logo-height); max-inline-size: 100%; }
.site-utility[b-uqux9szdnr] { background-color: var(--cms-color-utility); color: var(--cms-color-on-utility); font-size: var(--cms-font-size-md); }
.site-utility__inner[b-uqux9szdnr] { padding-block: var(--cms-space-1); }
.site-utility__link[b-uqux9szdnr] { font-weight: var(--cms-font-weight-bold); }
.site-footer[b-uqux9szdnr] { background-color: var(--cms-color-footer); color: var(--cms-color-on-footer); }
.site-footer__heading[b-uqux9szdnr] { color: var(--cms-color-heading); }

.site-header__toggle[b-uqux9szdnr], .site-header__menu-button[b-uqux9szdnr] { display: none; }
.site-header__inner[b-uqux9szdnr], .site-utility__inner[b-uqux9szdnr] { max-inline-size: var(--cms-chrome-width); }
.site-header__search[b-uqux9szdnr] { position: relative; flex: 0 0 auto; margin-inline-start: auto; }
.site-header__search summary[b-uqux9szdnr] { display: flex; padding: var(--cms-space-2); cursor: pointer; color: var(--cms-color-accent); list-style: none; }
.site-header__search-panel[b-uqux9szdnr] { position: absolute; inset-inline-end: 0; inset-block-start: 100%; z-index: 10; padding: var(--cms-space-4); background: var(--cms-color-header); min-inline-size: 18rem; }
.site-header__action[b-uqux9szdnr] { margin-inline-start: 0; font-size: var(--cms-header-nav-size); text-transform: uppercase; }
@media (max-width: 60em) {
    .site-header__inner[b-uqux9szdnr] { justify-content: space-between; }
    .site-nav[b-uqux9szdnr] { display: none; order: 3; inline-size: 100%; }
    .site-header__toggle[b-uqux9szdnr] { display: block; position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
    .site-header__menu-button[b-uqux9szdnr] { display: block; cursor: pointer; color: var(--cms-color-on-header); padding: var(--cms-space-2); border: var(--cms-border-width) solid currentColor; }
    .site-header__toggle:checked ~ .site-nav[b-uqux9szdnr] { display: block; }
    .site-header__toggle:focus-visible + .site-header__menu-button[b-uqux9szdnr] { outline: var(--cms-focus-ring-width) solid var(--cms-color-focus-ring); }
    .site-header__logo[b-uqux9szdnr] { max-inline-size: 13rem; block-size: auto; }
    .site-header__search[b-uqux9szdnr] { margin-inline-start: 0; }
}

.site-footer__heading[b-uqux9szdnr] { font-size: var(--cms-font-size-lg); line-height: var(--cms-line-height-tight); }
.site-footer__inner[b-uqux9szdnr] { padding-block: var(--cms-space-12); }
.site-footer__links li[b-uqux9szdnr] { margin-block-end: var(--cms-space-2); }
@media (min-width: 60em) {
    .site-footer__inner:has(.site-footer__columns)[b-uqux9szdnr] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cms-space-8); align-items: start; }
    .site-footer__columns[b-uqux9szdnr] { display: contents; }
    .site-footer__column:nth-child(1)[b-uqux9szdnr] { grid-column: 1; grid-row: 1; }
    .site-footer__column:nth-child(2)[b-uqux9szdnr] { grid-column: 2; grid-row: 1 / span 2; }
    .site-footer__column:nth-child(3)[b-uqux9szdnr] { grid-column: 3; grid-row: 1; }
    .site-footer__organisation[b-uqux9szdnr] { grid-column: 1; grid-row: 2; }
    .site-footer__badges[b-uqux9szdnr] { grid-column: 3; grid-row: 2; }
}
.site-footer__social a[b-uqux9szdnr] { color: var(--cms-color-accent); text-decoration: none; }
.site-footer__social[b-uqux9szdnr]  svg { inline-size: 1.5rem; block-size: 1.5rem; }
.site-footer__main-site[b-uqux9szdnr] { display: flex; flex-direction: column; align-items: start; gap: var(--cms-space-6); text-decoration: none; margin-block-end: var(--cms-space-6); }
.site-footer__button[b-uqux9szdnr] { display: inline-block; background: var(--cms-color-primary); color: var(--cms-color-on-primary); font-weight: var(--cms-font-weight-bold); padding: var(--cms-space-2) var(--cms-space-6); text-decoration: none; }
.site-footer:has(.site-footer__main-site) .site-footer__name[b-uqux9szdnr], .site-footer:has(.site-footer__main-site) .site-footer__tagline[b-uqux9szdnr] { display: none; }
.site-footer__badges:has(.site-footer__main-site) > h2[b-uqux9szdnr] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.site-footer__badge-list[b-uqux9szdnr] { flex-direction: column; align-items: start; }
.site-footer__badge-list li[b-uqux9szdnr] { padding-block: var(--cms-space-4); border-block-start: var(--cms-border-width) solid var(--cms-color-border); }
.site-footer__badge[b-uqux9szdnr] { inline-size: 15rem; block-size: auto; max-block-size: none; max-inline-size: 100%; }
.site-footer__contact a[href^="tel:"][b-uqux9szdnr] { font-size: var(--cms-font-size-2xl); font-weight: var(--cms-font-weight-bold); text-decoration: none; color: var(--cms-color-heading); }
.site-footer__links a[b-uqux9szdnr] { text-decoration: none; color: var(--cms-color-on-surface); }
.site-footer__links a:hover[b-uqux9szdnr] { text-decoration: underline; }
.site-footer__column .site-footer__heading[b-uqux9szdnr]::after { content: ''; display: block; inline-size: 5.625rem; border-block-end: 1px solid var(--cms-color-accent); margin-block: var(--cms-space-6); }
.site-footer__social[b-uqux9szdnr] { margin-block: var(--cms-space-8); }
.site-footer__organisation > .site-footer__button[b-uqux9szdnr] { align-self: start; }
.site-footer__contact a[href^="tel:"][b-uqux9szdnr] { font-size: calc(var(--cms-font-size-md) * 2); }
.site-footer__contact > span[b-uqux9szdnr] { max-inline-size: 16rem; }
.site-legal[b-uqux9szdnr] { background: var(--cms-color-header); color: var(--cms-color-on-header); }
.site-legal__line[b-uqux9szdnr], .site-legal__links a[b-uqux9szdnr], .site-legal__button[b-uqux9szdnr] { color: var(--cms-color-on-header); }
@media(min-width:60em) { .site-footer__inner:has(.site-footer__main-site)[b-uqux9szdnr] { grid-template-columns: 1fr 1.1fr .8fr; gap: var(--cms-space-12); } }

.site-composition-consent[b-uqux9szdnr]{padding:var(--cms-space-4);text-align:center;background:var(--cms-color-surface);color:var(--cms-color-on-surface)}
/* /Components/Pages/SitePage.razor.rz.scp.css */
/*
    What a layout actually does to a delivered page.                                (T-0236)

    A LAYOUT IS ITS AREAS, AND THIS IS WHERE THEY ARE ARRANGED. The `Template` row used to name a
    Razor component that would render it — `CMS.Foundation.Templates.StandardPageTemplate`, a
    class that never existed in this repository and that nothing read. Removing it left the
    question it was pointing at: if a layout is not a component, what makes one look different
    from another?

    This is the answer. Every layout renders its regions in order, one under the next, each
    carrying its key in the markup, and the page carries the layout's key. That is right as it
    stands for three of the four the platform ships. The fourth says in its name that it is two
    columns, so it is two columns — in eight lines, with no second renderer free to disagree with
    the first about what a region is.

    A theme can do the same for a layout of its own without any code at all, which is what makes
    T-0237 (an author defining a layout) a screen rather than a deployment.
*/

/*
    Grid rather than flex: the sidebar keeps its width and the main column takes what is left,
    which is the one thing "a narrower column beside it" has to mean.

    Only above the width where two columns are two columns rather than two slivers. Below it they
    stack in source order, which puts the page before the things beside it — the right order to
    read, and the reason the sidebar region sorts last in the layout.
*/
@media (min-width: 60em) {
    .site__page:has(> [data-region="sidebar"])[b-bksamx0v8f] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--cms-sidebar-width);
        gap: var(--cms-space-8);
        align-items: start;
    }

    /*
        cms-flow spaces siblings with a top margin, and the grid now spaces them with its gap.
        Both at once is the gap plus a margin, which reads as one column having been nudged.
    */
    .site__page:has(> [data-region="sidebar"]) > * + *[b-bksamx0v8f] {
        margin-block-start: 0;
    }

    .site__page:has(> [data-region="sidebar"]) [data-region="sidebar"][b-bksamx0v8f] {
        padding: var(--cms-space-4);
        border-radius: var(--cms-radius-md);
        background-color: var(--cms-color-surface-muted);
    }
}

/*
    The landing page's own areas. Highlights sit above the words and the call to action below
    them, which is the order the layout declares — so nothing here moves anything. What it does
    is give the two areas that exist only on this layout the room that makes them read as bands
    rather than as more paragraphs.
*/
.site__page[data-layout="landing-page"] [data-region="highlights"][b-bksamx0v8f],
.site__page[data-layout="landing-page"] [data-region="action"][b-bksamx0v8f] {
    padding-block: var(--cms-space-8);
}

.site__page[data-layout="landing-page"] [data-region="action"][b-bksamx0v8f] {
    text-align: center;
}

@media (min-width: 60em) {
    .site__page:has(> [data-region="sidebar"] ) > *[b-bksamx0v8f] { grid-column: 1 / -1; }
    .site__page:has(> [data-region="sidebar"] ) > [data-region="main"][b-bksamx0v8f] { grid-column: 1; }
    .site__page:has(> [data-region="sidebar"] ) > [data-region="sidebar"][b-bksamx0v8f] { grid-column: 2; }
}

.site__title[b-bksamx0v8f] { color: var(--cms-color-heading); }
.site__page > [data-region="hero"]:empty[b-bksamx0v8f] { display: none; }
@media (min-width: 60em) {
    .site__page[data-layout="cancer-editorial"][b-bksamx0v8f] { grid-template-columns: var(--cms-sidebar-width) minmax(0, 1fr); }
    .site__page:has(> [data-region="sidebar"]) > [data-region="main"][b-bksamx0v8f] { grid-column: var(--cms-main-column); grid-row: 2; }
    .site__page:has(> [data-region="sidebar"]) > [data-region="sidebar"][b-bksamx0v8f] { grid-column: var(--cms-sidebar-column); grid-row: 2; padding: 0; background: transparent; }
}

/* T-0260: explicit container layouts own the page width and grid. */
.site__page--containers[b-bksamx0v8f] { max-inline-size:none; inline-size:100%; padding-inline:0; display:block; }

.site__page--containers > .site__title[b-bksamx0v8f] {
    max-inline-size:calc(var(--cms-page-width) - 2 * var(--cms-space-6));
    inline-size:calc(100% - 2 * var(--cms-space-4));
    margin-inline:auto;
    padding-inline:0;
}
@media (min-width: 48em) {
    .site__page--containers > .site__title[b-bksamx0v8f] { inline-size:calc(100% - 2 * var(--cms-space-6)); }
}