/**
 * JetEngine Premium Real Estate Carousel
 * Custom CSS for center mode carousel with partial slide previews
 * 
 * Widget Class: premium-property-carousel
 * Version: 1.0
 * Date: 2025-12-17
 */

/* ==========================================================================
   CSS Custom Properties - Easy Customization
   ========================================================================== */
.premium-property-carousel {
  --carousel-center-scale: 1;
  --carousel-side-scale: 0.70;
  --carousel-side-opacity: 0.6;
  --carousel-transition-speed: 0.4s;
  --carousel-center-z-index: 10;
  --carousel-side-z-index: 1;

}

/* ==========================================================================
   Container Overflow - Enable Partial Slide Visibility
   ========================================================================== */

/* Allow slides to extend beyond container bounds */
.premium-property-carousel .jet-listing-grid__slider>.jet-listing-grid__items>.slick-list {
  overflow: hidden !important;
}

/* Ensure slider track doesn't clip */
.premium-property-carousel .jet-listing-grid__slider>.jet-listing-grid__items>.slick-list>.slick-track {
  display: flex;
  align-items: center;
}

/* ==========================================================================
   Slide Transformations - Scale & Opacity
   ========================================================================== */

/* Base slide styling - applies to ALL slides */
.premium-property-carousel .slick-slide {
  transition: transform var(--carousel-transition-speed) ease,
    opacity var(--carousel-transition-speed) ease,
    z-index 0s var(--carousel-transition-speed);
  /* Delay z-index change until after transition */
  opacity: var(--carousel-side-opacity);
  transform: scale(var(--carousel-side-scale));
  z-index: var(--carousel-side-z-index);
  position: relative;
  margin-left: -20px !important;
  margin-right: -20px !important;
}

/* Center/Current slide - full scale and opacity */
.premium-property-carousel .slick-slide.slick-current,
.premium-property-carousel .slick-slide.slick-center,
.premium-property-carousel .slick-slide.slick-active.slick-center {
  opacity: var(--carousel-center-scale);
  transform: scale(var(--carousel-center-scale));
  z-index: var(--carousel-center-z-index);
  transition: transform var(--carousel-transition-speed) ease,
    opacity var(--carousel-transition-speed) ease,
    z-index 0s 0s;
  /* Apply z-index immediately for center slide */
}

/* Ensure listing item inherits transform properly */
.premium-property-carousel .slick-slide .jet-listing-grid__item {
  transform-origin: center center;
}

.premium-property-carousel-slide {
    border-radius: 8px !important;
}

.premium-property-carousel-slide-img {
    border-radius: 8px 8px 0px 0px !important;
	background-color: #00000000 !important;
}