/* ============================================================
   Leadership Carousel — component styles
   Deploy path: /assets/rbccm/css/components/leadership-carousel.css

   Snapshot source: production CSS as of 2026-08-28. Prior repo baseline
   was largely in sync; this snapshot adds the three prod-only rulesets
   that were missing locally:
     • .rbccm-leadership--on-ltblue          (light-blue color scheme)
     • .rbccm-leadership__card-displayboth   (LinkType='both' card variant)
     • .contact-details .blue-circle-outline (modal contact icons)
   Everything else is unchanged from what was already in the repo.

   Companion files:
     • /assets/rbccm/js/components/leadership-carousel.js
     • leadership-carousel.xsl (skin — DCR-driven author data)
============================================================ */

/* -- Screen reader only -- */
    .rbccm-leadership__sr-only {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }


    /* -- Section -- */
    #rbccm-leadership.rbccm-leadership {
      background-color: #ffffff;
      box-sizing: border-box;
      overflow: hidden;
      padding: 64px 0;
      position: relative;
      width: 100%;
    }

    /* -- Inner container --
       16px horizontal gutter on mobile so the first card doesn't
       touch the viewport edge (matches the heading's 0 16px padding
       above so headings and cards line up left). Padding drops away
       at 1170px where the max-width takes over and centres the block. */
    .rbccm-leadership__inner {
      box-sizing: border-box;
      margin: 0 auto;
      max-width: 1200px;
      padding: 0 16px;
      position: relative;
    }
    @media (min-width: 1170px) {
      .rbccm-leadership__inner {
        max-width: 1140px;
        padding: 0;
      }
    }

    /* -- Heading --
       Clamped to the 1140px content rail so it lines up with the carousel
       row below. Side padding on mobile keeps text off the viewport edge
       and drops away at the 1170px breakpoint where the max-width takes
       over. Removed the old negative-16px pull-out — that was compensating
       for the Bootstrap .container wrapper which no longer wraps this. */
    .rbccm-leadership__heading {
      color: #003168;
      font-family: RBCDisplay, Georgia, Times, serif;
      font-size: 29px;
      font-weight: 500;
      line-height: normal;
      margin: 0 auto 35px auto;
      max-width: 1140px;
      padding: 0 16px;
    }
    @media (min-width: 1170px) {
      .rbccm-leadership__heading { padding: 0; }
    }

    /* -- Slider wrapper -- */
    .rbccm-leadership__slider-track { margin: 0 -8px; }
    @media (min-width: 1300px) {
      .rbccm-leadership__slider-track { margin: 0; overflow: hidden;}
    }
    /* Override slick's default 30px bottom margin on a dotted slider */
    #rbccm-leadership .rbccm-leadership__slider-track.slick-dotted.slick-slider {
      margin-bottom: 15px;
    }

    /* -- Slick overrides -- */
    #rbccm-leadership .slick-slide {
      box-sizing: border-box;
      float: none;
      height: auto;
      margin: 0 !important;
    }
    #rbccm-leadership .slick-slide > div,
    #rbccm-leadership .slick-slide > div > div { }
    #rbccm-leadership .slick-track {
      display: flex !important;
      align-items: stretch !important;
    }
    #rbccm-leadership .slick-list { overflow: visible; }
    #rbccm-leadership .slick-prev,
    #rbccm-leadership .slick-next { display: none !important; }

    /* -- Active card border --
       Card widths:
         mobile (< 560px) → 343px (fat card, one-per-view)
         560px+           → 270px (multi-card view, tidy 1/2/3/4 math)
       With variableWidth: true and centerMode: false, slick shows N
       cards where N = floor(container_width / 290)  (270 card + 20 gap).
           <  560px viewport → 1 card @ 343
           560-849  viewport → 2 cards @ 270
           850-1139 viewport → 3 cards @ 270
           1140+    viewport → 4 cards @ 270
       Same 270px card at every desktop-ish size keeps the 263px bio
       photos from cropping weirdly when the browser resizes. Mobile
       gets the wider 343 so single-column reads comfortably. */
    .rbccm-leadership__card {
      border: 1px solid #A8A8A8;
      box-sizing: border-box;
      display: flex !important;
      flex-direction: column !important;
      margin: 0 8px;
      width: 343px !important;
    }
    @media (min-width: 560px) {
      .rbccm-leadership__card {
        margin: 0 20px 0 0;
        width: 270px !important;
      }
    }
    /* Active-card border. `.slick-center` was the marker while the
       carousel ran in centerMode; that class isn't applied under the
       left-align layout, so we also match `.slick-current` (slick's
       class for the leftmost visible slide when centerMode is off).
       Keeping both selectors means either mode still lights up the
       anchor card in dark blue. */
    #rbccm-leadership .slick-center .rbccm-leadership__card,
    #rbccm-leadership .slick-current .rbccm-leadership__card {
      border-color: #003168;
    }

    /* -- Card image zone -- */
    .rbccm-leadership__card-image {
      background-color: #DADADA;
      border-bottom: 1px solid #DADADA;
      box-sizing: border-box;
      flex-shrink: 0;
      max-height: 263px;
      min-height: 263px;
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    .rbccm-leadership__card-image img {
      display: block;
      height: 263px;
      object-fit: cover;
      object-position: top center;
      width: 100%;
    }
    .rbccm-leadership__fpo {
      align-items: center;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 263px;
    }
    .rbccm-leadership__fpo svg { height: 80px; opacity: 0.3; width: 80px; }
    .rbccm-leadership__card-image img[src]:not([src=""]):not([src*="fpoimg.com"]) ~ .rbccm-leadership__fpo {
      display: none;
    }

    /* -- Card body -- */
    .rbccm-leadership__card-body {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      gap: 8px;
      height: auto;
      min-height: 185px;
      max-height: 185px;
      padding: 24px 24px 46px;
      position: relative;
      background-color:#fff;
    }

    /* -- Long-role mode --
       JS sets `.rbccm-leadership--long-role` on the section when ANY card's
       role text exceeds ~70 characters. We grow the card-body bottom
       padding + lift the absolutely-positioned action button so multi-line
       role text doesn't butt up against it. Applied uniformly to every
       card so they all match visually. -- */
    .rbccm-leadership--long-role .rbccm-leadership__card-body {
      padding-bottom: 86px;
      min-height: 225px;
      max-height: 225px;
    }
    .rbccm-leadership--long-role .rbccm-leadership__card-bio,
    .rbccm-leadership--long-role .rbccm-leadership__card-linkedin {
      bottom: 44px;
    }

    /* -- Biography -- absolute bottom-left of card body -- */
    .rbccm-leadership__card-bio {
      /* Strip button chrome */
      appearance: none;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;

      /* Pin to bottom-left, mirroring the LinkedIn placement */
      position: absolute;
      bottom: 24px;
      left: 24px;

      /* Link styling */
      color: #006AC3;
      font-size: 15px;
      line-height: 1;
      text-align: left;
      text-decoration: none;
    }

    .rbccm-leadership__card-bio:hover,
    .rbccm-leadership__card-bio:focus-visible {
      text-decoration: underline;
      outline: none;
    }

    /* Focus state on the card.
       Reuses the active (.slick-center) #003168 border so the focus
       treatment matches the centered-card language across:
         (1) actionless cards that became the tab stop themselves
             (.rbccm-leadership__card:focus-visible), AND
         (2) cards whose inner action (LinkedIn anchor, Biography button)
             has keyboard focus (:has(:focus-visible)). */
    .rbccm-leadership__card:focus { outline: none; }
    /* Primary focus indicator: :focus-within fires whenever the card OR
       any descendant has focus. Works in every browser that supports
       focus events; doesn't depend on :focus-visible or :has(). */
    .rbccm-leadership__card:focus-within,
    .rbccm-leadership__card:focus-visible,
    .rbccm-leadership__card.is-focused {
      border-color: #003168 !important;
      outline: none;
    }
    /* :has() kept in its own rule so a browser that fails to parse it
       can drop just this rule, not the one above. */
    .rbccm-leadership__card:has(:focus-visible) {
      border-color: #003168 !important;
      outline: none;
    }

    /* Focus ring on the card's action element. Keyboard-only via
       :focus-visible so mouse clicks don't show it. Uses #003168 so
       all focus indicators across the component share the same colour. */
    .rbccm-leadership__card-action:focus { outline: none; }
    .rbccm-leadership__card-action:focus-visible {
      outline: 2px solid #003168;
      border-radius: 4px;
    }

    /* Focus ring on the Prev / Next arrow buttons — keyboard-only,
       same #003168 as everything else so the system feels consistent. */
    .rbccm-leadership__btn:focus { outline: none; }
    .rbccm-leadership__btn:focus-visible {
      outline: 2px solid #003168;
      border-radius: 4px;
    }

    /* Hide the circular SVG icon — text-only link */
    .rbccm-leadership__card-bio svg {
      display: none;
    }

    /* -- Card name -- */
    .rbccm-leadership__card-name {
      color: #000;
      font-family: Roboto, sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: normal;
      margin: 0;
    }

    /* -- Card role -- */
    .rbccm-leadership__card-role {
      color: #454545;
      font-family: Roboto, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 19px;
      margin: 0;
    }

    /* -- LinkedIn -- absolute bottom-right of card body -- */
    .rbccm-leadership__card-linkedin {
      bottom: 24px;
      display: inline-block;
      height: 44px;
      position: absolute;
      right: 24px;
      text-decoration: none;
      width: 44px;
    }
    .rbccm-leadership__card-linkedin .li-default { display: block; }
    .rbccm-leadership__card-linkedin .li-hover   { display: none; }
    .rbccm-leadership__card-linkedin:hover .li-default { display: none; }
    .rbccm-leadership__card-linkedin:hover .li-hover   { display: block; }

    /* -- Carousel layout grid --
       DOM order is [Prev] → [slides] → [Next] → [dots] (slick-default).
       Visual layout reshuffles per breakpoint via grid-template-areas:
         Mobile  → track on top, [Prev · Dots · Next] in a row below
         Desktop → Prev flanks left of track, Next flanks right, dots
                   centred in a row beneath the track. */
    .rbccm-leadership__carousel {
      align-items: center;
      box-sizing: border-box;
      display: grid;
      gap: 24px 26px;
      /* 5-column layout: empty 1fr · prev · dots · next · empty 1fr.
         The two outer 1fr cells absorb all the slack, so the
         [prev · dots · next] cluster sits centred together with 26px
         gaps between the arrows and the dot strip — not pushed out to
         the viewport edges. The track spans all five columns. */
      grid-template-columns: 1fr auto auto auto 1fr;
      grid-template-areas:
        "track track track track track"
        ".     prev  dots  next  .";
      margin: 4px auto 0;        /* centre under the 1140 heading */
      max-width: 1140px;         /* lines up with .rbccm-leadership__inner @1170+ */
      width: 100%;
    }
    @media (min-width: 1300px) {
      .rbccm-leadership__carousel {
        /* Track is locked at 1140 (lines up with the heading inside __inner);
           arrows live in their own auto-width columns OUTSIDE the 1140 rail.
           Carousel itself extends beyond __inner via negative side margins
           so the arrows can sit in the section's gutter without shrinking
           the track. */
        column-gap: 24px;
        grid-template-areas:
          "prev track next"
          ".    dots  .";
        grid-template-columns: auto 1140px auto;
        margin: 4px -68px 0 -68px;
        max-width: none;
      }
    }
    #rbccm-leadership #rbccm-lead-prev                { grid-area: prev; }
    #rbccm-leadership .rbccm-leadership__slider-track { grid-area: track; min-width: 0; }
    #rbccm-leadership #rbccm-lead-next                { grid-area: next; }
    #rbccm-leadership #rbccm-lead-dots                { grid-area: dots; justify-self: center; }

    /* -- Controls row (LEGACY — kept in case other pages still emit this markup) --
       The new carousel uses the CSS Grid layout above; this flex row is no
       longer used by leadership-slider-bio.html but is retained for safety. */
    .rbccm-leadership__controls {
      align-items: center;
      display: flex;
      gap: 26px;
      justify-content: center;
      margin-top: 40px;
    }
    @media (min-width: 1245px) {
      .rbccm-leadership__controls { display: none; }
    }

    /* -- Control buttons -- */
    .rbccm-leadership__btn {
      align-items: center;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      flex-shrink: 0;
      height: 24px;
      justify-content: center;
      padding: 0;
      width: 14px;
    }
    .rbccm-leadership__btn svg { display: block; }

    /* In the new __carousel grid the button must auto-size to whichever
       icon SVG is showing (14×24 on mobile, 44×44 on desktop), so undo
       the legacy fixed dimensions in that context only. */
    .rbccm-leadership__carousel .rbccm-leadership__btn {
      height: auto;
      width: auto;
    }
    /* Specificity bumped (.btn + .icon = 0,2,0) so these win against the
       generic ".rbccm-leadership__btn svg { display: block }" rule above. */
    .rbccm-leadership__btn .rbccm-leadership__btn-icon--mobile     { display: block; }
    .rbccm-leadership__btn .rbccm-leadership__btn-icon--desktop    { display: none; }
    @media (min-width: 1300px) {
      .rbccm-leadership__btn .rbccm-leadership__btn-icon--mobile   { display: none; }
      .rbccm-leadership__btn .rbccm-leadership__btn-icon--desktop  { display: block; }
    }

    /* -- Dots wrapper -- */
    .rbccm-leadership__dots-wrap {
      align-items: center;
      display: flex;
      flex: 0 0 auto;
      justify-content: center;
    }

    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots {
      align-items: center;
      bottom: auto !important;
      display: flex !important;
      gap: 26px;
      justify-content: center;
      list-style: none;
      margin: 0;
      padding: 0;
      position: static !important;
      width: auto !important;
    }
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li {
      align-items: center;
      box-sizing: border-box;
      display: flex !important;
      height: 11px !important;
      justify-content: center;
      margin: 0 !important;
      padding: 0 !important;
      width: 11px !important;
    }
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button {
      background: none !important;
      border: none !important;
      box-sizing: border-box !important;
      cursor: pointer;
      display: block !important;
      font-size: 0 !important;
      height: 11px !important;
      line-height: 0 !important;
      margin: 0 !important;
      outline: none;
      padding: 0 !important;
      position: static !important;
      width: 11px !important;
    }
    /* Inactive dot: outlined circle */
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Ccircle cx='5.5' cy='5.5' r='5' stroke='%23003168' stroke-width='1' fill='none'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-size: 11px 11px !important;
      content: '' !important;
      display: block !important;
      height: 11px !important;
      opacity: 1 !important;
      position: static !important;
      width: 11px !important;
    }
    /* Active li: same 11px size, ring via box-shadow 4px offset */
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li.slick-active {
      height: 11px !important;
      width: 11px !important;
    }
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li.slick-active button {
      height: 11px !important;
      width: 11px !important;
    }
    /* Active dot: filled circle + ring 4px out via box-shadow.
       Same visual is reused for keyboard focus (:focus-visible) AND mouse
       hover so the dot animates into the active treatment when interacted
       with. */
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button::before {
      transition: background-image 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
    }
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li.slick-active button::before,
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button:focus-visible::before,
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Ccircle cx='5.5' cy='5.5' r='5.5' fill='%23003168'/%3E%3C/svg%3E") !important;
      background-size: 11px 11px !important;
      border-radius: 50% !important;
      box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px #003168 !important;
      height: 11px !important;
      width: 11px !important;
      outline: 0px;
    }
    #rbccm-leadership .rbccm-leadership__dots-wrap .slick-dots li button:focus-visible {
      outline: none;
    }

    /* Desktop arrow hover — fills the circle blue and turns the chevron
       white with a smooth transition. Targets the SVG paths directly. */
    .rbccm-leadership__btn-icon--desktop rect,
    .rbccm-leadership__btn-icon--desktop path {
      transition: fill 0.2s ease, stroke 0.2s ease;
    }
    .rbccm-leadership__btn:hover .rbccm-leadership__btn-icon--desktop rect {
      fill: #003168;
    }
    .rbccm-leadership__btn:hover .rbccm-leadership__btn-icon--desktop path {
      stroke: #ffffff;
    }

    /* -- Desktop arrows overlay >=1245px (LEGACY — kept in case other pages
          still emit this markup; the new __carousel grid handles arrow
          placement at all viewports). -- */
    .rbccm-leadership__arrows-desktop {
      align-items: center;
      display: none;
      gap: 26px;
      justify-content: flex-end;
      margin-top: 40px;
      pointer-events: none;
      position: static;
      width: 100%;
    }
    @media (min-width: 1245px) {
      .rbccm-leadership__arrows-desktop { display: flex; }
    }
    .rbccm-leadership__btn-desk {
      align-items: center;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      height: 44px;
      justify-content: center;
      padding: 0;
      pointer-events: all;
      width: 44px;
    }

    /* -- Reduced motion -- */
    @media (prefers-reduced-motion: reduce) {
      #rbccm-leadership .slick-track {
        transition: none !important;
      }
      .rbccm-leadership__card-linkedin::before,
      .rbccm-leadership__card-linkedin::after,
      .rbccm-leadership__card {
        transition: none !important;
      }
    }

    /* ============================================================
       Subheading + on-dark modifier
       ============================================================ */

    /* -- Subheading -- optional paragraph below H2. Same 1140px content
          rail as the heading so both align to the carousel row. Only
          inserted when the Subheading Datum is set. */
    .rbccm-leadership__subheading {
      color: var(--Blue-Dark-Blue, #003168);
      font-family: Roboto, sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      margin: 0 auto 35px auto;
      max-width: 1140px;
      padding: 0 16px;
    }
    @media (min-width: 1170px) {
      .rbccm-leadership__subheading { padding: 0; }
    }

    /* -- Heading spacing when a subheading follows -- pull the H2 close
          to the subheading (12px) so they read as a paired header block. */
    .rbccm-leadership__heading--with-subhead {
      margin-bottom: 12px;
    }

    /* ============================================================
       Modifier: --on-dark
       Dark blue section background + white heading/subheading text.
       Cards stay light (white bg, dark text) — only the section
       chrome switches. Arrow chevrons + dots invert to white for
       legibility against the dark bg.
       ============================================================ */

    /* Section bg. Uses the RBC dark blue (#003168) so the component
       matches other on-dark modules across the site. */
    #rbccm-leadership.rbccm-leadership--on-dark {
      background-color: #003168;
    }

    /* Heading + subheading go white on dark. Alignment is decoupled —
       controlled by the separate `--headings-centered` modifier so
       authors can pick left-align or center independent of scheme. */
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__heading,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__subheading {
      color: #ffffff;
    }

    /* Card body needs an explicit white bg on the dark scheme; without
       it the body inherits the dark section bg and card text becomes
       unreadable. Card image already has its own #DADADA bg, so this
       only affects the text half of the card. */
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card-body {
      background-color: #ffffff;
    }


    /* ============================================================
       Modifier: --headings-centered
       Center-aligns the heading + subheading. Works in either color
       scheme so authors can pick alignment independent of light/dark.
       Default alignment (left) is inherited from the base heading rule.
       ============================================================ */
    .rbccm-leadership--headings-centered .rbccm-leadership__heading,
    .rbccm-leadership--headings-centered .rbccm-leadership__subheading {
      text-align: center;
    }

    /* Arrow chevrons + rings invert to white so they read on the dark
       bg. Hover state fills the arrow white with a dark chevron
       (mirror of the light-theme fill-blue-with-white-chevron). */
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn-icon--mobile path,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn-icon--desktop rect,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn-icon--desktop path {
      stroke: #ffffff;
    }
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn:hover .rbccm-leadership__btn-icon--desktop rect {
      fill: #ffffff;
    }
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn:hover .rbccm-leadership__btn-icon--desktop path {
      stroke: #003168;
    }

    /* Dots — inactive outlined circles switch to white outline;
       active/hover/focus circle fills white with a dark-blue ring
       gap so the active dot still reads. */
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__dots-wrap .slick-dots li button::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Ccircle cx='5.5' cy='5.5' r='5' stroke='%23ffffff' stroke-width='1' fill='none'/%3E%3C/svg%3E") !important;
    }
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__dots-wrap .slick-dots li.slick-active button::before,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__dots-wrap .slick-dots li button:focus-visible::before,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__dots-wrap .slick-dots li button:hover::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Ccircle cx='5.5' cy='5.5' r='5.5' fill='%23ffffff'/%3E%3C/svg%3E") !important;
      box-shadow: 0 0 0 4px #003168, 0 0 0 5px #ffffff !important;
    }

    /* Active card border — light-theme uses #003168 (dark blue) which
       vanishes against the dark bg. Swap to white so the centered card
       still reads as focused. */
    #rbccm-leadership.rbccm-leadership--on-dark .slick-center .rbccm-leadership__card,
    #rbccm-leadership.rbccm-leadership--on-dark .slick-current .rbccm-leadership__card {
      border-color: #ffffff;
    }

    /* Focus indicators on the dark scheme also flip to white for the
       same contrast reason. */
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card:focus-within,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card:focus-visible,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card.is-focused,
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card:has(:focus-visible) {
      border-color: #ffffff !important;
    }
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__card-action:focus-visible {
      outline-color: #ffffff;
    }
    #rbccm-leadership.rbccm-leadership--on-dark .rbccm-leadership__btn:focus-visible {
      outline-color: #ffffff;
    }


    /* ============================================================
       Prod-additions block (2026-08-28 snapshot sync)
       Three rulesets present in prod that were missing from the
       repo baseline. Left grouped at the end so they're easy to
       find and diff-review; refactor into the topical sections
       above whenever the file gets its next big cleanup.
       ============================================================ */

    /* Modifier: --on-ltblue
       Light-blue section background — pairs with --on-dark and the
       default (white) as the three available color schemes. Uses
       #f0f6fc so cards + text stay readable without any of the
       dark-scheme text/dot inversions. */
    #rbccm-leadership.rbccm-leadership--on-ltblue {
      background-color: #f0f6fc;
    }

    /* Card variant: __card-displayboth
       Applied to the LinkedIn anchor when LinkType='both' so both
       the Biography button AND the LinkedIn icon can coexist on the
       same card. Currently a hook class — layout tweak (spacing,
       positioning) lives with the site-standard rules for cards
       that carry two action elements. */
    .rbccm-leadership__card-displayboth {
      /* Placeholder: prod ships this class as a marker so specific
         two-action card layouts can be targeted per page. Add
         property overrides here as designs require. */
    }

    /* Modal contact icons (ContactIcons=true)
       Blue circular outline around a FA icon; fills on hover.
       Used inside the biography modal when the ContactIcons Datum
       is enabled — otherwise the modal footer falls back to plain
       text links styled by .rbccm-leadership__modal-footer. */
    .contact-details {
      margin-bottom: 20px;
    }

    .contact-details .blue-circle-outline {
      border-color: #006ac3;
      color: #006ac3;
      width: 28px;
      height: 28px;
      font-size: 14px;
      text-align: center;
      line-height: 100%;
      margin: 0 4px 0 0;
      padding: 6px 3px;
      -webkit-transition: background 50ms, color 50ms;
      transition: background 50ms, color 50ms;
    }
    .contact-details .blue-circle-outline:hover {
      color: #fff;
      background: #006ac3;
    }
    .contact-details a.blue-circle-outline[hidden="hidden"] {
      display: none;
    }

    /* --no-controls: applied by JS when the current bucket is below
       the carousel threshold. Slick stays initialized; only the outer
       chrome (arrows + dots wrap) hides. */
    #rbccm-leadership.rbccm-leadership--no-controls .rbccm-leadership__btn,
    #rbccm-leadership.rbccm-leadership--no-controls .rbccm-leadership__dots-wrap {
      display: none !important;
    }
    /* Collapse the carousel grid to a single "track" column at every
       breakpoint. Slick still runs underneath — this only strips the
       prev/dots/next slots so the track re-aligns with the 1140
       heading rail (and, at ≥1300, drops the -68px gutter breakout). */
    #rbccm-leadership.rbccm-leadership--no-controls .rbccm-leadership__carousel {
      grid-template-columns: 1fr;
      grid-template-areas: "track";
      margin: 4px auto 0;
      max-width: 1140px;
    }
    /* Kill the dots list too in case slick reveals it mid-resize. */
    #rbccm-leadership.rbccm-leadership--no-controls .slick-dots {
      display: none !important;
    }
    /* No carousel = no keyboard-nav instructions worth announcing. */
    #rbccm-leadership.rbccm-leadership--no-controls #rbccm-lead-instructions {
      display: none;
    }