/* Events Accordion - Custom React Component Styles */

/* Image Accordion Styles with Swipe Animation */
.accordion-img {
  position: relative;
  min-height: 400px;
  overflow: hidden;
}

.event-image-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
}

/* First item swipes down */
.event-image-panel:nth-child(1) {
  transform: translateY(-100%);
}

.event-image-panel:nth-child(1).active {
  transform: translateY(0);
}

/* Second item swipes up */
.event-image-panel:nth-child(2) {
  transform: translateY(100%);
}

.event-image-panel:nth-child(2).active {
  transform: translateY(0);
}

.event-image-panel.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.event-image-panel img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text Accordion Styles - Matching Belle Template */
.events-text-accordion {
  margin-top: 20px;
}

.event-panel {
  margin-bottom: 5px;
  background-color: transparent;
  box-shadow: none;
}

.event-heading {
  margin-bottom: 0;
  padding: 10px 15px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background-color: #e9e9e9;
}

.event-title {
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: inherit;
}

.event-toggle {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: block;
  text-decoration: none;
}

.event-toggle:hover,
.event-toggle[aria-expanded="true"] {
  color: #000;
  font-weight: 600;
}

/* Event Content - Smooth Collapse */
.event-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background-color: #fff;
  padding: 0 15px;
}

.event-content.active {
  max-height: 500px;
  padding: 5px 15px 15px;
}

.event-place {
  padding: 5px 0 0;
  font-style: italic;
  color: #666;
  font-size: 14px;
}

.event-place i {
  margin-right: 8px;
}

.event-location-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: text-decoration 0.3s ease;
}

.event-location-link:hover {
  text-decoration: underline;
}

.event-body {
  padding: 10px 0 0;
  line-height: 1.8;
  color: #000;
  font-size: 14px;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
  .accordion-img {
    margin-bottom: 30px;
  }
  
  .event-image-panel {
    position: relative;
    min-height: auto;
  }
}