/* Container */
.carousel {
  position: relative;
  /* anchor .nav and .dots */
  /* max-width: 1200px; */
  /* optional */
  margin: 0 auto;
  background: var(--site_bg);
}

/* Track */
.carousel .track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  /* JS controls smoothness */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.carousel .track::-webkit-scrollbar {
  display: none;
}

/* Slides: one per viewport + fixed aspect ratio */
.carousel .slide {
  flex: 0 0 100%;
  /* one slide per view */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* smoother feel */
}

/* Images: fill the frame */
.carousel .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* use 'contain' if no cropping */
}

/* REMOVE conflicting generic rules */
/* .slide img { max-width:100%; max-height:100%; height:auto; } */

/* Controls */
.carousel .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  line-height: var(--carousel-nav-lh);
  text-align: center;
  background: var(--carousel-nav-bg);
  border: 1px solid #ddd;
  border-radius: var(--carousel-nav-radius);
  cursor: pointer;
}

.carousel .nav:hover {
  background: var(--carousel-nav-bg-hover);
}

.carousel .prev {
  left: var(--fontSz-2);
}

.carousel .next {
  right: var(--fontSz-2);
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .carousel .track {
    scroll-behavior: auto;
  }
}


/* --- Modes ------------------------------------------------------- */
/* Default stays as-is: one slide per view, etc. */

/* RATIO MODE (your current behavior). Set --slide-ratio as needed. */
/*
usage:
<div class="carousel carousel--ratio" style="--slide-ratio: 21/9;">
  ...
</div>
*/
.carousel--ratio .slide {
  aspect-ratio: var(--slide-ratio, 16/9);
  height: auto;
}

.carousel--ratio .slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* FIXED-HEIGHT MODE. Set --slide-h (e.g. 420px). */
/*
usage:
<div class="carousel carousel--fixed" style="--slide-h: 420px;">
  ...
</div>
*/

.carousel--fixed.sldHeight80vh {
  --slide-h: 80vh;
}

.carousel--fixed .slide {
  aspect-ratio: auto;
  /* ignore ratio when height is fixed */
  height: var(--slide-h, 480px);
  /* default if not provided */
}

.carousel--fixed .slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* no cropping; use 'cover' if you want */
}

/* INTRINSIC (CONTENT-DRIVEN) MODE. Content determines final size. */
/*
usage: 
<div class="carousel carousel--intrinsic">
  ...
</div>
*/
.carousel--intrinsic .slide {
  aspect-ratio: auto;
  /* remove fixed ratio */
  height: auto;
  /* let content decide */
}

.carousel--intrinsic .slide img {
  width: 100%;
  height: auto;
  /* keep natural aspect and height */
  object-fit: contain;
}

/* === Auto-generated responsiveness review for: assets/css/carousel.css === */
/* Breakpoint skeleton (fill in as needed) */
@media (max-width: 1200px) {
  /* xl down */
}

@media (max-width: 992px) {
  /* lg down: stack sidebars, shrink grids */
  /* Container */
.carousel {
    max-width: min(100%, 1200px) /* responsive override from max-width:1200px */;
  }
}

@media (max-width: 768px) {
  /* md down: single-column layout */
  /* Track */
.carousel .track {
    flex-wrap: wrap /* allow items to wrap on small screens */;
  }
  /* Slides: one per viewport + fixed aspect ratio */
.carousel .slide {
    flex-wrap: wrap /* allow items to wrap on small screens */;
  }
}

@media (max-width: 576px) {
  /* sm down: tighten paddings, font sizes */
  /* Track */
.carousel .track {
    flex-direction: column /* stack items on phones */;
  }
  /* Slides: one per viewport + fixed aspect ratio */
.carousel .slide {
    flex-direction: column /* stack items on phones */;
  }
}

@media (max-width: 768px) {

  /* Track */
.carousel .track {
    flex-wrap: wrap /* allow items to wrap on small screens */;
  }
  /* Slides: one per viewport + fixed aspect ratio */
.carousel .slide {
    flex-wrap: wrap /* allow items to wrap on small screens */;
  }
}

@media (max-width: 992px) {

  /* Container */
.carousel {
    max-width: min(100%, 1200px) /* responsive override from max-width:1200px */;
  }
}

/* === End auto-generated review === */