/* ==========================================================================
   Ken Burns Carousel (minimal base CSS)
   - Full-width background per slide
   - Content constrained by a "container" class you can override to match Salient
   - Fade handled by opacity
   ========================================================================== */

.skbc-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.skbc-carousel__inner {
  position: relative;
}

/* Screen-reader-only utility */
.skbc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skbc-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 6;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.skbc-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.6;
}

.skbc-carousel__dot.is-active {
  opacity: 1;
  transform: scale(1.25);
}


.skbc-carousel__slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 360px; /* adjust as needed */
}

.skbc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--skbc-fade-duration, 800ms) ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.skbc-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.skbc-slide__bg {
  position: absolute;
  inset: 0;
  transform: scale(1);
  will-change: transform;
  z-index: 1;
}

.skbc-slide__img {
  position: absolute;
  inset: 0;
  max-width: none !important;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* Ken Burns animation will be applied by JS by toggling a class */
.skbc-slide.is-animating .skbc-slide__bg {
  animation: skbcKenBurns var(--skbc-kenburns-duration, 8000ms) ease-in-out forwards;
}

@keyframes skbcKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

.skbc-slide__color-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(12 13 14 / 50%) 0%, rgba(12, 13, 14, .5) 100%),
              linear-gradient(0deg, rgb(12 13 14 / 90%) .18%, rgba(12, 13, 14, 0) 85%);
  z-index: 2;
}
@media screen and (min-width: 1024px) {
  .skbc-slide__color-bg {
    background: linear-gradient(180deg, rgb(12 13 14 / 90%) 0%, rgba(12, 13, 14, 0) 50%),
                linear-gradient(90deg, rgb(12 13 14 / 90%) .18%, rgba(12, 13, 14, 0) 85%);
  }
}

/* Content overlay */
.skbc-slide__content {
  position: relative;
  z-index: 3;
}

/*
  Match Salient’s width:
  - Replace max-width/padding with Salient container variables/classes if you want.
*/
.skbc-slide__content-inner {
  margin: 0 auto;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skbc-slide,
  .skbc-slide__bg {
    transition: none !important;
    animation: none !important;
  }
}