/* Self-hosted replacement for bootstrap's carousel.
   Consumes the same markup classes (.carousel / .carousel-inner /
   .carousel-item / .carousel-indicators / .carousel-control-*) so the
   per-slide #id background-position tweaks and .copyright captions in
   project.css keep working unchanged.

   Instead of bootstrap's per-item next/prev shuffle, every slide lives in a
   single flex "track" that we move with translateX. Two upshots:
     - all slides stay in the layout, so their background-images preload
       instead of popping in as they scroll into view;
     - clicks just re-aim the transform, so prev/next is interruptible and
       you never have to wait for the animation to finish. */

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  height: 100%;
}
/* The transition is only enabled once carousel.js has positioned the track,
   so the initial jump to the first slide isn't animated. */
.carousel.ready .carousel-inner {
  transition: transform 0.5s ease;
}

.carousel-item {
  position: relative;
  flex: 0 0 100%;
  max-width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}

/* prev / next controls */
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
  cursor: pointer;
}
.carousel-control-prev { left: 0; }
.carousel-control-next { right: 0; }
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover, .carousel-control-next:focus {
  color: #fff;
  opacity: 0.9;
  outline: none;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat center center / 100% 100%;
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

/* slide indicators (dots) */
.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin: 0 15% 1rem;
  padding: 0;
  list-style: none;
}
.carousel-indicators li {
  box-sizing: content-box;
  width: 30px;
  height: 3px;
  margin: 0 3px;
  background-color: #fff;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
  cursor: pointer;
}
.carousel-indicators li.active {
  opacity: 1;
}

/* visually-hidden control labels (was bootstrap's .sr-only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honour reduced-motion: jump between slides instead of sliding (carousel.js
   also disables autoplay in this case). */
@media (prefers-reduced-motion: reduce) {
  .carousel.ready .carousel-inner {
    transition: none;
  }
}