/**
 * Bootstrap Grid Product Showcase with Infinite Loop
 * Responsive grid with alternating vertical placement and seamless animation
 */

/* =============================================================================
   Main Showcase Container
   ============================================================================= */

.responsive-product-showcase {
  min-height: var(--showcase-height, 320px);
  padding: 2rem 0;
  position: relative;
}

.responsive-showcase-container {
  width: 100%;
  height: var(--showcase-height, 320px);
  position: relative;
  overflow: hidden;
}

/* =============================================================================
   Infinite Loop Grid Layout
   ============================================================================= */

/* =============================================================================
   JavaScript-Based Infinite Loop Grid Layout
   ============================================================================= */

.showcase-grid-js {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
  /* Ensure no transitions interfere with animation */
  transition: none;
  /* Optimize for smooth animation with hardware acceleration */
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  /* Force hardware acceleration for smoother movement */
}

/* CSS-based infinite scroll animation with responsive timing */
.showcase-grid-js.infinite-scroll-active {
  animation: scrollLeftSeamless var(--animation-duration, 25s) linear infinite;
}

/* Seamless infinite scroll - moves exactly half the container width */
@keyframes scrollLeftSeamless {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Responsive animation speeds - faster on smaller screens */
/* xs: 0-575px - Fastest (4 products, shortest distance) */
@media (width <= 575.98px) {
  .showcase-grid-js.infinite-scroll-active {
    --animation-duration: 15s;
  }
}

/* sm: 576-767px - Fast (4 products) */
@media (width >= 576px) and (width <= 767.98px) {
  .showcase-grid-js.infinite-scroll-active {
    --animation-duration: 18s;
  }
}

/* md: 768-991px - Medium (6 products) */
@media (width >= 768px) and (width <= 991.98px) {
  .showcase-grid-js.infinite-scroll-active {
    --animation-duration: 22s;
  }
}

/* lg: 992-1199px - Medium-Slow (6 products) */
@media (width >= 992px) and (width <= 1199.98px) {
  .showcase-grid-js.infinite-scroll-active {
    --animation-duration: 25s;
  }
}

/* xl: 1200-1399px - Slow (8 products, longer distance) */
@media (width >= 1200px) and (width <= 1399.98px) {
  .showcase-grid-js.infinite-scroll-active {
    --animation-duration: 28s;
  }
}

/* xxl: 1400px+ - Slowest (8 products, longest distance) */
@media (width >= 1400px) {
  .showcase-grid-js.infinite-scroll-active {
    --animation-duration: 30s;
  }
}

/* Pause animation on hover */
.showcase-grid-js:hover {
  animation-play-state: paused;
}

.showcase-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 110px;
  max-width: 120px;
  position: relative;
  /* Remove transition to prevent interference with smooth scroll */
}

/* Alternating vertical placement with CSS classes */
.showcase-col.showcase-item-top {
  transform: translateY(-30px);
}

.showcase-col.showcase-item-bottom {
  transform: translateY(30px);
}

/* =============================================================================
   Product Items - Clean Design Like Mockup
   ============================================================================= */

.showcase-product {
  width: 100%;
  max-width: 110px;
  position: relative;
  /* Remove all decorative styling for clean look */
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: none;
  border: none;
}

.showcase-product:hover {
  transform: scale(1.05);
  /* Remove shadows and background changes */
  box-shadow: none;
  background: transparent;
}

.showcase-product-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-product:hover .showcase-product-image {
  /* Subtle scale on hover */
  transform: scale(1.02);
}

/* =============================================================================
   Loading & Error States
   ============================================================================= */

.responsive-showcase-container.loading,
.responsive-showcase-container.error,
.responsive-showcase-container.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.spinner-border {
  width: 2rem;
  height: 2rem;
}

/* =============================================================================
   Responsive Breakpoint Adjustments - Optimized for Full Width Display
   ============================================================================= */

/* Extra Small devices (portrait phones, less than 576px) - 4 products */
@media (width <= 575.98px) {
  .responsive-product-showcase {
    padding: 1rem 0;

    --showcase-height: 220px;
  }

  .showcase-grid-js {
    gap: 0;
  }

  .showcase-col {
    min-width: 100px;
    max-width: 110px;
  }

  .showcase-product {
    max-width: 110px;
  }

  .showcase-col.showcase-item-top {
    transform: translateY(-20px);
  }

  .showcase-col.showcase-item-bottom {
    transform: translateY(20px);
  }
}

/* Small devices (landscape phones, 576px and up) - 4 products */
@media (width >= 576px) and (width <= 767.98px) {
  .responsive-product-showcase {
    --showcase-height: 260px;
  }

  .showcase-grid-js {
    gap: 0;
  }

  .showcase-col {
    min-width: 130px;
    max-width: 140px;
  }

  .showcase-product {
    max-width: 140px;
  }

  .showcase-col.showcase-item-top {
    transform: translateY(-25px);
  }

  .showcase-col.showcase-item-bottom {
    transform: translateY(25px);
  }
}

/* Medium devices (tablets, 768px and up) - 6 products */
@media (width >= 768px) and (width <= 991.98px) {
  .responsive-product-showcase {
    --showcase-height: 320px;
  }

  .showcase-grid-js {
    gap: 0;
  }

  .showcase-col {
    min-width: 160px;
    max-width: 170px;
  }

  .showcase-product {
    max-width: 170px;
  }

  .showcase-col.showcase-item-top {
    transform: translateY(-35px);
  }

  .showcase-col.showcase-item-bottom {
    transform: translateY(35px);
  }
}

/* Large devices (desktops, 992px and up) - 6 products */
@media (width >= 992px) and (width <= 1199.98px) {
  .responsive-product-showcase {
    --showcase-height: 360px;
  }

  .showcase-grid-js {
    gap: 0;
  }

  .showcase-col {
    min-width: 190px;
    max-width: 200px;
  }

  .showcase-product {
    max-width: 200px;
  }

  .showcase-col.showcase-item-top {
    transform: translateY(-40px);
  }

  .showcase-col.showcase-item-bottom {
    transform: translateY(40px);
  }
}

/* Extra large devices (large desktops, 1200px and up) - 8 products */
@media (width >= 1200px) and (width <= 1399.98px) {
  .responsive-product-showcase {
    --showcase-height: 400px;
  }

  .showcase-grid-js {
    gap: 0;
  }

  .showcase-col {
    min-width: 180px;
    max-width: 190px;
  }

  .showcase-product {
    max-width: 190px;
  }

  .showcase-col.showcase-item-top {
    transform: translateY(-45px);
  }

  .showcase-col.showcase-item-bottom {
    transform: translateY(45px);
  }
}

/* Extra extra large devices (larger desktops, 1400px and up) - 8 products max */
@media (width >= 1400px) {
  .responsive-product-showcase {
    --showcase-height: 440px;
  }

  .showcase-grid-js {
    gap: 0;
  }

  .showcase-col {
    min-width: 210px;
    max-width: 220px;
  }

  .showcase-product {
    max-width: 220px;
  }

  .showcase-col.showcase-item-top {
    transform: translateY(-50px);
  }

  .showcase-col.showcase-item-bottom {
    transform: translateY(50px);
  }
}

/* =============================================================================
   Accessibility & Performance
   ============================================================================= */

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .showcase-grid-js {
    /* Disable animations for users who prefer reduced motion */
  }

  .showcase-product,
  .showcase-product-image {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .showcase-product {
    border: 2px solid #000;
    background: #fff;
  }
}