/* ==========================================================================
   Koh Samui Padel - Homepage Slider
   Self-contained styles for the JS-driven hero showcase carousel.
   Uses the shared plum/purple palette from styles.css (loaded first).
   ========================================================================== */

.ksp-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--green-900, #1f0120);
}

/* Track holds the slides side by side; JS translates it horizontally */
.ksp-slider__viewport { overflow: hidden; }
.ksp-slider__track {
  display: flex;
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}

/* Each slide is exactly the viewport width */
.ksp-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 520px;
  display: grid;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.ksp-slide::before { /* subtle palm-leaf texture, matches hero */
  content: '';
  position: absolute; inset: 0;
  opacity: .12; mix-blend-mode: screen; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M50 380 C 80 250 120 150 220 60'/%3E%3Cpath d='M70 360 C 130 320 180 260 215 75'/%3E%3Cpath d='M330 20 C 300 150 260 250 160 340'/%3E%3Cpath d='M350 40 C 290 80 240 140 185 320'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 460px;
}

/* Gradient background variants - plum family with subtle hue variety (no images needed) */
.ksp-slide.bg-deep    { background: radial-gradient(120% 100% at 85% 0%, rgba(182,70,192,.5), transparent 55%), linear-gradient(155deg, #3a0140, #1f0120 70%); }
.ksp-slide.bg-emerald { background: radial-gradient(110% 120% at 90% -10%, rgba(221,138,232,.5), transparent 55%), linear-gradient(150deg, #7a2080, #34013a); }
.ksp-slide.bg-ocean   { background: radial-gradient(110% 120% at 85% 0%, rgba(160,100,225,.45), transparent 55%), linear-gradient(150deg, #5a0d77, #2c0130); }
.ksp-slide.bg-sun     { background: radial-gradient(110% 120% at 85% 0%, rgba(244,183,64,.42), transparent 55%), linear-gradient(150deg, #6d1466, #34013a); }

.ksp-slide__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw, 1180px);
  margin: 0 auto; padding: 64px 24px;
}
.ksp-slide__content { max-width: 620px; }

/* Animate content in when the slide becomes active */
.ksp-slide__content > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.ksp-slide.is-active .ksp-slide__content > * { opacity: 1; transform: none; }
.ksp-slide.is-active .ksp-slide__content > *:nth-child(2) { transition-delay: .1s; }
.ksp-slide.is-active .ksp-slide__content > *:nth-child(3) { transition-delay: .2s; }
.ksp-slide.is-active .ksp-slide__content > *:nth-child(4) { transition-delay: .3s; }

.ksp-slide .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.ksp-slide h2 {
  color: #fff; font-family: var(--font-head, sans-serif);
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06;
  letter-spacing: -.02em; margin: 18px 0 16px;
}
.ksp-slide h2 .hl { color: var(--green-300, #dd8ae8); }
.ksp-slide p { font-size: 1.18rem; color: rgba(255,255,255,.9); max-width: 50ch; margin-bottom: 28px; }
.ksp-slide__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Arrows */
.ksp-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.35);
  color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease, border-color .2s;
}
.ksp-slider__arrow:hover { background: rgba(255,255,255,.3); border-color: #fff; }
.ksp-slider__arrow:focus-visible { outline: 3px solid var(--green-300, #dd8ae8); outline-offset: 2px; }
.ksp-slider__arrow svg { width: 22px; height: 22px; }
.ksp-slider__arrow--prev { left: 22px; }
.ksp-slider__arrow--next { right: 22px; }
.ksp-slider__arrow:active { transform: translateY(-50%) scale(.92); }

/* Bottom controls: dots + play/pause */
.ksp-slider__controls {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.ksp-slider__dots { display: flex; gap: 10px; }
.ksp-slider__dot {
  width: 11px; height: 11px; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.4); border: none; transition: background .2s, transform .2s, width .3s;
}
.ksp-slider__dot:hover { background: rgba(255,255,255,.7); }
.ksp-slider__dot.is-active { background: #fff; width: 30px; border-radius: 6px; }
.ksp-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ksp-slider__toggle {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  transition: background .2s;
}
.ksp-slider__toggle:hover { background: rgba(255,255,255,.32); }
.ksp-slider__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ksp-slider__toggle svg { width: 15px; height: 15px; }
.ksp-slider__toggle .icon-pause { display: block; }
.ksp-slider__toggle .icon-play  { display: none; }
.ksp-slider.is-paused .ksp-slider__toggle .icon-pause { display: none; }
.ksp-slider.is-paused .ksp-slider__toggle .icon-play  { display: block; }

/* Autoplay progress bar */
.ksp-slider__progress { position: absolute; left: 0; bottom: 0; height: 3px; z-index: 5; width: 100%; background: rgba(255,255,255,.14); }
.ksp-slider__progress span { display: block; height: 100%; width: 0; background: var(--green-300, #dd8ae8); transition: width .1s linear; }

/* Responsive */
@media (max-width: 740px) {
  .ksp-slide { min-height: 460px; }
  .ksp-slide__inner { padding: 52px 20px 64px; }
  .ksp-slider__arrow { width: 42px; height: 42px; }
  .ksp-slider__arrow--prev { left: 10px; }
  .ksp-slider__arrow--next { right: 10px; }
  .ksp-slide__cta .btn { padding: 12px 20px; font-size: .94rem; }
}

/* No-JS fallback: stack slides so content is still readable */
.ksp-slider.no-js .ksp-slider__track { display: block; }
.ksp-slider.no-js .ksp-slide__content > * { opacity: 1; transform: none; }
.ksp-slider.no-js .ksp-slider__arrow,
.ksp-slider.no-js .ksp-slider__controls,
.ksp-slider.no-js .ksp-slider__progress { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ksp-slider__track { transition: none; }
  .ksp-slide__content > * { transition: none; opacity: 1; transform: none; }
  .ksp-slider__progress span { transition: none; }
}