/* --------------------------------------------------------------------------
   Slider Carousel
   A container only: each element dropped into the Slides slot is one slide.
   Native horizontal scrolling with snap points does the moving, so swipe and
   trackpad work for free; the arrows and dots just drive that scroll.
   Not infinite, never auto-advances.
   -------------------------------------------------------------------------- */

/* Webflow sets display: contents on the component's host inline, so layout
   lives on .cs rather than :host. */
:host {
  display: block;
}

.cs {
  --cs-oxford-blue: #07274b;
  --cs-alice-blue: #e0edf5;
  --cs-ice-white: #fcfcfc;
  --cs-syracuse-orange: #d34e24;
  --cs-paynes-gray: #4c5870;
  --cs-celestial-blue: #469dc8;

  /* Slides per view per Webflow breakpoint. Fractions show a peek of the next
     slide (3.3 = three full slides and a sliver). */
  --cs-pv: var(--cs-pv-d, 3);

  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  /* As a flex child, the track's wide content would otherwise force this box
     wider than its column. */
  min-width: 0;
}

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

@media (max-width: 991px) {
  .cs { --cs-pv: var(--cs-pv-t, 2); }
}

@media (max-width: 767px) {
  .cs { --cs-pv: var(--cs-pv-m, 1); }
}

.cs-track {
  /* Resolved on each slide, so 100% is the track's width. */
  --cs-slide-w: calc((100% - var(--cs-gap, 24px) * (var(--cs-pv) - 1)) / var(--cs-pv));

  position: relative;
  display: flex;
  gap: var(--cs-gap, 24px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Stops a sideways trackpad swipe at the end triggering browser back. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;

  /* Room for slide shadows, which overflow-y: hidden would otherwise clip.
     The negative margin cancels it so the carousel's footprint is unchanged. */
  padding-block: 12px 28px;
  margin-block: -12px -28px;
}

.cs-track::-webkit-scrollbar {
  display: none;
}

/* ---------- Slide height ----------
   Fill: flex's own stretch, so every slide matches the tallest.
   Individual: each slide keeps its natural height, centred against the rest. */
.cs[data-height="fill"] .cs-track {
  align-items: stretch;
}

.cs[data-height="natural"] .cs-track {
  align-items: center;
}

/* ---------- Visibility per breakpoint ----------
   Webflow has no custom breakpoints; this is its fixed set. Desktop covers
   992px and up, so the opt-in 1280 / 1440 / 1920 breakpoints follow it, the
   same way Webflow's larger breakpoints inherit from desktop.
   Done in CSS, so a hidden carousel never flashes before hydration. */
@media (min-width: 992px) {
  .cs[data-hide~="d"] { display: none; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .cs[data-hide~="t"] { display: none; }
}

@media (min-width: 480px) and (max-width: 767.98px) {
  .cs[data-hide~="ml"] { display: none; }
}

@media (max-width: 479.98px) {
  .cs[data-hide~="mp"] { display: none; }
}

/* Webflow never slots the slides directly: everything in the Slides slot
   arrives inside one unclassed <div slot="slides">. Left as a block, that
   wrapper became a single slide with every card stacked inside it. Made
   transparent, its children sit in the track as the slides.

   ::slotted cannot reach below that top level, so each slide is sized from
   JS with inline styles (flex basis, border-box, snap).

   Scoped to the track. An unscoped ::slotted matches the assigned node of
   every slot in the shadow root, so it would reach any copy slotted in later
   and turn it into a display: contents box. */
.cs-track ::slotted(*) {
  display: contents;
}

/* ---------- Controls ---------- */

.cs-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 24px;
}

.cs[data-align="left"] .cs-controls { justify-content: flex-start; }
.cs[data-align="center"] .cs-controls { justify-content: center; }

.cs-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cs-alice-blue);
  color: var(--cs-oxford-blue);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.cs-arrow svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Hover guarded to real pointers — on touch a tap leaves :hover stuck. */
@media (hover: hover) {
  .cs-arrow:not(:disabled):hover {
    background: var(--cs-oxford-blue);
    color: var(--cs-ice-white);
  }
}

.cs-arrow:not(:disabled):active {
  background: var(--cs-oxford-blue);
  color: var(--cs-ice-white);
}

.cs-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.cs-arrow:focus-visible,
.cs-dot:focus-visible {
  outline: 3px solid var(--cs-celestial-blue);
  outline-offset: 3px;
}

.cs-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

/* 24px hit area around a 10px dot. */
.cs-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.cs-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cs-paynes-gray);
  opacity: 0.35;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.cs-dot[aria-current="true"]::before {
  background: var(--cs-syracuse-orange);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cs-track { scroll-behavior: auto; }
  .cs-arrow,
  .cs-dot::before { transition: none; }
}