/**
 * Development card slider component – svi stilovi pod jedinstvenom klasom .development-card-slider
 * Used by: page-select block, content-single (Related Articles)
 */

/* ----- Shared: few slides (mobile justify start, desktop center) ----- */
.development-card-slider.development__card-slider--few .swiper-wrapper {
  gap: 2rem;
}
@media (max-width: 767px) {
  .development-card-slider.development__card-slider--few .swiper-wrapper {
    justify-content: flex-start;
  }
}
@media (min-width: 768px) {
  .development-card-slider.development__card-slider--few .swiper-wrapper {
    justify-content: center;
  }
}

/* ----- Page-select: swiper mode ----- */
.development-card-slider.page-select-swiper {
  position: relative;
  padding-bottom: 4rem;
}
.development-card-slider.page-select-swiper .swiper-slide {
  height: auto;
}
.development-card-slider.page-select-swiper .swiper-pagination {
  display: none;
}
.development-card-slider.page-select-swiper--show-pagination .swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 30px;
  margin-bottom: 10px;
}
.development-card-slider.page-select-swiper--show-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #003a6f;
  opacity: 0.3;
  margin: 0 4px;
  transition: opacity 0.3s;
}
.development-card-slider.page-select-swiper--show-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #003a6f !important;
}
.development-card-slider.page-select-swiper .swiper-button-next,
.development-card-slider.page-select-swiper .swiper-button-prev {
  width: 40px;
  height: 40px;
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.development-card-slider.page-select-swiper .swiper-button-next {
  right: 0;
}
.development-card-slider.page-select-swiper .swiper-button-prev {
  left: 0;
}
.development-card-slider.page-select-swiper .swiper-button-next::after,
.development-card-slider.page-select-swiper .swiper-button-prev::after {
  display: none;
}
.development-card-slider.page-select-swiper .swiper-button-next svg,
.development-card-slider.page-select-swiper .swiper-button-prev svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
@media (max-width: 767px) {
  .development-card-slider.page-select-swiper .swiper-button-next,
  .development-card-slider.page-select-swiper .swiper-button-prev {
    display: none !important;
  }
  .development-card-slider.page-select-swiper--show-pagination .swiper-pagination {
    display: flex !important;
  }
}

/* ----- Page-select: static (no slider) ----- */
.development-card-slider.page-select-static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  align-items: stretch;
}
.development-card-slider.page-select-static .swiper-slide {
  max-width: 400px;
  width: 100%;
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .development-card-slider.page-select-static {
    flex-direction: column;
    align-items: center;
  }
}

/* ----- Related articles swiper ----- */
.development-card-slider.related-articles-swiper {
  position: relative;
}
.development-card-slider.related-articles-swiper .swiper-slide {
  height: auto;
}
.development-card-slider.related-articles-swiper .swiper-pagination {
  position: relative;
  margin-top: 20px;
  display: none;
}
.development-card-slider .swiper-button-container .swiper-button-next,
.development-card-slider .swiper-button-container .swiper-button-prev {
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.development-card-slider .swiper-button-container .swiper-button-next {
  right: -15px;
}
.development-card-slider .swiper-button-container .swiper-button-prev {
  left: -50px;
}
.development-card-slider .swiper-button-container .swiper-button-next::after,
.development-card-slider .swiper-button-container .swiper-button-prev::after {
  display: none;
}
.development-card-slider .swiper-button-container .swiper-button-next svg,
.development-card-slider .swiper-button-container .swiper-button-prev svg {
  width: 40px;
  height: 40px;
  fill: #003a6f;
}
@media (max-width: 1399px) {
  .development-card-slider .swiper-button-container {
    display: none;
  }
  .development-card-slider.related-articles-swiper .swiper-pagination {
    display: block;
  }
  .development-card-slider .development__list .swiper__btns,
  .development__list .development-card-slider .swiper__btns {
    display: none;
  }
}