/* ============================================================
   Leadership Carousel - Slick
   Path: /assets/rbccm/css/sub/test/leadership-carousel.css
============================================================ */

/* -- 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 -- */
    .rbccm-leadership__inner {
      box-sizing: border-box;
      margin: 0 auto;
      max-width: 1200px;
      position: relative;
    }
    @media (min-width: 1170px) {
      .rbccm-leadership__inner { max-width: 1140px; }
    }

    /* -- Heading -- */
    .rbccm-leadership__heading {
      color: #003168;
      font-family: RBCDisplay, Georgia, Times, serif;
      font-size: 29px;
      font-weight: 500;
      line-height: normal;
      margin: 0 -16px 35px -16px;
      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 -- */
    .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: 1025px) {
      .rbccm-leadership__card { width: 273px !important; }
    }
    @media (min-width: 1300px) {
      .rbccm-leadership__card { margin: 0 20px 0 0; width: 270px !important; }
    }
    #rbccm-leadership .slick-center .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;
    }

    /* -- 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;
      }
    }