/* Reusable slider component styles.
   Customize per instance by setting CSS variables on `.ts-slider` (or a parent).
*/

.ts-slider {
  /* Theme / surfaces */
  --slider-radius: 0px;
  --slider-bg: #111;
  --slider-shadow: 0 14px 40px rgba(0,0,0,0.18);

  /* Motion */
  --slider-transition-ms: 420ms;
  --slider-transition-ease: ease;

  /* Sizing */
  --slider-height: clamp(260px, 36vw, 520px);

  /* Overlay */
  --slider-overlay-fg: #eef1ff;
  --slider-overlay-muted: rgba(238, 241, 255, 0.75);
  --slider-overlay-left-base: 22px;
  --slider-overlay-bottom-base: 22px;
  --slider-overlay-gap: 8px;
  --slider-overlay-maxw: min(420px, 80%);

 /* CTA */
  --slider-cta-bg: #fff;
  --slider-cta-fg: #0b0d12;
  --slider-cta-font-size: clamp(13px, 1.4vw, 16px);
  --slider-cta-pad-y: clamp(8px, 1vw, 10px);
  --slider-cta-pad-x: clamp(11px, 1.4vw, 14px);
  --slider-cta-radius: 999px;

  /* Nav buttons */
  --slider-nav-size: clamp(36px, 3vw, 40px);
  --slider-nav-font-size: 24px;
  --slider-nav-inset: clamp(6px, 2vw, 14px);
  --slider-nav-bg: rgba(255,255,255,0.5);
  --slider-nav-bg-hover: #fff;
  --slider-nav-fg: #0b0d12;
  --slider-nav-shadow: 0 10px 24px rgba(0,0,0,0.2);
  --slider-nav-focus: 3px solid rgba(255,255,255,0.7);

  /* Dots */
  --slider-dots-gap: 8px;
  --slider-dots-pad-y: 8px;
  --slider-dots-pad-x: 10px;
  --slider-dots-bg: rgba(0,0,0,0.25);
  --slider-dots-blur: 6px;

  --slider-dot-size: 9px;
  --slider-dot-bg: rgba(255,255,255,0.55);
  --slider-dot-active-bg: rgba(255,255,255,0.95);
  --slider-dot-focus: 2px solid rgba(255,255,255,0.8);

  /* Image look */
  --slider-img-filter: none;

  /* Overlay gradient */
  --slider-gradient-angle: 90deg;
  --slider-gradient-0: rgba(0,0,0,0.65);
  --slider-gradient-45: rgba(0,0,0,0.25);
  --slider-gradient-100: rgba(0,0,0,0.10);
  --slider-gradient-right-angle: 270deg;
  --slider-gradient-center-angle: 0deg;

  --slider-overlay-nav-gap: clamp(8px, 2.2vw, 16px);
  --slider-overlay-left-preferred: clamp(28px, 3vw, 72px);
  --slider-overlay-left-safe: calc(var(--slider-nav-inset) + var(--slider-nav-size) + var(--slider-overlay-nav-gap));
  --slider-overlay-right-safe: calc(var(--slider-nav-inset) + var(--slider-nav-size) + var(--slider-overlay-nav-gap));
  --slider-overlay-bottom-preferred: clamp(22px, 3vw, 32px);
  --slider-dots-bottom: 12px;
  --slider-dots-height: calc(var(--slider-dot-size) + 2 * var(--slider-dots-pad-y));
  --slider-overlay-dots-gap: 14px;
  --slider-overlay-bottom-safe: calc(var(--slider-dots-bottom) + var(--slider-dots-height) + var(--slider-overlay-dots-gap));
  --slider-overlay-right-preferred: var(--slider-overlay-left-preferred);
  --slider-overlay-right-base: var(--slider-overlay-left-base);

  /* Optical centering for icon glyphs (tweak per icon set) */
  --slider-nav-icon-nudge-prev-x: -1px;
  --slider-nav-icon-nudge-next-x: 1px;
  --slider-nav-icon-nudge-y: 0px;

  position: relative;
  overflow: hidden;
  border-radius: var(--slider-radius);
  background: var(--slider-bg);
  box-shadow: var(--slider-shadow);
  touch-action: pan-y;
}

/* Track */
.ts-slider .ts-slider__slides {
  display: flex;
  transition: transform var(--slider-transition-ms) var(--slider-transition-ease);
  will-change: transform;
}

.ts-slider[data-swipe="true"] .ts-slider__slides {
  cursor: grab;
}

.ts-slider[data-swipe="true"] .ts-slider__slides.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Reduce motion: no sliding animation */
@media (prefers-reduced-motion: reduce) {
  .ts-slider .ts-slider__slides {
    transition: none !important;
  }
}

/* Slide */
.ts-slider .ts-slider__slide {
  min-width: 100%;
  position: relative;
  height: var(--slider-height);
}

.ts-slider .ts-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--slider-img-filter);
  user-select: none;
  -webkit-user-drag: none;
}

.ts-slider .ts-slider__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--slider-gradient-angle),
    var(--slider-gradient-0) 0%,
    var(--slider-gradient-45) 45%,
    var(--slider-gradient-100) 100%
  );
}

.ts-slider .ts-slider__slide:has(.ts-slider__overlay--right)::after {
  background: linear-gradient(
    var(--slider-gradient-right-angle),
    var(--slider-gradient-0) 0%,
    var(--slider-gradient-45) 45%,
    var(--slider-gradient-100) 100%
  );
}

.ts-slider .ts-slider__slide:has(.ts-slider__overlay--center)::after {
  background: linear-gradient(
    var(--slider-gradient-center-angle),
    var(--slider-gradient-0) 0%,
    var(--slider-gradient-45) 45%,
    var(--slider-gradient-100) 100%
  );
}

.ts-slider[data-image-overlay="false"] .ts-slider__slide::after {
  display: none;
}

/* Overlay with alignment modifiers */
.ts-slider :is(.ts-slider__overlay, .ts-slider__overlay--left, .ts-slider__overlay--center, .ts-slider__overlay--right) {
  position: absolute;
  bottom: var(
    --slider-overlay-bottom,
    max(var(--slider-overlay-bottom-safe), var(--slider-overlay-bottom-preferred), var(--slider-overlay-bottom-base))
  );
  z-index: 1;
  color: var(--slider-overlay-fg);
  max-width: min(
    var(--slider-overlay-maxw),
    calc(100% - var(--slider-overlay-left-safe) - var(--slider-overlay-right-safe))
  );
  text-align: left;
}

.ts-slider .ts-slider__overlay,
.ts-slider .ts-slider__overlay--left {
  left: var(
    --slider-overlay-left,
    max(var(--slider-overlay-left-safe), var(--slider-overlay-left-preferred), var(--slider-overlay-left-base))
  );
  right: auto;
  transform: none;
}

.ts-slider .ts-slider__overlay--center {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
}

.ts-slider .ts-slider__overlay--right {
  right: var(
    --slider-overlay-right,
    max(var(--slider-overlay-right-safe), var(--slider-overlay-right-preferred), var(--slider-overlay-right-base))
  );
  left: auto;
  transform: none;
  text-align: right;
}

.ts-slider :is(.ts-slider__overlay, .ts-slider__overlay--left, .ts-slider__overlay--center, .ts-slider__overlay--right) .eyebrow {
  margin: 0 0 var(--slider-overlay-gap);
  color: var(--slider-overlay-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}

.ts-slider :is(.ts-slider__overlay, .ts-slider__overlay--left, .ts-slider__overlay--center, .ts-slider__overlay--right) .ts-slider__title {
  margin: 0 0 calc(var(--slider-overlay-gap) + 2px);
  font-size: clamp(22px, 3vw, 42px);
  line-height: 1.08;
}

.ts-slider :is(.ts-slider__overlay, .ts-slider__overlay--left, .ts-slider__overlay--center, .ts-slider__overlay--right) p {
  margin: 0 0 calc(var(--slider-overlay-gap) + 6px);
  color: var(--slider-overlay-muted);
}

.ts-slider :is(.ts-slider__overlay, .ts-slider__overlay--left, .ts-slider__overlay--center, .ts-slider__overlay--right) .ts-slider__cta {
  display: inline-block;
  background: var(--slider-cta-bg);
  color: var(--slider-cta-fg);
  font-size: var(--slider-cta-font-size);
  padding: var(--slider-cta-pad-y) var(--slider-cta-pad-x);
  border-radius: var(--slider-cta-radius);
  text-decoration: none;
  font-weight: 600;
  margin-top: calc(var(--slider-overlay-gap) + 2px);
}

.ts-slider :is(.ts-slider__cta, .ts-slider__nav, .ts-slider__dot):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Ensure controls sit above the transformed track */
.ts-slider .ts-slider__nav,
.ts-slider .ts-slider__dots {
  z-index: 5;
}

/* Nav buttons */
.ts-slider .ts-slider__nav {
  display: grid;
  position: absolute;
  place-items: center;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  width: var(--slider-nav-size);
  height: var(--slider-nav-size);
  border: 0;
  border-radius: 999px;
  background: var(--slider-nav-bg);
  color: var(--slider-nav-fg);
  cursor: pointer;
  font-size: var(--slider-nav-font-size);
  line-height: 1;
  box-shadow: var(--slider-nav-shadow);
}

.ts-slider .ts-slider__nav:hover {
  background: var(--slider-nav-bg-hover);
}

.ts-slider .ts-slider__nav:focus {
  outline: var(--slider-nav-focus);
  outline-offset: 2px;
}

.ts-slider .ts-slider__nav > svg {
  display: block;
  width: 24px;
  height: 24px;
  color: currentColor;
  transform: translate(var(--slider-nav-icon-nudge-x, 0px), var(--slider-nav-icon-nudge-y));
}

.ts-slider__nav--prev {
  left: var(--slider-nav-inset);
}

.ts-slider__nav--next {
  right: var(--slider-nav-inset);
}

.ts-slider__nav--prev > svg {
  --slider-nav-icon-nudge-x: var(--slider-nav-icon-nudge-prev-x);
}

.ts-slider__nav--next > svg {
  --slider-nav-icon-nudge-x: var(--slider-nav-icon-nudge-next-x);
}

/* Dots */
.ts-slider .ts-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: var(--slider-dots-gap);
  padding: var(--slider-dots-pad-y) var(--slider-dots-pad-x);
  border-radius: 999px;
  background: var(--slider-dots-bg);
  backdrop-filter: blur(var(--slider-dots-blur));
}

.ts-slider .ts-slider__dot {
  width: var(--slider-dot-size);
  height: var(--slider-dot-size);
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--slider-dot-bg);
}

.ts-slider .ts-slider__dot[aria-current="true"] {
  background: var(--slider-dot-active-bg);
  transform: scale(1.15);
}

.ts-slider .ts-slider__dot:focus {
  outline: var(--slider-dot-focus);
  outline-offset: 2px;
}