/* ==========================================================================
   OUR REFERENCES SHOWCASE - DYNAMIC SCALE COVERFLOW CAROUSEL
   Exact reproduction of skiper54 animation:
   - Self-scrolling smooth transition animation
   - Active center card scaled up & elevated with rounded corners
   - Generous, clean spacing between all cards (no overlapping)
   - Dynamic document captions & animated pagination pill indicator
   - Touch swipe & hover-pause support
   - Fully mobile responsive
   ========================================================================== */

.references-showcase-section {
  position: relative;
  width: 100%;
  padding: 60px 0 70px;
  background-color: #f8fafc;
  overflow: hidden;
  box-sizing: border-box;
}

.references-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 0 20px;
}

.references-showcase-section .section-title {
  font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 800;
  color: #222e40;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
  position: relative;
  display: inline-block;
}

/* Subtle accent underline under section title */
.references-showcase-section .section-title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: #222e40;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Carousel Stage & Outer Wrapper
   -------------------------------------------------------------------------- */
.ref-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 25px auto 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.ref-carousel-stage {
  position: relative;
  width: 100%;
  height: 380px;
  margin: 0 auto;
  overflow: visible;
  cursor: grab;
  perspective: 1200px;
}

.ref-carousel-stage:active {
  cursor: grabbing;
}

/* --------------------------------------------------------------------------
   Individual Slide Card - Sharp Photograph Edges & Decreased Size
   -------------------------------------------------------------------------- */
.ref-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 310px;
  will-change: transform, opacity, filter;
  cursor: pointer;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ref-card {
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 28px -10px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ref-slide.is-active .ref-card {
  box-shadow: 0 22px 45px -10px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(39, 50, 70, 0.16);
}

.ref-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 0 !important;
  pointer-events: none;
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints (Phone & Tablet)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ref-carousel-stage {
    height: 340px;
  }

  .ref-slide {
    width: 195px;
    height: 275px;
  }

  .ref-card,
  .ref-card img {
    border-radius: 0 !important;
  }
}

@media (max-width: 768px) {
  .references-showcase-section {
    padding: 40px 0 45px;
  }

  .ref-carousel-stage {
    height: 300px;
  }

  .ref-slide {
    width: 170px;
    height: 240px;
  }

  .ref-card,
  .ref-card img {
    border-radius: 0 !important;
  }
}

@media (max-width: 480px) {
  .references-showcase-section {
    padding: 30px 0 35px;
  }

  .references-header {
    margin-bottom: 15px;
  }

  .ref-carousel-wrapper {
    margin-top: 15px;
  }

  .ref-carousel-stage {
    height: 260px;
  }

  .ref-slide {
    width: 145px;
    height: 205px;
  }

  .ref-card,
  .ref-card img {
    border-radius: 0 !important;
  }
}