/* ====== 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-3e4dfe7);
  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-accent));
  /* border: 1px solid var(--e-global-color-accent); */
  border-radius: 12px;
  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: 10px 16px 10px 0;
  border-color: transparent var(--gs-nav-arrow, var(--e-global-color-primary))
    transparent transparent;
  transform: translate(-50%, -50%);
}
.gs-slider__nav .gs-next::before {
  /* Right-pointing triangle */
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent
    var(--gs-nav-arrow, var(--e-global-color-primary));
  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-secondary))
    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-secondary));
} */
.gs-slider__nav .gs-prev:where(:hover, :focus-visible),
.gs-slider__nav .gs-next: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;
}
.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: 20px 20px 0px 0px;
  isolation: isolate;
  aspect-ratio: var(--gs-ratio, 7/10);
  /* border: 1px solid var(--e-global-color-afe97e4); */
  transition: 0.2s;
  background: linear-gradient(
    180deg,
    rgba(26, 26, 26, 0.85) 63%,
    #17e882 101%,
    #048b49 102%
  );
}

/* 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;
}

/* Overlay */
/* .gs-slide__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.35s ease;
  z-index: 1;
} */

/* GIF layer */
/*.gs-slide__gif {
  /* position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover; 
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
  z-index: 2;
   pointer-events: none;
  mix-blend-mode: multiply; 
}
  */

/* Button (linked to Global Primary color) */
.gs-slide__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 24px;
  white-space: nowrap;
  border: 1px solid var(--e-global-color-accent);
  background-color: var(--e-global-color-primary);
  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: 12px;

  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
  z-index: 3;
}

/* ====== HOVER ====== */
.gs-slide__link:where(:hover, :focus-visible) .gs-slide__image img {
  filter: blur(8px);
  opacity: 0.2;
}

/* .gs-slide__link:where(:hover, :focus-visible) .gs-slide__image {
  border: 1px solid var(--e-global-color-secondary);
} */

/* .gs-slide__image:hover .gs-slide__img,
.gs-slide__link:focus .gs-slide__img {
  transform: scale(1.03);
  opacity: 1 !important;
}

.gs-slide__image:hover .gs-slide__gif,
.gs-slide__link:focus .gs-slide__gif {
  opacity: var(--gs-gif-opacity) !important;
  visibility: visible !important;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
   
} */

.gs-slide__link:where(:hover, :focus-visible) .gs-slide__btn {
  opacity: 1;
  visibility: visible;
  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: linear-gradient(90deg, #0d7e47 0%, #252525 38%);
  border-top: solid 1px var(--e-global-color-accent);
  color: var(--e-global-color-3e4dfe7);
  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 20px 20px;
  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;
  }
}