/* =========================================
   GSAP SLIDER
========================================= */

[data-gsap-slider-init] {
  --slider-status: on;
  --slider-spv: 1;
  --slider-gap: 1.5em;
}

/* Visible viewport */
[data-gsap-slider-collection] {
  width: 100%;
  overflow: hidden;
}

/* Moving track */
[data-gsap-slider-list] {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--slider-gap);
  width: max-content;
  will-change: transform;
}

/* One full-width slide at a time */
[data-gsap-slider-item] {
  flex: 0 0 calc((100vw - ((var(--slider-spv) - 1) * var(--slider-gap))) / var(--slider-spv));
}

/*
Because the collection itself may not literally equal 100vw,
this overrides the slide width using the parent's width.
Modern browsers support cqw after setting container-type.
*/
[data-gsap-slider-collection] {
  container-type: inline-size;
}

[data-gsap-slider-item] {
  flex-basis: calc((100cqw - ((var(--slider-spv) - 1) * var(--slider-gap))) / var(--slider-spv));
}

/* =========================================
   RESPONSIVE
========================================= */

@media screen and (max-width: 991px) {
  [data-gsap-slider-init] {
    --slider-spv: 1;
    --slider-gap: 1.5em;
  }
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] {
    --slider-spv: 1;
    --slider-gap: 1em;
  }
}

/* =========================================
   CONTROLS
========================================= */

[data-gsap-slider-status="not-active"] [data-gsap-slider-controls] {
  display: none;
}

[data-gsap-slider-control-status="not-active"] {
  opacity: 0.2;
  pointer-events: none;
}

.gsap-slider__control {
  transition: opacity 0.3s ease;
}

/* =========================================
   OPTIONAL CARD STATES
========================================= */

.testimonial-card {
  transition: all 0.3s ease;
}

[data-gsap-slider-item-status="not-active"] .demo-card {
  background-color: #131313;
}

.demo-card__tag {
  transition: all 0.3s ease;
}

[data-gsap-slider-item-status="not-active"] .demo-card__tag {
  opacity: 0;
}