/* Slide items with normal and expanded states */
.view-infographic .slide-item {
  transition: all 0.3s ease;
  overflow: hidden;
}

.view-infographic .slide-item.expanded {
  /* Allow item to expand to fit content */
  height: auto !important;
  min-height: auto !important;
}

/* Read More/Less buttons styling */
.view-infographic .read-more-btn,
.view-infographic .read-less-btn {
  background: #2c5aa0;
  color: white;
  border: none;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background-color 0.3s ease;
}

.view-infographic .read-more-btn:hover,
.view-infographic .read-less-btn:hover {
  background: #1e3f73;
}

.view-infographic .read-more-btn:focus,
.view-infographic .read-less-btn:focus {
  outline: 2px solid #2c5aa0;
  outline-offset: 2px;
}

/* Text content styling */
.view-infographic .text-truncated,
.view-infographic .text-full {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #666;
  margin-bottom: 0.5rem;
}

/* Smooth transitions */
.view-infographic .text-truncated,
.view-infographic .text-full {
  transition: opacity 0.3s ease;
}

/* Animation for content changes */
.view-infographic .text-full {
  animation: fadeIn 0.3s ease-in-out;
}

.view-infographic .text-truncated {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}