/** 
 * Color Variables
 */
.block-upcoming-events {
  padding: 85px 90px !important;
}
.block-upcoming-events .block-events {
  display: flex;
  gap: 32px;
}
.block-upcoming-events .block-event {
  flex: 1;
  box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.block-upcoming-events .block-event__thumbnail {
  height: 180px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.block-upcoming-events .block-event__details {
  padding: 8px;
}
.block-upcoming-events .block-event__date,
.block-upcoming-events .block-event__title {
  color: #4d8f73;
  margin: 8px 0;
}
.block-upcoming-events .block-event__date {
  font-size: 12px;
}
.block-upcoming-events .block-event__title {
  font-size: 16px;
  font-weight: bold;
}
.block-upcoming-events .block-event__excerpt {
  font-size: 14px;
}
.block-upcoming-events a.block-event__action {
  color: #47cf99;
}
.block-upcoming-events .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 45px 175px;
}
@media (max-width: 1024px) {
  .block-upcoming-events .section-header {
    padding: 40px 100px; /* Reduce side padding for tablets */
  }
}
@media (max-width: 768px) {
  .block-upcoming-events .section-header {
    padding: 30px 50px; /* Further reduce padding for smaller screens */
    flex-direction: column; /* Stack elements vertically */
    text-align: center; /* Center align content */
    gap: 16px; /* Add spacing between stacked elements */
  }
}
@media (max-width: 480px) {
  .block-upcoming-events .section-header {
    padding: 25px 20px; /* Compact padding for mobile */
  }
}
@media (max-width: 1024px) {
  .block-upcoming-events .block-events {
    flex-wrap: wrap;
    justify-content: center;
  }
  .block-upcoming-events .block-event {
    flex: 0 0 calc(50% - 16px); /* Two events per row */
  }
}
@media (max-width: 768px) {
  .block-upcoming-events .block-events {
    flex-direction: column;
    gap: 24px;
  }
  .block-upcoming-events .block-event {
    flex: 0 0 100%; /* Full width for better readability */
    max-width: 400px; /* Prevent it from becoming too wide */
    margin: 0 auto;
  }
  .block-upcoming-events .block-event__thumbnail {
    height: 150px; /* Adjust image height for smaller screens */
  }
}
@media (max-width: 480px) {
  .block-upcoming-events .block-events {
    gap: 16px;
  }
  .block-upcoming-events .block-event__thumbnail {
    height: 130px;
  }
  .block-upcoming-events .block-event__details {
    padding: 6px;
  }
  .block-upcoming-events .block-event__date {
    font-size: 11px;
  }
  .block-upcoming-events .block-event__title {
    font-size: 14px;
  }
  .block-upcoming-events .block-event__excerpt {
    font-size: 13px;
  }
}

/* General container styling for event archive */
.upcoming-events {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr); /* Four columns */
  gap: 20px; /* Space between cards */
  padding: 20px 0;
  margin: 0 auto;
}

/* Single Event Card */
.upcoming-event__item {
  width: 100%; /* Ensures each item is responsive within the column */
  overflow: hidden;
  background-color: #ffffff; /* White background for cards */
  border-radius: 10px;
  box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.upcoming-event__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Event Card Link */
.upcoming-event__card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensure cards are equal height */
}

/* Event Thumbnail Image */
.upcoming-event__image {
  height: 180px; /* Set height for consistency */
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Event Info Section */
.upcoming-event__info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between text elements */
  flex-grow: 1; /* Pushes content to fill card height */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Event Date */
.upcoming-event__date {
  font-size: 14px;
  color: #4d8f73; /* Dark green text color for the date */
  font-weight: bold;
  margin: 0;
}

/* Event Title */
.upcoming-event__title {
  font-size: 18px;
  font-weight: bold;
  margin: 8px 0 0;
  line-height: 1.4;
  color: #2f855a; /* Dark green for title text */
  transition: color 0.3s ease;
}

.upcoming-event__title:hover {
  color: #38b2ac; /* Teal hover effect */
}

/* Event Excerpt */
.upcoming-event__details {
  font-size: 14px;
  color: #333; /* Neutral dark gray for text */
  line-height: 1.6;
  margin: 0;
}

/* Action Link */
.upcoming-event__action {
  color: #38b2ac; /* Teal color for action link */
  margin-top: auto; /* Push link to bottom of card */
  align-self: start;
  transition: color 0.3s ease;
}

.upcoming-event__action:hover {
  color: #2f855a; /* Dark green hover effect */
}

/* Responsive Design */
@media (max-width: 992px) {
  .upcoming-events {
    grid-template-columns: repeat(3, 1fr); /* Switch to 3 columns on medium screens */
  }
  .upcoming-event__item {
    max-width: 33.333%; /* Each card takes up 1/3 of the width */
  }
}
@media (max-width: 768px) {
  .upcoming-events {
    grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns on smaller screens */
  }
  .upcoming-event__item {
    max-width: 50%; /* Each card takes up 50% of the width */
  }
}
@media (max-width: 576px) {
  .upcoming-events {
    grid-template-columns: 1fr; /* Single column layout on very small screens */
  }
  .upcoming-event__item {
    max-width: 100%; /* Each card takes up the full width */
  }
}