/* ==========================================================================
   Port Carousels — front-end styles
   Design copied from the reference: white bg, navy titles/links, gray body,
   book-cover cards, blue active border, chevron nav (gray left / navy right).
   ========================================================================== */

.bc-carousel {
  --bc-navy: #14284b; /* titles + "Learn More" */
  --bc-body: #4a5568; /* excerpt text */
  --bc-blue: #2f80ed; /* active/hover border */
  --bc-gold: #e6a817; /* next-arrow chevron */
  --bc-gap: 28px; /* space between cards */
  --bc-desktop-per-view: 3.5; /* fallback; the shortcode's per_view attr overrides this inline */
  --bc-per-view: var(
    --bc-desktop-per-view,
    3.5
  ); /* media queries below override this directly */
  --bc-radius: 10px;

  position: relative;
  margin: 0 auto;
  padding: 8px 0;
  box-sizing: border-box;
}

.bc-carousel *,
.bc-carousel *::before,
.bc-carousel *::after {
  box-sizing: border-box;
}

/* ---- Track (horizontal, snap, native swipe) ---------------------------- */
.bc-track {
  display: flex;
  gap: var(--bc-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 4px 10px;
  margin: 0;
  list-style: none;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge  */
}
.bc-track::-webkit-scrollbar {
  display: none; /* WebKit   */
}

/* ---- Card -------------------------------------------------------------- */
.bc-card {
  flex: 0 0
    calc((100% - (var(--bc-per-view) - 1) * var(--bc-gap)) / var(--bc-per-view));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  border-radius: var(--bc-radius);
  padding: 8px;
  margin: 0;
  background: #fff;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.bc-card:hover,
.bc-card:focus-within {
  box-shadow: 0 10px 24px rgba(20, 40, 75, 0.1);
}

/* ---- Card image -------------------------------------------------------- */
.bc-carousel .bc-media {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 18px;
  background: none !important;
  background-color: transparent !important;
  cursor: pointer;
  /* Square corners. Kept as an explicit 0 rather than dropped, so a theme's
     generic `button { border-radius }` can't round the image back. */
  border-radius: 0 !important;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 6px 18px rgba(20, 40, 75, 0.16);
}

.bc-media .bc-img,
.bc-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 0;
}

/* ---- Text -------------------------------------------------------------- */
/* Wrapper around title / excerpt / Learn More. It inherits the card's column
   flow and grows to fill it, so `.bc-excerpt { flex: 1 }` still pins Learn More
   to the bottom of the card. Book and Slides leave it unpadded — it exists so
   Partners can inset the text without insetting its full-bleed image. */
.bc-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.bc-title {
  color: var(--bc-navy);
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 12px;
}

.bc-excerpt {
  color: var(--bc-body);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1 1 auto;
}

.bc-carousel .bc-learn-more {
  appearance: none;
  -webkit-appearance: none;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  align-self: flex-start;
  color: var(--bc-navy) !important;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  transition: color 0.15s ease;
}
.bc-carousel .bc-learn-more:hover,
.bc-carousel .bc-learn-more:focus-visible {
  color: var(--bc-blue) !important;
  background: none !important;
  background-color: transparent !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bc-carousel .bc-learn-more:focus-visible {
  outline: 3px solid var(--bc-blue);
  outline-offset: 3px;
}

/* ---- Nav arrows -------------------------------------------------------- */
.bc-carousel .bc-nav {
  position: absolute;
  top: 42%; /* roughly centered on the covers */
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition:
    background 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

.bc-carousel .bc-prev {
  left: -8px;
  background: #eceff3 !important;
  background-color: #eceff3 !important;
  color: var(--bc-navy) !important;
  box-shadow: none !important;
}
.bc-carousel .bc-prev:hover {
  background: #dfe4ea !important;
  background-color: #dfe4ea !important;
}

.bc-carousel .bc-next {
  right: -8px;
  background: var(--bc-navy) !important;
  background-color: var(--bc-navy) !important;
  color: var(--bc-gold) !important;
  box-shadow: 0 6px 16px rgba(20, 40, 75, 0.25) !important;
}
.bc-carousel .bc-next:hover {
  background: #0f1f3a !important;
  background-color: #0f1f3a !important;
}

.bc-carousel .bc-nav[hidden] {
  display: none;
}

.bc-carousel .bc-nav:focus-visible {
  outline: 3px solid var(--bc-blue);
  outline-offset: 2px;
}

/* Keep the chevron color tied to the button's text color, even if the
   theme tries to recolor SVG/icon fills inside links or buttons. */
.bc-carousel .bc-nav svg,
.bc-carousel .bc-nav svg path {
  stroke: currentColor !important;
  fill: none !important;
}

/* ---- Lightbox ---------------------------------------------------------- */
.bc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.bc-lightbox[hidden] {
  display: none;
}

.bc-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 24, 45, 0.62);
  backdrop-filter: blur(2px);
}

.bc-lightbox-dialog {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 780px;
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  padding: 34px;
  box-shadow: 0 24px 60px rgba(10, 20, 40, 0.4);
  animation: bc-pop 0.18s ease;
}

@keyframes bc-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bc-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #eceff3;
  color: var(--bc-navy, #14284b);
  cursor: pointer;
  transition: background 0.15s ease;
}
.bc-lightbox-close:hover {
  background: #dfe4ea;
}

.bc-lightbox-item {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.bc-lightbox-media {
  flex: 0 0 220px;
}
.bc-lightbox-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(20, 40, 75, 0.22);
}

.bc-lightbox-title {
  color: #14284b;
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 4px 0 14px;
}

.bc-lightbox-body {
  color: #3d4657;
  font-size: 1.04rem;
  line-height: 1.65;
}
.bc-lightbox-body p {
  margin: 0 0 1em;
}
.bc-lightbox-body p:last-child {
  margin-bottom: 0;
}

/* ---- Responsive -------------------------------------------------------- */
/* 1240px and below: show 3 slides (no peek) */
@media (max-width: 1240px) {
  .bc-carousel {
    --bc-per-view: 3;
    --bc-gap: 22px;
  }
  .bc-title {
    font-size: 1.25rem;
  }
}

/* 765px and below: show 2 slides (no peek) */
@media (max-width: 765px) {
  .bc-carousel {
    --bc-per-view: 2;
    --bc-gap: 18px;
  }
  .bc-carousel .bc-nav {
    width: 40px;
    height: 40px;
  }
  .bc-lightbox-item {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }
  .bc-lightbox-media {
    flex: 0 0 auto;
    width: 160px;
  }
}

/* Small phones: keep 2 slides, just tighten spacing and reposition arrows */
@media (max-width: 520px) {
  .bc-carousel {
    --bc-gap: 14px;
  }
  .bc-carousel .bc-prev {
    left: 2px;
  }
  .bc-carousel .bc-next {
    right: 2px;
  }
  .bc-lightbox-dialog {
    padding: 26px 20px;
  }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bc-track {
    scroll-behavior: auto;
  }
  .bc-card,
  .bc-nav,
  .bc-learn-more,
  .bc-lightbox-dialog {
    transition: none;
    animation: none;
  }
}

/* =========================================================================
   Slides / Deck collection type (.bc-slides)
   ~1.5 slides across sizes, 4:3 cover thumbnails, and a larger stacked
   lightbox (image on top, description below).
   ========================================================================= */

/* Show ~1.5 slides. This selector outranks the Book responsive rules above,
   so 1.5 holds at every screen size. */
.bc-carousel.bc-slides {
  --bc-per-view: var(--bc-desktop-per-view, 1.5);
}

/* Fill the preview edge-to-edge (no letterbox). Source slides are ~4:3, so a
   4:3 box with `cover` fills cleanly with negligible cropping. */
.bc-carousel.bc-slides .bc-media .bc-img,
.bc-carousel.bc-slides .bc-media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Slides stay static — no hover shadow/lift. */
.bc-carousel.bc-slides .bc-card:hover,
.bc-carousel.bc-slides .bc-card:focus-within {
  box-shadow: none;
  transform: none;
}

/* Larger, stacked lightbox for wide images. Shared by every type that opts in
   with the `bc-stacked` class (Slides / Deck and Port Partners today). The
   dialog is a flex column capped at the viewport height: the image takes the
   remaining space (shrinking on short screens) and the description is reserved
   below it, so it's always visible. Long descriptions scroll within their own
   panel instead of pushing the layout off-screen. */
.bc-lightbox.bc-stacked .bc-lightbox-dialog {
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}
.bc-lightbox.bc-stacked .bc-lightbox-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.bc-lightbox.bc-stacked .bc-lightbox-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  gap: 18px;
  text-align: left;
}
.bc-lightbox.bc-stacked .bc-lightbox-media {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  aspect-ratio: 16 / 9; /* definite height derived from width — makes height:100% resolve */
  max-height: 62vh; /* shrink on short screens so the description stays visible */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bc-lightbox.bc-stacked .bc-lightbox-media img {
  display: block;
  height: 100%; /* fill the definite-height box */
  width: auto; /* width scales with the image's own aspect */
  max-width: 100%;
  object-fit: contain; /* never crop */
  box-shadow: none; /* no shadow around the scaled slide */
}
.bc-lightbox.bc-stacked .bc-lightbox-text {
  flex: 0 0 auto;
  max-height: 42vh;
  overflow-y: auto;
}

/* Media-only mode: when a slide has no description, drop the white panel and
   show just the enlarged slide on a transparent background. */
.bc-lightbox.bc-slides .bc-lightbox-dialog.bc-media-only {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.bc-lightbox.bc-slides .bc-lightbox-dialog.bc-media-only .bc-lightbox-text {
  display: none !important;
}
.bc-lightbox.bc-slides .bc-lightbox-dialog.bc-media-only .bc-lightbox-item {
  gap: 0;
}
.bc-lightbox.bc-slides .bc-lightbox-dialog.bc-media-only .bc-lightbox-media {
  max-height: 86vh;
}

/* ---- Modal Previous / Next (slides) ------------------------------------
   Scoped under .bc-lightbox and forced, so a theme that resets <button>
   backgrounds/borders can't make the (white-icon) arrows disappear. */
.bc-lightbox .bc-lightbox-nav {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px !important;
  height: 46px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #14284b !important;
  background-color: #14284b !important;
  color: #fff !important;
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 4px 16px rgba(10, 20, 40, 0.35) !important;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s ease;
}
.bc-lightbox .bc-lightbox-prev {
  left: 20px !important;
  right: auto !important;
}
.bc-lightbox .bc-lightbox-next {
  right: 20px !important;
  left: auto !important;
}
.bc-lightbox .bc-lightbox-nav:hover {
  background: #0f1f3a !important;
  background-color: #0f1f3a !important;
}
.bc-lightbox .bc-lightbox-nav[hidden] {
  display: none !important;
}
.bc-lightbox .bc-lightbox-nav:focus-visible {
  outline: 3px solid #2f80ed;
  outline-offset: 2px;
}
.bc-lightbox .bc-lightbox-nav svg,
.bc-lightbox .bc-lightbox-nav svg path {
  stroke: currentColor !important;
  fill: none !important;
}

@media (max-width: 600px) {
  .bc-lightbox .bc-lightbox-nav {
    width: 40px !important;
    height: 40px !important;
  }
  .bc-lightbox .bc-lightbox-prev {
    left: 6px !important;
  }
  .bc-lightbox .bc-lightbox-next {
    right: 6px !important;
  }
}

/* =========================================================================
   Port Partners collection type (.bc-partners)
   Flat landscape cards (image + title + "Learn More" only), orange nav arrows
   sitting outside the track, and a full-bleed teal lightbox with a navy close
   button. Shares the stacked lightbox geometry above via .bc-stacked.
   ========================================================================= */

/* Brand tokens. The lightbox is a sibling of the carousel, not a descendant,
   so both elements need the custom properties. Adjust colors here only. */
.bc-carousel.bc-partners,
.bc-lightbox.bc-partners {
  --bc-pp-teal: #00adbb;
  --bc-pp-orange: #ffa500;
  --bc-pp-navy: #030447;
  --bc-pp-orange-hover: #e69500;
  --bc-pp-navy-hover: #0a0d6b;

  /* Lightbox colors. Both are overridable per collection via an inline
	   custom property on .bc-lightbox (see the Lightbox Colors metabox).
	   Deliberately separate from --bc-pp-teal, which stays the card accent:
	   recoloring a modal must not repaint the "Learn More" arrow. */
  --bc-pp-modal-bg: var(--bc-pp-teal);
  --bc-pp-modal-text: #fff;

  /* How far the nav arrows sit outside the track. Needs this much clear
	   space in the page gutter; drop toward 0 if the container is tight. */
  --bc-pp-nav-gutter: 76px;
}

/* ---- Carousel ---------------------------------------------------------- */
/* 4 across on desktop. .bc-carousel.bc-partners (0,2,0) outranks the generic
   responsive ladder near the top of this file, so the partners ladder below
   holds regardless of source order. */
.bc-carousel.bc-partners {
  --bc-per-view: var(--bc-desktop-per-view, 4);
  --bc-gap: 24px;
}

/* Cards are flat on the page — no frame or hover lift — over a rounded white
   panel. `overflow: hidden` makes the full-bleed image follow the card's
   corners, so the media below keeps square corners of its own. */
.bc-carousel.bc-partners .bc-card {
  border: 0;
  border-radius: var(--bc-radius);
  overflow: hidden;
  padding: 0;
  background: #fff;
}
.bc-carousel.bc-partners .bc-card:hover,
.bc-carousel.bc-partners .bc-card:focus-within {
  box-shadow: none;
  transform: none;
}

/* Image is full-bleed to the card edges; the body below carries the inset. */
.bc-carousel.bc-partners .bc-media {
  margin: 0;
  box-shadow: none;
}
.bc-carousel.bc-partners .bc-card-body {
  padding: 18px 20px 20px;
}
.bc-carousel.bc-partners .bc-media .bc-img,
.bc-carousel.bc-partners .bc-media img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.bc-carousel.bc-partners .bc-title {
  color: var(--bc-pp-navy);
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 10px;
}

/* "Learn More" with a teal arrow. The arrow sets its own `color`, so the
   currentColor stroke in the SVG stays teal while the label stays navy. */
.bc-carousel.bc-partners .bc-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bc-pp-navy) !important;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}
.bc-carousel.bc-partners .bc-learn-more:hover,
.bc-carousel.bc-partners .bc-learn-more:focus-visible {
  color: var(--bc-pp-teal) !important;
  text-decoration: none;
}
.bc-carousel.bc-partners .bc-learn-more:focus-visible {
  outline: 3px solid var(--bc-pp-teal);
  outline-offset: 3px;
}
.bc-carousel.bc-partners .bc-lm-arrow {
  flex: 0 0 auto;
  color: var(--bc-pp-teal);
}
/* Forced, so a theme that fills SVGs inside buttons can't repaint the arrow. */
.bc-carousel.bc-partners .bc-lm-arrow path {
  stroke: currentColor !important;
  fill: none !important;
}

/* Orange square arrows, both the same, centered on the card block. */
.bc-carousel.bc-partners .bc-nav {
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 0 !important;
  background: var(--bc-pp-orange) !important;
  background-color: var(--bc-pp-orange) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.bc-carousel.bc-partners .bc-nav:hover {
  background: var(--bc-pp-orange-hover) !important;
  background-color: var(--bc-pp-orange-hover) !important;
}
.bc-carousel.bc-partners .bc-nav:focus-visible {
  outline: 3px solid var(--bc-pp-navy);
  outline-offset: 2px;
}
.bc-carousel.bc-partners .bc-prev {
  left: calc(var(--bc-pp-nav-gutter) * -1);
  right: auto;
}
.bc-carousel.bc-partners .bc-next {
  right: calc(var(--bc-pp-nav-gutter) * -1);
  left: auto;
}

/* ---- Carousel responsive ----------------------------------------------- */
@media (max-width: 1240px) {
  .bc-carousel.bc-partners {
    --bc-per-view: 3;
    --bc-gap: 20px;
  }
}

/* No room in the gutter below this — bring the arrows over the track edge. */
@media (max-width: 1100px) {
  .bc-carousel.bc-partners {
    --bc-pp-nav-gutter: -4px;
  }
}

@media (max-width: 900px) {
  .bc-carousel.bc-partners {
    --bc-per-view: 2;
    --bc-gap: 18px;
  }
}

@media (max-width: 600px) {
  .bc-carousel.bc-partners {
    --bc-per-view: 1.2;
    --bc-gap: 14px;
  }
  .bc-carousel.bc-partners .bc-nav {
    width: 42px;
    height: 42px;
  }
  .bc-carousel.bc-partners .bc-title {
    font-size: 1.05rem;
  }
  .bc-carousel.bc-partners .bc-card-body {
    padding: 14px 16px 16px;
  }
}

/* ---- Lightbox ---------------------------------------------------------- */
.bc-lightbox.bc-partners .bc-lightbox-dialog {
  max-width: 940px;
  background: var(--bc-pp-modal-bg);
  border-radius: 28px;
  padding: 30px 36px 38px;
  box-shadow: 0 24px 60px rgba(3, 4, 71, 0.38);
}

.bc-lightbox.bc-partners .bc-lightbox-item {
  gap: 22px;
}

/* Title leads, above the image (rendered as a sibling of .bc-lightbox-media
   for this type — see port_pages_shortcode). */
.bc-lightbox.bc-partners .bc-lightbox-title-lead {
  flex: 0 0 auto;
  /* Forced for the same reason as the body below — Bridge colors bare h2s. */
  color: var(--bc-pp-modal-text) !important;
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 700;
  margin: 0;
  padding-right: 64px; /* clear the close button */
}

/* Full-bleed cropped image, unlike the letterboxed Slides treatment. */
.bc-lightbox.bc-partners .bc-lightbox-media {
  aspect-ratio: 16 / 9;
  max-height: 54vh;
  border-radius: 14px;
  overflow: hidden;
}
.bc-lightbox.bc-partners .bc-lightbox-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: none;
}

.bc-lightbox.bc-partners .bc-lightbox-body {
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Force the text color onto the descendants, not just the container.
   wpautop() wraps the description in <p>, which would take our color only by
   inheritance — and inheritance loses to ANY direct rule on the element, even
   a theme's `p { color: #333 }` at specificity 0,0,1. Bridge ships several of
   those, and the lightbox sits inside the Elementor widget in the DOM (it is
   only an overlay visually, via position: fixed), so those rules reach it.
   Hence the explicit descendant selector plus !important, the same way the
   nav arrows and "Learn More" defend their colors above. */
.bc-lightbox.bc-partners .bc-lightbox-body,
.bc-lightbox.bc-partners .bc-lightbox-body *:not(a) {
  color: var(--bc-pp-modal-text) !important;
}

/* Links match the body color but stay underlined, so they're still findable
   without depending on a hue that may not contrast with the background. */
.bc-lightbox.bc-partners .bc-lightbox-body a {
  color: var(--bc-pp-modal-text) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Two explicit columns — the editor fills each one separately, so nothing
   flows or re-wraps between them. Only rendered when the item's second
   description field has content. */
.bc-lightbox.bc-partners .bc-lightbox-cols {
  display: flex;
  gap: 34px;
  align-items: flex-start;
}
.bc-lightbox.bc-partners .bc-lightbox-cols > .bc-lightbox-body {
  flex: 1 1 0; /* `0` basis, not `auto` — equal halves regardless of length */
  min-width: 0;
}

.bc-lightbox.bc-partners .bc-lightbox-close {
  top: 26px;
  right: 26px;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--bc-pp-navy);
  color: #fff;
}
.bc-lightbox.bc-partners .bc-lightbox-close:hover {
  background: var(--bc-pp-navy-hover);
}

/* Navy on teal, matching the close button. */
.bc-lightbox.bc-partners .bc-lightbox-nav {
  border-radius: 10px !important;
  background: var(--bc-pp-navy) !important;
  background-color: var(--bc-pp-navy) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(3, 4, 71, 0.35) !important;
}
.bc-lightbox.bc-partners .bc-lightbox-nav:hover {
  background: var(--bc-pp-navy-hover) !important;
  background-color: var(--bc-pp-navy-hover) !important;
}
.bc-lightbox.bc-partners .bc-lightbox-nav:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 765px) {
  .bc-lightbox.bc-partners .bc-lightbox-dialog {
    border-radius: 20px;
    padding: 24px 22px 28px;
  }
  .bc-lightbox.bc-partners .bc-lightbox-title-lead {
    font-size: 1.5rem;
    padding-right: 52px;
  }
  .bc-lightbox.bc-partners .bc-lightbox-close {
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
  }
  /* Column 2 stacks below column 1 rather than squeezing. */
  .bc-lightbox.bc-partners .bc-lightbox-cols {
    flex-direction: column;
    gap: 0;
  }
}