/* ====================================
   Carousel Layout & Slide Structure
==================================== */

body {
  overflow-x: hidden;
}
.entry-content {overflow-x: hidden;}

.event-carousel {
  position: relative;
  padding: 3rem 0;
  max-width: 100%;
}

.event-carousel .swiper-container {
  overflow: visible;
}

.event-carousel .swiper-wrapper {
  align-items: stretch;
}

.event-carousel .swiper-slide {
  width: clamp(300px, 90vw, 770px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-carousel .swiper-slide.image-only {
  width: auto;
}

/* Slide Inner Wrapper */
.event-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ====================================
   Image
==================================== */
.event-slide img {
  width: 100%;
  height: clamp(12.313rem, 2.471rem + 40.374vw, 40.625rem);
  object-fit: cover ;
  /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
}
.event-slide figure {
  margin-bottom: 0px;
}
.event-slide figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 2.5%;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 0.9em;
  width: 95%;
  max-width: 100%;
}
.event-slide figcaption {
    position: relative;
    background: none;
    font-size: var(--wp--preset--font-size--body-small);
    font-family: var(--wp--preset--font-family--aktiv-grotesk);
    color: var(--wp--preset--color--primary-text);
    padding: 8px 0;
    max-width: 700px;
}
.event-slide img.carousel-just-image {
  width: 100%;
  height: auto;
  max-height: clamp(12.313rem, 2.471rem + 40.374vw, 40.625rem);
  /* object-fit: contain; */
  box-shadow: none;
}

/* ====================================
   Event Content Card
==================================== */
.event-details {
  background: #fff;
  padding: 1.5rem;
  border: 1px solid #eee5d4;
  box-shadow:         
    84px 211px 64px 0px rgba(131, 117, 93, 0.00),
    54px 135px 58px 0px rgba(131, 117, 93, 0.01),
    30px 76px 49px 0px rgba(131, 117, 93, 0.05),
    13px 34px 36px 0px rgba(131, 117, 93, 0.09),
    3px 8px 20px 0px rgba(131, 117, 93, 0.10);
  box-sizing: border-box;
  width: clamp(400px, 40vw, 537px);
  margin-top: -5rem; /* creates overlap effect */
  position: relative;
  z-index: 10;
  transition: all 0.3s ease;
}

.event-date {
  font-size: 0.875rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.event-details h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

.event-details p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.event-button {
  background: #225c3b;
  color: #fff;
  padding: 0.6rem 1.2rem;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

.event-button:hover {
  background: #1a472e;
}

/* ====================================
   Navigation Controls
==================================== */

.swiper-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block-start: 2rem !important;
  gap: 1.5rem;
  max-width: 600px; /* ✅ Adjust this */
  margin-left: auto;
  margin-right: auto;
}

/* Arrows */
.swiper-button-next,
.swiper-button-prev {
  color: var(--wp--preset--color--secondary);
  font-size: 24px;
  width: auto;
  height: auto;
  position: static; /* disable default absolute positioning */
  margin: 0;
  cursor: pointer;
}

.white .swiper-button-next,
.white .swiper-button-prev {
  color: #fff;
}

/* Override Swiper’s default icons if needed */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 24px;
}

/* Dots */
.swiper-pagination {
  display: flex;
  gap: 0.5rem;
position: inherit;
width: auto !important;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--wp--preset--color--secondary);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: var(--wp--preset--color--secondary);
  border-radius: 10px;
  width: 32px;
}

.white .swiper-pagination-bullet {
  border: 2px solid #fff;
}
.white .swiper-pagination-bullet-active {
  background: #fff;
  border-radius: 10px;
  width: 32px;
}


/* ====================================
   Responsive
==================================== */
@media screen and (max-width: 768px) {
  .event-carousel .swiper-slide {
    max-width: 90%;
    margin: 0 auto;
  }

  .event-details {
    margin-top: 0;
    margin-bottom: 2rem;
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
    border: 1px solid #eee5d4;
  }
}