.carousel-shell {
  position:relative;
  overflow:clip;
  isolation:isolate;
}

/* Swiper container */
.swiper {
  width:100%;
  padding: 1rem;
}

/* clickable card */
.swiper-card {
  display: block;
  height: 100%;
  border: 1px solid silver;
  border-radius: 0.5rem;
  padding: 1rem;
  transform: translateZ(0);
}
.swiper-card:not(:hover) {
  text-decoration: none;
}
.swiper-card:hover {
  border: 1px solid gray;
}
.swiper-media {
  aspect-ratio: 1/1;
  width: 100%;
  overflow: clip;
}
.swiper-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none; /* keep click targeting on <a> */
  transform: scale(1.02);
}

.card-title {
  margin-top: 0.5rem;
  font-weight: var(--t-semibold);
  text-align: center;
}

@media (hover:hover) {
  .card:hover {
    transition: box-shadow .15s ease-in-out;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25), 0 2px 12px rgba(0, 0, 0, .05);
  }
}

/* Swiper arrows */
.swiper-button-next,
.swiper-button-prev {
  width: 3rem;
  height: 3rem;
  border-radius: 99em;
  border: 1px solid rgba(0,0,0,.2);
  padding: 0.5rem;
  background: rgba(255,255,255,.5);
  color: black !important;
  transition: transform .15s ease, background .15s ease, opacity .2s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover { background: rgba(255,255,255,1); transform:scale(1.1); }
.swiper-button-next:active,
.swiper-button-prev:active { transform:scale(0.95); }

/* default arrow icons are pseudo elements; make them smaller */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size:16px;
  font-weight:700;
}

{# /* Swiper bullets */
.swiper-pagination {
  bottom: 0.5rem !important;
}
.swiper-pagination-bullet {
  background: rgba(0,0,0,.7);
}
.swiper-pagination-bullet-active{
  background: var(--blue-600);
} #}

/* Edge fades (that don’t block clicks) */
.carousel-shell::before,
.carousel-shell::after{
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1rem;
  pointer-events: none;
  z-index:10;
  opacity:.5;
}
.carousel-shell::before{
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.2), transparent);
}
.carousel-shell::after{
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,.2), transparent);
}

/* Hide arrows/pagination via JS by toggling this class */
.is-static .swiper-button-next,
.is-static .swiper-button-prev,
.is-static .swiper-pagination{
  display: none !important;
}

/* Reduced motion: stop transitions (Swiper will still work) */
@media (prefers-reduced-motion: reduce) {
  .swiper-button-next,
  .swiper-button-prev{ transition: none; }
}