/* =========================
   Main Container
   ========================= */
main.container {
  padding: 0 1rem;       /* horizontal padding for everything inside */
  max-width: 1250px;       /* optional: limit max width */
  margin: 0 auto;          /* center horizontally */
  box-sizing: border-box;
}
/* =========================
   Event Section Container
   ========================= */
.event-section {
  padding: 2rem 1rem;      /* top/bottom 2rem, left/right 1rem */
  max-width: 900px;        /* keeps content from stretching too wide */
  margin: 0 auto;          /* center horizontally */
}

/* =========================
   Event Section Headings
   ========================= */
/* Main page heading */
main h1 {
  color: #44396b;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* Event section headings */
.event-section h2 {
  color: #a21caf;
  font-size: 1.6rem;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* =========================
   Event List
   ========================= */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 0;              /* remove any default padding */
  width: 100%;
  box-sizing: border-box;  /* include padding in width */
}


/* =========================
   Event Cards
   ========================= */
.event-card {
  padding: 1rem 1.5rem;
  border-radius: 10px;
  background: #f8f9fa;
  box-shadow: 0 3px 6px rgba(162, 28, 175, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  width: 100%;             /* fill container but respect max-width */
  box-sizing: border-box;
}

/* =========================
   Upcoming Events
   ========================= */
.event-card.upcoming {
  border-left: 5px solid #28a745; /* green accent */
}

.event-card.upcoming:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4); /* green glow */
  background: #f0fff0; /* light green background on hover */
}

/* =========================
   Past Events
   ========================= */
.event-card.past {
  border-left: 5px solid #6c757d; /* gray accent */
  opacity: 0.85;
  background: #f5f5f5; /* slightly darker than upcoming */
}

.event-card.past:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(108, 117, 125, 0.5); /* stronger gray glow */
  background: #e2e3e5; /* noticeable hover */
}

/* =========================
   Event Headings & Text
   ========================= */
.event-card h3 {
  margin: 0 0 0.5rem 0;
  color: #a21caf;          /* darker purple, matches event-section h2 */
  font-size: 1.2rem;
}

.event-card p {
  margin: 0.25rem 0;
  color: #555;
  font-size: 0.95rem;
}

.event-card small {
  display: block;
  margin-top: 0.5rem;
  color: #777;
  font-size: 0.85rem;
}