@charset "UTF-8";
/**
 * CAI Filter Carousel — pill-filtered carousel of industry cards.
 *
 * Cards reuse the cai-industry-card / cai-industry-card-image class names from
 * the "Card - Industry Card" Elementor template; the intrinsic card styling is
 * (re)declared here so the widget renders correctly wherever it's placed,
 * independent of Elementor's per-template global-class CSS. Type + colour values
 * come from the theme's existing --cai-* tokens (see main.scss).
 */
/* Fill the Elementor container the widget sits in, so the controls row can put
   pills at the container's left edge and the nav at its right edge. */
.cai-carousel-container {
  overflow: hidden;
}

.elementor-widget-cai_filter_carousel > .elementor-widget-container {
  width: 100%;
}

.cai-filter-carousel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  align-items: flex-start;
  padding: 0;
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Intro — two-tone heading + supporting description. Centered per design.
 * ---------------------------------------------------------------------- */
.cai-filter-carousel__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.cai-filter-carousel__title {
  margin: 0;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  font-size: var(--cai-fs-h2, 48px);
  line-height: 1.25;
  letter-spacing: var(--cai-ls-h2, -1px);
  color: var(--cai-color-ink, #141414);
}

.cai-filter-carousel__title-highlight {
  color: var(--cai-color-blue-brand, #0085ca);
}

.cai-filter-carousel__description {
  margin: 0 auto;
  max-width: 60ch;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  font-size: var(--cai-fs-subtitle, 18px);
  line-height: var(--cai-lh-subtitle, 1.5);
  color: var(--cai-color-ink-80, rgba(20, 20, 20, 0.8));
}

/* -------------------------------------------------------------------------
 * Controls row — pill filters (left) + View All / arrows (right).
 * ---------------------------------------------------------------------- */
/* Pills take the left column (wrap as needed); nav is pinned to the right —
   mirrors the CAI Solutions Pills rail-wrap layout. */
.cai-filter-carousel__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* Single-line scroller (never wraps): pills scroll horizontally within their
   grid column, passing behind the fixed nav on the right. Scrollbar hidden;
   the prev/next arrows in .cai-filter-carousel__nav scroll this rail (see
   filter-carousel.js) in addition to native trackpad/touch scrolling. */
.cai-filter-carousel__pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
  /* 2px padding keeps a pill's border/focus ring off the clipping edge. */
  padding: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cai-filter-carousel__pills::-webkit-scrollbar {
  display: none;
}

.cai-filter-carousel__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid var(--cai-color-action, #6a6bd4);
  border-radius: 100px;
  background: transparent;
  font-weight: 400;
  font-size: var(--cai-fs-cta-link, 16px);
  line-height: var(--cai-lh-cta-link, 24px);
  color: var(--cai-color-ink, #141414);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.cai-filter-carousel__pill:hover, .cai-filter-carousel__pill:focus-visible {
  background: var(--cai-color-action-hover, #2f2951);
  border-color: var(--cai-color-action-hover, #2f2951);
  color: var(--cai-color-white, #fff);
}
.cai-filter-carousel__pill:focus {
  outline: none !important;
  box-shadow: none !important;
}
.cai-filter-carousel__pill:focus-visible {
  outline: 2px solid var(--cai-color-action, #6a6bd4);
  outline-offset: 2px;
  box-shadow: none !important;
}
.cai-filter-carousel__pill.is-active {
  background: var(--cai-color-action, #6a6bd4);
  border-color: var(--cai-color-action, #6a6bd4);
  color: var(--cai-color-white, #fff);
}
.cai-filter-carousel__pill.is-active:hover, .cai-filter-carousel__pill.is-active:focus-visible {
  background: var(--cai-color-action-hover, #2f2951);
  border-color: var(--cai-color-action-hover, #2f2951);
  color: var(--cai-color-white, #fff);
}

.cai-filter-carousel__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cai-filter-carousel__view-all {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  border-radius: var(--cai-radius-button, 4px);
  background: var(--cai-color-action-soft, #d3e7ff);
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  font-size: var(--cai-fs-cta-link, 16px);
  line-height: var(--cai-lh-cta-link, 24px);
  color: var(--cai-color-ink, #141414);
  text-decoration: none;
}

.cai-filter-carousel__view-all:hover,
.cai-filter-carousel__view-all:focus {
  background: var(--cai-color-action-hover, #2f2951);
  color: var(--cai-color-white, #fff);
}

/* Canonical prev/next arrow — see assets/scss/_nav-arrow.scss. */
.cai-filter-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--cai-color-border, #dee2e6);
  border-radius: 50%;
  background: var(--cai-color-white, #fff);
  color: var(--cai-color-ink, #141414);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.cai-filter-carousel__arrow:hover {
  background: var(--cai-color-action-hover, #2f2951);
  border-color: var(--cai-color-action-hover, #2f2951);
  color: var(--cai-color-white, #fff);
}
.cai-filter-carousel__arrow:active {
  background: var(--cai-color-action-active);
  border-color: var(--cai-color-action-active);
  color: var(--cai-color-white, #fff);
}
.cai-filter-carousel__arrow:focus {
  outline: none !important;
  box-shadow: none !important;
}
.cai-filter-carousel__arrow:focus-visible {
  outline: 2px solid var(--cai-color-action, #6A6BD4);
  outline-offset: 2px;
  box-shadow: none !important;
}
.cai-filter-carousel__arrow svg {
  display: block;
  width: 20px;
  height: 20px;
}
.cai-filter-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cai-filter-carousel__arrow--prev svg {
  transform: scaleX(-1);
}

/* Solid variant (Arrow Style: Solid) — filled blue circle, white glyph. */
.cai-filter-carousel__nav--solid .cai-filter-carousel__arrow {
  background: var(--cai-color-action, #6A6BD4);
  border-color: var(--cai-color-action, #6A6BD4);
  color: var(--cai-color-white, #fff);
}

/* -------------------------------------------------------------------------
 * Track — horizontally scrolling row of cards. No dedicated prev/next buttons
 * here (those scroll the pill rail above instead — see
 * .cai-filter-carousel__pills below and filter-carousel.js): cards are large,
 * obviously-swipeable targets, so overflow-x is left native/auto for trackpad
 * and touch scrolling. Scrollbar hidden; scroll position still resets
 * programmatically on filter change.
 *
 * Also click-and-drag scrollable for mouse/pen (filter-carousel.js's
 * bindDrag) — the grab/grabbing cursor mirrors the "grabCursor" affordance
 * Swiper gives the theme's other carousels. `.is-dragging` drops
 * scroll-behavior to `auto` so scrollLeft tracks the pointer 1:1 instead of
 * lagging behind the rail's default smooth easing, and blocks text selection
 * while dragging.
 * ---------------------------------------------------------------------- */
.cai-filter-carousel__viewport {
  width: 100%;
  cursor: grab;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cai-filter-carousel__viewport::-webkit-scrollbar {
  display: none;
}
.cai-filter-carousel__viewport.is-dragging {
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

/* -------------------------------------------------------------------------
 * Right-edge breakout — extend the card viewport from the boxed container's
 * left edge to the viewport's right edge (heading/pills stay boxed). Add the
 * `breakout-right` class in the widget's Advanced > CSS Classes (it lands on
 * the widget wrapper) OR on any ancestor container.
 *
 * width:auto + a negative right margin can't widen a flex item under
 * align-items:flex-start, so use an explicit width instead: the left edge sits
 * at the boxed container's left, and `50vw + 50%` reaches exactly the viewport
 * right edge (50% here = half the boxed container width). The viewport's own
 * overflow-x (auto, via cai-scroll-rail above) still clips content past its
 * own box the same way `hidden` would — it only adds scrollability, not
 * visible overflow — so this adds no page h-scroll.
 *
 * REQUIREMENT: no ancestor between the widget and <body> may clip overflow-x
 * (e.g. a wrapper with `overflow:hidden`), or the breakout is cut off at that
 * ancestor's edge.
 * ---------------------------------------------------------------------- */
.breakout-right .cai-filter-carousel__viewport,
.cai-filter-carousel__viewport.breakout-right {
  width: calc(50vw + 50%);
  max-width: none;
  margin-right: 0;
}

.cai-filter-carousel__track {
  display: flex;
  gap: 24px;
  padding-bottom: 4px;
}

/* -------------------------------------------------------------------------
 * Card — reuses the cai-industry-card look: circular image, h4 title, body-2
 * copy, optional CAI text-link-with-icon button.
 * ---------------------------------------------------------------------- */
.cai-filter-carousel__card {
  flex: 0 0 auto;
  width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  background: var(--cai-color-white, #fff);
  border: 1px solid var(--cai-color-border-card);
  border-radius: var(--cai-radius-card);
}

.cai-filter-carousel__card.is-hidden {
  display: none;
}

/* Whole-card link. When the card has a button URL, the title doubles as the
   card's link and its ::after stretches over the whole card, so the entire card
   is clickable — with or without a visible button. Mirrors the resource card's
   stretched title-link pattern. */
.cai-filter-carousel__card--link {
  position: relative;
}

.cai-filter-carousel__card-title-link {
  color: var(--cai-color-action);
  font-weight: 400;
  text-decoration: none;
}

.cai-filter-carousel__card-title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Keep the visible button interactive above the stretched overlay (both resolve
   to the same URL). */
.cai-filter-carousel__card--link .cai-btn-wrap {
  position: relative;
  z-index: 2;
}

/* Affordances: pointer + a title underline on hover, and a clear focus ring on
   the whole card when the stretched link is focused via keyboard. */
.cai-filter-carousel__card--link:hover {
  cursor: pointer;
}

.cai-filter-carousel__card--link:hover .cai-filter-carousel__card-title-link,
.cai-filter-carousel__card--link:hover .cai-filter-carousel__card-text {
  text-decoration: underline;
}
.cai-filter-carousel__card--link:hover .cai-filter-carousel__card-title-link {
  color: var(--cai-color-action-hover, #2f2951);
}

.cai-filter-carousel__card--link:focus-within {
  outline: 2px solid var(--cai-color-action, #6a6bd4);
  outline-offset: 2px;
}
.cai-filter-carousel__card--link:focus-within .cai-filter-carousel__card-title-link,
.cai-filter-carousel__card--link:focus-within .cai-filter-carousel__card-text {
  text-decoration: underline;
}

.cai-filter-carousel__card-image {
  width: calc(100% - 48px);
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 1000px;
  margin: 60px 24px;
}

.cai-filter-carousel__card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.cai-filter-carousel__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.cai-filter-carousel__card-title {
  margin: 0;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  font-size: var(--cai-fs-h4, 32px);
  line-height: var(--cai-lh-h4, 1.25);
  letter-spacing: -0.03em;
  color: var(--cai-color-gray-dark, #25282a);
}

.cai-filter-carousel__card-text {
  margin: 0;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  font-size: var(--cai-fs-body-2, 16px);
  line-height: var(--cai-lh-body-2, 1.5);
  color: var(--cai-color-ink, #141414);
}