/* Minimal carousel — Swiper.js; uniform slide height + compact transparent nav */

.artwork-swiper.swiper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Fixed frame height so slides don’t jump; image keeps aspect ratio inside white mat */
.artwork-swiper {
  --artwork-frame-h: clamp(220px, 34vw, 400px);
  position: relative;
  --swiper-navigation-size: 1rem;
  --swiper-navigation-color: rgba(255, 255, 255, 0.96);
  --swiper-pagination-color: var(--accent, #1f8a62);
  --swiper-pagination-bullet-size: 5px;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-inactive-color: rgba(26, 31, 38, 0.2);
  --swiper-pagination-bullet-inactive-opacity: 1;
  padding-bottom: 0.85rem;
}

.artwork-swiper .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

.artwork-slide {
  margin: 0;
}

.artwork-slide img {
  width: 100%;
  height: var(--artwork-frame-h);
  object-fit: contain;
  object-position: center;
  background: #fff;
  display: block;
}

/* Prev/next: white chevrons with dark outline — readable on bright art */
.artwork-swiper .swiper-button-prev,
.artwork-swiper .swiper-button-next {
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  top: calc(var(--artwork-frame-h) * 0.5);
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.artwork-swiper .swiper-button-prev::after,
.artwork-swiper .swiper-button-next::after {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 1.15px rgba(0, 0, 0, 0.55);
  paint-order: stroke fill;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.65),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

.artwork-swiper .swiper-button-prev:hover,
.artwork-swiper .swiper-button-next:hover {
  background: transparent;
  border: none;
  --swiper-navigation-color: #fff;
  opacity: 1;
}

.artwork-swiper .swiper-button-prev.swiper-button-disabled,
.artwork-swiper .swiper-button-next.swiper-button-disabled {
  opacity: 0.2;
  pointer-events: none;
}

.artwork-swiper .swiper-pagination {
  bottom: 0;
  position: relative;
  margin-top: 0.35rem;
}

@media (max-width: 720px) {
  .artwork-swiper {
    --artwork-frame-h: clamp(200px, 58vw, 340px);
  }

  .artwork-swiper .swiper-button-prev,
  .artwork-swiper .swiper-button-next {
    width: 1.75rem;
    height: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .artwork-swiper .swiper-wrapper {
    transition-duration: 0.01ms !important;
  }
}