/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-button {
  border: none;
  background-color: var(--cnvs-section-bg);
}

.modal-button img {
  opacity: 1; /* Fully opaque by default (value from 0.0 to 1.0) */
  transition: opacity 0.3s ease; /* Smooth transition effect */
}

.modal-button:hover img {
  opacity: 0.5; /* Becomes 50% transparent on hover */
}

.youtube-video {
  width: 50%;
  opacity: 1; /* Fully opaque by default (value from 0.0 to 1.0) */
  transition: opacity 0.3s ease; /* Smooth transition effect */
}

.youtube-video:hover {
  opacity: 0.5; /* Becomes 50% transparent on hover */
}

.youtube-item {
  padding: 20px;
}

.amritaModalSpan {
  border: none;
  background-color: #fff;
}

.kaylaModalSpan {
  border: none;
  background-color: #fff;
}

.anitaModalSpan {
  border: none;
  background-color: #fff;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.events-list {
  color: #000;
}

/* LIVE section style */
.events-list .item {
  background-color: lightgoldenrodyellow;
  padding: 1.25rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  gap: 1.5rem;
  border-radius: 1rem;
}

.events-list .item .date {
  background-color: lightseagreen;
  color: #fff;
  text-align: center;
  border-radius: 0.5rem;
  position: relative;
}

.events-list .item .date img {
  border-radius: 0.5rem;
}

.events-list .item .date .date-centered {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.events-list .item .date .day {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.events-list .item .date .time {
  font-size: 1.15rem;
  font-weight: bold;
}

.events-list .item .name h2 {
  margin-bottom: 0.5rem;
}

.events-list .item .add-to-calendar {
  cursor: pointer;
  background-color: lightseagreen;
  color: #fff;
  padding: 1rem;
  text-wrap: nowrap;
  align-self: start;
  border: 0;
  border-radius: 0.5rem;
  transition: all 200ms ease;
}

.events-list .item .add-to-calendar:hover {
  background-color: #000;
  color: #fff;
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
  .events-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  /* Ensure date section height is adjusted based on content */
  .events-list .item .date {
    height: min-content;
  }

  /* Make event name span across both columns */
  .events-list .item .name {
    grid-column: 2 / -1;
  }

  /* Make the "Add to calendar" button span both columns */
  .events-list .item .add-to-calendar {
    grid-column: 1 / -1;
  }
}

/* Media query for screens smaller than 600px */
@media (max-width: 600px) {
  /* Change events list to single-column grid */
  .events-list {
    grid-template-columns: 1fr;
  }
}