.posts-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.posts-carousel::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

.card-wrap {
  flex: 0 0 auto;
  width: 280px;
  height: 380px;
  margin: 20px;
  scroll-snap-align: center;
  transform: perspective(800px);
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: grayscale(80%);
  transform: scale(0.9);
}

.card-wrap.highlighted {
  filter: grayscale(0%);
  transform: scale(1.05);
}

.card {
  position: relative; /* Added to constrain absolutely positioned children */
  width: 100%;
  height: 100%;
  background-color: #333;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.5s var(--hoverEasing);
}

.card-wrap:hover .card {
    box-shadow:
    rgba(255, 255, 255, 0.2) 0 0 40px 5px,
    rgba(255, 255, 255, 1) 0 0 0 1px,
    rgba(0, 0, 0, 0.66) 0 30px 60px 0;
}

.card-bg {
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: opacity 0.6s var(--hoverEasing);
}

.card-wrap:hover .card-bg {
    opacity: 0.9;
}

.card-info {
  padding: 20px;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff !important; /* Ensure text color is white */
  /* Make it always visible, but with a slight transform for the hover effect */
  transform: translateY(0%); 
  opacity: 1; /* Always visible */
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Add text shadow for better readability */
}

.card-wrap:hover .card-info {
  transform: translateY(0); /* Ensure it stays in place on hover */
  opacity: 1;
}

.card-info h3 {
  font-family: "Poppins", sans-serif;
  font-size: 20px; /* Slightly smaller for better truncation */
  font-weight: 700;
  margin-bottom: 5px; /* Adjust margin */
  white-space: nowrap; /* Truncate title */
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff !important; /* Ensure title color is white */
}

.card-wrap:hover .card-info h3 {
  white-space: normal; /* Show full title on hover */
  overflow: visible;
  text-overflow: clip;
}

.card-info .card-location-display,
.card-info .card-date-display {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap; /* Truncate location and date */
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff !important; /* Ensure location/date color is white */
}

.promo-badge {
    position: absolute;
    top: 10px; /* Adjusted to be slightly smaller */
    left: 10px; /* Adjusted to be slightly smaller */
    background-color: #ff3d77; /* A vibrant color for the badge */
    color: white;
    padding: 3px 8px; /* Reduced padding */
    border-radius: 15px; /* Slightly smaller border-radius */
    font-size: 10px; /* Reduced font-size */
    font-weight: 700;
    z-index: 2;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Adjusted shadow */
    white-space: nowrap; /* Prevent text wrapping */
    width: fit-content; /* Ensure it only takes content width */
    height: fit-content; /* Ensure it only takes content height */
    line-height: normal; /* Ensure line height doesn't expand it */
}