/* Container for each blog post */
.post-box {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
  height: 500px; /* Adjust this height as needed */
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/* Styling for the image */
.post-img-wrapper {
  flex: 1;
  margin-bottom: 10px;
}

.post-img {
  width: 100%;
  height: auto;
}

/* Summary section for post details */
.post-summary {
  display: flex;
  flex-direction: column;
  flex: 2;
  position: relative;
}

/* Info section with category and author */
.post-info {
  margin-bottom: 10px;
}

/* Title styling */
.post-title {
  margin: 10px 0;
}

/* Description styling with 3 lines limit */
.post-excerpt {
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  max-height: calc(1.2em * 3); /* Adjust line-height and number of lines */
  line-height: 1.2em; /* Ensure this matches the line-height calculation */
}

/* Expanded state for post excerpt */
.post-excerpt.expanded {
  max-height: none; /* Allow the content to expand fully */
}

/* Styling for the read-more button */
.read-more {
  margin-top: auto; /* Push button to the bottom */
  align-self: flex-end;
  display: inline-block;
  text-decoration: none;
  color: #007bff; /* Bootstrap primary color */
  font-weight: bold;
  cursor: pointer;
}