/* ========================================
   Carousel — Componente riusabile
   Nessun colore: ogni sezione li definisce
   ======================================== */

.carousel {
  --carousel-cols: 3;
  --carousel-total: var(--grid-columns, 4);
  --carousel-speed: 0.5s;
  --carousel-base-width: min(var(--container-max), 100vw);
  --carousel-slide-width: calc(var(--carousel-cols) / var(--carousel-total) * var(--carousel-base-width));

  overflow: hidden;
  margin-left: calc(-1 * var(--container-gutter));
  /* Sfonda a destra fino al bordo viewport */
  margin-right: calc(-1 * var(--container-gutter) - max(0px, (100vw - var(--container-max)) / 2));
}

.carousel__track {
  display: flex;
  transition: transform var(--carousel-speed) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.carousel__track.is-dragging {
  cursor: grabbing;
}

.carousel__slide {
  flex: 0 0 var(--carousel-slide-width);
  min-width: 0;
  padding: var(--padding-card);
  display: flex;
  flex-direction: column;
  position: relative;
}

.carousel__slide:first-child {
  border-left: none;
}

/* Carousel Divider — linea orizzontale full-width */
.carousel-divider {
  height: 1px;
  background-color: var(--carousel-border-color, transparent);
  margin-left: calc(-1 * var(--container-gutter) - max(0px, (100vw - var(--container-max)) / 2));
  margin-right: calc(-1 * var(--container-gutter) - max(0px, (100vw - var(--container-max)) / 2));
}

/* Carousel Crosses — posizionate sulla divider */
.carousel-crosses {
  position: relative;
  height: 0;
  z-index: 3;
  margin-left: calc(-1 * var(--container-gutter));
  margin-right: calc(-1 * var(--container-gutter));
}

/* Navigation Arrows */
.carousel-nav {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  margin-top: 26px;
}



.nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease;
}

.nav-arrow svg path,
.nav-arrow svg rect {
  transition: fill 0.3s ease, stroke 0.3s ease;
}

/* ----------------------------------------
   Responsive
   ---------------------------------------- */

@media (max-width: 1024px) {
  .carousel {
    --carousel-cols: 1;
    --carousel-total: 1;
    margin-left: 0;
    margin-right: 0;
  }

  .carousel__slide {
    border-left: none;
    padding-left: 0;
  }

  .carousel-divider {
    margin-left: 0;
    margin-right: 0;
  }

  .carousel-crosses {
    display: none;
  }
  .nav-arrow svg {
    width: 15.25px;
    height: 15.25px;
  }
}