/* ===== Carousel ===== */
.carousel {
  position: relative;
  z-index: 2;                    /* sits above the page background */
  max-width: 1200px;
  margin: 20px auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  background: #000;              /* fallback while first image loads */
}

.carousel-track {
  position: relative;
  width: 100%;
  min-height: 400px;             /* <<< force visible area */
  height: clamp(280px, 45vw, 520px);
  background: #000;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  will-change: opacity;
}
.slide.is-active { opacity: 1; }

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04) contrast(1.04);
}

/* Overlay text */
.slide-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
  /* background: linear-gradient(to top, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 100%); */
  color: #fff;
}
.slide-overlay h2 { margin: 0 0 .5rem; font-size: clamp(1.25rem, 2.6vw, 1.9rem); }
.slide-overlay p  { margin: 0; font-size: clamp(.95rem, 1.6vw, 1.1rem); }

/* Arrows */
.nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: #0f172a;
  font-size: 24px; line-height: 40px; text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.prev { left: 10px; }
.next { right: 10px; }
@media (max-width: 640px){ .nav { display: none; } }

/* Dots */
.dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 8px;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255,255,255,.55);
}
.dot.is-active { background: #fff; }

.carousel {
  flex: 0 0 auto;
}