/**
 * Card Slider Styles
 * Custom styles for the card slider component
 * Enhanced for mobile responsiveness
 * Prefixed with .card-slider-section to avoid conflicts with hero slider
 */

/* Slider container */
.card-slider-section {
  position: relative;
  overflow: hidden;
  padding-bottom: 2rem;
  /* Extra padding for indicators on mobile */
  z-index: 1;
  /* Ensure proper stacking context */
  background-color: #f9f9f9;
  background: linear-gradient(to bottom, rgba(243, 241, 241, 0.8), rgba(255, 255, 255, 0.9));
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); */
}

/* Card slider container - separate from hero slider */
.card-slider-section .card-slider-container {
  position: relative;
  overflow: hidden;
}

/* Slider track - contains all slides */
.card-slider-section .slider-track {
  display: flex;
  transition: transform 0.5s ease;
  /* Faster transition on mobile */
  margin: 0 -4px;
  /* Negative margin to offset slide padding */
  padding: 8px 0;
  /* Add some vertical padding for shadow visibility */
  will-change: transform;
  /* Optimize performance for animations */
}

/* Individual slides - IMPORTANT: Override hero slider styles */
.card-slider-section .slide {
  flex: 0 0 85% !important;
  /* Show slightly more than one card on small mobile */
  max-width: 85% !important;
  padding: 0 4px !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  position: relative !important;
  /* Override hero slider absolute positioning */
  opacity: 1 !important;
  /* Override hero slider opacity */
  transform: none !important;
  /* Override hero slider transform */
  background: none !important;
  /* Override hero slider background */
  height: auto !important;
  /* Override hero slider height */
  display: block !important;
  /* Override hero slider display */
  top: auto !important;
  left: auto !important;
  width: auto !important;
}

/* Active slide state - Override hero slider active state */
.card-slider-section .slide:not(.active) {
  opacity: 0.7 !important;
  transform: scale(0.98) !important;
  /* Subtle scale effect for inactive slides */
}

.card-slider-section .slide.active {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Navigation arrows styling - Override hero slider nav */
.card-slider-section .slider-nav {
  opacity: 0.8 !important;
  transition: opacity 0.3s ease, background-color 0.3s ease !important;
  width: 36px !important;
  height: 36px !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  border: none !important;
  color: #374151 !important;
  font-size: 14px !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.card-slider-section:hover .slider-nav {
  opacity: 1 !important;
}

/* Indicator dots - Override hero slider indicators */
.card-slider-section .slider-indicators {
  margin-top: 1rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.5rem 0 !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  gap: 0 !important;
}

.card-slider-section .indicator {
  transition: background-color 0.3s ease, width 0.3s ease !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 4px !important;
  border-radius: 50% !important;
  background-color: rgba(156, 163, 175, 0.5) !important;
  cursor: pointer !important;
  padding: 0 !important;
  border: none !important;
  position: relative !important;
  transform: none !important;
}

/* Create a larger touch target without affecting visual size */
.card-slider-section .indicator::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
}

.card-slider-section .indicator.active {
  background-color: #2d3748 !important;
  width: 24px !important;
  border-radius: 4px !important;
  transform: none !important;
}

/* Category badge positioning */
.card-slider-section .category-badge {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* Responsive adjustments with smoother breakpoints */
@media (min-width: 480px) {
  .card-slider-section .slide {
    flex: 0 0 70% !important;
    max-width: 70% !important;
  }
}

@media (min-width: 640px) {
  .card-slider-section .slide {
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }

  .card-slider-section .slider-nav {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (min-width: 768px) {
  .card-slider-section .slide {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 8px !important;
  }

  .card-slider-section .slider-track {
    margin: 0 -8px !important;
  }
}

@media (min-width: 1024px) {
  .card-slider-section .slide {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}

/* Card hover effects - improved for touch */
.card-slider-section .slide .rounded-2xl {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

/* Different effects for touch vs non-touch devices */
@media (hover: hover) {

  /* Only on devices that support hover */
  .card-slider-section .slide:hover .rounded-2xl {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
}

/* Active slide highlight for mobile */
.card-slider-section .slide.active .rounded-2xl {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Touch indicator styling */
.card-slider-section .swiping {
  cursor: grabbing;
}

.card-slider-section .card-slider-container.swiping {
  cursor: grabbing;
}

/* Improved card content */
.card-slider-section .slide .absolute.bottom-0 {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1) 90%, transparent);
  padding-top: 3rem;
}

/* Card height adjustments for mobile */
@media (max-width: 640px) {
  .card-slider-section .slide .rounded-2xl {
    height: 16rem;
  }
}

/* Peek effect - shows a bit of the next card to indicate scrolling */
.card-slider-section .slider-track {
  padding-right: 15% !important;
}

@media (min-width: 768px) {
  .card-slider-section .slider-track {
    padding-right: 0 !important;
  }
}

/* Fade edges to indicate more content */
.card-slider-section::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 64px;
  /* Avoid overlapping indicators */
  width: 40px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
  pointer-events: none;
  z-index: 2;
}

.card-slider-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 64px;
  /* Avoid overlapping indicators */
  width: 40px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
  pointer-events: none;
  z-index: 2;
}

/* Touch-friendly design for mobile */
@media (max-width: 640px) {
  .card-slider-section .slider-nav {
    top: 45% !important;
    /* Position closer to center for easier thumb reach */
  }

  /* Always show navigation on mobile */
  .card-slider-section .slider-nav {
    opacity: 1 !important;
  }
}