/* =================================================================
   Inspiration Carousel - Optimized
   ================================================================= */


#mobile-carousel h3.wd-post-title:hover a,
#inspiration-carousel h3.wd-post-title:hover a {
  color: #F4B237;
}

#mobile-carousel .wd-post-cat.wd-style-with-bg,
#inspiration-carousel .wd-post-cat.wd-style-with-bg {
	background-color: #D06281;
	font-weight: 600;
	font-size: 14px;
	color: #FCFCE5;
	padding-left: 60px;
	padding-right: 60px;
	transition: background-color 0.3s ease;
}

#mobile-carousel .wd-post-inner .wd-post-cat.wd-style-with-bg:hover,
#inspiration-carousel .wd-post-inner .wd-post-cat.wd-style-with-bg:hover {
  background-color: #F4B237;
}



#inspiration-carousel .wd-carousel-inner,
#inspiration-carousel .wd-carousel,
#inspiration-carousel .wd-carousel-wrap {
  overflow: visible;
}

#inspiration-carousel .wd-carousel-inner {
  padding: 100px 0; /* Provides vertical space for scaling animation */
}

/* --- Main Carousel Item Styling & Animation --- */
#inspiration-carousel .wd-carousel-item {
  /* Promotes this element to its own compositor layer for smoother animations.
     Use with care, but perfect for a carousel item. */
  will-change: transform, opacity;
  
  /* The main transition for the slide itself */
  transition: 
    transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.6s ease;
  
  /* Default state for non-visible items */
  opacity: 1;
  transform: scale(0.5);
  z-index: 1;
  overflow: visible; 
}

/* --- Item States --- */

/* Side items that are partially visible */
#inspiration-carousel .wd-carousel-item.wd-full-visible:not(.wd-active) {
  transform: scale(0.799);
  z-index: 5;
}

/* The main, active, centered item */
#inspiration-carousel .wd-carousel-item.wd-active {
  transform: scale(1.2);
  opacity: 1;
  z-index: 10;
}

/* Far-off items: Apply a horizontal shift */
#inspiration-carousel .wd-carousel-item.far-left {
   transform: scale(0.5) translateX(calc((1 - 0.5) * 60%)) translateY(-15%);
}
#inspiration-carousel .wd-carousel-item.far-right {
  transform: scale(0.5) translateX(calc((1 - 0.5) * -60%)) translateY(-15%);
}

/* --- Transform Origins for Directional Scaling --- */
/* This ensures items scale from the correct point of view */
#inspiration-carousel .wd-carousel-item.wd-active {
  transform-origin: center center;
}
#inspiration-carousel .wd-carousel-item.wd-slide-prev {
  transform-origin: left 30%;
}
#inspiration-carousel .wd-carousel-item.wd-slide-next {
  transform-origin: right 30%;
}

/* --- Carousel Item Content --- */
#inspiration-carousel .wd-post-title,
#inspiration-carousel .wd-post-cat.wd-style-with-bg {
  /* IMPORTANT: Add transitions to the children so their properties animate too! */
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform-origin: center center;
}

#mobile-carousel .wd-post-title,
#inspiration-carousel .wd-post-title {
  font-size: 16px;
  font-weight: 600;
  color: #FCFCE5;
  padding-bottom: 18px;
  padding-top: 10px;
}

/* Counter-scale the title/cat on the active item to maintain their size */
#inspiration-carousel .wd-active .wd-post-title,
#inspiration-carousel .wd-active .wd-post-cat.wd-style-with-bg {
  transform: scale(0.83333); /* 1 / 1.2 ≈ 0.83333 */
}

#inspiration-carousel .wd-carousel-item.far-left .wd-post-title,
#inspiration-carousel .wd-carousel-item.far-left .wd-post-cat.wd-style-with-bg,
#inspiration-carousel .wd-carousel-item.far-right .wd-post-title,
#inspiration-carousel .wd-carousel-item.far-right .wd-post-cat.wd-style-with-bg {
  opacity: 0;
  pointer-events: none; 
  transform: translateY(10px); 
}
#mobile-carousel .wd-post-meta,
#inspiration-carousel .wd-post-meta {
  display: none;
}

.wd-content-layout {
padding-block-end: 0px;
}