/*
 * Cards Carousel Slider – core styles
 *
 * This stylesheet provides a minimal styling baseline for the carousel.  
 * Slides rely on Swiper.js for sizing and positioning. Card widths on desktop
 * and mobile are controlled via CSS variables injected by the plugin
 * (defined on :root as --ccs-desktop-card-width and --ccs-mobile-card-width).
 */

/* Hide default pagination dots (optional) */
.ccs-carousel-wrapper .swiper-pagination {
  display: none !important;
}

/* Ensure no unwanted background colors appear */
.ccs-carousel-wrapper,
.ccs-swiper,
.ccs-swiper .swiper-wrapper,
.ccs-swiper .swiper-slide,
.ccs-slide-content {
  background: transparent;
}

/* Reset slide margins and padding so Swiper can control widths */
.ccs-swiper .swiper-slide {
  margin: 0;
  padding: 0;
}

/* Content container: center children and fill the slide */
.ccs-slide-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Image wrapper: ensures image is centered horizontally */
.ccs-slide-image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Images fill the slide width up to the card size */
.ccs-slide-content img {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--ccs-desktop-card-width);
}

/* Text blocks behave similarly to images: full width but bounded by card size */
.ccs-slide-text {
  display: block;
  width: 100%;
  max-width: var(--ccs-desktop-card-width);
  padding: 16px 20px;
  box-sizing: border-box;
  /* Minimal styling for readability */
  background: #ffffff;
  color: #000000;
  border-radius: 12px;
  line-height: 1.3;
  font-weight: 600;
  text-align: left;
}

/* On small screens, override max-width with the mobile card width variable */
@media (max-width: 767px) {
  .ccs-slide-content img {
    max-width: var(--ccs-mobile-card-width);
  }
  .ccs-slide-text {
    max-width: var(--ccs-mobile-card-width);
  }
}