/* Reusable Carousel Component */
[data-carousel],
.projects-carousel-wrapper {
  position: relative;
  width: 100%;
  padding: 0;
}

[data-carousel].is-center-content,
.projects-carousel-wrapper.center-content {
  padding: 0;
}

[data-carousel-track],
.projects-carousel {
  --carousel-edge-gap: 16px;
  display: flex;
  align-items: stretch;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--carousel-edge-gap);
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px var(--carousel-edge-gap);
  scrollbar-width: none;
  cursor: grab;
}

[data-carousel].is-center-content [data-carousel-track],
.projects-carousel-wrapper.center-content .projects-carousel {
  justify-content: center;
}

.featured-projects-block {
  width: 100dvw;
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);
}

.featured-projects-block .projects-carousel {
  --carousel-edge-gap: clamp(16px, 4vw, 60px);
  gap: clamp(24px, 2.4vw, 36px);
  padding-block: 24px;
}

[data-carousel-track]::-webkit-scrollbar,
.projects-carousel::-webkit-scrollbar {
  display: none;
}

[data-carousel-track].active,
.projects-carousel.active {
  cursor: grabbing;
  scroll-snap-type: none;
}

[data-carousel-track].is-animating,
.projects-carousel.is-animating {
  scroll-snap-type: none;
}

[data-carousel-prev],
[data-carousel-next],
.carousel-btn {
  display: none !important;
}

[data-carousel-track] .project-card-fluid,
.projects-carousel .project-card-fluid,
.project-card-fluid--carousel {
  flex: 0 0 29%;
  width: 29%;
  min-width: 350px;
  scroll-snap-align: start;
  user-select: none;
  border-radius: 24px;
  align-self: stretch;
  height: auto;
}

@media (max-width: 1200px) {
  [data-carousel-track] .project-card-fluid,
  .projects-carousel .project-card-fluid,
  .project-card-fluid--carousel {
    flex: 0 0 45%;
    width: 45%;
  }
}

@media (max-width: 768px) {
  [data-carousel],
  .projects-carousel-wrapper {
    padding: 0;
  }

  .featured-projects-block .projects-carousel {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    overflow: visible;
    padding: 0 clamp(16px, 4vw, 24px);
    scroll-snap-type: none;
    cursor: default;
  }

  [data-carousel-track] .project-card-fluid,
  .projects-carousel .project-card-fluid,
  .project-card-fluid--carousel {
    flex: 0 0 85%;
    width: 85%;
    min-width: 280px;
  }

  .featured-projects-block .project-card-fluid,
  .featured-projects-block .project-card-fluid--carousel {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
}