.carousel-wrapper {margin: 0 auto;}

/* ======================================
   GRID GUTTER + MARGINS
====================================== */

.carousel-wrapper-proj-info { /* Outer Wrapper for Project Page */
  width:100%;
  padding: 60px 0;
  background-color: #F2F2F2;
} 

.carousel-wrapper-proj-info .item1,
.carousel-wrapper-proj-info .item2,
.carousel-wrapper-proj-info .item3 {padding: 20px; border-radius: 6px;}


/* 0px - 767px */

@media (max-width : 767px){

.carousel-wrapper {width: calc(100% - 32px);}
.slide-container  {grid-gap: 16px !important;}
}


/* 768px - 1023px */

@media (min-width : 768px)
   and (max-width : 1023px)	{

.carousel-wrapper {width: calc(100% - 32px);}
.slide-container  {grid-gap: 24px !important;}
}



/* 1024px - 1279px */

@media (min-width : 1024px)
   and (max-width : 1279px)	{

.carousel-wrapper {width: calc(100% - 96px);}
.slide-container  {grid-gap: 32px !important;}
}

/* 1280px - 1599px */

@media (min-width : 1280px)
   and (max-width : 1599px)	{
.carousel-wrapper {width: calc(100% - 128px);}
.slide-container  {grid-gap: 32px !important;}
}


/* 1600px + */

@media (min-width: 1600px) {
.carousel-wrapper {width: calc(1600px - 128px)}
.slide-container {grid-gap: 32px !important;}

}



/* ======================================
   DESKTOP ≥1280px
   Grid (max 3 per row) - NO CAROUSEL
====================================== */


.slide-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Basic card styling */
.slide-container > div {
  overflow: hidden;
}

.slide-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* ======================================
   CAROUSEL MODE (<1280px)
====================================== */

@media (max-width: 1279px) {

  .slide-container.is-carousel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    /*gap: 16px;*/

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* REMOVE padding */
    padding: 0;

    scrollbar-width: none;
  }

  .slide-container.is-carousel::-webkit-scrollbar {
    display: none;
  }

  .slide-container.is-carousel > div {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
}

/* ======================================
   768–1279px → 2 per view
====================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .slide-container.is-carousel > div {
    width: calc((100% - 24px) / 2);
  }
  .carousel-wrapper-proj-info .slide-container.is-carousel > div { /* Additional 80px for item padding */
    width: calc((100% - 104px) / 2);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .slide-container.is-carousel > div {
    width: calc((100% - 32px) / 2);
  }
  .carousel-wrapper-proj-info .slide-container.is-carousel > div { /* Additional 80px for item padding */
    width: calc((100% - 112px) / 2);
  }
}

/* ======================================
   <768px → 1 per view
====================================== */

@media (max-width: 767px) {
  .slide-container.is-carousel > div {
    width: 100%;
  }
.carousel-wrapper-proj-info .slide-container.is-carousel > div { /* Additional 40px for item padding */
   width: calc(100% - 40px);
}

}

/* ======================================
   Pagination Dots
====================================== */

.carousel-dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}

.carousel-dot {
  width: 16px;
  height: 4px;
  border-radius: 4px;
  border: none;
  background: #ACACAC;
  cursor: pointer;

  transition:
    width 240ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 160ms ease,
    transform 160ms ease;

  transform-origin: center;
}

.carousel-dot.is-active {
  width:32px;
  background: #1A1A1A !important;
}

@media (max-width: 1279px) {
  .carousel-dots {
    display: flex;
  }
}


/* Prevent iOS link color from bleeding into pagination */
.carousel-pagination a,
.carousel-pagination a:link,
.carousel-pagination a:visited,
.carousel-pagination a:hover,
.carousel-pagination a:focus,
.carousel-pagination a:active {
  color: inherit !important;
  text-decoration: none;
  -webkit-text-fill-color: currentColor !important;
}

.carousel-pagination a.is-active,
.carousel-pagination .is-active a {
  background-color: #1a1a1a !important;
}

/* Smooth panning on Phones */
.slide-container {
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}


/* ======================================
   Reduced Motion
====================================== */

@media (prefers-reduced-motion: reduce) {
  .slide-container.is-carousel {
    scroll-behavior: auto;
  }
}