/* Client-authored CSS overrides for ade — hand-maintained, never touched by the theme
   pipeline (mw-theme.css is regenerated wholesale on every bootstrap run). Loaded last
   in _MemberWebLayout.cshtml, after mw-theme.css and mw-core.css. */

/* MUST be the file's first rule (only @charset may precede an @import) — an @import
   anywhere after another rule is invalid per spec and browsers silently drop it, no
   console warning. It sat after the @media block below for a while, so Inter was never
   actually fetched; --mw-font-sans listing Inter first just meant every browser quietly
   fell through to the next installed font (Segoe UI on Windows) with nothing to show it
   was missing (document.fonts stayed empty). */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* MemberWeb.Core bug workaround (report upstream — this belongs in the product repo):
   mw-core.css's own @media(max-width:767.98px){.mw-container__inner{grid-template-columns:1fr!important}}
   strips the safe minmax(0, 1fr) that block-grid renders as an inline style, via !important beating a
   non-important inline style. Without the minmax(0, ...) floor, a single oversized image (or any wide
   content) inside a one-column mobile container can inflate that column past the viewport — seen on
   the homepage "Upcoming events" slider. Restoring the floor with equal !important force fixes every
   single-column container site-wide, not just this one section. */
@media (max-width: 767.98px) {
  .mw-container__inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* MemberWeb.Core bug workaround (report upstream — also belongs in the product repo):
   mw-core.css centres a "Fixed" container purely via width:100%; max-width:var(--mw-container-max);
   margin-inline:auto — with no fallback once the container's own max-width no longer binds.
   ADE overrides --mw-container-max to 1345px above (this site's own :root block); once the
   viewport (minus scrollbar — confirmed live via document.documentElement.clientWidth, not
   window.innerWidth, which double-counts it) drops below max-width + the 48px inline padding
   (~1393px), width:100% wins outright and margin-inline:auto has nothing left to centre with,
   so the box touches both viewport edges with zero outer gutter — reproduced live at 1250px, in
   the site's own "desktop, not yet tablet" range (tablet's own stacked layout starts lower and
   gets a real gutter from its own padding rules, so this dead zone sits between the two: roughly
   992px–1393px). width:min() below reserves a 24px minimum outer gutter on each side once the
   container can't fit at its preferred max-width; above ~1393px the two arguments to min() swap
   which one wins, but max-width was already the smaller value there, so desktop is unchanged —
   pixel-for-pixel identical to core's own width:100% in that range. --wide is deliberately
   excluded: that variant wants true edge-to-edge with no gutter at any width, so it keeps
   core's own behaviour untouched. --fixed's own OUTER .mw-container element already gets
   max-width:none from core (the inner .mw-container__inner does the capping instead, confirmed
   live), so only .mw-container__inner needs covering for that variant, not the outer selector
   too — covering the outer as well here would fight core's own instruction to go edge-to-edge
   at that level. */
.mw-container:not(.mw-container--wide):not(.mw-container--fixed),
.mw-container--fixed .mw-container__inner {
  width: min(100% - 48px, var(--mw-container-max));
  margin-inline: auto;
}

/* Page-head band (Insights, News, Events listings, etc.): flat pastel background instead of
   mw-core.css's dark wine gradient, with white text swapped for black to stay readable —
   same rationale as the hero banner's own pastel/black-text change. */
.mw-pagehead {
  background: var(--mw-color-pagehead-bg);
  color: var(--mw-color-black);
}

.mw-pagehead__title,
.mw-pagehead__lead {
  color: var(--mw-color-black);
}

.mw-pagehead__title {
  font-size: 56px;
  line-height: 64px;
}

.mw-pagehead__inner {
  padding-bottom: 70px;
}

.mw-pagehead .mw-breadcrumbs__link,
.mw-pagehead .mw-breadcrumbs__current {
  color: var(--mw-color-pagehead-breadcrumb);
}


.mw-container__inner {
    display: grid;
    gap: var(--mw-space-8) !important;
    align-items: start;
    position: relative;
}

/* Page-head band pattern (design: ADE-26d): swaps mw-core.css's generic diagonal-chevron
   :after (repeating-linear-gradient) for the brand's own circular motif — pagehead-pattern-
   rose.svg is the design's mask-group-26.svg (client-supplied, filled #c37493), used only
   here; the original wine pagehead-pattern.svg stays untouched for .ade-login, which still
   sits on the dark wine primary colour (.button-maroon moved to its own pagehead-pattern-
   wine.svg recolour further down). Only background-image/-repeat/-position/
   -size are overridden here — core's left-to-right fade
   (mask-image:linear-gradient(90deg,transparent,#000 60%)) and positioning
   (inset:0/left:35%) are untouched. */
.mw-pagehead:after {
  background-image: url('/brand/pagehead-pattern-mauve.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto;
}

:root {
  /* mw-theme.css never defines these, so mw-core.css's every font-family:var(--mw-font-sans)/
     var(--mw-font-heading) rule (headings, buttons, nav, etc.) was falling back to
     MemberWeb.Core's system-font default — Inter only ever reached plain body text via the
     old `html body` rule this replaces. Setting the variables themselves means every
     component that reads them gets Inter, with no per-component patching needed. */
  --mw-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mw-font-heading: var(--mw-font-sans);

  /* Site-wide h2 size — overrides mw-theme.default.css's fluid clamp(1.5rem, 1.25rem + 1vw, 2rem)
     (24-32px) with a fixed 42px, same override technique as --mw-color-secondary below. Every h2
     sitewide reads this var (mw-core.css's own `h2{font-size:var(--mw-h2)}`), so nothing per-page
     is needed. Line-height isn't a variable core exposes for headings (just a flat 1.2 multiplier
     on the h1-h6 selector) — set directly on h2 below instead. */
  --mw-h2: 42px;

  /* --mw-color-secondary overrides mw-theme.css's pipeline value (#00707E) with the
     site's actual teal (#48C3D3, same as --mw-color-tealMid) — wins the cascade tie
     because this file loads after mw-theme.css. */
  --mw-color-secondary: #48C3D3;

  /* Used: header "Members' Hub" CTA bg. */
  --mw-color-teal-dark: #00707E;
  /* Link colour — was falling back to mw-theme.css's --mw-color-accent (the brand green),
     making body-copy links look like a different, unrelated brand colour next to the site's
     actual teal/wine palette. Reuses --mw-color-secondary rather than a new literal, since
     it's already this exact teal (#48C3D3). */
  --mw-color-link: var(--mw-color-secondary);
  --mw-color-link-hover: var(--mw-color-teal-dark);
  /* CORE DEPENDENCY, not client-only: mw-core.css's .mw-pagehead and .mw-hero gradients and
     its generic .is-active text colour all read this directly. Removing it leaves those
     rules falling back to mw-theme.default.css's generic purple (#3f1d68) instead of the
     brand's own wine-dark — caught after it briefly went missing here. */
  --mw-color-primary-dark: #8F2447;
  /* Used: regular page-head band background (Insights, News, Events listings, etc.) —
     was mw-core.css's dark wine gradient; scoped to .mw-pagehead below rather than
     redefining --mw-color-primary-dark itself, which core also uses elsewhere. */
  --mw-color-pagehead-bg: #D799B3;
  /* Page-head breadcrumb/title text colour — this sitewide default applies to every page
     outside the two area themes. Was deliberately NOT themed per area (agreed with the
     client that breadcrumb colour stay constant everywhere); reversed 2026-09-04 by client
     request for Demand/Heat Network specifically — see mw-themes/demand.css and
     heat-network.css, which now override --mw-color-pagehead-breadcrumb themselves. Any
     further area needing its own breadcrumb colour follows the same pattern there, not here. */
  --mw-color-pagehead-breadcrumb: #620F24;

  /* Neutrals */
  /* Used: header icon button bg, newsletter email input border. */
  --mw-color-grey-light: #DEDEDE;
  /* Used: newsletter card background. */
  --mw-color-grey-lighter: #E6E6E6;
  /* Used: hero CTA bg, footer background, newsletter heading text. */
  --mw-color-black: #000;
  /* Used: CTA button text, newsletter email input bg + submit icon, hero page-pill bg. */
  --mw-color-white: #fff;
  /* Used: footer border either side of the Quick Links block. */
  --mw-color-footer-border: rgba(255, 255, 255, 0.2);
  /* Used: header utils band bg, News/Events filter field border. */
  --mw-color-grey: #D9D9D9;
  /* Used: News/Events filter band bg. */
  --mw-color-grey-band: #EEEEEE;
  /* Used: two-column grey card bg, event-detail aside card bg, event-list section band bg. */
  --mw-color-grey-pale: #F5F5F5;
  /* Used: Awards section background. */
  --mw-color-gold: #BEA041;
  /* Used: login notice overlay. */
  --mw-color-overlay: rgba(0, 0, 0, 0.25);
  /* Used: Association news (homepage alt layout) category badges — was the default
     --mw-color-secondary teal, scoped here rather than changed sitewide so the standalone
     News/Events/Case Studies listings keep the product default badge colour. */
  --mw-color-badge-alt: #620F24;
  /* Used: footer newsletter submit button background. */
  --mw-color-newsletter-submit: #C37493;

  /* Hero banner slide backgrounds (one per pagination tab) — kept separate from
     --mw-color-primary/-greenDark/-teal-dark since those also drive the header CTA,
     footer newsletter submit, filter submit and category badge, none of which should
     follow the hero's own colour. */
  --mw-color-hero-1: #D799B3;
  --mw-color-hero-2: #B3D799;
  --mw-color-hero-3: #9CDFE8;
  /* Darker tints of the three hero colours above, for the pagination's "inactive pill on
     this slide" background — kept in the same family as the now-pastel hero colours rather
     than the old, much darker brand shades. Exact values specified by design, not derived. */
  --mw-color-hero-1-dark: #C37493;
  --mw-color-hero-2-dark: #93C374;
  --mw-color-hero-3-dark: #77CEDB;

  /* Sidebar nav list (design ADE-26d, "navLinks" display variant of Content List) — the
     active pill and dark CTA card colours aren't used anywhere else on the site, so they're
     not folded into --mw-color-primary/-secondary. Light CTA card reuses --mw-color-hero-2
     (#B3D799), which is the exact same swatch the design panel lists for it. */
  --mw-color-navlist-active: #407A28;
  --mw-color-navlist-cta-dark: #24620F;
  /* Per-section override: authors add "nav-blue" to a Two Column/etc block's own "CSS
     classes" field (cssClass on MwTwoColumn and siblings) to re-theme a nested navLinks
     list without touching this file again — e.g. the ADE: Demand page, whose section colour
     is teal rather than Heat Networks' green. */
  --mw-color-navlist-active-blue: #2A8EA7;
  /* Same "add a class to re-theme" pattern as -blue, for a pink section — reuses the same
     wine/pink already used as the "active" accent elsewhere (Member Directory pin, active
     state), rather than inventing a new swatch. */
  --mw-color-navlist-active-pink: #CC3B6F;
  /* .button-mauve CTA (design ADE-26d-2, homepage banner) — the client-supplied pattern
     asset is baked to this exact fill, so the flat card background matches it for the same
     tone-on-tone look as .button-maroon/.button-research below. */
  --mw-color-button-mauve: #CD86A3;

  --mw-container-max: 1345px;
  --mw-hero-pagination-top: 80px;
  /* 41px icon + 10px top/bottom padding on .mw-hero__page, so the icon never overflows the pill. */
  --mw-hero-pagination-height: 61px;
  --mw-hero-pagination-pad-y: 10px;
}

/* Site-wide, not scoped to any class/section — pairs with --mw-h2 above. A bare `h2` rule alone
   isn't enough: the "Heading" content block renders <h2 class="mw-heading mw-heading--m"> (size
   picked independently of level), and mw-core.css's .mw-heading--s/-m/-l{font-size:...} is a
   CLASS selector (0,1,0) that beats a bare `h2` ELEMENT selector (0,0,1) regardless of load
   order — confirmed live: "Introducing ADE" stayed at 28px (.mw-heading--m's 1.75rem) with only
   --mw-h2 set. Combining tag+class (h2.mw-heading--m, specificity 0,1,1) wins outright and stays
   scoped to h2 specifically, leaving h3/h4 Heading-block instances at their own size classes. */
h2,
h2.mw-heading--s,
h2.mw-heading--m,
h2.mw-heading--l {
  font-size: 42px;
  line-height: 52px;
}

a.mw-btn.mw-header__cta--become {
  background: #7A2840;
  color: var(--mw-color-white);
  border: none;
  border-radius: 18px;
  font-size: 16px;
}

a.mw-btn.mw-header__cta--hub {
  background: #2A8EA7;
  color: var(--mw-color-white);
  border-radius: 18px;
  font-size: 16px;
}

button.mw-header__icon-btn {
  background: var(--mw-color-white);
  padding: 0;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
}

.mw-header__icon-btn svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
}

.mw-header__top-inner .mw-header__col {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.mw-header__col .mw-header__utils {
  align-self: flex-end;
  background: var(--mw-color-grey);
  border-radius: 0 0 24px 24px;
  padding: 6px;
}

div.mw-header__navbar {
  border-top: none;
}

img.mw-header__logo {
  height: 64px;
  width: 287px;
  max-width: 287px;
  object-fit: contain;
  overflow: hidden;
}

ul.mw-header__nav-list {
  justify-content: end;
}

a.mw-header__nav-link {
  padding: var(--mw-space-2) var(--mw-space-2);
}

nav.mw-header__nav.mw-nav-container {
  padding-inline: 0;
}

/* Dropdown/mega chevron (Union 1, design ADE-26d-2 screen 19): marks which top-level nav
   items carry a dropdown. Always shown beside the label — not a hover reveal. */
.mw-header__nav-item--has-children > .mw-header__nav-link,
.mw-header__nav-item--has-mega > .mw-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mw-header__nav-item--has-children > .mw-header__nav-link::before,
.mw-header__nav-item--has-mega > .mw-header__nav-link::before {
  content: "";
  display: inline-block;
  order: 1;
  flex: none;
  width: 11px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.313 7.072'%3E%3Cpath fill='%23232631' d='M5.656,7.072,0,1.416,1.414,0,5.658,4.242,9.9,0l1.414,1.416Z'/%3E%3C/svg%3E") no-repeat center center / 11px 7px;
  transition: transform var(--mw-transition);
}

/* The trigger itself isn't a destination — it only opens the dropdown — so on hover-capable
   pointer devices (mouse/trackpad) it shouldn't be clickable; the child links stay real,
   clickable anchors. Scoped to (hover: hover) so touch devices, which have no hover to open
   the panel otherwise, keep the existing tap behaviour untouched. Also gated to min-width:1300px
   (desktop hover-dropdown mode): without it, this fired for ANY mouse-driven browser regardless
   of window width — including a desktop browser just resized narrow to test the mobile layout,
   or a device simulator that doesn't emulate touch — silently swallowing every click on the
   trigger and breaking the accordion below the breakpoint (confirmed live: it isn't only a
   testing-tool quirk, a real trackpad/mouse laptop at a narrow window width hits this too). */
@media (hover: hover) and (pointer: fine) and (min-width: 1300px) {
  .mw-header__nav-item--has-children > .mw-header__nav-link,
  .mw-header__nav-item--has-mega > .mw-header__nav-link {
    pointer-events: none;
    cursor: default;
  }
}

/* Mobile/tablet-only close control for the dropdown (markup in _Header.cshtml) — hidden by
   default so it never leaks into the desktop row; the @media block below (same breakpoint as
   the dropdown itself) is what actually shows it. */
.mw-header__nav-close {
  display: none;
}


/* .mw-header__toggle physically sits next to .mw-header__brand in the markup now (moved
   there so the mobile grid below can place it beside the logo without any JS). It's
   display:none above 992px regardless (core CSS), so desktop is untouched. Below that,
   core makes it visible — order:2 here keeps it at the tail end of the row (after
   .mw-header__col) so tablet (576–991.98px) keeps its pre-existing far-right position
   instead of jumping to sit right after the logo. Mobile overrides this back off below. */
header.mw-header .mw-header__toggle {
  order: 2;
}

/* Raises core's hamburger-collapse breakpoint from 992px to 1300px. ADE's nav labels
   ("ADE: Heat Networks", "Contact Us", etc.) plus the search/Become a Member/Members' Hub
   utils cluster need more row width than mw-core.css assumes — checked live, the nav wraps
   onto two lines somewhere around 1200-1280px viewport width (caught around 1024px, where
   it wrapped badly). Re-declaring the same four properties core already gates behind
   max-width:991.98px, just at a wider breakpoint — .mw-header__utils (search/CTAs) is
   untouched and keeps showing inline exactly as it does today on tablet. */
@media (max-width: 1299.98px) {
  .mw-header__toggle {
    display: inline-grid;
  }

  .mw-header__navbar {
    position: absolute;
    inset: auto 0 auto 0;
    display: flex;
    flex-direction: column;
    background: var(--mw-color-surface);
    border-bottom: 1px solid var(--mw-color-border);
    box-shadow: var(--mw-shadow);
    padding-block: 30px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mw-transition), transform var(--mw-transition), visibility var(--mw-transition);
  }

  .mw-header[data-nav-open="true"] .mw-header__navbar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* The hamburger is the wrong control once the panel's open — .mw-header__nav-close below is
     the one way to close it now, so hide the toggle instead of leaving two overlapping "menu"
     buttons on screen at once. */
  .mw-header[data-nav-open="true"] .mw-header__toggle {
    display: none;
  }

  .mw-header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--mw-space-1);
  }

  /* Top-right, above the nav links (design ask) — .mw-header__navbar is a column flexbox
     (above) so align-self here pulls just this one child to the right without affecting
     .mw-header__nav, which stays stretched full-width same as before. */
  .mw-header__nav-close {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: 8px;
    margin: 0 var(--mw-space-4) var(--mw-space-3) 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--mw-color-text);
    font-weight: var(--mw-fw-medium);
    cursor: pointer;
  }

  .mw-header__nav-close svg {
    width: 20px;
    height: 20px;
  }

  /* MemberWeb.Core gap (report upstream — this belongs in the product repo): below its own
     992px breakpoint, mw-core.css never gives .mw-subnav/.mw-mega a closed state — they carry
     no display rule of their own outside the min-width:992px hover-reveal, so every child
     list and mega panel just renders permanently expanded in normal flow. With ADE's several
     mega/subnav groups that turns the mobile menu into one very long scroll with nothing
     collapsible. Closed-by-default here, opened per item via the accordion script in
     _Header.cshtml adding .is-open to that one <li> — independent of the desktop hover
     reveal, which only exists above 992px regardless of this file's own 992px-to-1300px
     extension. */
  .mw-header__nav-item--has-children > .mw-subnav,
  .mw-header__nav-item--has-mega > .mw-mega {
    display: none;
  }

  .mw-header__nav-item--has-children.is-open > .mw-subnav,
  .mw-header__nav-item--has-mega.is-open > .mw-mega {
    display: block;
  }

  /* The trigger is a real tap target here (unlike the hover:hover-scoped pointer-events:none
     a few rules up, which only ever disabled the mouse/trackpad case) — full width so tapping
     anywhere across the row opens its section, chevron at the far end. */
  .mw-header__nav-item--has-children > .mw-header__nav-link,
  .mw-header__nav-item--has-mega > .mw-header__nav-link {
    width: 100%;
    justify-content: space-between;
    cursor: pointer;
  }

  .mw-header__nav-item--has-children.is-open > .mw-header__nav-link::before,
  .mw-header__nav-item--has-mega.is-open > .mw-header__nav-link::before {
    transform: rotate(180deg);
  }
}

@media (max-width: 575.98px) {
  /* Two rows: utils (search + CTAs) spans full width on top, brand + toggle share the
     row underneath — a fixed grid instead of relying on content height, since the CTA
     buttons wrap into a variable number of lines at this width. */
  header.mw-header .mw-header__top-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "utils utils"
      "brand toggle";
    align-items: center;
    row-gap: 12px;
    column-gap: 12px;
    padding-top: 0;
    padding-bottom: 12px;
  }

  header.mw-header .mw-header__col {
    grid-area: utils;
  }

  header.mw-header .mw-header__utils {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  /* Smaller so search + both CTAs fit on the one nowrap row above, instead of wrapping. */
  header.mw-header a.mw-header__cta {
    font-size: 12px;
  }

  header.mw-header .mw-header__brand {
    grid-area: brand;
  }

  header.mw-header .mw-header__toggle {
    grid-area: toggle;
  }
}

/* Header search dropdown (design ADE-26d-2, screen 42): drops down from directly under the
   header instead of the search icon redirecting straight to the Search page. Positioned
   absolute against <header> (mw-core.css's own position:sticky on .mw-header makes it the
   containing block), so this sits flush under the header at any height/breakpoint without a
   hardcoded offset. Closed state is off-screen above (translateY(-100%)) rather than
   display:none, so the open/close toggle in _Header.cshtml has a transform to animate — see
   that file's script for the hidden/is-open handoff (removed before opening, re-applied only
   once the slide-up transition finishes). */
/* While the search panel is open, only the logo stays visible in the header (design
   ADE-26d-2, screen 42) — nav links, utility CTAs and the search icon itself all hide;
   Close (inside the panel) is the only way back. visibility, not display, so .mw-header__col
   keeps its layout space and the logo doesn't jump/re-centre when it disappears. */
.mw-header.is-search-open .mw-header__col {
  visibility: hidden;
}

/* .mw-header__toggle (the hamburger) sits outside .mw-header__col in the markup, so the
   is-search-open rule above never reached it — it stayed visible and, once the hamburger
   breakpoint above was raised from 992px to 1300px, started colliding with the search
   overlay's own Close control in the same top-right corner (confirmed live at 1024x768:
   Close's "X" painted through the toggle's three bars). Same visibility approach, so it
   disappears along with the rest of the header exactly as the design calls for. */
.mw-header.is-search-open .mw-header__toggle {
  visibility: hidden;
}

/* The overlay below starts at top:0/height:440px (i.e. it overlaps the header's own row, not
   just the space below it) — a plain static element always paints BEHIND any positioned
   sibling in the same containing block regardless of z-index number (the header's own
   z-index:100 only governs its stacking against the rest of the page, not its own children),
   so without this the white panel would paint straight over the logo too. Promoting the brand
   link to its own stacking position above the overlay's z-index:90 is what keeps it showing
   through on top. */
.mw-header__brand {
  position: relative;
  z-index: 91;
}

/* mw-core.css's mobile nav dropdown (.mw-header__navbar) is positioned but carries no
   z-index of its own (z-index:auto) — it used to paint above the logo simply because the
   logo was static (any positioned element beats static content, regardless of z-index
   value). Promoting the logo to z-index:91 above fixed the search overlay, but as a side
   effect ALSO put the logo above this dropdown wherever the two overlap on mobile (bug:
   logo visible through the open nav list). Giving the dropdown its own z-index higher than
   both the logo and the search overlay (90) restores it as the topmost thing in the header
   whenever it's open. */
@media (max-width: 1299.98px) {
  .mw-header__navbar {
    z-index: 95;
  }
}

/* Follow-on to the z-index:95 fix above: .mw-header__toggle is the same "positioned beats
   static" loser .mw-header__brand was — z-index:auto, no position of its own (mw-core.css).
   Promoting the dropdown to 95 fixed the logo bleed-through but also buried the hamburger
   button itself under the now-topmost open panel, so once the mobile menu was open there was
   no visible or clickable way to close it again (confirmed live: elementFromPoint over the
   toggle's own coordinates hit the dropdown panel, not the button). Same fix, one level up. */
@media (max-width: 1299.98px) {
  .mw-header__toggle {
    position: relative;
    z-index: 96;
  }
}

.mw-search-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 440px;
  background: var(--mw-color-white);
  box-shadow: var(--mw-shadow);
  transform: translateY(-100%);
  transition: transform var(--mw-transition, 250ms ease);
  z-index: 90;
}

.mw-search-overlay.is-open {
  transform: translateY(0);
}

.mw-search-overlay__inner {
  position: relative;
  height: 100%;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.mw-search-overlay__close {
  position: absolute;
  top: 20px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  color: #000000;
  font-family: var(--mw-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 26px;
  cursor: pointer;
}

.mw-search-overlay__close svg {
  width: 13px;
  height: 13px;
}

.mw-search-overlay__form {
  width: 864px;
  max-width: 100%;
  margin-inline: auto;
}

.mw-search-overlay__label {
  display: block;
  margin-bottom: 20px;
  color: var(--mw-color-muted);
  font-family: var(--mw-font-sans);
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
}

.mw-search-overlay__field {
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid var(--mw-color-grey);
}

.mw-search-overlay__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 12px 0;
  font-family: var(--mw-font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--mw-color-black);
}

.mw-search-overlay__input:focus {
  outline: none;
}

/* Typed text (the input rule above) and the placeholder both carry the same font — repeated
   explicitly here rather than left to inherit, since browsers don't apply a placeholder's
   font/size/weight/line-height from the input by default in every engine. */
.mw-search-overlay__input::placeholder {
  color: var(--mw-color-black);
  font-family: var(--mw-font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.mw-search-overlay__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: 16px;
  border: 0;
  border-radius: 6px;
  background: #7A2840;
  color: var(--mw-color-white);
  cursor: pointer;
}

.mw-search-overlay__submit svg {
  width: 18px;
  height: 18px;
}

/* .mw-search-overlay__form's 850px base width (above) is a desktop-only spec — narrowed at
   the same breakpoints the rest of this file already uses for tablet/mobile. */
@media (max-width: 991.98px) {
  .mw-search-overlay__form {
    width: 600px;
  }
}

@media (max-width: 575.98px) {
  .mw-search-overlay__inner {
    padding: 40px 16px 40px;
  }

  .mw-search-overlay__form {
    width: 100%;
  }

  .mw-search-overlay__input {
    font-size: 18px;
  }
}

.mw-hero .mw-hero__slide {
  align-items: stretch;
}

/* Mobile only: the desktop/tablet split below (70% text / 30% media, side by side) gets
   cramped at phone widths — stack text+pagination on top, full-width media underneath,
   instead of squeezing the 70/30 split into a narrow viewport. */
@media (max-width: 991.98px) {
  /* Shrinks the pagination's top offset only — .mw-hero__content's margin-top below is
     the SAME calc() formula as desktop (untouched, unconditional, further down this file),
     so it recomputes its clearance from this value automatically instead of us guessing
     a fixed px number that has to be re-verified by hand whenever pagination size changes. */
  :root {
    --mw-hero-pagination-top: 16px;
  }

  section.mw-hero .mw-hero__slide {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
  }

  section.mw-hero .mw-hero__content {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 24px;
  }

  section.mw-hero .mw-hero__media {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 575.98px) {
  /* Mobile hero pagination drops the brand-logo pills for the same plain-dash look as the
     Case Studies slider (.mw-slider__dot) — design ADE-26d. Stays left-aligned: .mw-hero__pagination's
     absolute `left` inset (above) is untouched, only the row's own gap/padding shrinks. */
  section.mw-hero .mw-hero__pagination {
    gap: 8px;
    padding: 40px 0;
  }

  section.mw-hero .mw-hero__page {
    height: 4px;
    width: 24px;
    padding: 0;
    border-radius: 2px;
    /* Active stays the base white (unchanged); only the inactive state is overridden below. */
  }

  section.mw-hero .mw-hero__page-icon {
    display: none;
  }

  section.mw-hero .mw-hero__page:not(.is-active) {
    background: rgba(255, 255, 255, 0.4);
  }
}

.mw-hero .mw-hero__heading {
  font-family: inherit;
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  color: var(--mw-color-black);
}

.mw-hero__sub {
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  color: var(--mw-color-black);
}

.mw-btn.mw-hero__cta {
  background: var(--mw-color-black);
  color: var(--mw-color-white);
  border-radius: 24px;
  height: 48px;
}

/* The richtext "Button" style (App_Plugins/Ade/umbraco-package.json) applies mw-btn
   mw-btn--primary to a selected link — scoped to .mw-richtext so it can't collide with
   the hero CTA or header buttons above, which already carry their own button treatment. */
.mw-richtext a.mw-btn.mw-btn--primary {
  /* .mw-btn--primary only sets --_bg to the wine/pink primary colour; .mw-btn itself reads
     that variable for its background. Overriding --_bg too (not just background) means no
     trace of the primary colour stays attached to this element for anything else to read. */
  --_bg: var(--mw-color-black);
  background: var(--mw-color-black);
  text-decoration: none;
  border-radius: 24px;
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  padding-top: 14px;
  padding-bottom: 14px;
  height: 48px;
  box-sizing: border-box;
}

/* The RTE's Style Menu applies the "Button" class to the SELECTED LINK's parent paragraph
   too, not just the <a> itself (a known Tiptap style-menu quirk — the class ends up on both
   <p class="mw-btn mw-btn--primary"> and the <a> inside it). We can't change what the editor
   serializes, so this neutralises the wrapper: strip its button look so only the <a> renders
   as a button, not a second wine-coloured box around it. */
.mw-richtext p.mw-btn.mw-btn--primary {
  --_bg: transparent;
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Richtext "Font size" Style Menu options (App_Plugins/Ade/umbraco-package.json) — each
   mw-fs-N class is a plain font-size utility applied by the editor's Styles dropdown.
   Selector has no tag qualifier because, per the Tiptap style-menu quirk noted above, the
   class can land on the wrapping block or an inline element depending on the selection. */
.mw-richtext .mw-fs-8 { font-size: 8px; }
.mw-richtext .mw-fs-12 { font-size: 12px; }
.mw-richtext .mw-fs-14 { font-size: 14px; }
.mw-richtext .mw-fs-16 { font-size: 16px; }
.mw-richtext .mw-fs-18 { font-size: 18px; }
.mw-richtext .mw-fs-20 { font-size: 20px; }
.mw-richtext .mw-fs-22 { font-size: 22px; }
.mw-richtext .mw-fs-24 { font-size: 24px; }
.mw-richtext .mw-fs-26 { font-size: 26px; }
.mw-richtext .mw-fs-30 { font-size: 30px; }
.mw-richtext .mw-fs-32 { font-size: 32px; }
.mw-richtext .mw-fs-34 { font-size: 34px; }
.mw-richtext .mw-fs-36 { font-size: 36px; }
.mw-richtext .mw-fs-40 { font-size: 40px; }
.mw-richtext .mw-fs-42 { font-size: 42px; }
.mw-richtext .mw-fs-44 { font-size: 44px; }
.mw-richtext .mw-fs-50 { font-size: 50px; }

/* Footer selectors below are qualified with the footer.mw-footer ancestor for extra
   specificity — a holdover from when this rule lived in mw-theme.css (which loaded before
   mw-core.css and needed the boost to win the cascade tie). Harmless now that this file
   loads after mw-core.css anyway, so left as-is rather than restripped for no behaviour
   change. */
footer.mw-footer {
  background: var(--mw-color-black);
}

footer.mw-footer .mw-footer__social {
  margin-top: auto;
}

/* The card is a separate element from this width/centering container specifically so it
   never shares a class with .mw-footer__inner (whose own padding-inline rule was
   winning the cascade tie and clobbering the card's left/right padding below). Novel
   class, no core-CSS rule of the same name exists, so no specificity qualifier needed. */
.mw-footer__newsletter-container {
  width: 100%;
  max-width: var(--mw-container-max);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Mobile-first: stacked and lightly padded so the 80px/230px desktop spec doesn't
   swallow the content on narrow screens. Row layout + full padding only kick in once
   there's room for it. */
.mw-footer__newsletter-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  background: #1C1C1C;
  border-radius: 20px;
  padding: 32px 24px;
}

/* Same straddle effect as the ≥992px breakpoint below (card overlaps into the black
   footer) — footer.mw-footer .mw-footer__inner's padding-top adds the same 80px back
   plus an 83px gap, keeping the actual footer content (Brand/Quick Links/Company)
   landing 83px under the card's bottom edge, same as desktop.
   The TOP side overlaps the same way (card sits on top of whatever precedes it, same as
   the footer) — --mw-footer-newsletter-overlap exists so the script in _Footer.cshtml can
   read the same number and pad the inside of that item by that much, so its own content
   shifts clear of the covered zone instead of the section just not overlapping at all. */
.mw-footer__newsletter {
  position: relative;
  z-index: 1;
  --mw-footer-newsletter-overlap: 80px;
  /* Percentage, not a fixed px — margin percentages resolve against the containing block's
     WIDTH, not height, even for margin-top/-bottom (CSS spec behaviour for block-level boxes,
     not a typo). Re-declared per breakpoint below anyway, same as margin-bottom already was,
     so it's visible under each @media block rather than only inherited from here. */
  margin-top: -7%;
  margin-bottom: -80px;
}

/* Newsletter-flush class (design: sitewide) — applied by _Footer.cshtml's script to whatever
   section sits directly above the newsletter card, so the card always has enough padding to
   overlap into cleanly regardless of that section's own height. Fixed rem, not tied to
   --mw-footer-newsletter-overlap — deliberately larger than the card's -5% pull-up so the
   overlap always has room to work with. !important because the block-grid "space below" editor
   setting renders as an inline style on the section, which otherwise always beats an external
   stylesheet rule regardless of class specificity — same reasoning as .right-align
   .mw-container__inner[style*="background"] below. */
.newsletter-section {
  padding-bottom: 10rem !important;
}

/* Organisation profile pages (.mw-org) have very little content above the newsletter card —
   logo, name, one meta line — so the shared 10rem still reads as the card sitting on top of
   it. Scoped to pages whose newsletter-section wrapper contains .mw-org only, so the
   already-confirmed article/event/home spacing at 10rem is untouched. */
.newsletter-section:has(.mw-org) {
  padding-bottom: 14rem !important;
}

/* Opt-in: type "no-top-space" into a block's CSS Class field to cancel the page's standard
   64px .mw-section top padding. The padding lives on .mw-section (the page-template wrapper
   above the block grid, mwContentPage.cshtml), not on the block itself, so a plain class on
   the block can't reach it directly — :has() reaches outward from whichever block carries the
   class to the wrapper that actually owns the padding. !important for the same reason as
   .newsletter-section above: block-grid spacing settings render as inline styles, which beat
   an external rule on class specificity alone. */
.mw-section:has(.no-top-space),
.mw-section:has(.no-padding) {
  padding-top: 0 !important;
}

/* Opt-in: type "no-bottom-space" into a block's CSS Class field to cancel the page's standard
   .mw-section bottom padding — the other half of the same mw-core.css rule .no-top-space
   targets (.mw-section{padding-block:...} sets top and bottom to the same 48–64px value). Same
   :has()-reaches-outward technique and !important justification as .no-top-space above. */
.mw-section:has(.no-bottom-space) {
  padding-bottom: 0 !important;
}

/* Opt-in: type "no-space-top" / "no-space-bottom" / "no-space" into a block's CSS Class field to
   zero that block's OWN top/bottom margin and padding directly. Unlike no-top-space/
   no-bottom-space above — which reach outward to the page-template .mw-section wrapper, a
   once-per-page element (confirmed: mwContentPage.cshtml's single <div class="mw-section">
   around the whole body grid) — these target the block's own box, for a gap sitting between two
   blocks mid-page rather than at the top/bottom of the page. !important for the same
   block-grid-inline-style reason as every other utility here. */
.no-space-top {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.no-space-bottom {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.no-space {
  margin-block: 0 !important;
  padding-block: 0 !important;
}

/* .ade-login (Login page variant, above) supplies its own top spacing via
   .ade-login .mw-container__inner, so the wrapper's standard 64px top padding is dead space
   here — zeroed the same :has()-reaches-outward way as .no-top-space just above. The footer
   newsletter card is NOT hidden on this page (confirmed live — no rule anywhere hides
   .mw-footer__newsletter for .ade-login), so padding-bottom must NOT be zeroed here: doing so
   used to strip the same 10rem .newsletter-section reserves everywhere else for that card's
   overlap, leaving the section's own background too short to reach the overlap zone — a
   visible pale gap cutting across the middle of the (still-rendered) black card. */
.mw-section:has(.ade-login) {
  padding-top: 0 !important;
}

/* News/Events/Org-directory listing pages: client asked for the gap above the filter row
   removed on all three. Same :has()-reaches-outward technique as .no-top-space above — each
   class is that listing block's own wrapper, nested well below .mw-section, so this reaches out
   to the page-template wrapper that actually owns the 64px top padding. !important for the same
   reason as the rules above: block-grid spacing settings render as inline styles. */
.mw-section:has(.mw-news-list),
.mw-section:has(.mw-events-list),
.mw-section:has(.mw-org-directory) {
  padding-top: 0 !important;
}

/* Opt-in extra spacing: type "section-padding-top-50" / "section-padding-bottom-50" /
   "section-padding-50" (also 10/20/30/40/60/70/80/100) into a block's CSS Class field to add that much
   padding above, below, or on both sides of the block. Unlike .no-top-space above, these land
   directly on the class the field applies to the block's own wrapper — no :has()-reaching-outward
   needed, since the target here is the block itself, not an ancestor. !important for the same
   reason as every other CSS-Class-field utility in this file: the block-grid editor's own
   "Space below" setting renders as an inline style, which otherwise always wins over an external
   rule regardless of class specificity. */
.section-padding-top-10 { padding-top: 10px !important; }
.section-padding-top-20 { padding-top: 20px !important; }
.section-padding-top-30 { padding-top: 30px !important; }
.section-padding-top-40 { padding-top: 40px !important; }
.section-padding-top-50 { padding-top: 50px !important; }
.section-padding-top-60 { padding-top: 60px !important; }
.section-padding-top-70 { padding-top: 70px !important; }
.section-padding-top-80 { padding-top: 80px !important; }
.section-padding-top-100 { padding-top: 100px !important; }

.section-padding-bottom-10 { padding-bottom: 10px !important; }
.section-padding-bottom-20 { padding-bottom: 20px !important; }
.section-padding-bottom-30 { padding-bottom: 30px !important; }
.section-padding-bottom-40 { padding-bottom: 40px !important; }
.section-padding-bottom-50 { padding-bottom: 50px !important; }
.section-padding-bottom-60 { padding-bottom: 60px !important; }
.section-padding-bottom-70 { padding-bottom: 70px !important; }
.section-padding-bottom-80 { padding-bottom: 80px !important; }
.section-padding-bottom-100 { padding-bottom: 100px !important; }

.section-padding-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.section-padding-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.section-padding-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.section-padding-40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.section-padding-50 { padding-top: 50px !important; padding-bottom: 50px !important; }
.section-padding-60 { padding-top: 60px !important; padding-bottom: 60px !important; }
.section-padding-70 { padding-top: 70px !important; padding-bottom: 70px !important; }
.section-padding-80 { padding-top: 80px !important; padding-bottom: 80px !important; }
.section-padding-100 { padding-top: 100px !important; padding-bottom: 100px !important; }

/* mwRichText's "memberHubDashboard" variant — member-hub welcome panel (design ADE-26d-2,
   screen 19, "Desktop Homepage banners - 40", Rectangle 4410).
   Originally a title + "Membership Information" dropdown button side by side, with the fields
   it disclosed (organisation/tier/position/email/active). Simplified (2026-09-11) by client
   request to show only the welcome message — the dropdown, its toggle button and the fields
   list are gone; see mwRichText--memberHubDashboard.cshtml's own header for what changed.
   The parent container (.mw-container--fixed[style*=background]) contributes 32px (2rem / --mw-space-6)
   block padding on top and bottom.
   Accounting for this, .mw-member-welcome applies (desktop only, per the sizing below):
   - padding-top: 47px (79px - 32px = 47px)
   - padding-bottom: 47px (client request 2026-09-11 — uniform top/bottom, was 40px)
   - min-height: 126px (kept from the original spec; the uniform padding change adds ~7px
     to the panel's real rendered height, not accounted for in this figure)
   The title itself no longer wraps onto two lines (max-width:800px removed, white-space:nowrap
   added, 2026-09-11) — that cap was sized for the old title+button row sharing the line and
   started wrapping "Oche Francis" onto its own line once the button was removed and the full
   welcome message became the only content on it. */
/* Zero out the container-block wrapper's 24px inline padding for the member-hub welcome panel,
   allowing it to align flush with the 1345px grid (matching the action cards below). Also covers
   .mw-member-section-welcome — the same panel treatment rendered by every OTHER member-area
   sub-page (memberForums, memberConsultations, memberMembershipDocuments,
   memberMailingSubscriptions; all one shared partial, _AdeCurrentMember.cshtml) — which never
   got this rule originally, so only the Member Hub dashboard itself sat flush while its siblings
   kept the 24px gap either side. Change Password isn't part of this: its panel is
   .mw-login--panel, a different container variant that was already flush on its own. */
.mw-container__inner:has(.mw-member-welcome),
.mw-container__inner:has(.mw-member-section-welcome) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline: 0 !important;
}

/* Background matches the site's page-head band exactly (colour + pagehead-pattern-mauve.svg,
   masked to fade in from the right) — same recipe as .mw-pagehead and the Team photo cards,
   per client request (2026-09-11), replacing whatever this panel's background was before. */
.mw-member-welcome {
  display: block;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--mw-color-pagehead-bg);
}

.mw-member-welcome::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 35%;
  background-image: url('/brand/pagehead-pattern-mauve.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}

/* Keeps the text lined up with the normal fixed-content column even when the wrapping block is
   set to Wide (full-bleed, .mw-container__inner going edge-to-edge — confirmed live: max-width
   comes out "none" there) while .mw-member-welcome itself (the background/pattern) stays 100%
   wide. Same proven pattern as .mw-hero__content's own left inset above, rather than the
   width/margin-inline:auto approach tried first, which didn't visibly indent anything. */
.mw-member-welcome__title {
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--mw-color-black);
  margin: 0;
  line-height: 1.2;
  padding-left: max(24px, calc(50% - (var(--mw-container-max) / 2) + 24px));
}

.mw-member-welcome__name {
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .mw-member-welcome {
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: auto;
  }

  .mw-member-welcome__title {
    font-size: 24px;
    line-height: 1.25;
    margin: 0;
  }
}

@media (min-width: 992px) {
  .mw-member-welcome {
    min-height: 126px;
    padding-top: 47px;
    padding-bottom: 47px;
  }

  .mw-member-welcome__title {
    font-size: 32px;
    line-height: 39px;
    margin: 0;
    /* No max-width — the old 800px cap was wrapping "Oche Francis" onto its own line; the
       client asked for the full message to stay on one line instead. */
    white-space: nowrap;
  }
}

/* mwRichText's "member{Section}" variants (memberForums, memberGroups, memberBriefings,
   memberConsultations, memberMembershipDocuments, memberMailingSubscriptions) — Member Hub
   sub-page welcome + "My {Section}" panel, all sharing this one set of classes (design: matches
   the "Change Your Password" page's own heading/panel treatment). */
.mw-member-section-welcome__title {
  font-family: inherit;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--mw-color-black);
  margin: 0 0 40px;
}

.mw-member-section-welcome__name {
  font-weight: 700;
}

.mw-member-section__heading {
  font-size: 25px;
  font-weight: 700;
  color: var(--mw-color-black);
  margin: 0 0 20px;
}

.mw-member-section__empty {
  margin: 0;
  padding: 20px;
  background: #F5F5F5;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  color: var(--mw-color-muted);
  font-size: 15px;
}

/* This padding-top exists purely to compensate for .mw-footer__newsletter straddling into the
   footer from above (see that rule's own comment) — scoped with :has() rather than left
   unconditional so it self-disables along with the rest of the newsletter card's spacing
   while _Footer.cshtml has it commented out (client request, 2026-09-16), instead of leaving
   a 163px blank gap at the top of every footer. */
footer.mw-footer:has(.mw-footer__newsletter) .mw-footer__inner {
  padding-top: 163px;
}

/* mwContentListBlock's "hubActions" variant — member-hub notification banner + action cards. */
.mw-hub-actions {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* .mw-container__inner is the shared container-block wrapper (every "Container"/"Two Column"
   block uses it) — its own 24px inline padding can't be edited directly without narrowing
   every other section on the site, so this only zeroes it out when it's wrapping THIS variant,
   letting the notification banner/cards run the full 1345px width instead of 1297px. True
   desktop only (≥1300px) — 992px let tablet-class devices like a 1024px iPad through as
   "desktop" and go full-bleed, when they should still get the gutter like the rest of tablet
   and mobile do. */
@media (min-width: 1300px) {
  .mw-container__inner:has(> .mw-col > .mw-hub-actions:not(.mw-hub-actions--sidebar)) {
    padding-inline: 0;
  }
}

/* Announcement-style boxed banners (design ADE-26d-2, "Desktop Homepage banners"): type
   "star-top-right" into the block's CSS Class field (Advanced tab) to shrink whatever's picked
   in its native Background image field down to a small top-right badge instead of the default
   full-bleed "cover". !important is required — the picker's image/size/position render as an
   inline style on .mw-container__inner, which always beats an external rule without it (same
   reasoning as .newsletter-section and .right-align above). */
.star-top-right .mw-container__inner[style*="background"] {
  background-size: 24px 22.66px !important;
  background-position: top 24px right 24px !important;
  background-repeat: no-repeat !important;
}

/* Type "bg-grey-band" into a block's CSS classes field for a flat #EEEEEE section background
   (--mw-color-grey-band) — for block types like One Column whose own Advanced tab has no
   Background colour swatch picker (only Two Column does). Painted on the class itself (the
   outer .mw-container the field adds it to), not .mw-container__inner — the outer element is
   what bleeds full-bleed edge to edge; the inner one is just the 1345px-capped content column,
   same split .join-us relies on elsewhere in this file. !important covers a Background image
   also being set on the same block, which renders as an inline style and would otherwise win. */
.bg-grey-band {
  background-color: var(--mw-color-grey-band) !important;
}

/* Type "section-gap-60" into a block's CSS classes field for a flat 60px top/bottom margin
   where a fixed size is wanted instead of a percentage one. !important so it wins regardless
   of which other margin rule is declared later in the file. */
.section-gap-60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.mw-hub-notification {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 94px;
  padding: 24px 20px;
  background: #D799B3;
  border-radius: 12px;
  box-sizing: border-box;
}

.mw-hub-notification__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #7A2840;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mw-hub-notification__text {
  flex: 1 1 auto;
  font-size: 16px;
  color: var(--mw-color-black);
  margin: 0;
}

.mw-hub-notification__button {
  flex: 0 0 100px;
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--mw-color-black);
  color: var(--mw-color-white);
  font-weight: 700;
  text-decoration: none;
}

.mw-hub-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mw-hub-cards__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 16px;
  background: #F5F5F5;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  text-decoration: none;
  box-sizing: border-box;
}

.mw-hub-cards__icon {
  flex: 0 0 auto;
}

.mw-hub-cards__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--mw-color-black);
}

@media (max-width: 767px) {
  .mw-hub-notification {
    height: auto;
    flex-wrap: wrap;
  }

  .mw-hub-notification__text {
    flex-basis: 100%;
    order: 1;
  }

  .mw-hub-notification__button {
    order: 2;
    margin-left: auto;
  }

  .mw-hub-cards {
    grid-template-columns: 1fr;
  }
}

/* "hubActionsSidebar" variant — same .mw-hub-cards/.mw-hub-notification building blocks as
   hubActions above, rearranged for a narrow sidebar column (design: Member hub sidebar,
   ADE-26d-2 screen 16 & screen 35): cards single-column instead of the 3-across grid, notification card
   stacked (icon/text/button top-to-bottom) instead of hubActions' horizontal banner.
   Housed in a white card with 20px padding and 12px border-radius (Rectangle 3 in XD spec). */
.mw-hub-actions--sidebar {
  background: #FFFFFF !important;
  border-radius: 12px;
  padding: 20px !important;
  box-sizing: border-box;
}

.mw-page-cols__aside .mw-container__inner:has(.mw-hub-actions--sidebar) {
  padding: 0 !important;
}

.mw-hub-cards--stacked {
  grid-template-columns: 1fr;
  row-gap: 20px;
  margin-top: 0;
}

/* Cards default to white in the sidebar (hubActions' original full-width cards keep their own
   grey #F5F5F5 — this only touches the stacked sidebar variant); the current page's card gets
   that same grey to read as "active" against its white siblings. */
.mw-hub-cards--stacked .mw-hub-cards__item {
  background: var(--mw-color-white);
}

.mw-hub-cards--stacked .mw-hub-cards__item.is-active {
  background: #F5F5F5;
}

.mw-hub-notification--stacked {
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  margin-top: 20px;
}

.mw-hub-notification--stacked .mw-hub-notification__button {
  /* Base .mw-hub-notification__button's flex: 0 0 100px sizes WIDTH in the horizontal banner
     layout, but flex-basis maps to HEIGHT once flex-direction is column (this modifier) — left
     as-is it turns the 100x100 box with border-radius:999px into a circle instead of a pill. */
  flex: 0 0 auto;
  width: auto;
  height: auto;
  padding: 12px 24px;
  margin-top: 4px;
}

.mw-footer__newsletter-heading {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--mw-color-white);
}

.mw-footer__newsletter-form {
  display: flex;
  width: 100%;
}

.mw-footer__newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--mw-color-grey-light);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 12px 16px;
  font-size: 16px;
  font-family: inherit;
  background: var(--mw-color-white);
}

.mw-footer__newsletter-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  border: none;
  border-radius: 0 8px 8px 0;
  background: var(--mw-color-newsletter-submit);
  color: var(--mw-color-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 576px) {
  .mw-footer__newsletter-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 48px 40px;
  }

  .mw-footer__newsletter-form {
    width: auto;
    flex: 1 1 320px;
    max-width: 380px;
  }

  /* Scaled straddle — see the base breakpoint's comment above. padding-top below
     restores the same 83px gap to the footer's actual content. */
  .mw-footer__newsletter {
    --mw-footer-newsletter-overlap: 50px;
    margin-top: -7%;
    margin-bottom: -50px;
  }

  footer.mw-footer:has(.mw-footer__newsletter) .mw-footer__inner {
    padding-top: 133px;
  }

  .mw-footer__newsletter-heading {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (min-width: 992px) {
  .mw-footer__newsletter-card {
    padding: 80px 230px;
  }

  .mw-footer__newsletter-heading {
    font-size: 32px;
    line-height: 42px;
  }

  /* Pulls the black footer up 80px so it starts partway up the card — the design's
     straddle effect — while footer.mw-footer .mw-footer__inner's padding-top below adds
     that same 80px back plus the 83px gap, so the actual content row (Brand/Quick
     Links/Company) still lands exactly 83px under the card's bottom edge. Top overlaps
     the same way — must be re-declared here (not just left at the base value) because
     the ≥576px block already overrode --mw-footer-newsletter-overlap/margin-top to 50px,
     and custom properties follow normal cascade rules same as any other declaration. */
  .mw-footer__newsletter {
    --mw-footer-newsletter-overlap: 80px;
    margin-top: -7%;
    margin-bottom: -80px;
  }

  footer.mw-footer:has(.mw-footer__newsletter) .mw-footer__inner {
    padding-top: 163px;
  }
}

footer.mw-footer img.mw-footer__logo {
  height: 64px;
  width: auto;
}

footer.mw-footer .mw-footer__legal {
  font-size: 12px;
}

footer.mw-footer .mw-footer__legal-wrap {
  flex: 0 0 600px;
  min-width: 0;
}

/* margin-left: auto pins this to the far right even when it drops onto its own flex
   line below the (much longer) legal text — justify-content: space-between only
   applies when a line has more than one item to space out. */
footer.mw-footer .mw-footer__by-wrap {
  flex: 0 0 auto;
  margin-left: auto;
}

/* The 600px fixed-width legal text box is a desktop-only spec — below that width it
   forces the row wider than the viewport, breaking the layout. Tablet keeps the row
   layout but with a narrower fixed box (400px); mobile stacks both pieces full-width
   instead, so the text just wraps normally. */
@media (min-width: 576px) and (max-width: 991.98px) {
  footer.mw-footer .mw-footer__legal-wrap {
    flex: 0 0 400px;
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  footer.mw-footer .mw-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  footer.mw-footer .mw-footer__legal-wrap {
    flex: 1 1 auto;
    width: 100%;
  }

  footer.mw-footer .mw-footer__by-wrap {
    margin-left: 0;
  }
}

footer.mw-footer .mw-footer__heading {
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

footer.mw-footer .mw-footer__col:not(.mw-footer__col--company) .mw-footer__link {
  font-size: 14px;
}

footer.mw-footer .mw-footer__col--company .mw-footer__links {
  font-size: 14px;
}

footer.mw-footer .mw-footer__company-email {
  margin-top: 40px;
}

/* Company is always the last item the view renders, so pinning it to the final grid
   track keeps it from sliding left when a nav group in between has no items — the
   gap where that group would sit is left blank instead of being closed up. Scoped to
   the 992px breakpoint where .mw-footer__grid actually has 4 explicit tracks; at
   tablet/mobile it collapses to 2/1 tracks and this would just add stray empty ones. */
@media (min-width: 992px) {
  footer.mw-footer .mw-footer__grid {
    grid-template-columns: 0.9fr 1.3fr 1.3fr 1fr;
  }

  footer.mw-footer .mw-footer__grid > :last-child {
    grid-column: 4;
  }

  /* Borders on both sides of the Quick Links block: left edge (child 2, right after the
     brand column) and right edge (the last child, Company) — not between the two Quick
     Links sub-columns themselves. The 70px gaps are measured from the Quick Links text
     to each border, not from Company's side of the right-hand one. */
  footer.mw-footer .mw-footer__grid > *:nth-child(2) {
    border-left: 1px solid var(--mw-color-footer-border);
    padding-left: 70px;
  }

  footer.mw-footer .mw-footer__grid > *:nth-last-child(2) {
    padding-right: 70px;
  }

  footer.mw-footer .mw-footer__grid > :last-child {
    border-left: 1px solid var(--mw-color-footer-border);
    padding-left: 32px;
  }

  /* Quick Links renders as one 6-item list in a single grid column; split it into
     2 columns of 3 so it reads top-to-bottom then wraps to the next column (items
     1-3 down the left column, 4-6 down the right), matching the two-separate-lists
     look this had when Quick Links was two nav groups. grid-auto-flow: column with
     an explicit row count does that fill order without any markup change. Track 3
     is otherwise unused spacer space (see the pinned-Company comment above), so the
     column claims it too via span 2 — the two sub-lists get enough width that
     multi-word links ("Governance & Values", "Why Join ADE") sit on one line
     instead of wrapping and cramping.
  */
  footer.mw-footer .mw-footer__col:not(.mw-footer__col--company) {
    grid-column: span 2;
  }

  footer.mw-footer .mw-footer__col:not(.mw-footer__col--company) .mw-footer__links {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 48px;
  }
}

.mw-hero .mw-hero__media {
  position: static;
  width: 30%;
  height: auto;
  align-self: stretch;
  z-index: auto;
  order: 2;
}

.mw-hero .mw-hero__overlay {
  display: none;
}

.mw-hero .mw-hero__content {
  width: 70%;
  max-width: none;
  margin-inline: 0;
  /* Matches the site container's left inset (24px, plus the centering margin the container
     gains once the viewport exceeds --mw-container-max) so the text lines up with content below.
     A left PADDING (not margin) keeps this box a stable 50% — a margin here made flexbox
     shrink both this box and the image to compensate, distorting the split unpredictably. */
  padding-left: max(24px, calc(50% - (var(--mw-container-max) / 2) + 24px));
  order: 1;
  /* Sits below the pagination row with a 24px gap — derived from the same variables that
     position the pagination (including its own vertical padding), so the two can never
     overlap if any of those sizes change. */
  margin-top: calc(var(--mw-hero-pagination-top) + var(--mw-hero-pagination-pad-y) * 2 + var(--mw-hero-pagination-height) + 24px);
  margin-bottom: 80px;
  /* mw-core.css sets this (and .mw-hero__heading/.mw-hero__sub) to white for the original
     dark hero backgrounds — no longer readable against the pastel hero-1/2/3 tones above. */
  color: var(--mw-color-black);
}

section.mw-hero {
  background: var(--mw-color-hero-1);
}

.mw-hero__slide:nth-child(2) {
  background: var(--mw-color-hero-2);
}

.mw-hero__slide:nth-child(3) {
  background: var(--mw-color-hero-3);
}

.mw-hero__pagination {
  position: absolute;
  /* Same left inset as .mw-hero__content (container centering margin + its 24px padding), so
     the pagination sits directly above the banner text instead of the section's bare edge. */
  left: max(24px, calc(50% - (var(--mw-container-max) / 2) + 24px));
  top: var(--mw-hero-pagination-top);
  z-index: 1;
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: var(--mw-hero-pagination-pad-y) 13px;
}

.mw-hero__page {
  width: 234px;
  height: var(--mw-hero-pagination-height);
  padding: 10px 20px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 12px;
  background: var(--mw-color-white);
  cursor: pointer;
}

.mw-hero__page-icon {
  position: relative;
  display: inline-flex;
  height: 41px;
}

.mw-hero__page-icon img {
  height: 41px;
  width: auto;
  display: block;
  transition: opacity var(--mw-transition);
}

/* Inactive pills recolour to a flat tint instead of the icon's own brand colours: mask-image
   keeps only the icon's silhouette, so background-color can paint an arbitrary flat colour
   through it (opacity/grayscale alone can't override an SVG's own hardcoded fill colours). */
.mw-hero__page-icon-mask {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--mw-transition);
  mask-image: var(--mw-icon-url);
  -webkit-mask-image: var(--mw-icon-url);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: left center;
  -webkit-mask-position: left center;
}

.mw-hero__page:not(.is-active) .mw-hero__page-icon img {
  opacity: 0;
}

.mw-hero__page:not(.is-active) .mw-hero__page-icon-mask {
  opacity: 1;
}

/* Tablet: the 234px desktop width (sized for the widest "ade Heat Networks" lockup) leaves the
   three pills overflowing a 768-991px viewport, so narrow the pill itself — the icon inside
   keeps its own natural width via .mw-hero__page-icon img, it just sits closer to the edges. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .mw-hero__page {
    width: 176px;
    padding: 10px 14px;
  }

  .mw-hero__pagination {
    gap: 12px;
  }
}

/* The inactive tint matches whichever slide is CURRENTLY showing (not each badge's own slide),
   so the pagination blends into the active banner rather than reading as a fixed grey state.
   Desktop/tablet only — mobile drops the icon pills for plain dashes (below), which use a
   flat translucent-white inactive state instead of per-slide tinting. */
@media (min-width: 576px) {
  .mw-hero__pagination:has(.mw-hero__page:nth-child(1).is-active) .mw-hero__page:not(.is-active) {
    background: var(--mw-color-hero-1-dark);
  }
  .mw-hero__pagination:has(.mw-hero__page:nth-child(1).is-active) .mw-hero__page:not(.is-active) .mw-hero__page-icon-mask {
    background-color: var(--mw-color-hero-1);
  }

  .mw-hero__pagination:has(.mw-hero__page:nth-child(2).is-active) .mw-hero__page:not(.is-active) {
    background: var(--mw-color-hero-2-dark);
  }
  .mw-hero__pagination:has(.mw-hero__page:nth-child(2).is-active) .mw-hero__page:not(.is-active) .mw-hero__page-icon-mask {
    background-color: var(--mw-color-hero-2);
  }

  .mw-hero__pagination:has(.mw-hero__page:nth-child(3).is-active) .mw-hero__page:not(.is-active) {
    background: var(--mw-color-hero-3-dark);
  }
  .mw-hero__pagination:has(.mw-hero__page:nth-child(3).is-active) .mw-hero__page:not(.is-active) .mw-hero__page-icon-mask {
    background-color: var(--mw-color-hero-3);
  }
}

/* #awards — a generic MemberWeb 2-column container block, styled by ID so this never
   leaks onto any other instance of that same block elsewhere on the site: only applies
   if #awards is actually present. Background sits on the shared grid box (not just
   col1) so col2's image — which fills its cell edge to edge below — is what defines
   the right-hand colour, not a second background fighting it underneath. */
#awards {
  margin-top: 0;
  margin-bottom: 0;
}

#awards .mw-container__inner {
  align-items: stretch;
  background-color: var(--mw-color-gold);
}

#awards .mw-col[data-area="col1"] {
  display: flex;
  align-items: center;
}

/* Matches .mw-hero__content's own left-inset formula (container-centering margin once
   the viewport exceeds --mw-container-max, plus the 24px gutter) instead of a flat
   padding-inline — a fixed value drifts out of alignment with the rest of the page's
   content on wide screens, which is why this wasn't reading as "contained" like the
   design: the design's text lines up with the container column below it (e.g. "Association
   news"), not just with this section's own edge.
   Uses 100vw, not a %, because .mw-richtext's containing block here is the half-width
   grid column (col1), not the full section — a % would resolve against that half-width
   box and undershoot on wide screens, same failure mode as the first attempt at this. */
#awards .mw-richtext {
  padding-block: var(--mw-space-6);
  padding-left: max(24px, calc((100vw - var(--mw-container-max)) / 2 + 24px));
  padding-right: 24px;
}

#awards .mw-richtext h2 {
  font-size: 32px;
  line-height: 42px;
}

#awards .mw-col[data-area="col2"] {
  height: 100%;
}

/* 40px gap between the intro copy and the "Watch our introduction video" button. Targets the
   button's own wrapping <p> (the RTE always wraps a Button-styled link in one) rather than the
   editor's empty spacer paragraph before it — margins collapse through that empty paragraph,
   so this alone sets the full visible gap regardless of how many spacer paragraphs precede it. */
#awards .mw-richtext p:has(> a.mw-btn) {
  margin-top: 40px;
}

#awards .mw-image {
  height: 100%;
}

#awards .mw-image img {
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.mw-related-list--alt .mw-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px;
  align-items: start;
}

.mw-related-list--alt .mw-card-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Association news (alt layout) responsive: the featured-card + right-hand stack is a
   desktop-only arrangement (1fr:2fr squeezes both columns at narrower widths otherwise —
   caught on tablet, ADE-26d). Below 900px (tablet and mobile alike) the stack flattens with
   display:contents so its 3 compact cards become direct children of .mw-card-grid alongside
   the featured card, and the grid drops to a single column — all 4 cards read as one plain
   list, one per row. */
@media (max-width: 900px) {
  .mw-related-list--alt .mw-card-stack {
    display: contents;
  }

  .mw-related-list--alt .mw-card-grid {
    grid-template-columns: 1fr;
  }
}

.mw-related-list--alt .mw-card--compact {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  padding: 10px;
  /* Sitewide .mw-card reads mw-core.css's var(--mw-radius) (8px) for its own corners — this
     Association news section wants a bigger 12px throughout (outer card + thumbnail/hero
     images both), so it's overridden explicitly on every corner-radius'd piece here rather
     than just the images. */
  border-radius: 12px;
  /* Containing block for the title link's whole-card stretch overlay below. */
  position: relative;
}

.mw-related-list--alt .mw-card--compact .mw-card__media {
  flex: 0 0 140px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
}

.mw-related-list--alt .mw-card--compact .mw-card__body {
  flex: auto;
  /* Left/right brought down to 10px to match the sitewide .mw-card__body treatment below
     (was 39px). Top/bottom (10px, equal) are this variant's own compact vertical rhythm and
     untouched — same principle as News/Events keeping their own 32px top. */
  padding: 10px;
}

/* Association news (alt layout): compact card thumbnails sized 140x134 rather than the
   4:3 ratio set just above (base rule, moved here from mw-theme.css alongside it). */
.mw-related-list--alt .mw-card--compact .mw-card__media {
  aspect-ratio: 70 / 67; /* 140x134 */
}

/* Association news (alt layout): featured card's category badge sits top-right of the
   image instead of mw-core.css's default top-left. */
.mw-related-list--alt .mw-card--featured .mw-card__media-badge {
  left: auto;
  right: var(--mw-space-3);
}

.mw-related-list--alt .mw-badge {
  background: var(--mw-color-badge-alt);
}

/* Case Study Sector badge, coloured by which ADE programme the case study is filed under
   (adeCaseStudy's "Function" Categories group — ADE / ADE: Demand / ADE: Heat Networks;
   client request 2026-09-17, colours corrected 2026-09-17). Applied on both the Case Studies
   listing card (mwContentListBlock--caseStudies.cshtml) and the single case study page
   (adeCaseStudy.cshtml) — every case study Sector badge always carries exactly one of these
   three classes now (FunctionBadgeClass always returns one), so none of them fall through to
   mw-core.css's own --mw-color-secondary teal any more. Demand and Heat Networks reuse the
   sidebar nav-list's own per-section accent variables (client-specified) rather than new
   one-off values — Demand is the same teal already used for "ADE: Demand" section navLinks
   (--mw-color-navlist-active-blue), Heat Networks the same green as the navLinks default
   active pill (--mw-color-navlist-active). Plain "ADE" (or no Function category set) is
   #7A2840 (client request 2026-09-17, was --mw-color-pinkLight/#FFAFCC before a same-day
   correction) — the site's wine accent, used elsewhere as a literal rather than a variable
   (header CTA, active nav pill, pagination-current — see their rules above), so no new
   variable is introduced here either. Scoped to case studies only, not a sitewide badge-colour
   change, so every other content type's badge is unaffected. */
.mw-badge--ade-demand {
  background: var(--mw-color-navlist-active-blue);
}

.mw-badge--ade-heat-network {
  background: var(--mw-color-navlist-active);
}

.mw-badge--ade-default {
  background: #7A2840;
}

/* Association news (alt layout): the featured card gets the same 10px inset as the compact
   cards beside it (design: ADE-26c, Association news), plus its own "Featured" tag above the
   image — mw-core.css's .mw-card--featured has no built-in padding, so the image otherwise
   bleeds to the card edge unlike the compact cards' .mw-card--compact rule above. */
.mw-related-list--alt .mw-card--featured {
  padding: 10px;
  border-radius: 12px;
  /* Containing block for the title link's whole-card stretch overlay below. */
  position: relative;
}

.mw-related-list--alt .mw-card--featured .mw-card__media {
  height: 186px;
  aspect-ratio: auto;
  border-radius: 4px;
}

/* Featured card's body has no dedicated rule of its own, so it was inheriting the sitewide
   .mw-card__body padding (32px 10px 40px, below) — but .mw-card--featured also carries its
   own 10px outer inset (above, same as .mw-card--compact), so that 40px bottom was landing at
   50px to the card edge. Same correction as News/Events: bottom brought down to 30px so
   30 + 10 = 40px total. Left/right and top match the sitewide rule already (10px / 32px),
   restated here only for the bottom fix. */
.mw-related-list--alt .mw-card--featured .mw-card__body {
  padding: 32px 10px 30px;
}

.mw-related-list--alt .mw-card--featured .mw-tag-featured {
  margin-bottom: var(--mw-space-2);
}

/* Whole-card click target (both featured and compact): the title link grows an invisible
   overlay stretched over the entire card via its containing block (.mw-card--featured/
   --compact's own position:relative above), so clicking the image, date, excerpt or bare
   card padding navigates the same as clicking the title text. The image already carries its
   own decorative link to the same URL (tabindex="-1" aria-hidden="true" in the view) — this
   doesn't replace that, it just extends the REAL, accessible link's hit area over it. z-index
   keeps the overlay above that image link and the category badge, both in normal flow. */
.mw-related-list--alt .mw-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Association news (alt layout) on mobile (design: ADE-26d, mobile): "View all" moves below
   the card list instead of sitting beside the heading. display:contents on the header
   unwraps it so the heading, card grid and "View all" link become direct flex children of
   the section, orderable independently of their markup position. */
@media (max-width: 600px) {
  .mw-related-list--alt {
    display: flex;
    flex-direction: column;
  }

  .mw-related-list--alt .mw-news-list__header {
    display: contents;
  }

  .mw-related-list--alt .mw-news-list__header .mw-news-list__heading {
    order: 1;
  }

  .mw-related-list--alt .mw-card-grid {
    order: 2;
  }

  .mw-related-list--alt .mw-news-list__header .mw-slider__view-all {
    order: 3;
  }
}

/* Upcoming events (alt layout): a one-at-a-time slider (design: ADE-26c, Desktop Homepage
   banners, "Upcoming events"). The slide mechanics (scroll-snap track + dot sync + autoplay)
   come free from mw-core.js's generic [data-mw-hero] binding — see
   mwRelatedEventsBlock--relatedEventAlt.cshtml — so only presentation lives here. */

/* Same mobile "View all" repositioning as Association news above, applied to the events
   slider's own header/frame pair. */
@media (max-width: 600px) {
  .mw-events-slider {
    display: flex;
    flex-direction: column;
  }

  .mw-events-slider__header {
    display: contents;
  }

  .mw-events-slider__header .mw-news-list__heading {
    order: 1;
  }

  .mw-events-slider__frame {
    order: 2;
  }

  .mw-events-slider__header .mw-slider__view-all {
    order: 3;
  }
}

/* Shared by both alt-layout section headings ("Association news", "Upcoming events") plus
   the standalone News and Events listing pages' own headings (.mw-events-list__heading is
   the Events-listing equivalent of .mw-news-list__heading, added for mwEventListBlock.cshtml).
   .mw-event-list__heading (singular "event-list") is the "Related Events" band's own heading
   (mwRelatedEventsBlock, see .mw-event-list-section further down) — with no rule of its own it
   fell through to the theme's plain h2 default (42px/52px), visibly oversized next to every
   other section heading on the same page, so it's matched to the same 32px/42px here. */
.mw-news-list__heading,
.mw-events-list__heading,
.mw-event-list__heading {
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  margin-bottom: 45px;
}

/* Shared by every alt-layout section header ("Association news", "Upcoming events",
   "Case Studies", "Related Events") — heading left, "View all" CTA pinned right. */
.mw-news-list__header,
.mw-events-slider__header,
.mw-resources-slider__header,
.mw-event-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mw-space-4);
}

/* .mw-news-list__heading's own margin-bottom:45px (above) is sized for its original standalone
   use above a card grid — inside this flex header row it makes the heading's box taller than
   the "View all" button's, so align-items:center centers the wrong box and all the extra space
   collects below the text instead of the text sitting centered like the button does. Moving
   that 45px onto the row itself as padding (split above/below) keeps the row's original ~87px
   height intact — zeroing the margin alone shrank the whole row down to the heading's own
   42px line-height, losing the breathing room around the header, not just fixing the alignment. */
.mw-news-list__header {
  padding-top: 22.5px;
  padding-bottom: 40px;
}

/* Case Studies (relatedCaseStudies), Related Events alt (relatedEventAlt) and Related Events
   (relatedEvents, .mw-event-list__header) — uniform 22px top and bottom, per client request
   (2026-09-11), rather than the 22.5px/40px split above that the News listing header still
   uses. */
.mw-resources-slider__header,
.mw-events-slider__header,
.mw-event-list__header {
  padding-top: 22px;
  padding-bottom: 22px;
}

.mw-resources-slider__header .mw-news-list__heading,
.mw-events-slider__header .mw-news-list__heading,
.mw-news-list__header .mw-news-list__heading,
.mw-event-list__header .mw-news-list__heading,
.mw-event-list__header .mw-event-list__heading {
  margin-bottom: 0;
}

/* The site's "black button" family — every .mw-btn whose background is swapped to
   var(--mw-color-black) instead of mw-core.css's default wine/accent, found by searching this
   whole file for that value rather than trusting a partial list: this "View all" pill, the
   hero CTA (.mw-hero__cta), the richtext editor's "Button" style (.mw-richtext a.mw-btn.mw-btn
   --primary — e.g. homepage's "Watch our introduction video"), News/Events/Org Directory
   Filter Results, the grey-column block CTA, the UForm Kit submit, the event booking card's
   Register button, both login form submits (.mw-login--card/--panel .mw-login__submit), and
   the org detail page's "View on map" (.ade-org__map-btn). Fixed at 48px tall sitewide so every
   black button reads as one consistent control regardless of which block renders it —
   deliberately NOT applied to the header's own "Become a Member"/"Member's Hub" pills
   (.mw-header__cta--become/--hub above) or .mw-hub-notification__button (a small 100×40
   in-list action chip in the Member's Hub, a different, unrelated button family from both). */
.mw-slider__view-all {
  --_bg: var(--mw-color-black);
  border-radius: var(--mw-radius-pill);
  flex-shrink: 0;
  height: 48px;
}

.mw-events-slider__track {
  display: flex;
  overflow-x: auto;
  /* overflow-x:auto forces the browser to compute overflow-y as auto too (a card with only
     one axis scrollable can't stay "visible" on the other) — with zero padding that silently
     clips any card's box-shadow top/bottom instead of letting it render. This block-axis
     padding is sized for --mw-shadow (0 4px 14px), the larger of the two shadow tokens cards
     in these sliders use, so nothing this pattern hosts (now or later) gets cut off. Same fix
     applied to .mw-resources-slider__track and .ade-people-list__slider-track below — all
     three share this exact horizontal-scroll-track shape. */
  padding-block: 16px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.mw-events-slider__slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--mw-space-6);
  padding: 10px;
  background: var(--mw-color-surface);
  border: 1px solid var(--mw-color-border);
  border-radius: 20px;
  /* Containing block for the title link's whole-card stretch overlay below. */
  position: relative;
  transition: transform var(--mw-transition), box-shadow var(--mw-transition);
}

/* This slide isn't a .mw-card, so it never picked up mw-core.css's sitewide card-hover lift —
   added here to match: same lift + the same scaled-down --mw-shadow token the other slider
   cards' hover now uses (not --mw-shadow-lg, which reads oversized on a card this size — see
   .mw-resources-slider__card:hover above). */
.mw-events-slider__slide:hover {
  transform: translateY(-4px);
  box-shadow: var(--mw-shadow);
}

.mw-events-slider__body {
  padding: 0 30px;
}

.mw-events-slider__title {
  margin: 0 0 52px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.mw-events-slider__title a {
  color: inherit;
  text-decoration: none;
}

/* Whole-card click target (same stretched-link technique as the Association news cards
   above): the title link grows an invisible overlay stretched over the entire slide via its
   containing block (.mw-events-slider__slide's own position:relative above), so clicking the
   image, meta, excerpt or bare card padding navigates the same as clicking the title text. The
   image already carries its own decorative link to the same URL (tabindex="-1"
   aria-hidden="true" in the view) — this doesn't replace that, it just extends the REAL,
   accessible link's hit area over it. */
.mw-events-slider__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mw-events-slider__meta,
.mw-events-slider__excerpt {
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;
}

.mw-events-slider__meta {
  margin: 0 0 var(--mw-space-4);
  color: var(--mw-color-muted);
}

.mw-events-slider__excerpt {
  margin: 0;
  color: var(--mw-color-text);
}

.mw-events-slider__media {
  display: block;
  /* Grid items default to a content-based automatic minimum size — a loaded photo's real
     intrinsic width can force the single mobile column (grid-template-columns: 1fr) wider
     than the viewport, bleeding the slide off the right edge. overflow:hidden alone doesn't
     zero that out reliably; min-width:0 does. */
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--mw-radius);
}

.mw-events-slider__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shared pagination dots — every alt-layout slider uses this same look. */
.mw-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--mw-space-2);
  margin-top: var(--mw-space-4);
}

.mw-slider__dot {
  width: 24px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--mw-color-secondary);
  cursor: pointer;
  transition: background var(--mw-transition), transform var(--mw-transition);
}

.mw-slider__dot.is-active {
  background: var(--mw-color-teal-dark);
  transform: scale(1.2);
}

@media (max-width: 720px) {
  .mw-events-slider__slide {
    grid-template-columns: 1fr;
  }
}

/* Case Studies (Related Resources alt layout): a paged slider, 3 cards per page (design:
   ADE-26c, Desktop Homepage banners, "Case Studies"). Reuses .mw-card/.mw-card__media/
   .mw-card__title from mw-core.css — see mwRelatedResourcesBlock--relatedCaseStudies.cshtml —
   and the same [data-mw-hero] slider JS + pagination dots as the Upcoming events slider. */
/* Three independent slider frames (see mwRelatedResourcesBlock--relatedCaseStudies.cshtml):
   --wide is 3 cards/page (desktop, >900px), --medium is 2 cards/page (tablet, 601–900px),
   --narrow is 1 card/page (mobile, ≤600px). Only one is ever visible at a time. */
.mw-resources-slider__frame--medium,
.mw-resources-slider__frame--narrow {
  display: none;
}

@media (max-width: 900px) {
  .mw-resources-slider__frame--wide {
    display: none;
  }

  .mw-resources-slider__frame--medium {
    display: block;
  }
}

@media (max-width: 600px) {
  .mw-resources-slider__frame--medium {
    display: none;
  }

  .mw-resources-slider__frame--narrow {
    display: block;
  }
}

.mw-resources-slider__track {
  display: flex;
  overflow-x: auto;
  /* See .mw-events-slider__track's comment above — same forced-overflow-y clipping risk, same
     fix. This slider's own card (.mw-resources-slider__card) currently zeroes its box-shadow
     (below), but the padding stays here too so the track is safe for any future card variant
     that doesn't. */
  padding-block: 16px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.mw-resources-slider__page {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  display: grid;
  gap: var(--mw-space-5);
}

.mw-resources-slider__frame--wide .mw-resources-slider__page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mw-resources-slider__frame--medium .mw-resources-slider__page {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mw-resources-slider__frame--narrow .mw-resources-slider__page {
  grid-template-columns: 1fr;
}

.mw-resources-slider__card {
  padding: 10px;
  border-radius: 12px;
  /* Sitewide .mw-card already drops the 1px border; this card's own box-shadow (mw-core.css's
     default var(--mw-shadow-sm), inherited since this is a .mw-card variant) was still reading
     as a visible outline around the whole card, which the "no border on cards" ask covers too. */
  box-shadow: none;
}

/* mw-core.css's sitewide .mw-card:hover lift uses --mw-shadow-lg (14px offset, 34px blur) —
   fine on a full-width grid card, but oversized and heavy-looking on this slider's smaller
   304px-wide tile, and bigger than the track's own padding-block (above) was sized for, so it
   still read as clipped/harsh at the bottom on hover. Scaled down to the plain --mw-shadow
   token (4px/14px) instead of removing it outright — keeps the hover lift feeling responsive
   without the oversized shadow. */
.mw-resources-slider__card:hover {
  box-shadow: var(--mw-shadow);
}

.mw-resources-slider__card .mw-card__media {
  height: 186px;
  aspect-ratio: auto;
  border-radius: var(--mw-radius);
}

.mw-resources-slider__card .mw-card__media-badge {
  left: auto;
  right: var(--mw-space-3);
}

.mw-resources-slider__card .mw-card__body {
  padding: 0 10px;
}

.mw-resources-slider__card .mw-card__title {
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  /* margin, not padding: mw-core.css's 2-line clamp on this element depends on
     display:-webkit-box, and padding on that same box breaks its clip/height
     calculation in Chrome (the ellipsis fires but the clamp stops enforcing the line
     count, letting extra lines bleed through). Margin sits outside that box model. */
  margin-top: 36px;
  margin-bottom: 50px;
}

/* Image List block, Carousel display (mwImageListBlock.cshtml) — one image at a time, same
   [data-mw-hero] scroll-snap track + dot pagination as the Upcoming events slider above
   (.mw-events-slider__track/__slide), not the package's own Prev/Next-arrow scroller
   (.mw-image-list__items/__item/__arrow in mw-core.css, unused by this display mode now).
   .mw-image-list/__heading/__figure/__link/__img/__caption/__title/__description are still
   the package's own classes (mw-core.css) — only the track/slide layer changes. */
.mw-image-list--carousel .mw-image-list__frame {
  position: relative;
}

.mw-image-list--carousel .mw-image-list__track {
  display: flex;
  overflow-x: auto;
  /* Same forced-overflow-y clipping risk as .mw-events-slider__track/.mw-resources-slider__track
     above — this block-axis padding keeps a hovered/focused image's outline from being clipped. */
  padding-block: 16px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.mw-image-list--carousel .mw-image-list__slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
}

.mw-image-list--carousel .mw-image-list__figure {
  margin: 0;
}

/* Image and caption form one card: image rounded on top only, caption rounded on bottom only,
   flush against each other with no gap — the figure's own margin:0 above plus the image
   rendering as a block (mw-core.css already sets display:block) is what keeps them touching.
   Fills whatever container/column the block is placed in (not a fixed page-centred box) —
   528:294 is kept as an aspect ratio, not a literal size, so it scales to any column width. */
.mw-image-list--carousel .mw-image-list__img {
  width: 100%;
  height: auto;
  aspect-ratio: 528 / 294;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.mw-image-list--carousel .mw-image-list__caption {
  margin: 0;
  background: #F5F5F5;
  border-radius: 0 0 12px 12px;
  font-size: 18px;
  /* Only top/bottom padding was specified; left/right is a reasonable inset so text doesn't
     touch the card edges. */
  padding: 42px 24px;
  text-align: center;
}

/* mwRelatedResourcesBlock's "documents" variant — plain title+download tiles instead of
   relatedCaseStudies' image cards (design ADE-26d-2, "Key Membership Documents"). Deliberately
   no background-color rule here — the section sits on whatever the wrapping Container/Column
   block's own native Background colour picker sets, same as the Announcement wine band. */
/* 71px top/bottom on the section itself — replaces the earlier min-height:441px guess, which
   left a dead gap at the bottom because the real content (header + cards) never actually grew
   tall enough to reach 441px; padding driven by the actual spec closes that gap by construction
   instead of leaving unaccounted space. The shared .mw-resources-slider__header's own
   padding-top (22px) would double up with this on top, so it's cancelled here — the bottom
   half stays (22px, matching relatedCaseStudies/relatedEventAlt's own uniform value above,
   client request 2026-09-11 — was 38px), giving the header→cards gap without introducing a
   third, unspecified spacing value. */
.mw-resources-slider--docs {
  padding-top: 71px;
  padding-bottom: 71px;
}

.mw-resources-slider--docs .mw-resources-slider__header {
  padding-top: 0;
  padding-bottom: 22px;
}

.mw-resources-slider--docs .mw-resources-slider__frame--wide .mw-resources-slider__page--docs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 4 fixed 304px cards + gaps only actually fit from ~1300px up — the shared wide/medium
   breakpoint (900px) is too low for that, so at tablet widths like 1024px (iPad landscape) the
   4th card was clipping off the edge instead of wrapping. Scoped to this variant: switch to the
   medium tier earlier (below 1300px) and give it 3 columns (TabletPageSize is 3 for this variant
   — see mwRelatedResourcesBlock--documents.cshtml) instead of the base 2, with flexible-width
   tiles instead of the fixed desktop 304px so 3 cards actually fill the row at that width. */
@media (max-width: 1299.98px) {
  .mw-resources-slider--docs .mw-resources-slider__frame--wide {
    display: none;
  }

  .mw-resources-slider--docs .mw-resources-slider__frame--medium {
    display: block;
  }

  .mw-resources-slider--docs .mw-doc-tile {
    width: 100%;
  }
}

.mw-resources-slider--docs .mw-resources-slider__frame--medium .mw-resources-slider__page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mw-doc-tile {
  display: flex;
  flex-direction: column;
  gap: 38px;
  padding: 42px 20px 20px;
  width: 304px;
  height: 197px;
  box-sizing: border-box;
  background: var(--mw-color-white);
  border-radius: 12px;
}

.mw-doc-tile__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--mw-color-black);
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.mw-doc-tile__title:hover {
  text-decoration: underline;
}

.mw-doc-tile__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--mw-color-primary-dark);
  text-decoration: none;
}

.mw-doc-tile__download:hover {
  text-decoration: underline;
}

/* .mw-slider__dot's base colours (--mw-color-secondary teal / --mw-color-teal-dark active) are
   sized for a light-background slider like relatedCaseStudies — invisible-ish and the wrong
   brand note against this variant's maroon band, where the design uses white/translucent-white
   dots instead. Scoped to this variant only; the case-studies slider keeps its teal dots. */
.mw-resources-slider--docs .mw-slider__dot {
  background: rgba(255, 255, 255, 0.4);
}

.mw-resources-slider--docs .mw-slider__dot.is-active {
  background: var(--mw-color-white);
}

.mw-resources-slider--docs .mw-slider__dots {
  margin-top: 32px;
}

/* #left-column — same by-ID pattern as #awards above. */
#left-column .mw-container__inner {
  gap: 5.25rem; /* 84px — core's own scale stops at --mw-space-8 (4rem/64px) */
}

#left-column .mw-col[data-area="col1"] .mw-richtext {
  line-height: 42px;
}

#left-column .mw-col[data-area="col1"] .mw-richtext a {
  color: var(--mw-color-black);
  text-decoration: none;
}

/* Insights/News AND Events listing filter bars (design: ADE-26d, "Desktop Homepage banners"
   list screens) — client views Views/Partials/blockgrid/Components/mwArticleListBlock.cshtml
   and mwEventListBlock.cshtml add a "Sort By" field (layout only, see those files' header
   comments) plus restyled submit/clear buttons. Every rule below is a comma-joined pair —
   the mw-news-list wrapper plus its bare news-list marker for the News listing, and the
   mw-events-list wrapper plus its bare events-list marker for Events — sharing one set of
   declarations under each listing's own class names, rather than scoping to .mw-filterbar/
   .mw-btn/.mw-pagination sitewide, which would also restyle Courses/JobBoard/Products
   listings that share those same core classes. */
/* Both listing blocks' outer wrapper is .mw-container--wide, which core gives
   margin-block:var(--mw-space-7) (48px top AND bottom) — space meant for a block sitting
   between other page content, but these listings sit directly under their page-head band, so
   the top half of that just reads as a gap. .news-list/.events-list are CSS classes an editor
   adds to each block instance (block-grid "additional CSS class" setting) — used here rather
   than .mw-container--wide sitewide so other full-width blocks keep their spacing. */
.news-list,
.events-list {
  margin-top: 0;
}

/* .no-padding — same editor-added "additional CSS class" pattern as .news-list/.events-list
   above (block-grid "additional CSS class" setting), for the general case of any block that
   needs to sit flush under whatever precedes it rather than only these two listings. Zeroes
   both margin-top AND padding-top (same reasoning as the changePassword/member-section rule
   below) since which one the core theme applies depends on whether the block ended up on a
   --wide or --fixed container, and the class itself doesn't say which. This alone only clears
   the BLOCK's own top spacing, though — confirmed live (Our Team page) that a real gap under
   the pagehead is usually TWO stacked layers: the block's own margin/padding-top (this), plus
   the page-template wrapper's separate 48-64px .mw-section top padding, which lives one level
   further out and needs the :has()-reaches-outward technique below (.no-top-space's own rule)
   to reach — so .no-padding is added to that same selector list rather than duplicating it. */
.no-padding {
  margin-top: 0;
  padding-top: 0;
}

/* Full-bleed grey band behind the filter row, deliberately NOT width-constrained — only
   .mw-filterbar (and .mw-card-grid below, via the same .mw-container class) respect the
   site's normal max-width; the band's own background spans edge to edge. */
.mw-news-list__filter-band,
.mw-events-list__filter-band {
  background: var(--mw-color-grey-band);
  padding-block: 60px;
}

.mw-news-list .mw-filterbar,
.mw-events-list .mw-filterbar {
  /* Core's own .mw-filterbar carries a white background + border + shadow (its "floating
     card" look) — flattened here so the fields sit directly on the filter-band's grey, with
     no second box showing through. margin-bottom is zeroed too — otherwise it'd stack on top
     of the band's own 60px padding-block above. */
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}

/* News has 3 fields (Search/Category/Sort By) at 313px each; Events has only 2
   (Search/Sort By) at 480px each (design: ADE-26d, Events filter bar) — different field
   counts and widths, so these can't share one grid-template-columns declaration.

   minmax(0, …) rather than a bare length: between this breakpoint and the tablet one below,
   the container is narrower than 3×313px/2×480px plus the two buttons' natural width, and a
   bare px track can't shrink — the "auto" button tracks absorbed the deficit instead,
   squeezing Filter Results down to its bare min-content width (wrapping onto two lines,
   caught around 1024px viewport). minmax(0, …) lets the field columns give up space first,
   so the buttons keep a sane size all the way down to the tablet breakpoint. */
.mw-news-list .mw-filterbar {
  grid-template-columns: minmax(0, 313px) minmax(0, 313px) minmax(0, 313px) auto auto;
}

.mw-events-list .mw-filterbar {
  grid-template-columns: minmax(0, 480px) minmax(0, 480px) auto auto;
}

/* Case Studies (.ade-case-study-list, mwContentListBlock--caseStudies.cshtml) shares
   .mw-news-list's classes/styling but has only 2 fields (Search + Sort By, no Category) —
   without its own override it inherited the 3-field News/Events template above, leaving one
   313px column's worth of dead space after Clear at desktop widths. */
.ade-case-study-list .mw-filterbar {
  grid-template-columns: minmax(0, 313px) minmax(0, 313px) auto auto;
}

/* Filter bar responsive (News and Events alike): tablet drops the fixed field widths above
   for a flexible 2-per-row grid (fields and buttons both wrap into it), mobile collapses to
   a single column — same 900px/600px tiers used elsewhere on these listings. */
@media (max-width: 900px) {
  .mw-news-list .mw-filterbar,
  .mw-events-list .mw-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* News-only, tablet range: News has 3 fields (odd, against a 2-column grid) so sparse
   auto-placement pairs Sort By with Filter Results, leaving Clear alone with an empty cell
   beside it. Explicitly placing Submit+Clear on their own row instead leaves the empty cell
   next to Sort By and pairs the two buttons side by side. Events has only 2 fields (even),
   so its buttons already pair up on their own row with no fix needed. Bounded to >600px so
   this doesn't fight the single-column mobile rule just below, which has no second column
   for "grid-column: 2" to land in. */
@media (max-width: 900px) and (min-width: 601px) {
  .mw-news-list .mw-filterbar__submit {
    grid-column: 1;
    grid-row: 3;
  }

  .mw-news-list .mw-filterbar__clear {
    grid-column: 2;
    grid-row: 3;
  }
}

@media (max-width: 600px) {
  .mw-news-list .mw-filterbar,
  .mw-events-list .mw-filterbar {
    grid-template-columns: 1fr;
  }
}

/* Search/Category/Sort By boxes: fixed 48px height rather than trusting <input> and <select>
   to compute matching intrinsic heights from identical padding — they don't, browsers box
   native form controls differently even with identical CSS (confirmed: the <select> rendered
   ~3.6px shorter than the <input> here), which is why the row read as "not aligned". Padding
   dropped from mw-core.css's default .7rem .9rem (11.2/14.4px) to a flat 10px, and text colour
   set to the design's #B1B1B1 (values typed and selected options alike). box-sizing:border-box
   already applies (mw-core.css default), so height:48px is the full box including padding/border. */
.mw-news-list .mw-field .mw-input,
.mw-news-list .mw-field .mw-select,
.mw-events-list .mw-field .mw-input,
.mw-events-list .mw-field .mw-select {
  border: 1px solid var(--mw-color-grey);
  border-radius: 4px;
  height: 48px;
  padding: 10px;
  color: #B1B1B1;
}

/* <select> has no author-stylable native dropdown arrow — appearance:auto (mw-core.css never
   overrides it) draws the OS's own arrow flush against the control's edge, ignoring the 10px
   padding above entirely. appearance:none removes that native arrow so a custom one (below) can
   sit properly inset instead; padding-right widens to keep the selected text clear of it. */
.mw-news-list .mw-field .mw-select,
.mw-events-list .mw-field .mw-select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23B1B1B1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}

.mw-news-list .mw-filterbar__submit,
.mw-events-list .mw-filterbar__submit {
  --_bg: var(--mw-color-black);
  border-radius: var(--mw-radius-pill);
  height: 48px;
}

.mw-news-list .mw-filterbar__clear,
.mw-events-list .mw-filterbar__clear {
  border-radius: var(--mw-radius-pill);
  /* Matches .mw-filterbar__submit's alignment (both inherit align-items:end from the base
     filterbar grid) — previously align-self:center here put Clear out of step with Filter
     Results, the two buttons sitting at different heights in the row. */
  align-self: end;
  padding: .7rem 1.4rem;
  height: 48px;
  /* Explicit colour, not just .mw-btn--ghost's --_fg: mw-core.css's own
     .mw-filterbar__clear{color: var(--mw-color-muted)} rule is declared after .mw-btn's and
     wins on specificity ties otherwise, washing the outline out to grey-on-grey. */
  color: var(--mw-color-black);
  border-color: var(--mw-color-black);
}

.mw-news-list .mw-filterbar__clear:hover,
.mw-events-list .mw-filterbar__clear:hover {
  color: var(--mw-color-white);
  background: var(--mw-color-black);
}

/* Insights/News and Events card grids (design: ADE-26d): 3 cards per row rather than
   mw-core.css's default auto-fill(minmax(300px,1fr)), which packs 4-5 in at desktop widths.
   Cards get a 10px inset (image included, same treatment as the Association news featured
   card) and a 12px corner radius instead of the sitewide --mw-radius (8px) — scoped to these
   listings only.

   :not(.mw-related-list) matters for the News rule: the homepage's "Association news" alt
   block (mwRelatedArticlesBlock--relatedArticlesAlt.cshtml) ALSO carries the .mw-news-list
   class on its <section>, alongside .mw-related-list--alt, for its featured+stack layout.
   Without the exclusion, this rule tied on specificity with .mw-related-list--alt .mw-card-grid
   (declared earlier) and won on source order, collapsing that 2-column featured layout into a
   plain 3-column grid — caught live on the homepage after first shipping this unscoped. Only
   the standalone /insights/news/ listing page's <section class="mw-news-list"> (no other
   class, see mwArticleListBlock.cshtml) should match. .mw-events-list has no such alt-layout
   sibling (the "Upcoming events" homepage slider uses the unrelated .mw-events-slider class),
   so it needs no equivalent exclusion.

   The fixed column count means the browser can't auto-reflow at narrower widths (that's the
   whole point — mw-core.css's auto-fill packed too many in), so tablet/mobile need their own
   explicit column counts here too, matching the same 900px/600px tiers as the Case Studies
   slider (mwRelatedResourcesBlock--relatedCaseStudies.cshtml). */
.mw-news-list:not(.mw-related-list) .mw-card-grid,
.mw-events-list .mw-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Space between the grey filter band and the card grid — margin (not padding, so it
   collapses/sits outside the grid's own box rather than expanding it) on these specific
   listing instances via the editor-added .news-list/.events-list class. */
.news-list .mw-card-grid,
.events-list .mw-card-grid {
  margin-top: 60px;
}

/* Case Studies listing (mwContentListBlock--caseStudies.cshtml): same gap as News/Events
   above, but on .ade-case-study-list — a class the view itself always carries, not an
   editor-added "Additional CSS Class" — so the spacing can't go missing if nobody remembers
   to set that field on the container. */
.ade-case-study-list .mw-card-grid {
  margin-top: 60px;
}

/* Case study detail page (Views/adeCaseStudy.cshtml) title. */
.ade-case-study__title {
  font-size: 42px;
  line-height: 52px;
  font-weight: bold;
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (max-width: 900px) {
  .mw-news-list:not(.mw-related-list) .mw-card-grid,
  .mw-events-list .mw-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .mw-news-list:not(.mw-related-list) .mw-card-grid,
  .mw-events-list .mw-card-grid {
    grid-template-columns: 1fr;
  }
}

.mw-news-list:not(.mw-related-list) .mw-card,
.mw-events-list .mw-card {
  padding: 10px;
  border-radius: 12px;
}

.mw-news-list:not(.mw-related-list) .mw-card__media,
.mw-events-list .mw-card__media {
  border-radius: 8px;
}

.mw-news-list:not(.mw-related-list) .mw-card__body,
.mw-events-list .mw-card__body {
  padding-top: 32px;
  padding-bottom: 30px;
  gap: var(--mw-space-4);
}

.mw-news-list:not(.mw-related-list) .mw-card__title,
.mw-events-list .mw-card__title {
  font-size: 18px;
  line-height: 27px;
}

.mw-news-list:not(.mw-related-list) .mw-card__date,
.mw-events-list .mw-card__date {
  font-size: 14px;
  line-height: 26px;
}

/* News/Events listing pagination (design: ADE-26d, updated to match the Member Directory's
   bordered-box pager, design ADE-26d-2 — client wants the two to look and function the same).
   Pulled up off mw-core.css's default margin-top (--mw-space-7), which left a large gap
   between the card grid and the pager. Scoped to .news-list/.events-list — the CSS classes an
   editor adds to each block instance (block-grid "additional CSS class" setting) — rather than
   .mw-pagination sitewide, since Courses/JobBoard/Products listings share that same core class
   and shouldn't be affected. */
.news-list .mw-pagination,
.events-list .mw-pagination {
  margin-top: 0;
}

.news-list .mw-pagination__item,
.news-list .mw-pagination__ellipsis,
.events-list .mw-pagination__item,
.events-list .mw-pagination__ellipsis {
  border-radius: 6px;
}

.news-list .mw-pagination__item,
.events-list .mw-pagination__item {
  border: 1px solid var(--mw-color-grey);
  color: var(--mw-color-black);
}

.news-list .mw-pagination__item:hover,
.events-list .mw-pagination__item:hover {
  border-color: var(--mw-color-black);
}

.news-list .mw-pagination__item--arrow,
.events-list .mw-pagination__item--arrow {
  border-color: transparent;
}

.news-list .mw-pagination__item--current,
.events-list .mw-pagination__item--current {
  background: #7A2840;
  border-color: #7A2840;
  color: var(--mw-color-white);
}

/* Pager row wrapper — nav + "X / page" selector side by side, centred, same layout as the
   Member Directory's own .mw-org-directory__pager. These are the listing's own BEM classes
   (like .mw-news-list__filter-band above), not gated behind the editor's additional-class
   toggle — there's no sitewide-collision risk here, this element only exists in these two views. */
.mw-news-list__pager,
.mw-events-list__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--mw-space-4);
  margin-top: var(--mw-space-6);
}

.mw-news-list__pagesize select,
.mw-events-list__pagesize select {
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--mw-color-grey);
  padding: 0 var(--mw-space-2);
}

/* Two-column "Research & Advocacy" / "Briefings & Consultations" cards (design: ADE-26d,
   Insights). Scoped to .column-grey — the block-grid "additional CSS class" an editor adds
   to this container — so an unflagged two-column section is untouched. Vertical rhythm
   lives entirely on .mw-col's own top/bottom padding rather than split across the heading's
   top and the button's bottom, so the image/heading/richtext/button stack can rely on
   mw-core.css's default .mw-col > * + * gap without a one-off per-child override. */
.column-grey .mw-col {
  background: var(--mw-color-grey-pale);
  border-radius: 20px;
  padding: 40px 10px;
}

.column-grey .mw-col > .mw-heading,
.column-grey .mw-col > .mw-richtext,
.column-grey .mw-col > .mw-buttons {
  padding-left: 30px;
  padding-right: 30px;
}

.column-grey .mw-col > .mw-heading {
  padding-bottom: 30px;
}

/* "View" CTA matches the site's other pill CTAs (Case Studies' "View all", the News/Events
   Filter Results button) — black pill, not the wine mw-btn--primary these blocks render by
   default. Same --_bg swap as .mw-slider__view-all / .mw-filterbar__submit above. */
.column-grey .mw-col .mw-btn {
  --_bg: var(--mw-color-black);
  border-radius: var(--mw-radius-pill);
  height: 48px;
}

/* Two-column white cards (Contact Us). Scoped to .columns-white — the block-grid
   "additional CSS class" an editor adds to the container — so both columns get the same
   white background and internal padding regardless of position. mw-core.css's
   .mw-container__inner sets align-items:start, so a shorter column's card would otherwise
   stop at its own content height, leaving a gap of page background below it instead of
   matching the taller column — stretch makes both cards fill the full row height. */
/* UForm Kit "Get in Touch" form (design: ADE-26d-2). .mw-btn defaults to the brand accent
   colour via its --_bg custom property and mw-core's small radius; the design's Submit is a
   solid black, fully-rounded button, so swap both rather than writing a whole new button style
   — same --_bg pattern as .column-grey .mw-col .mw-btn above. */
.ade-uform .mw-btn {
  --_bg: var(--mw-color-black);
  border-radius: 24px;
  height: 48px;
}

.ade-uform .mw-field__label {
  font-size: 14px;
  line-height: 26px;
}

/* Post-submit banners, rendered by Views/Shared/Components/UForm/Default.cshtml above the form:
   __success is the form's "Senders message success" text after the redirect back, __errors the
   ValidationSummary when the send failed server-side. Tokens fall back to mw-core's own defaults. */
.ade-uform__success,
.ade-uform__errors {
  margin-bottom: var(--mw-space-4);
  padding: 12px 16px;
  border-radius: 6px;
  border-left: 4px solid;
  font-size: 15px;
}

.ade-uform__success {
  border-color: var(--mw-color-success, #2f8f5b);
  background: rgba(47, 143, 91, 0.08);
  color: var(--mw-color-heading);
}

.ade-uform__errors {
  border-color: var(--mw-color-danger, #c0392b);
  background: rgba(192, 57, 43, 0.06);
}

.ade-uform__errors ul {
  margin: 0;
  padding-left: 18px;
}

.ade-uform .mw-input,
.ade-uform .mw-select,
.ade-uform .mw-textarea {
  background: #F5F5F5;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
}

/* Enquiry-type drop-down ([select* enquiry-type class:mw-select ...] in the form node template): same no-native-arrow treatment as the listing filters above, so the
   arrow sits inset from the edge instead of flush against it. */
.ade-uform .mw-select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}

/* Two-column layout WITHIN the form itself — Name/Phone/Email/Organisation stacked on the
   left, a tall Message box filling the right column, Submit pinned to the right below both
   columns. This is a grid on the wrapper the Template markup provides (.ade-uform__grid), not
   the page's own two-column block — the form is one .mw-col already holding both "columns". */
.ade-uform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mw-space-6);
}

.ade-uform__col-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ade-uform__col-right {
  /* Grid items stretch to the row's height by default — the row height comes from
     .ade-uform__col-left's natural content (4 stacked fields). This flex column then lets
     .ade-uform__message claim ALL of that stretched height via flex: 1 below, so the textarea's
     bottom edge lines up exactly with the Organisation input's bottom edge. */
  display: flex;
  flex-direction: column;
}

.ade-uform__message {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ade-uform__message .mw-textarea {
  flex: 1;
  height: auto;
  min-height: 0; /* override the default flex min-height:auto, which would stop it shrinking to fit */
  resize: none;
}

.ade-uform__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--mw-space-4);
}

@media (max-width: 767.98px) {
  .ade-uform__grid {
    grid-template-columns: 1fr;
  }

  .ade-uform__message .mw-textarea {
    min-height: 160px;
  }
}

.columns-white .mw-container__inner {
  align-items: stretch;
}

.columns-white .mw-col {
  background: var(--mw-color-white);
  padding: 50px 40px;
  border-radius: 20px;
}

/* "Ongoing work" boxed banner (design: ADE-26d, Insights). Scoped to .right-align — the
   block-grid "additional CSS class" an editor adds to this container. The [style*=background]
   qualifier matches mw-core.css's own .mw-container--boxed .mw-container__inner[style*=background]
   rule (same 3-selector specificity) so this wins the cascade tie on load order alone, no
   !important needed for the top/left/right padding. padding-bottom DOES need !important —
   it's the editor's own "space below" setting (an inline style on this instance, 80px here),
   which otherwise always beats an external stylesheet regardless of selector specificity. */
.right-align .mw-container__inner[style*="background"] {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px !important;
  column-gap: 20px;
  /* Core's own rule sets this via var(--mw-boxed-radius, 10px) — 20px per design, not just the
     10px fallback. */
  border-radius: 20px;
}

/* "Contact Business Development" CTA style (design: ADE-26d, Membership banner) — editor
   applies "button-maroon" via the Buttons block's own "CSS classes" field (Advanced tab), same
   scoping convention as .column-grey/.right-align above: the class lands on a block wrapper,
   this descends into the actual .mw-btn. --_bg is the design's exact wine (#620F24, XD spec) —
   was var(--mw-color-primary) (#9D2C54, a much lighter rose), a mismatch flagged against the
   ADE-26d-2 spec. Pattern is the client-supplied Group 4815 asset (pagehead-pattern-wine.svg,
   same fill family as .mw-pagehead:after but its own recolour), positioned right/top with
   background-size:inherit — client asked for the motif at its native size in the top-right
   corner rather than stretched/cropped to fill the box, same treatment as .button-research
   below. Full `background` shorthand (not just --_bg) because the shorthand is how
   the colour + image combine; background-size is set after it so the shorthand's own reset
   doesn't wipe it out. */
.button-maroon .mw-btn {
  --_bg: #620F24;
  background: var(--_bg) url('/brand/pagehead-pattern-wine.svg') no-repeat right top;
  background-size: inherit;
  border-radius: 20px;
  font-size: 32px;
  line-height: 42px;
  font-weight: bold;
  padding: 40px 30px;
  /* .mw-btn is inline-flex with no explicit width, so it shrink-to-fits its own label — at the
     desktop padding/font size the label text happens to be long enough to hit the column's edge
     anyway, but .button-research's shorter "Vice Presidents Network >" label doesn't, so on a
     narrower viewport (smaller padding/font, doc 12's own breakpoints below) the two banners
     stop matching widths and visibly misalign. Both are meant to be full-width banners, not
     shrink-to-fit pills, so width is explicit rather than relying on that coincidence. */
  width: 100%;
  /* .mw-btn--icon-right's row-reverse already puts the icon before the label (confirmed on the
     plain pill-button rendering of the same link) — correct on one line. At this size the label
     wraps to 2-3 lines, and align-items:center (mw-core.css's own .mw-btn rule) then centres the
     single-line icon against the WHOLE wrapped block's height, landing it beside the middle line
     instead of leading the text. flex-start pins it to the first line so it always reads as
     leading the text, wrapped or not. */
  align-items: flex-start;
}

/* "Vice Presidents Network" CTA style (design: ADE-26d, Membership banner) — same treatment as
   .button-maroon above (editor-applied via the Buttons block's "CSS classes" field). --_bg is
   the literal #C37493 (client colour call, same rose fill as pagehead-pattern-rose.svg further
   up this file) rather than --mw-color-pinkLight, which was a paler stand-in. --_fg is set
   explicitly to black (client correction — this was white, flagged elsewhere in this file as
   low-contrast) rather than left on .mw-btn's own white default, so a future core default change
   can't silently alter this button's label colour.
   Pattern asset reuses pagehead-pattern-mauve.svg (client-supplied Group 4818, fill #CD86A3 —
   same file already used by .button-mauve below) rather than the old dedicated
   pagehead-pattern-pink.svg recolour. Positioned right/top with background-size:inherit, matching
   .button-maroon's fix — the motif sits at its native size in the top-right corner instead of
   being scaled/cropped to fill the box. */
.button-research .mw-btn {
  --_bg: #D799B3;
  --_fg: var(--mw-color-black);
  background: var(--_bg) url('/brand/pagehead-pattern-mauve.svg') no-repeat right top;
  background-size: inherit;
  border-radius: 20px;
  font-size: 32px;
  line-height: 42px;
  font-weight: bold;
  padding: 40px 30px;
  width: 100%;
  align-items: flex-start;
}

/* "Heat Networks" CTA style (client-supplied asset) — editor applies "button-heat" via the
   Buttons block's own "CSS classes" field, same convention as .button-maroon/.button-research
   above. Background reuses --mw-color-navlist-cta-dark (#24620F, already the sidebar nav's
   own dark-green CTA colour) rather than a new one-off variable. Pattern anchored left/top,
   background-size:inherit — client asked for the motif at its native size in the top-left
   corner rather than stretched/cropped to fill the button. */
.button-heat .mw-btn {
  --_bg: var(--mw-color-navlist-cta-dark);
  --_fg: var(--mw-color-white);
  background: var(--_bg) url('/brand/pagehead-pattern-heat.svg') no-repeat left top;
  background-size: inherit;
  border-radius: 20px;
  font-size: 32px;
  line-height: 42px;
  font-weight: bold;
  padding: 40px 30px;
  width: 100%;
  align-items: flex-start;
}

/* "Research & Advocacy" CTA style — lighter companion to .button-heat, same client-supplied
   pattern family, paler green, anchored right/top with background-size:inherit (see .button-heat
   above for why). Reuses --mw-color-hero-2 (#B3D799), already the site's "light CTA card" swatch
   (see the sidebar-nav vars comment above). --_fg is black, not white: white-on-#B3D799 is
   ~1.6:1 contrast, well under WCAG's 3:1 floor even for large bold text. .mw-navlist__cta--light
   already pairs this exact swatch with black text — matched here rather than repeating the
   low-contrast white-on-pale choice .button-research originally shipped with (since corrected
   to black there too; this button never carried that brief in the first place). */
.button-heat-2 .mw-btn {
  --_bg: var(--mw-color-hero-2);
  --_fg: var(--mw-color-black);
  background: var(--_bg) url('/brand/pagehead-pattern-research.svg') no-repeat right top;
  background-size: inherit;
  border-radius: 20px;
  font-size: 32px;
  line-height: 42px;
  font-weight: bold;
  padding: 40px 30px;
  width: 100%;
  align-items: flex-start;
}

/* "Join us today to be part of the smart energy revolution" CTA (design ADE-26d-2, homepage
   banner) — the client-supplied dusty-rose pattern/colour pairing. Named for the colour
   (matching .button-maroon/.button-research) rather than a section — it's a homepage banner,
   not tied to one content area. --mw-color-button-mauve is its own variable (no existing
   swatch matches #CD86A3). Note: white-on-#CD86A3 is ~2.8:1, just under WCAG's 3:1 floor for
   large bold text — kept white to match the client's own supplied design, but flagging it as
   borderline (.button-research carried the same tradeoff until the client corrected it to
   black text — worth revisiting here too if raised). Positioned right/top
   with background-size:inherit, matching .button-maroon/.button-research/.button-heat* above —
   the motif at its native size in the top-right corner rather than scaled/cropped to fill the box. */
.button-mauve .mw-btn {
  --_bg: var(--mw-color-button-mauve);
  --_fg: var(--mw-color-white);
  background: var(--_bg) url('/brand/pagehead-pattern-mauve.svg') no-repeat right top;
  background-size: inherit;
  border-radius: 30px;
  font-size: 32px;
  line-height: 42px;
  font-weight: bold;
  padding: 40px 30px;
  width: 100%;
  align-items: flex-start;
}

/* "ADE: Demand" CTA style — client-supplied Group 4813 pattern asset (pagehead-pattern-
   demand.svg). --_bg is the client-specified literal #107996 (darker than the asset's own
   baked-in #2A8EA7 fill, so the pattern reads as a tone-on-tone texture rather than matching
   flat). --_fg is white per client instruction. */
.button-demand .mw-btn {
  --_bg: #107996;
  --_fg: var(--mw-color-white);
  background: var(--_bg) url('/brand/pagehead-pattern-demand.svg') no-repeat left top;
  background-size: inherit;
  border-radius: 20px;
  font-size: 32px;
  line-height: 42px;
  font-weight: bold;
  padding: 40px 30px;
  width: 100%;
  align-items: flex-start;
}

/* "ADE: Demand" CTA, second variant — client-supplied Group 4817 pattern asset
   (pagehead-pattern-demand-2.svg). --_bg is the client-specified literal #9CDFE8 (paler than
   the asset's own baked-in #77CEDB fill). --_fg is black per client instruction. */
.button-demand-2 .mw-btn {
  --_bg: #9CDFE8;
  --_fg: var(--mw-color-black);
  background: var(--_bg) url('/brand/pagehead-pattern-demand-2.svg') no-repeat right top;
  background-size: inherit;
  border-radius: 20px;
  font-size: 32px;
  line-height: 42px;
  font-weight: bold;
  padding: 40px 30px;
  width: 100%;
  align-items: flex-start;
}

/* .button-maroon/.button-research/.button-heat/.button-heat-2/.button-mauve/.button-demand/
   .button-demand-2 at desktop size (60px/100px padding, 32px/42px type) don't fit a tablet or
   mobile viewport — the fixed left/right padding alone eats most of the available width,
   forcing an already-large label into an even narrower column. Padding and type scale down
   together at the same breakpoints as the rest of this file (900px/600px) rather than
   introducing new ones. Selector list must track the button-* rules above by name —
   .button-teal/.button-pink/.heat-button were the pre-rename names and matched nothing once
   those rules were renamed; .button-heat-2 was missing from this list outright, so it never
   got a mobile/tablet scale-down at all. */
@media (max-width: 900px) {
  .button-maroon .mw-btn,
  .button-research .mw-btn,
  .button-heat .mw-btn,
  .button-heat-2 .mw-btn,
  .button-mauve .mw-btn,
  .button-demand .mw-btn,
  .button-demand-2 .mw-btn {
    padding: 40px 60px;
    font-size: 26px;
    line-height: 34px;
  }
}

@media (max-width: 600px) {
  .button-maroon .mw-btn,
  .button-research .mw-btn,
  .button-heat .mw-btn,
  .button-heat-2 .mw-btn,
  .button-mauve .mw-btn,
  .button-demand .mw-btn,
  .button-demand-2 .mw-btn {
    padding: 30px 24px;
    font-size: 22px;
    line-height: 30px;
  }
}

/* "ADE Heat Network" card (About Us page, "Two Column" group's right-hand box) — the editor
   applies "about-button" via the GROUP's own "CSS classes" field (Advanced tab). Content was
   originally a Buttons block (hence the class name); now it's a richtext image (the
   "group-4811.svg" wordmark) instead, so nothing here targets .mw-btn any more. */
.about-button {
  border-radius: 20px;
}

/* The wordmark richtext is identified by containing an image (:has(img)), not by position —
   keeps matching if the group's children get reordered, and can't accidentally catch the
   Lorem ipsum richtext below it, which has no image. Arrow is CSS-generated (not baked into
   the SVG or typed as text) and pushed to the row's end with flex/space-between rather than
   sitting tight against the wordmark. */
.about-button .mw-richtext:has(img) p {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.about-button .mw-richtext:has(img) p::after {
  content: ">";
  font-weight: 700;
  font-size: 20px;
  color: var(--mw-color-black);
}

/* mw-core.css's own .mw-richtext img{margin-block:var(--mw-space-4)} pushes the wordmark down
   from the card's top edge — .mw-richtext>:first-child{margin-top:0} only zeroes the <p>'s own
   margin, not the <img> nested inside it. */
.about-button .mw-richtext:has(img) img {
  margin-top: 0;
}

/* The label sits as a heading above the paragraph, not stacked with a gap that reads as two
   unrelated blocks. */
.about-button .mw-group__content {
  display: flex;
  flex-direction: column;
  gap: var(--mw-space-3);
}

/* The Buttons block instance is unused now content moved to a richtext image — :empty hides it
   rather than requiring the leftover block be deleted from content. */
.about-button .mw-buttons:empty {
  display: none;
}

/* This card's own .mw-container__inner (the "Introducing ADE" Two Column's grid, one level up
   from the group) still ran mw-core.css's default gap (--mw-space-5) — :has() reaches up to it
   from the group, same technique as .newsletter-section:has(.mw-org) above, since the class
   only lives on the inner group rather than the Two Column's own wrapper (unlike
   .nav-blue/-green/-pink below, which sit one level higher and can target .mw-container__inner
   as a plain descendant). */
.mw-container__inner:has(.about-button) {
  gap: 30px;
}

/* Text column: even top/bottom breathing room instead of centring the text block, plus
   left/right so the text doesn't run edge-to-edge against the column gap or the card. */
.right-align .mw-col[data-area="col2"] {
  padding: 40px 30px;
}

/* Contact Us page — editor-applied "CSS classes" value on the Two Column's own wrapper
   (.mw-container), same convention as .about-button above. Scoped to the inner .mw-col, not
   the outer container itself — the container is the full-width "Fixed" wrapper, so styling it
   directly put the white/padding/radius around the whole section rather than snug around the
   map image. */
.contact-map .mw-col {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 20px;
}

/* Generic utility — "extra CSS class" editors can apply to any block to kill the section's
   top margin (e.g. the peopleList block sitting right under a hero, per people.config). */
.no-margin {
  margin-top: 0;
}

/* When the block itself is a .mw-container.mw-section (the block's own wrapper, not just
   something nested inside it), also drop mw-theme's top section padding so nothing pushes the
   content away from the hero it's supposed to sit flush against. */
.no-margin.mw-container.mw-section {
  padding-top: 0;
}

.left-align h2,
.right-align h2 {
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
}

.left-align p,
.right-align p {
  font-size: 14px;
  line-height: 26px;
}

/* Left-anchored mirror of .right-align above — same "Ongoing work" boxed-banner treatment
   (design: ADE-26d, Insights), just for instances an editor wants the layout flipped. Duplicate
   of .right-align's three rules (already without its own background-color override — the
   editor's own block-grid "Background colour" setting is what paints it here), except the text
   column's breathing room targets col1, not col2 — .right-align's text sits in the second column
   (image/CTA first, text second); flipping the layout puts the text in the first column instead. */
.left-align .mw-container__inner[style*="background"] {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px !important;
  column-gap: 20px;
  border-radius: 20px;
}

.left-align .mw-col[data-area="col1"] {
  padding: 40px 30px;
}

/* "Join Us and Become a Member" full-bleed banner (design: ADE-26d-2, Membership) — editor
   applies "join-us" (lowercase — class selectors are case-sensitive, and this rule briefly
   read ".Join-us" while the CMS content's own cssClass was already lowercase, silently
   breaking the whole thing until caught) via the section's own "CSS classes" field (cssClass),
   landing on the <section class="mw-container mw-container--fixed join-us"> itself, not a
   nested wrapper —
   confirmed live: at any viewport that section already spans edge-to-edge (0 to 100vw) even
   though it's the "Fixed" width variant; only its .mw-container__inner child is capped at
   --mw-container-max (1345px) and centred. That split is exactly what the design wants — a
   full-width wine band with the text sitting in the normal centred content column — so no
   full-bleed breakout hack is needed, just paint the background on .join-us itself. Pattern is
   the client-supplied Group 4781 asset (join-us-pattern.svg, mirrored left/right halves sized
   to the design's own 1920×211 band) — background-size:cover, center center (not left/top like
   the corner-accent CTA buttons above) because this asset is already a symmetric full-width
   strip, not a single corner motif. */
.join-us {
  background: #620F24 url('/brand/join-us-pattern.svg') no-repeat center center;
  background-size: cover;
}

/* Vertical breathing room to approximate the design's ~211px band height around the single
   line of text (52px line-height) — the CMS content sets no padding of its own. */
.join-us .mw-col[data-area="content"] {
  padding: 80px 30px;
}

/* The rich text's own inline styles (authored in the backoffice) carry font-size:42pt — a
   pt/px mix-up that renders far larger than intended — and don't match the 52px line-height
   this rule also needs to force. Inline styles beat any external stylesheet rule regardless of
   selector specificity, so !important is required, same reasoning as .newsletter-section
   above. Targets the paragraph and everything inside it (strong, span) so it wins regardless of
   which nested element the inline style actually sits on. */
.join-us .mw-richtext p,
.join-us .mw-richtext p * {
  font-size: 42px !important;
  line-height: 52px !important;
}

/* Event detail page (mwEvent → Views/Shared/MemberWeb/_EventDetail.cshtml, a client override
   of the package partial — see that file's own header comment for why). mw-core.css ships NO
   rules at all for .mw-event / .mw-aside-card — grepped the shipped stylesheet, zero matches —
   so without this it falls back to plain stacked blocks, not the two-column split the
   markup's own class names (.mw-event--split, .mw-event__aside) already declare an intent for
   (design: ADE-26d, Events detail). The hero image is a real child of .mw-event__aside now
   (moved there in the override itself), so this is a plain two-column grid — no
   display:contents / grid-template-areas trick needed. The page background site-wide is
   var(--mw-color-bg) (#f3f4f7, set on body in mw-core.css) — not white — so the event
   article gets its own white background here, scoped to .mw-event-detail-section only. Kept
   deliberately separate from .mw-event-list-section (the "Other Upcoming Events" band further
   down, --mw-color-grey-pale) so the two stay independently adjustable.
   .mw-container itself carries max-width/margin-inline/padding-inline (mw-core.css), so a
   background-color on it only ever fills that constrained box — the page's own grey shows
   through on both sides at any viewport wider than the container max-width. Neutralised here,
   scoped to .mw-event-detail-section only, with the max-width/centring/padding moved onto its
   own .mw-container__inner instead so the white now paints edge to edge while the actual
   content stays exactly as wide as before. */
.mw-event-detail-section {
  max-width: none;
  padding-inline: 0;
  background-color: var(--mw-color-surface);
}

.mw-event-detail-section > .mw-container__inner {
  max-width: var(--mw-container-max);
  margin-inline: auto;
  padding-inline: var(--mw-space-5);
}

.mw-event--split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--mw-space-8);
  align-items: start;
}

.mw-event__title {
  font-size: 42px;
  line-height: 52px;
  font-weight: 700;
  margin-bottom: 60px;
}

.mw-event__hero {
  margin-bottom: var(--mw-space-5);
}

.mw-event__hero img {
  width: 100%;
  max-width: 304px;
  height: 188px;
  object-fit: cover;
  border-radius: 20px;
}

.mw-event__body p {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
  font-family: var(--mw-font-sans);
}

/* The body's block-grid content renders through the generic .mw-container system (mw-core.css),
   which sets padding-inline on BOTH .mw-container itself and .mw-container--fixed's own
   .mw-container__inner — the two stack, insetting the rich text well past the flush-left
   .mw-event__title above it (which has no such wrapper). Zeroed here, scoped to
   .mw-event__body only, so every other page using the same .mw-container classes (article
   body, home page sections, etc.) keeps its normal padding. */
.mw-event__body .mw-container,
.mw-event__body .mw-container--fixed .mw-container__inner {
  padding-inline: 0;
}

.mw-event__aside {
  position: sticky;
  top: var(--mw-space-5);
}

.mw-aside-card {
  background: var(--mw-color-grey-pale);
  border-radius: 20px;
  padding: 32px;
}

/* Design ADE-26d shows the booking info borderless with no "Booking" label — unlike the
   generic grey-card look .mw-aside-card otherwise gives every aside card (e.g. Recent
   Articles on the article template), so both are undone specifically for this card.
   mw-core.css's .mw-aside-card sets a 1px border alongside its background/padding/radius, so
   border needs its own override too — missing that the first time round left a visible box
   outline even after the fill/padding were zeroed. The "Booking" heading itself stays in the
   DOM (visually-hidden, same technique as .u-visually-hidden in mw-core.css) rather than
   display:none, so screen-reader users keep the landmark the sighted design deliberately
   drops. */
.mw-event-booking-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.mw-event-booking-card .mw-aside-card__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mw-event-booking-card__label {
  margin: var(--mw-space-5) 0 4px;
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}

.mw-event-booking-card__label:first-of-type {
  margin-top: 0;
}

.mw-event-booking-card__value {
  margin: 0;
  font-size: 16px;
  line-height: 32px;
  font-weight: 400;
}

.mw-notice {
  margin-top: var(--mw-space-5);
  padding: 12px 16px;
  border-radius: var(--mw-radius-pill);
  text-align: center;
  font-weight: 600;
}

.mw-notice--closed {
  background: var(--mw-color-grey-lighter);
  color: var(--mw-color-muted);
}

/* Register CTA, if/when booking is open — same black-pill treatment as every other CTA on
   this site (Case Studies' "View all", News/Events' "Filter Results"). Not verified against a
   live "booking open" event (this test event's booking window hasn't opened, so only
   .mw-notice--closed above was observable), but every CTA in this codebase renders through
   .mw-btn, so this is the safe, forward-compatible hook for it. */
.mw-event-booking-card .mw-btn {
  --_bg: var(--mw-color-black);
  border-radius: var(--mw-radius-pill);
  width: 100%;
  margin-top: var(--mw-space-5);
  height: 48px;
}

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

  .mw-event__aside {
    position: static;
  }

  .mw-event__hero img {
    max-width: 100%;
  }
}

/* "Other Upcoming Events" (design ADE-26d) — built in the _EventDetail.cshtml override, not
   the package's own mwRelatedEventsBlock, so it isn't reachable via .mw-events-list (the
   standalone Events LISTING page's own class) or the block's default centred-CTA-below
   layout. Mirrors .mw-events-list's card treatment (rounded, padded, sized title/date) so it
   reads as the same visual language, but scoped to .mw-event-list (singular) so it can never
   collide with the listing page's own rules. Sits in its own top-level .mw-container
   (mw-event-list-section) rather than sharing the event article's — that's what lets it
   carry a full-bleed --mw-color-grey-pale band edge to edge without tinting the article above
   it, while still getting the standard max-width/padding from its own nested
   .mw-container__inner. */
.mw-event-list-section {
  background-color: var(--mw-color-grey-pale);
  padding-block: var(--mw-space-7);
}

.mw-event-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mw-space-4);
  margin-bottom: var(--mw-space-5);
}

.mw-event-list .mw-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mw-event-list .mw-card {
  padding: 10px;
  border-radius: 12px;
}

.mw-event-list .mw-card__media {
  height: 186px;
  border-radius: 8px;
}

.mw-event-list .mw-card__body {
  padding-top: 32px;
  padding-bottom: 32px;
  gap: var(--mw-space-4);
}

.mw-event-list .mw-card__title {
  font-size: 18px;
  line-height: 27px;
}

.mw-event-list .mw-card__date {
  font-size: 14px;
  line-height: 26px;
}

@media (max-width: 900px) {
  .mw-event-list .mw-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .mw-event-list .mw-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Login page (design: "Login to your ADE Account", ADE-26d) — the "login" Display variant
   for mwLoginBlock (Views/Partials/blockgrid/Components/mwLoginBlock--login.cshtml).
   .ade-login is the CSS class already set on the wrapping container's Advanced tab, same
   by-instance-class pattern as #awards/#left-column/.right-align above. Same ring pattern as
   .mw-pagehead:after above (design ADE-26d's own banner asset), just bigger. */
.ade-login {
  /* The editor's own Background colour pick on this container lands as an INLINE
     background-color (higher specificity than any class rule), so !important is the only way
     for this class to own the colour the way it already owns the pattern image below — the
     design's mauve, regardless of whatever swatch the block instance happens to be set to. */
  background-color: #D799B3 !important;
  background-image: url('/brand/pagehead-pattern-mauve.svg');
  background-repeat: no-repeat;
  background-position: right center;
  /* Same asset as .mw-pagehead:after above, but that rule's "contain" only reads right on the
     page-head band, which is short and wide like the artwork itself (569:218). This section is
     tall, not wide, so "contain" ends up constrained by WIDTH instead of height — the pattern
     stretches to fill the section edge-to-edge and sits behind the form instead of accenting
     the right side. Sizing by height only (width auto) keeps it anchored to the right at a
     proportionally bigger size, same as the page-head band, whatever the section's height. */
  background-size: auto 100%;
}

/* The newsletter card below still overlaps upward by design (-7%/80px desktop and mobile,
   50px tablet — unchanged) — this gives the overlap enough of .ade-login's OWN coloured area
   to land on, instead of covering the login form's last row (Login button / Keep me logged in
   / Forgotten Password, confirmed live) or landing on the plain wrapper's dead space below (the
   original problem — that gap wasn't even pink). On .mw-col rather than .ade-login itself, so
   it scales down on smaller screens instead of always reserving the full desktop clearance.
   No !important needed here — unlike .ade-login's own background/pattern above, .mw-col
   carries no inline style for this to lose a specificity fight against. */
.ade-login .mw-col {
  padding-top: 100px;
  padding-bottom: 200px;
}

@media (max-width: 991.98px) {
  .ade-login .mw-col {
    padding-bottom: 96px;
  }
}

@media (max-width: 575.98px) {
  .ade-login .mw-col {
    padding-bottom: 88px;
  }
}

/* mw-core.css's own default for any coloured Fixed container (32px/--mw-space-6, both sides) —
   widened site-wide to give these bands more breathing room. Plain class + attribute selector,
   same specificity as core's own rule, so loading after it in the cascade is enough to win; no
   !important needed since core's default isn't an inline style. */
.mw-container--fixed[style*="background"] {
  padding-block: 5rem;
}

.ade-login .mw-container__inner {
  /* Top only — bottom spacing is already handled by two existing sitewide mechanisms that a
     min-height/align-items override was fighting: any coloured .mw-container--fixed section
     gets padding-block automatically (.mw-container--fixed[style*="background"] above,
     widened from mw-core.css's 32px default to 5rem site-wide), and _Footer.cshtml's
     applyNewsletterOverlapPadding() script adds --mw-footer-newsletter-overlap on top of that
     to the last section before the newsletter card, so the card sits flush against it. Adding
     our own bottom padding/min-height on top of both left a gap neither mechanism accounted
     for. */
  padding-top: 64px;
}

@media (max-width: 767.98px) {
  .ade-login .mw-container__inner {
    padding-top: 40px;
  }
}

.mw-login--card {
  max-width: 480px;
  margin-inline: auto;
}

.mw-login--card .mw-login__heading {
  font-family: inherit;
  color: var(--mw-color-black);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: var(--mw-space-5);
}

.mw-login--card .mw-login__intro,
.mw-login--card .mw-login__hint {
  color: var(--mw-color-white);
  margin-bottom: var(--mw-space-4);
}

.mw-login--card .mw-login__error,
.mw-login--card .mw-login__notice {
  color: var(--mw-color-white);
  background: var(--mw-color-overlay);
  border-radius: var(--mw-radius-sm);
  padding: var(--mw-space-2) var(--mw-space-3);
  margin-bottom: var(--mw-space-4);
}

.mw-login--card .mw-field {
  margin-bottom: var(--mw-space-4);
}

.mw-login--card .mw-field__label {
  color: var(--mw-color-white);
}

.mw-login--card .mw-input {
  width: 100%;
  border: none;
  border-radius: var(--mw-radius);
  padding: 14px 16px;
}

.mw-login--card .mw-login__pwd-wrap {
  position: relative;
}

.mw-login--card .mw-login__pwd-wrap .mw-input {
  padding-right: 44px;
}

.mw-login--card .mw-login__pwd-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--mw-color-muted);
}

.mw-login--card .mw-login__pwd-toggle svg {
  width: 22px;
  height: 22px;
}

/* The toggle JS (mwLoginBlock--login.cshtml) sets the HTML `hidden` attribute to swap between
   the show/hide icons, but something else in the cascade gives these SVGs their own `display`
   with higher specificity than the plain [hidden] UA rule (0,1,0) — confirmed live: both icons
   render at once, [hidden] present in the DOM but not taking effect. Force it explicitly rather
   than track down the conflicting rule. */
.mw-login--card .mw-login__pwd-toggle svg[hidden] {
  display: none !important;
}

.mw-login--card .mw-login__submit {
  --_bg: var(--mw-color-black);
  width: 100%;
  border-radius: 18px;
  padding-block: 14px;
  font-size: 16px;
  margin-top: var(--mw-space-2);
  height: 48px;
}

.mw-login--card .mw-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mw-space-4);
  margin-top: var(--mw-space-4);
  flex-wrap: wrap;
}

.mw-login--card .mw-check {
  display: inline-flex;
  align-items: center;
  gap: var(--mw-space-2);
  color: var(--mw-color-black);
  font-size: 14px;
}

.mw-login--card .mw-login__forgot {
  color: var(--mw-color-black);
  font-size: 14px;
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .mw-login--card {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* "changePassword" variant (design: "Change Your Password", Member hub, ADE-26d-2 screen 16).
   Sits on the Member hub's plain light page background, not the pink .ade-login ring pattern —
   dark text and bordered white fields instead of .mw-login--card's white-on-pink treatment.
   Field/button treatment matches .ade-uform above (design's own account-page convention). */
/* These panels are the only block in their column, so the core theme's default top spacing
   before a container block — margin-top: 48px on .mw-container--wide (two-column pages, e.g.
   Change Password), padding-top: 32px on .mw-container--fixed (single-column pages, e.g. the
   member{Section} pages) — just reads as unwanted whitespace here. Targeting the base
   .mw-container class (not a --wide/--fixed modifier) covers either container variant a page
   ends up using, and both properties are zeroed since which one applies depends on the variant.
   Zeroed only where these variants are actually used (confirmed live via the DOM, not guessed) —
   covers the changePassword login panel and every member{Section} welcome panel alike. */
.mw-container:has(.mw-login--panel),
.mw-container:has(.mw-member-section-welcome) {
  margin-top: 0;
  padding-top: 0;
}

/* Change Password page (design ADE-26d-2 screen 16) & member subpages: remove any white
   or block background on the section, page columns, and containers so the form and cards sit
   directly on the page without an unwanted white background fill. */
.mw-section:has(.mw-login--panel),
.mw-section:has(.mw-member-section-welcome),
.mw-page-cols:has(.mw-login--panel),
.mw-page-cols:has(.mw-member-section-welcome),
.mw-page-cols:has(.mw-login--panel) .mw-page-cols__main,
.mw-page-cols:has(.mw-member-section-welcome) .mw-page-cols__main,
.mw-page-cols:has(.mw-login--panel) .mw-page-cols__aside,
.mw-page-cols:has(.mw-member-section-welcome) .mw-page-cols__aside,
.mw-page-cols:has(.mw-login--panel) .mw-container,
.mw-page-cols:has(.mw-member-section-welcome) .mw-container,
.mw-page-cols:has(.mw-login--panel) .mw-container__inner,
.mw-page-cols:has(.mw-member-section-welcome) .mw-container__inner,
.mw-container:has(.mw-login--panel),
.mw-container:has(.mw-member-section-welcome),
.mw-container:has(.mw-login--panel) .mw-container__inner,
.mw-container:has(.mw-member-section-welcome) .mw-container__inner,
.mw-login--panel {
  background: transparent !important;
  background-color: transparent !important;
}

.mw-login--panel {
  max-width: 480px;
}

.mw-login--panel .mw-login__heading {
  font-family: inherit;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: var(--mw-space-5);
}

.mw-login--panel .mw-login__intro {
  margin-bottom: var(--mw-space-4);
}

.mw-login--panel .mw-login__error,
.mw-login--panel .mw-login__notice {
  background: var(--mw-color-overlay);
  border-radius: var(--mw-radius-sm);
  padding: var(--mw-space-2) var(--mw-space-3);
  margin-bottom: var(--mw-space-4);
}

.mw-login--panel .mw-field {
  margin-bottom: var(--mw-space-4);
}

.mw-login--panel .mw-field__label {
  font-size: 14px;
  line-height: 26px;
}

.mw-login--panel .mw-input {
  width: 100%;
  background: var(--mw-color-white);
  border: 1px solid var(--mw-color-border);
  border-radius: 6px;
  padding: 14px 16px;
}

.mw-login--panel .mw-login__pwd-wrap {
  position: relative;
}

.mw-login--panel .mw-login__pwd-wrap .mw-input {
  padding-right: 44px;
}

.mw-login--panel .mw-login__pwd-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--mw-color-muted);
}

.mw-login--panel .mw-login__pwd-toggle svg {
  width: 20px;
  height: 20px;
}

/* Same fix as .mw-login--card above — the show/hide toggle icons both render regardless of the
   `hidden` attribute the JS sets, since something else gives these SVGs a display value with
   higher specificity than [hidden]'s UA rule. */
.mw-login--panel .mw-login__pwd-toggle svg[hidden] {
  display: none !important;
}

.mw-login--panel .mw-login__submit {
  --_bg: var(--mw-color-black);
  border-radius: 24px;
  padding-block: 14px;
  padding-inline: var(--mw-space-6);
  font-size: 16px;
  margin-top: var(--mw-space-2);
  height: 48px;
}

@media (max-width: 575.98px) {
  .mw-login--panel {
    max-width: 100%;
  }
}

/* Member Directory (design ADE-26d-2) — flexmapDirectory--membersDirectory.cshtml. Rebuilt
   2026-08-25 as a plain server-rendered listing (real keyword search + real pagination
   against mwOrganisation content directly), replacing the old map+.mw-flexmap skeleton this
   variant used to reskin — see that file's own header comment for why the package's shipped
   flexmap-directory.js could never deliver working search/pagination/logos here. Deliberately
   reuses the SAME .mw-filterbar/.mw-field/.mw-input/.mw-select/.mw-card-grid/.mw-pagination
   component classes and scoping convention as the "Insights/News AND Events listing filter
   bars" rules below — one more listing sharing the same look, not a one-off. */
.mw-org-directory {
  margin-top: 0;
}

/* .membersDirectory is the OUTER block-grid section (mw-core.css's own
   .mw-container/.mw-container--wide default margin-block), not .mw-org-directory above (the
   inner section this file's own markup controls) — same "sits directly under the page-head
   band" reasoning as .news-list/.events-list, just needed one level further out here since
   that's the element actually carrying the unwanted top gap. */
.membersDirectory {
  margin-top: 0;
}

/* Full-width #EEEEEE band behind the filter row (design), same "band vs contained content"
   split as .mw-news-list__filter-band/.mw-events-list__filter-band above — the band itself
   isn't width-constrained, only the .mw-filterbar (.mw-container) inside it is. */
.mw-org-directory__filter-band {
  background: #EEEEEE;
  padding-block: 40px;
}

/* 3 fields (Search/Technology/Sector) at 313px each, like News's own 3-field row — but 6px
   corners on the fields themselves (below) rather than News's 4px, per this design's own
   spec. Flattened to transparent/no border/no shadow same as News/Events: core's own
   .mw-filterbar ships a white "floating card" look that isn't wanted here, sitting directly
   on the band's own #EEEEEE instead. margin-bottom:0 — the band's own padding-block gives the
   bottom breathing room instead, so the two don't stack. */
.mw-org-directory .mw-filterbar {
  grid-template-columns: minmax(0, 313px) minmax(0, 313px) minmax(0, 313px) auto auto;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .mw-org-directory .mw-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .mw-org-directory .mw-filterbar {
    grid-template-columns: 1fr;
  }
}

/* Same 48px/10px/#B1B1B1 treatment as the News/Events filter fields above — see that block's
   comment for why a fixed height is needed (native <input>/<select> don't compute the same
   intrinsic height from identical padding). */
.mw-org-directory .mw-field .mw-input,
.mw-org-directory .mw-field .mw-select {
  border: 1px solid var(--mw-color-grey);
  border-radius: 6px;
  height: 48px;
  padding: 10px;
  color: #B1B1B1;
}

.mw-org-directory .mw-field .mw-select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23B1B1B1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}

.mw-org-directory .mw-filterbar__submit {
  --_bg: var(--mw-color-black);
  border-radius: var(--mw-radius-pill);
  height: 48px;
}

.mw-org-directory .mw-filterbar__clear {
  border-radius: var(--mw-radius-pill);
  align-self: end;
  padding: .7rem 1.4rem;
  height: 48px;
  color: var(--mw-color-black);
  border: 1px solid #B1B1B1;
}

.mw-org-directory .mw-filterbar__clear:hover {
  color: var(--mw-color-white);
  background: var(--mw-color-black);
}

/* 4 cards per row (design), plain logo tile + name — no date/category row like News/Events'
   cards, so this gets its own card rules rather than joining their shared selector group. */
.mw-org-directory .mw-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .mw-org-directory .mw-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .mw-org-directory .mw-card-grid {
    grid-template-columns: 1fr;
  }
}

/* "Show Map" toggle (design ADE-26d-2) — sits in its own row above the map while collapsed,
   same as always; once the map is open it floats on top of it instead. .mw-org-directory__map
   is a Leaflet container, and neither it nor .mw-org-directory__map-wrap (position:relative,
   z-index:auto — establishes no stacking context of its own) shields the toggle from Leaflet's
   OWN internal z-indexes: leaflet.css's vendored copy sets .leaflet-pane to 400, .leaflet-popup-
   pane to 700 and .leaflet-top/.leaflet-bottom (the zoom control corners) to 1000 — real values
   confirmed by reading the vendored file, not assumed defaults — and with no stacking context
   between them, those numbers compete directly against whatever z-index sits on a sibling like
   this toggle row. z-index:10 (an earlier attempt) lost to all of them, which is why the button
   rendered fully behind the map in a real browser despite the geometry/position being correct.
   1000 is the same value _OrganisationDetail.cshtml's own "View on map" button
   (.ade-org__map-btn below) already uses to sit on top of its own Leaflet preview map — matching
   it here rather than picking a new number. .mw-org-directory__map-wrap (added around both
   elements in the .cshtml) gives the toggle row and the map a shared positioned ancestor, so
   position:absolute has an unambiguous containing block instead of depending on where either
   element happens to sit in the page's own stacking order. :has(+ .mw-org-directory__map:not(
   [hidden])) is what switches between the two states — the map carries [hidden] (a plain
   display:none, no box at all) while collapsed. */
.mw-org-directory__map-wrap {
  position: relative;
}

.mw-org-directory__map-toggle-row {
  display: flex;
  justify-content: center;
  margin-bottom: var(--mw-space-6);
}

.mw-org-directory__map-toggle-row:has(+ .mw-org-directory__map:not([hidden])) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-bottom: 0;
  z-index: 1000;
}

/* Unchanged from the original design — squared tab hanging off the bottom of the #EEEEEE
   filter band while collapsed. Left exactly as it was; only the row's positioning (above)
   changes when the map opens, not this button's own look. */
.mw-org-directory__map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--mw-color-grey);
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: #EEEEEE;
  color: var(--mw-color-black);
  font-family: var(--mw-font-sans);
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;
  cursor: pointer;
}

.mw-org-directory__map-toggle:hover {
  border-color: var(--mw-color-black);
}

.mw-org-directory__map {
  width: 100%;
  height: 420px;
  margin-bottom: 60px;
  border-radius: 12px;
  overflow: hidden;
}

/* Grid-clustered map pin badge (flexmapDirectory--membersDirectory.cshtml's own clustering —
   no cluster plugin is vendored alongside Leaflet, see that file's header comment for why).
   Leaflet's divIcon wraps this in its own positioning wrapper; iconSize:[36,36] there matches
   the 36px circle here so the click/hover target lines up with what's drawn.

   The number was landing top-left instead of centred: Leaflet's own vendored leaflet.css sets
   .leaflet-marker-icon (a class this div also carries) to display:block, and that stylesheet
   is injected into <head> lazily on first "Show Map" click — i.e. AFTER this one — so for two
   equal-specificity single-class rules, source order hands it the win over our display:flex.
   The compound selector below (two classes, higher specificity) beats it regardless of which
   stylesheet loaded last, confirmed against the live computed style (display was "block"). */
.mw-map-cluster.leaflet-marker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mw-color-primary-dark);
  color: var(--mw-color-white);
  border: 2px solid var(--mw-color-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  font-family: var(--mw-font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.mw-org-card {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
}

/* Logo tile: contain, not cover — a cropped brand mark reads as broken far more often than a
   letterboxed one. Falls back to the same plain "no logo" icon this variant used before
   (there is still no way to attach a logo to every organisation), now only shown when the
   organisation genuinely has none, rather than always. White, not the sitewide surface-alt
   grey — the card's own body sits on white immediately below it, and the grey read as a
   separate panel rather than one continuous card. */
.mw-org-card__logo {
  height: 186px;
  border-bottom: 1px solid var(--mw-color-border);
  background: #fff;
}

/* :empty scopes the fallback icon to cards with genuinely no logo — the .cshtml renders no
   <img> at all when an org has none, so :empty is exact, not a guess. Without this the icon
   sat on the div unconditionally and showed through any transparent-background logo PNG
   (most of them), looking like a second image bleeding through behind the real one. */
.mw-org-card__logo:empty {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='1.5'%3E%3Cpath d='M4 21V5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v16'/%3E%3Cpath d='M13 9h6a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M8 8h1M8 12h1M8 16h1M20 14h1M20 18h1'/%3E%3Cpath d='M9 21v-3a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
}

.mw-org-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--mw-space-4);
}

/* Card body (design): 20px left/right, 30px top/bottom — overrides mw-core.css's own
   .mw-card__body padding, which this variant doesn't want. Flex column so .mw-org-card__role
   below can be pinned to a consistent baseline regardless of how many lines the title took.
   gap:var(--mw-space-4) between title/role replaces mw-core.css's own default gap on this
   element (--mw-space-2) — was leaving less separation than the design wants; the role's own
   padding-top is gone now that the gap does that job instead.
   Left/right brought down to 10px to match the sitewide .mw-card__body treatment above; bottom
   raised to 40px for the same reason — unlike News/Events and the featured/compact cards,
   .mw-org-card carries no outer inset of its own (padding: 0, above), so the body's own
   padding-bottom IS the full 40px to the card edge, with no need to net it down against
   anything else. Top stays this variant's own 30px, unchanged. */
.mw-org-directory .mw-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--mw-space-4);
  padding: 30px 10px 40px;
}

/* No min-height here (client preference, 2026-09-04) — a one-line title just sits shorter than
   a two-line one on the same row rather than reserving 2 lines' worth of space up front; that
   reservation was leaving a large empty gap under most titles, which read worse than the
   resulting row-height mismatch. line-clamp still truncates anything longer than 2 lines with
   an ellipsis, declared explicitly here rather than relying on mw-core.css's own
   .mw-card__title default (same property, but this rule's higher specificity on
   font-size/line-height already overrides half of that default — restating the rest here keeps
   it from depending on which one happens to win per property). */
.mw-org-directory .mw-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Role/type label under the name — see the .cshtml's own comment: "Providers" is a
   placeholder, mwOrganisation has no real Sector/Technology data yet. Separation from the
   title is the card body's own gap (above), not padding here. margin-top:auto pins it to the
   bottom of the flex card body, so it sits on the same line across every card in a row
   regardless of the card's own stretched height. */
.mw-org-card__role {
  margin: 0;
  margin-top: auto;
  font-size: 14px;
  line-height: 26px;
}

/* Related Organisations slider (mwRelatedOrganisationsBlock--relatedOrganisations.cshtml)
   reuses .mw-org-card byte-for-byte from the Membership Directory, but .mw-card__body/
   .mw-card__title's own treatment above is scoped to .mw-org-directory — that page's own
   wrapper, not this block — so it needs restating under this component's own wrapper class.
   Identical declarations to the .mw-org-directory versions above; kept as an exact duplicate
   rather than broadening that selector, since .mw-org-directory is also this specific page's
   own class and widening it risks pulling in unrelated .mw-card__body usage elsewhere. */
.mw-related-organisations .mw-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--mw-space-4);
  padding: 30px 10px 40px;
}

.mw-related-organisations .mw-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination redesign (design ADE-26d-2): squared number buttons (6px corners, not
   mw-core.css's default rounded-square and NOT a full circle — corrected after first shipping
   this as border-radius:50%), an ellipsis for skipped ranges, current page filled in the brand
   wine, and a page-size dropdown alongside it, the whole row centred rather than spread with
   space-between. */
.mw-org-directory__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--mw-space-4);
  margin-top: var(--mw-space-6);
}

.mw-org-directory .mw-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

.mw-org-directory .mw-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--mw-color-grey);
  color: var(--mw-color-black);
  font-size: 14px;
  line-height: 1;
}

.mw-org-directory .mw-pagination__item:hover {
  border-color: var(--mw-color-black);
}

.mw-org-directory .mw-pagination__item--arrow {
  border-color: transparent;
}

.mw-org-directory .mw-pagination__item--current {
  background: #7A2840;
  border-color: #7A2840;
  color: var(--mw-color-white);
}

.mw-org-directory .mw-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--mw-color-black);
}

.mw-org-directory__pagesize select {
  border: 1px solid var(--mw-color-grey);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--mw-color-white);
}


.mw-flexmap__panel--boxed .mw-flexmap__heading {
  margin-bottom: var(--mw-space-3);
}

/* Sidebar nav list (design ADE-26d, "Heat Networks" page sidebar) —
   mwContentListBlock--navLinks.cshtml. A vertical list of sibling pages with the current
   page picked out as a solid pill, plus optional CTA cards below built from the block's own
   "buttons" field (same MwButton source as every other CTA on the site). */
.mw-navlist__heading {
  margin: 0 0 var(--mw-space-3);
}

.mw-navlist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mw-space-2);
}

.mw-navlist__link {
  display: block;
  padding: var(--mw-space-3) var(--mw-space-4);
  border-radius: var(--mw-radius);
  color: var(--mw-color-black);
  font-weight: 400;
  text-decoration: none;
}

.mw-navlist__item.is-active .mw-navlist__link {
  background: var(--mw-color-navlist-active);
  color: var(--mw-color-white);
  font-weight: 700;
}

.nav-blue .mw-navlist__item.is-active .mw-navlist__link {
  background: var(--mw-color-navlist-active-blue);
}

/* Explicit green variant — same value as the default --mw-color-navlist-active, but named so
   a section can opt in deliberately (and keep working if the default ever changes) rather than
   relying on "green just happens to be the fallback". */
.nav-green .mw-navlist__item.is-active .mw-navlist__link {
  background: var(--mw-color-navlist-active);
}

.nav-pink .mw-navlist__item.is-active .mw-navlist__link {
  background: #7A2840;
}

/* Same "nav-*" hook, same block — first column's own heading, sized to match the design.
   Scoped to col1 only so the second column's heading (if any) is untouched. Identical sizing
   across all three colour variants; only the selector's colour class differs. */
.nav-blue .mw-col[data-area="col1"] h2,
.nav-green .mw-col[data-area="col1"] h2,
.nav-pink .mw-col[data-area="col1"] h2 {
  font-size: 42px;
  line-height: 52px;
  margin-bottom: 60px;
}

/* Same "nav-*" hook — widen the gap between the two columns beyond core's default
   .mw-container__inner gap (--mw-space-5). Editor-applied class sits on .mw-container itself
   (the Two Column block's own wrapper), one level above .mw-container__inner, so the override
   targets the child directly rather than needing !important against core. */
.nav-blue .mw-container__inner,
.nav-green .mw-container__inner,
.nav-pink .mw-container__inner {
  gap: var(--mw-space-8);
}

/* nav-blue / nav-green / nav-pink — narrower gutters than the sitewide Fixed-container default
   above (--mw-space-8). Same selector specificity as .mw-container--fixed .mw-container__inner
   (0,2,0), so load order (this rule comes later) wins the cascade tie without !important. */
@media (min-width: 768px) {
  .nav-blue .mw-container__inner,
  .nav-pink .mw-container__inner,
  .nav-green .mw-container__inner {
    padding-inline: var(--mw-space-4);
  }
}

.mw-navlist__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--mw-space-4);
  margin-top: var(--mw-space-5);
}

.mw-navlist__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mw-space-3);
  padding: var(--mw-space-5);
  border-radius: var(--mw-radius);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
}

.mw-navlist__cta--dark {
  background: var(--mw-color-navlist-cta-dark);
  color: var(--mw-color-white);
}

.mw-navlist__cta--light {
  background: var(--mw-color-hero-2);
  color: var(--mw-color-black);
}

.mw-navlist__cta-arrow {
  flex-shrink: 0;
  color: currentColor;
}

/* Organisation detail page (design: ADE-26d-2, Member Directory). Logo card + location map
   side by side. See Views/Shared/MemberWeb/_OrganisationDetail.cshtml for the "About"/"Contact
   Details" gap note — mwOrganisation has no fields for either yet, so this only styles what's
   actually rendered today. */
.mw-org__name {
  font-size: 42px;
  line-height: 52px;
  font-weight: bold;
}

.ade-org__grid {
  display: grid;
  /* Logo column stays a fixed, compact width (it's a small 192x190 image on white); the map
     takes every remaining pixel rather than splitting the row evenly with it. */
  grid-template-columns: 320px 1fr;
  gap: 0; /* logo and map sit flush against each other, no seam between them */
  margin-top: var(--mw-space-6);
  background: var(--mw-color-white);
  border-radius: 20px;
  /* Rounds BOTH children's outer corners in one place — the map's own tiles are opaque and
     fill their half completely, so nothing of this background shows through beside "hiding"
     the logo half's square corners behind the same radius. */
  overflow: hidden;
}

.ade-org__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px;
  margin: 0;
  min-height: 340px;
}

.ade-org__logo img {
  width: 192px;
  height: 190px;
  object-fit: contain;
}

.ade-org__map {
  position: relative;
  min-height: 340px;
}

/* Above Leaflet's own panes (tile ~200, marker ~600) so the button never sits behind the map.
   Also one of the site's "black button" family (--_bg: var(--mw-color-black), see the
   .mw-slider__view-all comment) — height:48px to match the rest of that family sitewide. */
.ade-org__map-btn {
  position: absolute;
  top: var(--mw-space-4);
  right: var(--mw-space-4);
  z-index: 1000;
  --_bg: var(--mw-color-black);
  --_fg: var(--mw-color-white);
  color: var(--mw-color-white);
  padding: 14px;
  border-radius: 24px;
  font-size: 16px;
  line-height: 30px;
  font-weight: bold;
  height: 48px;
}

/* Leaflet adds its OWN "leaflet-container" class directly onto the map element — the very
   same element .ade-org__map-btn sits inside (see _OrganisationDetail.cshtml) — and ships
   `.leaflet-container a { color: #0078A8; }` (one class + one element = higher specificity
   than a lone .ade-org__map-btn class). That's what was actually winning, not caching or a
   hover/visited state. Two classes beats one class + one element, so this wins outright. */
.ade-org__map .ade-org__map-btn,
.ade-org__map .ade-org__map-btn:hover,
.ade-org__map .ade-org__map-btn:visited {
  color: var(--mw-color-white);
}

@media (max-width: 767.98px) {
  .ade-org__grid {
    grid-template-columns: 1fr;
  }

  .ade-org__logo,
  .ade-org__map {
    min-height: 260px;
  }

  .ade-org__logo {
    padding: 48px;
  }

  .ade-org__info {
    grid-template-columns: 1fr;
  }
}

/* About / Contact Details row below the logo+map card. About gets more width than Contact
   Details (2fr vs 1fr), matching the design. */
.ade-org__info {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--mw-space-6);
  margin-top: 60px;
}

.ade-org__section-heading {
  font-size: 32px;
  line-height: 42px;
  font-weight: bold;
  margin-bottom: var(--mw-space-3);
}

/* "relatedNews" variant (mwRelatedArticlesBlock--relatedNews.cshtml, design: ADE-26d-2) — title
   clamped to 2 lines with an ellipsis if longer, so a long headline never pushes card heights
   out of alignment with its neighbours. Scoped to .mw-related-list--news so this never touches
   .mw-card__title on mwArticleListBlock, mwEventListBlock or the relatedEvents variant, which
   all reuse the same card markup unclamped. */
.mw-related-list--news .mw-card__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category badge top-right, matching the design — same override pattern already used by the
   Association-news-alt featured card and the Case Studies slider card. */
.mw-related-list--news .mw-card__media-badge {
  left: auto;
  right: var(--mw-space-3);
}

/* The News listing page's own padded/rounded card treatment (.mw-news-list:not(.mw-related-list)
   .mw-card, further up) deliberately excludes anything also carrying .mw-related-list — this
   block — so it never collides with the Association-news-alt layout. But nothing ever filled
   that gap back in for relatedNews itself, unlike relatedEvents (.mw-event-list .mw-card,
   above): confirmed live, relatedNews cards were rendering completely flush/square (0 padding,
   square media) while relatedEvents got the inset padded look. Mirrors .mw-event-list's card
   treatment values exactly so both "Related" variants read as the same visual language. */
.mw-related-list--news .mw-card {
  padding: 10px;
  border-radius: 12px;
}

.mw-related-list--news .mw-card__media {
  height: 184px;
  border-radius: 8px;
}

.mw-related-list--news .mw-card__body {
  padding-top: 32px;
  padding-bottom: 30px;
  gap: var(--mw-space-4);
}

.mw-related-list--news .mw-card__title {
  font-size: 18px;
  line-height: 27px;
}

.mw-related-list--news .mw-card__date {
  font-size: 14px;
  line-height: 26px;
}

/* Person detail page (adePerson — People section). Photo beside name/abstract/contact,
   matching the Organisation detail page's grid pattern (see .ade-org__grid above). */
.ade-person__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--mw-space-6);
  margin-top: var(--mw-space-6);
  align-items: start;
}

.ade-person__photo {
  margin: 0;
}

.ade-person__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
}

.ade-person__meta {
  margin-bottom: var(--mw-space-3);
}

.ade-person__name {
  font-size: 42px;
  line-height: 52px;
  font-weight: bold;
  margin: 0 0 var(--mw-space-3);
}

.ade-person__abstract {
  font-size: 18px;
  line-height: 28px;
}

.ade-person__contact {
  margin-top: var(--mw-space-4);
}

.ade-person__contact-line {
  margin: 0 0 var(--mw-space-2);
}

.ade-person__body {
  margin-top: var(--mw-space-6);
}

@media (max-width: 767.98px) {
  .ade-person__grid {
    grid-template-columns: 1fr;
  }

  .ade-person__photo img {
    max-width: 240px;
  }
}

/* "Our Team" tabbed staff directory (mwContentListBlock--peopleList.cshtml). Tabs group the
   block's picked people by each person's own category; card grid reuses .mw-card/.mw-card-grid. */
.ade-people-list__header {
  background: #EEEEEE;
  padding: 40px;
  margin-bottom: var(--mw-space-6);
}

/* The inner .mw-container.mw-section (heading + tabs) carries mw-core.css's sitewide
   .mw-section padding-block (--mw-space-8/64px) on top of the .ade-people-list__header's
   own 40px padding above — doubled up. Scoped down to --mw-space-6/32px here rather than
   touching the global .mw-section rule, which every other section on the site also uses. */
.ade-people-list__header .mw-section {
  padding-block: var(--mw-space-6);
}

/* Same doubled-up sitewide .mw-section padding-block, this time on the tab content/card-grid
   panel below the header — .ade-people-list__panel is shared by peopleList's tabbed panels and
   peopleList-alt's single grid panel, so this covers both. */
.ade-people-list__panel.mw-section {
  padding-block: var(--mw-space-6);
}

.ade-people-list__heading {
  font-size: 32px;
  line-height: 42px;
  font-weight: bold;
  text-align: center;
}

/* Sub-heading for a Function-category group within a Team tab (mwContentListBlock--peopleList
   .cshtml). Left-aligned, unlike .ade-people-list__heading above, since it introduces a grid
   within a panel rather than the whole block. */
.ade-people-list__function-heading {
  font-size: 24px;
  line-height: 32px;
  font-weight: bold;
  margin-bottom: var(--mw-space-4);
}

.ade-people-list__function-heading:not(:first-child) {
  margin-top: var(--mw-space-6);
}

/* Three tabs at a fixed 416px each (plus two 32px gaps) need 1312px just for the row — wider
   than this site's own --mw-container-max (1345px) leaves room for once side padding is
   accounted for, so a single row-vs-stacked breakpoint could never cover every width: it was
   still overflowing uncut at 1024px, a plain desktop viewport, not just tablet. flex-wrap lets
   the browser drop tabs onto additional rows at whatever width actually runs out of room,
   rather than guessing a breakpoint for "container narrower than 1312px" up front. */
.ade-people-list__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.ade-people-list__tab {
  border: none;
  border-radius: 12px;
  /* Replaces the old fixed 416px: grows to fill spare row width up to that same 416px cap
     (so a full-width single row on a wide desktop looks exactly as before) but can also
     shrink down to a 200px label-sized pill once wrapped onto its own row, instead of a
     hard-coded width fighting the container at every size in between. */
  flex: 1 1 200px;
  max-width: 416px;
  padding: 24px 28px;
  font-size: 24px;
  line-height: 32px;
  font-weight: bold;
  background: #F5F5F5;
  color: #A5A5A5;
  cursor: pointer;
}

/* Small screens: the 24px/32px desktop type and 24px/28px padding were still too heavy once a
   tab is down to ~200px wide — same downsizing the old ≤600px rule applied, kept as the one
   remaining breakpoint since it's a type-scale change, not a layout one flex-wrap can absorb. */
@media (max-width: 600px) {
  .ade-people-list__tab {
    padding: 16px 20px;
    font-size: 16px;
    line-height: 24px;
  }
}

.ade-people-list__tab.is-active {
  background: #7A2840;
  color: var(--mw-color-white);
}

/* .mw-card-grid sets display:grid as an author style, which otherwise beats the browser's
   default [hidden] { display: none } UA rule on the same element (author always wins over UA
   at equal specificity, regardless of source order) — so the hidden panels stayed visible. */
.ade-people-list__panel[hidden] {
  display: none;
}

/* People slider (a tab with more than 3 people) — same [data-mw-hero] paged-slider mechanism
   and 3/2/1 cards-per-page breakpoints as Case Studies (.mw-resources-slider__*, see
   mwRelatedResourcesBlock--relatedCaseStudies.cshtml), reapplied here so person cards keep
   their own .mw-card/.ade-person-card__* styling instead of the resource-card one. */
.ade-people-list__slider-frame--medium,
.ade-people-list__slider-frame--narrow {
  display: none;
}

@media (max-width: 900px) {
  .ade-people-list__slider-frame--wide {
    display: none;
  }

  .ade-people-list__slider-frame--medium {
    display: block;
  }
}

@media (max-width: 600px) {
  .ade-people-list__slider-frame--medium {
    display: none;
  }

  .ade-people-list__slider-frame--narrow {
    display: block;
  }
}

/* peopleList-alt's plain grid (no slider): same 3/2/1 cards-per-row breakpoints as peopleList's
   own wide/medium/narrow slider frames above, so the two variants read as one family. Without
   this, .mw-card-grid's own generic column count (mw-core.css) goes wider than 3 on a big
   desktop viewport — fine for News/Events cards, too cramped for these person cards at 417px
   wide each. */
.ade-people-list__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .ade-people-list__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ade-people-list__grid {
    grid-template-columns: 1fr;
  }
}

/* Photo box fixed at 417x450 (design spec) — the name/role/email/link block in .mw-card__body
   sits below it at its own natural height, uncapped; the card as a whole is taller than 450px.
   max-width:100% is a safety net, not the sizing mechanism: on a grid column narrower than 417px
   (e.g. the narrow single-column mobile frame) the box shrinks to fit rather than overflowing the
   card, but at the wide/medium frames' own column widths it renders the literal 417x450.
   Superseded 2026-09-15: this used to be a contain-fit box (client request 2026-09-11 — show
   every photo in full, uncropped, empty space left/right preferred over cropping). Client changed
   their mind — photos now fill the box edge-to-edge (object-fit:cover below), cropping whatever
   doesn't fit the 417x450 ratio, same as mw-core.css's own generic .mw-card__media default. */
.ade-people-list__slider-page .mw-card__media,
.ade-people-list__grid .mw-card__media {
  width: 417px;
  height: 450px;
  max-width: 100%;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
}

.ade-people-list__slider-page .mw-card__media img,
.ade-people-list__grid .mw-card__media img {
  position: relative;
  object-fit: cover;
}

.ade-people-list__slider-track {
  display: flex;
  overflow-x: auto;
  /* See .mw-events-slider__track's comment above — this is the one where it actually bites:
     these person cards use plain .mw-card with its real box-shadow (unlike the resources
     slider's, which is zeroed), so without this padding every person card's shadow was
     getting hard-clipped top and bottom by the forced overflow-y:auto. */
  padding-block: 16px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

/* Same oversized-on-hover issue as .mw-resources-slider__card above: mw-core.css's sitewide
   .mw-card:hover lift jumps to --mw-shadow-lg (14px offset/34px blur), bigger than these
   person cards or the track's own padding-block need. Scaled down to the same plain
   --mw-shadow token for consistency with the other slider cards' hover state. */
.ade-people-list__slider-page .mw-card:hover,
.ade-people-list__grid .mw-card:hover {
  box-shadow: var(--mw-shadow);
}

/* Same oversized-on-hover issue again, this time on the plain (non-slider) related-content
   card grids — Related Events/News/Articles all share the .mw-related-list wrapper class
   (see mwRelatedEventsBlock--relatedEvents.cshtml and the two mwRelatedArticlesBlock variants)
   and use plain .mw-card with no variant override, so they inherited mw-core.css's full
   --mw-shadow-lg hover shadow untouched. Scoped to .mw-related-list rather than sitewide .mw-card
   so pages that rely on the full-size hover (if any) aren't silently changed too. */
.mw-related-list .mw-card:hover {
  box-shadow: var(--mw-shadow);
}

.ade-people-list__slider-page {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
}

.ade-people-list__slider-frame--wide .ade-people-list__slider-page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ade-people-list__slider-frame--medium .ade-people-list__slider-page {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ade-people-list__slider-frame--narrow .ade-people-list__slider-page {
  grid-template-columns: 1fr;
}

.ade-person-card__role {
  color: var(--mw-color-text-alt, #6b6b6b);
  margin: 0;
}

.ade-person-card__email {
  font-size: 14px;
  margin: 0;
}

.ade-person-card__link {
  font-weight: bold;
}

/* Person detail page (adePerson) — role subtitle under the name. */
.ade-person__role {
  color: var(--mw-color-text-alt, #6b6b6b);
  font-size: 20px;
  margin: 0 0 var(--mw-space-3);
}

/* News detail page sidebar (mwArticle -> MemberWeb/_ArticleDetail, a compiled MemberWeb.Core
   partial — no source in this repo to edit directly). "Recent articles" and "Newsletter" both
   render as a plain .mw-aside-card, so they can't be told apart by class alone — but only the
   Newsletter one contains a signup <form>, which is enough to target just that card. Scoped to
   .mw-article__aside so this only ever touches the article detail page's sidebar. */
.mw-article__aside .mw-aside-card:has(form) {
  display: none;
}

/* Article detail page: gap between the title and the summary paragraph under it, requested
   at 60px (mw-core.css's title only carries a 24px margin-bottom). */
.mw-article__title {
  margin-bottom: 60px;
}

/* Locked-article padlock badge (adeArticleLocked, mwArticleListBlock.cshtml card grid): sits
   opposite .mw-card__media-badge (top-left, mw-core.css) so the two never collide. Black circle
   matches the black-pill house style used on the article gate's own Sign in/Sign up buttons and
   the News/Events Filter Results button, not the teal category-badge colour — this is a status
   marker, not a category. */
.mw-card__locked-badge {
  position: absolute;
  top: var(--mw-space-3);
  right: var(--mw-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mw-color-black);
  color: var(--mw-color-white);
}

.mw-card__locked-badge svg {
  width: 16px;
  height: 16px;
}

/* Locked-article gate (adeArticleLocked, _ArticleDetail.cshtml): the summary paragraph shown to
   a signed-out visitor in place of the body, and the sign-in notice under it. mw-core.css ships
   no rules for either — .mw-article__summary was unused until this toggle, and
   .mw-article__locked-notice is new — so both need their look defined here. The notice reuses
   the .mw-aside-card pale-grey card language already used elsewhere on this page. */
.mw-article__summary {
  font-size: 18px;
  line-height: 1.6;
  color: var(--mw-color-text);
  margin: 0;
}

/* The fade signals "there's more below" even though the summary is already complete text —
   extra bottom padding gives the gradient room to run without clipping the last line of short
   summaries. Fades to the page background (--mw-color-bg, not the card colour) since the card
   sits on that background, not on white. */
.mw-article__summary-fade {
  position: relative;
  padding-bottom: 40px;
  overflow: hidden;
}

.mw-article__summary-fade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--mw-color-bg));
  pointer-events: none;
}

.mw-article__locked-notice {
  background: var(--mw-color-surface-alt);
  border: 1px solid var(--mw-color-border);
  border-radius: 20px;
  padding: 24px 32px;
  margin-top: var(--mw-space-5);
}

.mw-article__locked-notice-heading {
  margin: 0 0 var(--mw-space-2) 0;
  font-size: 20px;
  line-height: 1.4;
}

.mw-article__locked-notice p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

.mw-article__locked-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mw-space-3);
  margin-top: var(--mw-space-4);
}

/* Black pill, matching the Articles/Events "Filter Results"/"Clear" buttons' own house style
   (.mw-news-list/.mw-events-list .mw-filterbar__submit/__clear above) rather than plain
   .mw-btn--primary/--ghost's maroon — those two are the odd ones out on Resources' own gate,
   not the pattern to copy. */
.mw-article__locked-notice-actions .mw-btn--primary {
  --_bg: var(--mw-color-black);
  border-radius: var(--mw-radius-pill);
}

.mw-article__locked-notice-actions .mw-btn--ghost {
  border-radius: var(--mw-radius-pill);
  color: var(--mw-color-black);
  border-color: var(--mw-color-black);
}

.mw-article__locked-notice-actions .mw-btn--ghost:hover {
  color: var(--mw-color-white);
  background: var(--mw-color-black);
}

.mw-article__locked-notice a {
  font-weight: 600;
}

/* Article detail sidebar "Recent articles" card: matched via :has(.mw-recent), the same
   technique as the Newsletter :has(form) rule above, so only this card (not the hidden
   Newsletter one) is affected.
   - heading: make weight/font explicit rather than trusting inherited defaults, and drop
     mw-core.css's border-bottom divider under it.
   - card: drop the card chrome (border/background/shadow/radius/padding) so the list runs
     the full column width instead of sitting in an inset padded box. */
.mw-article__aside .mw-aside-card:has(.mw-recent) {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.mw-article__aside .mw-aside-card:has(.mw-recent) .mw-aside-card__heading {
  font-family: var(--mw-font-heading);
  font-weight: 700;
  border-bottom: none;
}

/* .mw-card (mw-core.css): the shared card used by every listing across the site — News,
   Events, Resources, Products, Vacancies, Courses (mwArticleListBlock and the related-content
   blocks all render the same markup). Sitewide, not page-scoped, on purpose. This base .mw-card
   has no padding of its own in mw-core.css (that only exists where a listing adds its own inset,
   e.g. the News/Events rule above), so .mw-card__body's own padding IS the full distance to the
   card edge here.
   - drop the 1px outline; the existing box-shadow alone still gives the card a visible edge.
   - .mw-card__body: 16px/1rem left-right requested down to 10px; bottom requested up to 40px.
     (News/Events listings override padding-bottom to 30px instead, above — that card variant
     carries its own 10px outer inset, so 30 + 10 lands on the same 40px to the card edge.)
   - whole-card click target: the "stretched link" technique — .mw-card needs
     position:relative (was static) as the containing block, and the title's real <a> grows
     an absolutely-positioned ::after covering the full card. Layered (z-index) above
     .mw-card__media so the image link (already tabindex="-1"/aria-hidden — decorative, same
     href) doesn't intercept the click; no markup change, and screen readers/keyboard still
     see exactly one link with the card's title as its accessible name. */
.mw-card {
  position: relative;
  border: none;
}

.mw-card__body {
  padding: 32px 10px 40px;
}

.mw-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Spacer block (mwSpacerBlock, "Empty space" style — .mw-rule below is the separate
   "Horizontal line" style and is untouched). Client wants one fixed 60px gap regardless of
   the editor's S/M/L Size pick, so .mw-spacer itself is pinned rather than each
   .mw-spacer--s/m/l modifier (mw-core.css) individually — same specificity, this file loads
   after core so it wins the tie without !important. margin:0 is defensive against any
   block-grid/spacing wrapper margin, so the 60px is the whole gap, not 60px plus extra. */
.mw-spacer {
  height: 60px;
  margin: 0;
}

/* Backoffice-only affordance (mwSpacerBlock.cshtml gates this class behind
   IsBlockPreviewRequest(), so .mw-spacer--preview never reaches the published site — this rule
   is inert there regardless of being in the shared stylesheet). Fixes: the block is otherwise
   empty space with nothing to click to select/re-open it once dropped into a Block Grid area. */
.mw-spacer--preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px dashed var(--mw-color-grey);
  background: var(--mw-color-grey-pale);
}

.mw-spacer__preview-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mw-color-grey);
}

/* Member hub finishing (design: ADE-26d) — the eight pieces the hub screen needs that no
   existing class covers. Each one is either a new reusable utility or a modifier/scoped
   override of a class already in this file; nothing above this point is changed, so every other
   page keeps exactly the rendering it has today. */

/* 1. Outlined pill — the light-background counterpart to the site's black-pill family (see the
   .mw-slider__view-all comment above): same 48px height, pill radius and .mw-btn padding, but
   white fill, black outline, black label. Unscoped on purpose — the hub uses it for "Edit
   Preferences" beside the welcome line, and nothing about it is hub-specific.
   Deliberately NOT mw-core.css's .mw-btn--ghost: that modifier's hover flips --_bg to
   var(--mw-color-primary), i.e. a wine pill on the hub's pink banner, and its 2px currentColor
   border reads heavier than the black pills it sits next to. .mw-filterbar__clear (this file's
   only other outlined pill) can't be reused either — it is scoped to the News/Events filter
   bars and carries their align-self/height alignment fixes.
   Every property .mw-btn would contribute (display, gap, padding, weight, line-height) is
   restated so the class renders correctly on an element carrying it alone, while --_bg/--_fg
   keep it consistent when it IS composed with .mw-btn, the way the black pills are. */
.mw-pill-outline {
  --_bg: var(--mw-color-white);
  --_fg: var(--mw-color-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mw-space-2);
  flex-shrink: 0;
  height: 48px;
  padding: .7rem 1.4rem;
  background: var(--mw-color-white);
  color: var(--mw-color-black);
  border: 1px solid var(--mw-color-black);
  border-radius: var(--mw-radius-pill);
  font-weight: var(--mw-fw-semibold);
  line-height: 1.2;
  text-decoration: none;
}

/* Inverts to the black pill on hover/focus, the same behaviour .mw-filterbar__clear already has,
   so both outlined pills on the site respond identically. Two classes here (0,2,0) also beats
   mw-core.css's `a:hover{color:var(--mw-color-link-hover)}` (0,1,1), which would otherwise turn
   the label teal mid-hover — .mw-btn's own `color:var(--_fg)` is only (0,1,0) and loses to it. */
.mw-pill-outline:hover,
.mw-pill-outline:focus-visible {
  background: var(--mw-color-black);
  color: var(--mw-color-white);
}

/* 2. Section header carrying TWO right-hand pills. The shared header rule above
   (.mw-news-list__header, .mw-resources-slider__header, …) is justify-content:space-between with
   exactly one CTA, so a second pill added as a sibling of the heading spreads three children
   across the row instead of pairing the buttons at the right. Wrapping the pair in this cluster
   restores the two-child heading/actions split. Named in the shared .mw-slider__* family
   (.mw-slider__view-all, .mw-slider__dots) because, like those, it belongs to every alt-layout
   header rather than to one block variant. Gap matches the header's own var(--mw-space-4). */
.mw-slider__actions {
  display: flex;
  align-items: center;
  gap: var(--mw-space-4);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  /* Headers that keep their own box (the standalone listings) wrap instead of squeezing two
     pills in beside the heading; :has() keeps this off every single-CTA header, which still
     fits its one button on the row. */
  .mw-news-list__header:has(.mw-slider__actions),
  .mw-resources-slider__header:has(.mw-slider__actions),
  .mw-event-list__header:has(.mw-slider__actions) {
    flex-wrap: wrap;
  }

  .mw-slider__actions {
    /* order:3 mirrors the mobile ordering the single-CTA headers already use: in
       .mw-related-list--alt / .mw-events-slider the header is display:contents, so the cluster —
       not the button inside it — becomes the orderable flex child and has to carry the order
       .mw-slider__view-all carries there (heading 1, cards 2, CTA 3). In a header that keeps its
       own box the cluster is already the last child, so the declaration is a no-op. */
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }
}

/* 3. White cards in the 3-across hub grid (design: ADE-26d — the cards sit on the pale grey band
   below, where the base item's #F5F5F5 all but disappears). A container modifier that recolours
   its items, exactly as .mw-hub-cards--stacked does for the sidebar variant above, so the base
   .mw-hub-cards__item the hubActions variant renders by default is untouched. The #D9D9D9 border
   stays: it is what keeps a white card legible against a near-white band. */
.mw-hub-cards--white .mw-hub-cards__item {
  background: var(--mw-color-white);
}

/* 4. Type "bg-grey-band-pale" into a block's CSS classes field for the design's paler #F4F4F4
   section background (the hub's card band). A separate utility rather than a change to
   .bg-grey-band above, which is the #EEEEEE band already in use on the News/Events filter
   sections. #F4F4F4 is the sampled design value and is its own literal on purpose — neither
   --mw-color-grey-band (#EEEEEE) nor --mw-color-grey-pale (#F5F5F5) is this colour. !important
   for the same reason .bg-grey-band needs it: a Background image set on the same block renders
   as an inline style and would otherwise win. */
.bg-grey-band-pale {
  background-color: #F4F4F4 !important;
}

/* 5. Announcement panel finishing (design: ADE-26d, the wine card on the hub). The wine field is
   normally the block's own Background colour picker — the same mechanism the Key Membership
   Documents band relies on (see .mw-resources-slider--docs above) — but it is stated here too,
   because these rules force white text: on a block whose picker was left unset that would be
   white on white, i.e. invisible copy rather than an obviously unstyled panel. #79283F is the
   sampled panel value from the design; the #7A2840 further up this file is the hub notification
   icon/badge wine, a different swatch rather than a typo to reconcile with this one.
   Everything below is a descendant of the editor-applied class, so none of it can reach the
   homepage banners or any other wine section. */
.announcement-wine {
  background-color: #79283F;
  color: var(--mw-color-white);
}

/* Headings need saying explicitly even with the container colour set: mw-core.css's own
   `h1,h2,…{color:var(--mw-color-heading)}` is an element selector that beats inheritance.
   .mw-heading covers the Heading block when it renders at a level not listed here. */
.announcement-wine h2,
.announcement-wine h3,
.announcement-wine h4,
.announcement-wine .mw-heading {
  color: var(--mw-color-white);
}

/* Black pill inside the wine panel: the design keeps the site's black button here rather than
   inverting it to white against the wine field, so this is the same black-button family
   documented at .mw-slider__view-all — 48px like the rest of it, not a panel-specific button.
   The explicit `color` (0,2,0) is what holds the label white through hover: mw-core.css's
   `a:hover{color:var(--mw-color-link-hover)}` (0,1,1) outranks .mw-btn's `color:var(--_fg)`
   (0,1,0) and would otherwise turn it teal on the black fill. */
.announcement-wine .mw-btn {
  --_bg: var(--mw-color-black);
  --_fg: var(--mw-color-white);
  color: var(--mw-color-white);
  border-radius: var(--mw-radius-pill);
  height: 48px;
}

/* 6. (Removed 2026-09-11) "View all" on the Key Membership Documents band used to be forced
   white regardless of its own Style field — mwRelatedResourcesBlock--documents.cshtml hardcoded
   the button's class and ignored Style entirely. The view now reads Style properly (same
   ButtonStyleClass pattern as relatedCaseStudies.cshtml below); getting the white pill back is
   a content change (set the button's Style to Secondary — see .mw-btn--white just below), not
   a CSS one. Existing "documents" blocks whose Style was left unset now render Primary (solid
   wine) instead of white. */

/* 6b. "Secondary" button style, white fill / black label (2026-09-11: requested as a reusable
   Style option, not scoped to one section — first used by mwRelatedResourcesBlock--documents's
   "View all", but composes with .mw-btn like every other *--modifier, so any view's
   ButtonStyleClass can map "secondary" here the same way). Deliberately just a --_bg/--_fg swap
   with nothing else: no custom :hover, so it falls through to mw-core.css's shared
   .mw-btn:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:...} — identical
   to Primary/Accent's hover, on purpose (asked for explicitly: reuse Primary's hover exactly,
   don't invent a new one — ruled out .mw-pill-outline for this reason, since its hover inverts
   to a solid-black fill, a different, invented behaviour). */
.mw-btn--white {
  --_bg: var(--mw-color-white);
  --_fg: var(--mw-color-black);
  color: var(--mw-color-black);
}

/* 6a. relatedCaseStudies' "Outline" button style (mwRelatedResourcesBlock--relatedCaseStudies.cshtml):
   mw-core.css's .mw-btn--ghost borders/labels in var(--mw-color-primary) (wine) by default, and
   its border is currentColor — so text and border can't diverge through --_fg alone once the
   border needs its own colour. White --_bg keeps it solid rather than transparent; --_fg (+
   `color`) turns the label black; `border-color` overrides the inherited currentColor to #A5A5A5
   (sampled design value, not one of the existing --mw-color-grey* tokens, so literal on purpose).
   Scoped to this header only, same pattern as the --docs override above, so .mw-btn--ghost keeps
   its wine look everywhere else it's used (e.g. the member-directory filter bar's Clear button). */
.mw-resources-slider__header .mw-btn--ghost {
  --_bg: var(--mw-color-white);
  --_fg: var(--mw-color-black);
  color: var(--mw-color-black);
  border-color: #A5A5A5;
}

/* 7. "relatedNews" card grid (design: ADE-26d, "Latest Briefings"): 3 across. The sitewide
   3-column rule above is .mw-news-list:not(.mw-related-list) .mw-card-grid, and this variant's
   <section> carries mw-news-list AND mw-related-list (mwRelatedArticlesBlock--relatedNews.cshtml
   line 52), so that exclusion deliberately skips it — leaving mw-core.css's
   auto-fill(minmax(min(100%,300px),1fr)) to pack 4+ columns in at desktop widths. Pinned here
   under the variant's own class instead of loosening the exclusion, which exists to protect the
   Association-news alt layout's featured+stack grid. Tablet/mobile repeat the same 900px/600px
   tiers as the News/Events grids, and for the same reason: a fixed column count cannot
   auto-reflow, so every tier has to be stated. */
.mw-related-list--news .mw-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .mw-related-list--news .mw-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .mw-related-list--news .mw-card-grid {
    grid-template-columns: 1fr;
  }
}

/* "insights-card" — the Three Column block's own "additional CSS class" (Advanced tab),
   Insight testing page. Closes the gap between the mw-col columns to 32px (--mw-space-6 is
   exactly that) — mw-core.css's own .mw-container__inner default is var(--mw-space-5), 24px. */
.insights-card .mw-container__inner {
  gap: var(--mw-space-6);
}

/* "cards" — each Group block's own "CSS classes" field (Advanced tab) inside those columns.
   Not used anywhere else in this file or in mw-core.css (checked both before adding this). */
.cards {
  border-radius: 20px;
  padding: 10px;
}

.cards .mw-heading {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  padding-top: 30px;
  padding-bottom: 23px;
  padding-left: 30px;
  padding-right: 30px;
}

.cards .mw-richtext {
  padding-top: 40px;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
}

.cards .mw-buttons {
  /* auto (not 0) so it both clears mw-core.css's .mw-group__content>*+*{margin-top:
     var(--mw-space-5)} sibling rule AND pins the button to the bottom of the card: .mw-col's
     own :has(>.mw-group--fill) rule (mw-core.css) already stretches every column in a row to
     match the tallest card's height, and .mw-group__content is a column flexbox, so a flex
     item's auto top-margin consumes the leftover space instead of leaving it above the button
     — buttons across a row of cards with uneven text length all land on the same line. */
  margin-top: auto;
  padding-bottom: 40px;
  padding-left: 30px;
  padding-right: 30px;
}

/* PDF "Download" button added above the embedded viewer on the resource detail page
   (Views/Shared/Components/ResourceViewer/Default.cshtml, client override — see that file's
   own header comment for why). mw-core.css ships no .mw-resource-viewer__toolbar at all since
   the shipped view never had a button here to lay out; this just right-aligns it above the
   iframe with the same spacing rhythm as the rest of the viewer's items. */
.mw-resource-viewer__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--mw-space-3, 12px);
}

/* Site's established black-outline pill — same family as .mw-filterbar__clear (News/Events
   "Clear") rather than mw-core.css's default wine .mw-btn--ghost look. A previous note here
   said this needed the button wrapped in an element carrying the "cards" class (a Group
   block's own editor-typed "CSS classes" field) to pick up the black-pill treatment — but
   .mw-resource-viewer__toolbar never carries "cards" and isn't editor-configurable at all, so
   that never actually applied. Scoped directly instead. --_bg is left alone (.mw-btn--ghost's
   own transparent is correct at rest) — color/border-color need to be explicit, same reason
   .mw-filterbar__clear's own comment gives: .mw-btn--ghost's --_fg alone loses the specificity
   tie against whatever sets a text colour here otherwise, so it must be set directly. */
.mw-resource-viewer__toolbar .mw-btn {
  border-radius: var(--mw-radius-pill);
  height: 48px;
  color: var(--mw-color-black);
  border-color: var(--mw-color-black);
}

.mw-resource-viewer__toolbar .mw-btn:hover {
  color: var(--mw-color-white);
  background: var(--mw-color-black);
}

.cards .mw-btn {
  --_bg: var(--mw-color-black);
  border-radius: var(--mw-radius-pill);
  height: 48px;
}

/* ---------------------------------------------------------------------------------------
   Publications listing prototype (mwArticleListBlock.cshtml, feat/publication-filters) —
   ADE's "publication filters" ask: five fields (Search / Function / Publication type /
   Access / Sort By) instead of News' three, and a STACK of badges on each card (one per
   Function the item carries, then its Publication type) instead of the single first-category
   badge. Function badges take the area-theme colours already defined in mw-themes/
   heat-network.css (#B3D799) and demand.css (#9CDFE8) so a Heat Networks item reads green
   and a Demand item blue, the same as those areas' page-head bands. */
.mw-news-list--publications .mw-filterbar {
  grid-template-columns: minmax(0, 250px) repeat(4, minmax(0, 190px)) auto auto;
}

@media (max-width: 900px) {
  .mw-news-list--publications .mw-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Five fields (odd) against a 2-column grid: keep the two buttons paired on their own row,
     same fix .mw-news-list__filterbar__submit applies for News' three fields. */
  .mw-news-list--publications .mw-filterbar__submit {
    grid-column: 1;
    grid-row: auto;
  }
}

.mw-news-list__note {
  margin: var(--mw-space-4) auto 0;
  font-size: .9rem;
  color: var(--mw-color-text-muted, var(--mw-color-text));
}

.mw-card__media-badges {
  position: absolute;
  top: var(--mw-space-3);
  left: var(--mw-space-3);
  right: calc(var(--mw-space-3) + 36px); /* clear the lock roundel on the right */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mw-badge--fn-heat-networks {
  background: #B3D799;
  color: #1c3a12;
}

.mw-badge--fn-demand {
  background: #9CDFE8;
  color: #0b3f47;
}

.mw-badge--type {
  background: var(--mw-color-black);
  color: var(--mw-color-white);
}

/* Scroll-triggered overlay preview for gated PDF resources (_ResourceDetail.cshtml). Moved out
   of an inline <style> block 2026-09-22: the 0.14.0 CSP nonces every <script> a view renders
   (MemberWeb.Core tag helper) but has no equivalent for <style>, so an inline block here was
   silently dropped by style-src — this file is served from 'self', which the CSP already allows. */
.mw-resource__pdf-preview {
  position: relative;
  overflow: hidden;
  border-radius: var(--mw-radius, 8px);
  background: #f5f5f5;
}

.mw-resource__pdf-preview-scroll {
  max-height: 70vh;
  overflow-y: auto;
}

.mw-resource__pdf-preview-page {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.mw-resource__pdf-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(17, 17, 17, .72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.mw-resource__pdf-preview-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.mw-resource__pdf-preview-overlay-inner {
  max-width: 26rem;
  padding: 1.5rem;
  color: #fff;
}

.mw-resource__pdf-preview-lock {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto .75rem;
  color: #fff;
}

.mw-resource__pdf-preview-heading {
  color: #fff;
  margin: 0 0 .5rem;
  font-size: 1.25rem;
}

.mw-resource__pdf-preview-overlay-inner .mw-resource__gate-message {
  color: rgba(255, 255, 255, .9);
  margin: 0 0 1.25rem;
}