/* Showcase Gallery — Swiper carousel on /showcase/{project}/ pages.
   Initialized by /assets/js/components/showcase-swiper.js
   (Swiper library itself is loaded per page). */

.showcase-swiper {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 50px;
  overflow: hidden;
}

.showcase-swiper .swiper-slide {
  background: var(--color-dark-gray);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/10;
}

.showcase-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 8px;
  -webkit-user-drag: none;
  user-select: none;
}

.showcase-swiper .swiper-pagination-bullet {
  background: var(--color-gray);
  opacity: 0.5;
}

.showcase-swiper .swiper-pagination-bullet-active {
  background: var(--color-white);
  opacity: 1;
}

.showcase-swiper .swiper-button-next,
.showcase-swiper .swiper-button-prev {
  color: var(--color-white);
}

/* The page grid sets `main { pointer-events: none }` so the background
   grid stays interactive. Re-enable the carousel so it can be dragged
   and its controls clicked. */
.showcase-swiper,
.showcase-swiper .swiper-slide,
.showcase-swiper .swiper-button-next,
.showcase-swiper .swiper-button-prev,
.showcase-swiper .swiper-pagination,
.showcase-swiper .swiper-pagination-bullet {
  pointer-events: auto;
}