/* Site hero (#heroCarousel): use aspect-ratio (layout width), not 100vw — scrollbars make vw wider
   than the content box and clip the right edge of slides. Images use contain so baked-in text/CTA
   (e.g. price, buttons) are not cropped; letterboxing shows the inner gradient. */
#heroCarousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  overflow: hidden;
}

@media (max-width: 768px) {
  #heroCarousel {
    aspect-ratio: 4 / 5;
    min-height: 240px;
  }
}

/* Hero only: avoid global .bannerSize — Bootstrap .img-fluid uses height:auto and breaks cover in ratio frames */
#heroCarousel .bannerSize {
  width: 100%;
}

/* Fill the fixed-height hero box */
#heroCarousel .carousel-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #2a0f14 0%, #3d1520 50%, #121212 100%);
}

/* Stack fade slides in the same frame (Bootstrap slide uses negative margins — reset for hero) */
#heroCarousel .carousel-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin-right: 0 !important;
  float: none !important;
  clear: both;
  z-index: 0;
}

#heroCarousel .carousel-item.active {
  z-index: 1;
  pointer-events: auto;
}

#heroCarousel .carousel-item:not(.active) {
  pointer-events: none;
}

#heroCarousel .carousel-item > a {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}

#heroCarousel .parallax-img-wrapper {
  height: 100%;
  width: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Letterboxed fit — keeps full banner art (prices, buttons) visible; background shows in gutters */
#heroCarousel .carousel-item img.bannerSize {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  object-fit: contain;
  object-position: center;
  padding: clamp(0.25rem, 1.25vw, 0.75rem);
  box-sizing: border-box;
  display: block;
  z-index: 0;
}

/* Win over Bootstrap .img-fluid / utilities if load order differs */
#heroCarousel .carousel-item img.bannerSize.img-fluid {
  max-width: none !important;
  height: 100% !important;
  width: 100% !important;
}

/* Placeholder artwork — a bit more breathing room than CMS banners */
#heroCarousel .carousel-item img.bannerSize[src*="no-image"] {
  object-fit: contain;
  padding: clamp(0.75rem, 2.5vw, 2rem);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #heroCarousel .carousel-item img.bannerSize[src*="no-image"] {
    object-fit: contain;
    padding: clamp(0.5rem, 2vw, 1.25rem);
  }
}

/* Parallax wrapper */
.parallax-img-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* Parallax image */
.parallax-img {
    position: absolute;
    width: 110%;            /* slightly larger for movement space */
    height: 110%;
    top: -5%;
    left: -5%;
    object-fit: cover;
    transition: transform 2.5s ease-out;
}

/* Carousel fade — only for .carousel-fade (hero). Do not set opacity on all .carousel-item
   or Bootstrap “slide” carousels (event detail, gallery) break during transitions. */
.carousel.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 1s ease;
}

.carousel.carousel-fade .carousel-item.active {
    opacity: 1;
}

/* Parallax slide movement */
.parallax-slide.active .parallax-img {
    transform: translateY(-20px) scale(1.05);
}
/* DARK / LIGHT GRADIENT OVERLAY */
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Customize Your Gradient Here */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45),
        rgba(0, 0, 0, 0.15)
    );
    pointer-events: none;
    z-index: 2;
}

/* Keep chevrons above slide media */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
  z-index: 5;
}

/* Event detail — slide carousel; dark stage; do not override .carousel-item display (Bootstrap) */
#eventMediaCarousel .carousel-inner {
  min-height: 240px;
  background: #f3f3f3;
}

#eventMediaCarousel .carousel-item {
  text-align: center;
  background: #0d0d0d;
}

#eventMediaCarousel .carousel-item img.event-img,
#eventMediaCarousel .carousel-item video.event-video {
  width: 100%;
  border-radius: 0;
}

@media (max-width: 768px) {
  #eventMediaCarousel .carousel-inner {
    min-height: 200px;
  }
}

/* Gallery modal carousel — letterboxed media */
#galleryCarousel .carousel-item {
  min-height: min(60vh, 480px);
  background: #0d0d0d;
}

#galleryCarousel .carousel-item img,
#galleryCarousel .carousel-item video {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-height: min(75vh, 720px);
  object-fit: contain;
}