/* ====== SLIDER BASE ====== */
.gs-slider {
  margin: 24px 0;
  position: relative; /* anchor nav when moved outside Swiper */

  /* configurable variables */
  --gs-per: 8; /* number of cards on desktop (overwritten by JS if needed) */
  --gs-gap: 16px; /* gap between cards (overwritten by JS if needed) */
  --gs-gif-opacity: 0.85; /* GIF opacity on hover (0..1) */

  /* TYPOGRAPHY/COLORS from Elementor Globals (with fallbacks) */
  /* color: var(--e-global-color-text, inherit);
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: var(--e-global-typography-text-font-size, inherit);
  font-weight: var(--e-global-typography-text-font-weight, inherit);
  line-height: var(--e-global-typography-text-line-height, inherit); */
}

/* Inherit typography and color for all nested elements (except svg/img) */
.gs-slider,
.gs-slider *:where(:not(svg, svg *, img)) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Block title — linked to global heading typography (Secondary) */
.gs-slider__title {
  margin-bottom: 12px;
  color: var(--e-global-color-accent);
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: var(--e-global-typography-text-font-size, inherit);
  font-weight: var(--e-global-typography-text-font-weight, inherit);
  line-height: var(--e-global-typography-text-line-height, inherit);
}

/* Swiper container */
.gs-slider .gs-slider__swiper {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Card */
.gs-slider .swiper-slide {
  overflow: visible;
  box-sizing: border-box;
}

/* When slides ≤ --gs-per — center and disable transform */
.gs-slider.is-short .swiper-wrapper {
  justify-content: center !important;
  transform: none !important;
}
.gs-slider.is-short .gs-slider__swiper {
  max-width: none;
}

/* ====== NAVIGATION ====== */
.gs-slider__nav .gs-prev,
.gs-slider__nav .gs-next {
  /* Square button container */
  width: 36px;
  height: 36px;
  background-color: var(--gs-nav-bg, var(--e-global-color-secondary));
  border: 1px solid var(--e-global-color-83f7caa);
  border-radius: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  cursor: pointer;
  transition: 0.2;
}
.gs-slider__nav .gs-prev {
  left: -40px;
}
.gs-slider__nav .gs-next {
  right: -40px;
}
@media (max-width: 767px) {
  .gs-slider__nav .gs-prev {
    left: 10px;
  }
  .gs-slider__nav .gs-next {
    right: 5px;
  }
}
/* Triangle arrows inside the square */
.gs-slider__nav .gs-prev::before,
.gs-slider__nav .gs-next::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  transition: 0.2s;
}
.gs-slider__nav .gs-prev::before {
  /* Left-pointing triangle */
  border-width: 8px 10px 8px 0;
  border-color: transparent var(--gs-nav-arrow, var(--e-global-color-83f7caa))
    transparent transparent;
  transform: translate(-50%, -50%);
}
.gs-slider__nav .gs-next::before {
  /* Right-pointing triangle */
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent
    var(--gs-nav-arrow, var(--e-global-color-83f7caa));
  transform: translate(-50%, -50%);
}
.gs-slider__nav .gs-prev:where(:hover, :focus-visible)::before {
  border-color: transparent var(--gs-nav-arrow, var(--e-global-color-2023a17))
    transparent transparent;
}
.gs-slider__nav .gs-next:where(:hover, :focus-visible)::before {
  border-color: transparent transparent transparent
    var(--gs-nav-arrow, var(--e-global-color-2023a17));
}
.gs-slider__nav .gs-prev:where(:hover, :focus-visible),
.gs-slider__nav .gs-next:where(:hover, :focus-visible) {
  border: 1px solid var(--e-global-color-2023a17);
}
.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ====== ROW/SLIDES ====== */
.gs-slider .swiper-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: flex-start !important;
  /* gap: var(--gs-gap); */
}
.gs-slider .swiper {
  --swiper-theme-color: currentColor;
  overflow: hidden;
}

/* ====== SLIDE CONTENT ====== */
.gs-slide {
  overflow: visible;
}

.gs-slide__link {
  display: block;
  text-decoration: none !important;
  color: inherit;
  transition: 0.2s;
}

/* Image container */
.gs-slide__image {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  isolation: isolate;
  aspect-ratio: var(--gs-ratio, 7/10);
  border: 1px solid var(--e-global-color-accent);
  transition: 0.2s;
  background-image: radial-gradient(
      57.61% 9.23% at 50% 0%,
      rgb(24, 134, 133) 0%,
      rgba(19, 38, 58, 0) 100%
    ),
    radial-gradient(
      57.61% 9.23% at 50% 100%,
      rgb(24, 134, 133) 0%,
      rgba(19, 38, 58, 0) 100%
    ),
    linear-gradient(0deg, rgba(4, 16, 17, 0.94) 0%, rgba(10, 31, 34, 0.94) 100%);
}

/* Base image */
.gs-slide__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  transition: 0.2s;
  z-index: 0;
}

/* Button (linked to Global Primary color) */
.gs-slide__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 16px;
  white-space: nowrap;
  border: 2px solid var(--e-global-color-83f7caa);
  background-image: linear-gradient(
    180deg,
    rgb(0, 222, 200) 0%,
    rgb(0, 88, 80) 100%
  );
  color: var(--e-global-color-3e4dfe7);
  font-family: var(--e-global-typography-18284be-font-family);
  font-size: var(--e-global-typography-18284be-font-size);
  font-weight: var(--e-global-typography-18284be-font-weight);
  line-height: var(--e-global-typography-18284be-line-height);
  border-radius: 50%;
  box-shadow: 0 -2px 0 0 rgba(255, 255, 255, 0.3) inset;
  opacity: 0;
  transition: 0.2s;
  z-index: 3;
}

/* ====== HOVER ====== */
.gs-slide__link:where(:hover, :focus-visible) .gs-slide__image img {
  opacity: 0.1;
}

.gs-slide__link:where(:hover, :focus-visible) .gs-slide__btn {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.gs-slide__btn:where(:hover, :focus-visible) {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(23, 232, 130, 0.4) 0px 0px 8px 0px,
    rgba(23, 232, 130, 0.4) 0px 0px 12px 0px,
    rgba(23, 232, 130, 0.4) 0px 0px 8px 0px,
    rgba(23, 232, 130, 0.4) 0px 0px 0px 0px;
}

/* ====== GAME TITLE (linked to global heading typography) ====== */
.gs-slide__name {
  padding: 8px;
  text-align: center;
  background-color: var(--e-global-color-secondary);
  border: solid 1px var(--e-global-color-accent);
  color: var(--e-global-color-accent);
  font-family: var(--e-global-typography-d06faba-font-family);
  font-size: var(--e-global-typography-d06faba-font-size);
  font-weight: var(--e-global-typography-d06faba-font-weight);
  line-height: 1.1;
  border-radius: 0 0 12px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

/* ====== PAGINATION ====== */
.gs-pagination {
  margin-top: 10px;
  position: relative;
  z-index: 2;
}

/* ====== LINKS ====== */
.gs-slide__link:hover,
.gs-slide__link:focus,
.gs-slide__link:visited {
  text-decoration: none !important;
}

/* ====== RESPONSIVE GAPS ====== */
@media (max-width: 639.98px) {
  .gs-slider {
    --gs-gap: 12px;
  }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .gs-slider {
    --gs-gap: 14px;
  }
}

/* ====== ACCESSIBILITY ====== */
@media (prefers-reduced-motion: reduce) {
  .gs-slide__img,
  .gs-slide__image::after,
  .gs-slide__btn,
  .gs-slider__nav .gs-prev,
  .gs-slider__nav .gs-next,
  .gs-slide__gif {
    transition: none !important;
  }
}