/* =========================
   Carousel layout (coverflow)
   ========================= */

.catgrid--carousel{
  position:relative;
  width:100%;
  padding: 10px 0 0;
}

/* wrapper */
.catgrid--carousel .catgrid-stage{
  position:relative;
  width:100%;
  min-height: 260px;
  perspective: 1000px;
  overflow: visible; /* per far vedere le laterali */
}

/* slide (posizionata al centro e poi spostata via transform) */
.catgrid--carousel .catgrid-slide{
  position:absolute;
  top:0;
  left:50%;
  width: min(var(--catgrid-card-max, 500px), 88vw);
  transform-origin: center center;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
  will-change: transform;
  /* Desktop: l'interazione è via click (slide laterali -> centro, slide centrale -> naviga).
     Su mobile resta lo swipe (JS) e il cursore è irrilevante. */
  cursor: pointer;
}

/* stato nascosto (oltre il max laterale) */
.catgrid--carousel .catgrid-slide.is-hidden{
  opacity:0;
  pointer-events:none;
}

/* slide laterali (opacità) */
.catgrid--carousel .catgrid-slide.is-side-1{ opacity: var(--catgrid-side-opacity-1, .82); filter: saturate(.95); }
.catgrid--carousel .catgrid-slide.is-side-2{ opacity: var(--catgrid-side-opacity-2, .72); filter: saturate(.90); }

/* centrale */
.catgrid--carousel .catgrid-slide.is-active{ opacity:1; filter:none; }

/* drag state */
.catgrid--carousel.is-dragging .catgrid-slide{
  transition:none;
  cursor: pointer;
}

/* figure / img */
.catgrid--carousel .catgrid-figure{
  margin:0;
  border-radius: var(--catgrid-radius, 16px);
  overflow:hidden;
  background: var(--catgrid-figure-bg, #f4f4f4);
  box-shadow: 0 10px var(--catgrid-shadow-blur, 18px) rgba(0,0,0,var(--catgrid-shadow-alpha, .5));
  transform: translateZ(0);
}
.catgrid--carousel .catgrid-img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity:0;
  transition: opacity .25s ease;
}
.catgrid--carousel .catgrid-img.is-loaded{ opacity:1; }

/* caption sotto, sempre visibile */
.catgrid--carousel .catgrid-caption{
  margin-top:10px;
  height: var(--catgrid-caption-h, 78px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--catgrid-text, #fff);
  font-weight: 700;
}
.catgrid--carousel .catgrid-count{ opacity:.85; font-weight:600; }

/* arrows */
.catgrid--carousel .catgrid-arrows{
  position:absolute;
  top: 42%;
  left:0; right:0;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  pointer-events:none;
}
.catgrid--carousel .catgrid-arrow{
  pointer-events:auto;
  width:46px; height:46px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,.45);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.catgrid--carousel .catgrid-arrow:hover{ transform: scale(1.06); background: rgba(0,0,0,.60); }
.catgrid--carousel .catgrid-arrow:disabled{ opacity:.25; cursor:not-allowed; transform:none; }

/* bounce feedback */
@keyframes catgridBounceLeft{
  0%{ transform: translateX(0); }
  50%{ transform: translateX(8px); }
  100%{ transform: translateX(0); }
}
@keyframes catgridBounceRight{
  0%{ transform: translateX(0); }
  50%{ transform: translateX(-8px); }
  100%{ transform: translateX(0); }
}
.catgrid--carousel.bounce-left .catgrid-stage{ animation: catgridBounceLeft .26s ease; }
.catgrid--carousel.bounce-right .catgrid-stage{ animation: catgridBounceRight .26s ease; }

/* responsive tweaks */
@media (max-width: 767px){
  .catgrid--carousel .catgrid-stage{ min-height: 240px; }
  .catgrid--carousel .catgrid-arrow{ width:42px; height:42px; }
}