@layer components {
/**
 * Conxious — shared horizontal slider (Embla Carousel shell + nav).
 * Used by photo-carousel and people slider mode.
 *
 * Tokens (set on `.cx-slider` root):
 * - `--cx-slider-gap`   — space after each slide via margin (loop-safe; default clamp(14px, 1.8vw, 24px))
 * - `--cx-slider-speed` — auto-scroll px/s (default 60, unitless)
 */

.cx-slider {
  --cx-slider-gap: clamp(14px, 1.8vw, 24px);
  --cx-slider-speed: 60;

  position: relative;
  box-sizing: border-box;
}

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

.cx-slider--bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.cx-slider__viewport {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y pinch-zoom;
}

.cx-slider__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  backface-visibility: hidden;
}

.cx-slider__container:active {
  cursor: grabbing;
}

.cx-slider--align-start .cx-slider__container {
  align-items: flex-start;
}

.cx-slider__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin-top: clamp(20px, 3vw, 36px);
  padding-inline: clamp(16px, 3vw, 40px);
}

@media (prefers-reduced-motion: reduce) {
  .cx-slider__viewport {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink, #0e1726) 12%, transparent) transparent;
  }

  .cx-slider__container {
    cursor: default;
  }
}
}

/*
 * Unlayered: loop-safe slide spacing — beats block-level margin resets (photo carousel items).
 * Margin (not flex gap) keeps spacing at the loop seam (last ↔ first slide).
 */
.cx-slider__container > * {
  flex-shrink: 0;
  min-width: 0;
  margin-right: var(--cx-slider-gap);
}

/*
 * Unlayered: beat global `button { background: none }` and WP global styles.
 */
.cx-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink, #0e1726);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cx-slider__btn:focus-visible {
  opacity: 0.72;
}

@media (hover: hover) {
  .cx-slider__btn:hover {
    opacity: 0.72;
  }
}

.cx-slider__btn:active {
  transform: scale(0.94);
}

.cx-slider__btn:focus-visible {
  outline: 2px solid var(--accent, #267fd4);
  outline-offset: 3px;
}

.cx-slider__btn svg.btn-arrow {
  width: 28px;
  height: auto;
  flex-shrink: 0;
  color: currentColor;
  transition: transform 0.2s ease;
}

.cx-slider__btn--next:focus-visible svg.btn-arrow {
  transform: translateX(3px);
}

.cx-slider__btn--prev:focus-visible svg.btn-arrow--left {
  transform: translateX(-3px);
}

@media (hover: hover) {
  .cx-slider__btn--next:hover svg.btn-arrow {
    transform: translateX(3px);
  }

  .cx-slider__btn--prev:hover svg.btn-arrow--left {
    transform: translateX(-3px);
  }
}