/* --- Card Layout Fixes --- */

/* 1. Make the card a flex container */
.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 2. Make the body take up available space */
.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* 3. Title Clamping: Limits to 2 lines, adds '...' */
.demo-title {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Max number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3rem; /* Reserve space for 2 lines for alignment */
  margin-bottom: 0.5rem;
}

/* 4. Description Clamping: Limits to 3 lines, adds '...' */
.demo-description {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Max number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1rem;
}

/* 5. Pin Buttons to Bottom */
.demo-actions {
  margin-top: auto; /* This magic CSS pushes the buttons to the bottom */
  width: 100%;
}