.resources-slider {
  background: var(--color-surface-light);
  padding: 1.25rem 0;
  /* Allow slides to extend to the viewport right; left masking uses ::before */
  overflow-x: hidden;
}

/* -- Container -- */
.resources-slider > .container-ak {
  margin: 0 auto;
}

/* -- Header -- */
.resources-slider__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.resources-slider__title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.1em;
  letter-spacing: -0.075rem;
  color: var(--color-text);
}

/* -- Slider track -- */
.resources-slider__track {
  position: relative;
  z-index: 0;
  /* Three cards wide = container content width (not the extended swiper width) */
  --resources-slider-slide-width: calc((100% - (2 * 0.75rem)) / 3);
  /* Break out to the viewport right edge (same line as before, without padding hacks) */
  /* margin-right: calc(-50vw + 50%); */
  overflow: visible;
}

/* Covers the viewport gutter to the left of the container content — hides partial slides there */
.resources-slider__track::before {
  content: "";
  position: absolute;
  top: calc(var(--container-ak-inline-padding) * -1);
  bottom: calc(var(--container-ak-inline-padding) * -1);
  left: calc(
    0px - (100vw - min(100vw, var(--container-ak-max-width))) / 2 -
      var(--container-ak-inline-padding) - 2rem
  );
  width: calc(
    (100vw - min(100vw, var(--container-ak-max-width))) / 2 +
      var(--container-ak-inline-padding)
  );
  background: var(--color-surface-light);
  z-index: 2;
  pointer-events: none;
}

.resources-slider__swiper {
  /* Minimal Swiper base styles (scoped locally) */
  position: relative;
  z-index: 1;
  /* Extend with the track to the viewport right; clip overflow inside swiper */
  overflow: visible;
}

.resources-slider__swiper .swiper-wrapper {
  display: flex;
  box-sizing: content-box;
  transition-property: transform;
}

.resources-slider__swiper .swiper-slide {
  flex: 0 0 auto;
  width: var(--container-slide-width);
  box-sizing: border-box;
  height: auto;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.resources-slider__swiper .swiper-slide.resources-slider__slide--past {
  opacity: 0;
}

/* Tablet: two cards + one gap (600px–1023px) */
@media (max-width: 63.9375rem) and (min-width: 37.5rem) {
  .resources-slider__track {
    --container-slide-width: calc((100% - 0.75rem) / 2);
  }
}

/* Mobile: full-width slide (below 600px) */
@media (max-width: 37.4375rem) {
  .resources-slider__track {
    --container-slide-width: 100%;
  }
}

/* -- Pagination -- */
.resources-slider__pagination {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  margin-right: calc(50vw - 50%); /* Counteract the track overflow for centered dots */
}

.resources-slider__pagination .swiper-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.5rem;
  background: var(--color-dark);
  opacity: 0.3;
  transition: all 0.3s ease;
  cursor: pointer;
}

.resources-slider__pagination .swiper-pagination-bullet-active {
  width: 1.5rem;
  background: var(--color-primary);
  opacity: 1;
}