/**
 * ============================================================================
 * SLIDERS - Logo Scroller & Reviews Carousel
 * ============================================================================
 * 
 * Purpose: Provides responsive horizontal slider components with smooth
 * scrolling, snap points, and adaptive layouts for different screen sizes.
 * 
 * Components:
 * - Logo Scroller: Centered logo display that converts to horizontal scroll
 * - Reviews Slider: Fixed-width card slider with equal heights and snap
 * 
 * @package     4pmix-WordPress
 * @subpackage  Question-Answer-Block/Assets
 * @version     1.0.0
 * ============================================================================
 */


/* ============================================================================
   LOGO SCROLLER
   ============================================================================
   Desktop (≥1200px): Centered flex row with fluid spacing
   Below 1200px: Horizontal scrolling with snap points and hidden scrollbar
   
   Features:
   - Fluid gap spacing via clamp()
   - Hover scale effect on logos
   - Smooth iOS scrolling
   - Hidden scrollbar (custom + webkit)
   ============================================================================ */

/* Base layout (1920px and above) */
.logos-scroller {
  display: flex;
  flex-wrap: nowrap;
  /* Always single row */
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 1.5vw, 40px);
  /* Fluid spacing between logos */
  overflow: hidden;
  /* No scrollbars on desktop */
}

.logo-card {
  flex: 0 0 auto;
  /* Prevent shrinking, maintain width */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(8px, 0.8vw, 16px);
  border-radius: 10px;
}

.logo-img,
.logo-card img {
  max-width: 120px;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

/* Hover effect: slight scale up */
.logo-card:hover .logo-img {
  transform: scale(1.05);
}

/* === Responsive Logo Sizing === */

@media (max-width: 1600px) {
  .logo-img {
    max-width: 110px;
  }
}

@media (max-width: 1440px) {
  .logo-img {
    max-width: 100px;
  }
}

@media (max-width: 1280px) {
  .logo-img {
    max-width: 90px;
  }
}

/* === Horizontal Scroll Mode (1200px and below) === */
@media (max-width: 1200px) {
  .logos-scroller {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Enable horizontal scrolling */
    overflow-y: hidden;
    justify-content: flex-start;
    align-items: center;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    scroll-snap-type: x mandatory;
    padding: 10px;
    scrollbar-width: none;
    /* Hide scrollbar (Firefox) */
    gap: 15px;
  }

  .logos-scroller::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar (Chrome/Safari) */
  }

  .logo-card {
    scroll-snap-align: center;
    flex: 0 0 auto;
    margin-right: 120px;
    /* Backup spacing for older browsers */
  }

  /* Remove margin on last item to avoid trailing gap */
  .logo-card:last-child {
    margin-right: 0;
  }
}

/* === Tablets (900px) === */
@media (max-width: 900px) {
  .logo-img {
    max-width: 80px;
  }
}

/* === Mobile (≤992px) === */
@media (max-width: 992px) {
  .logos-scroller {
    gap: 75px;
    /* Wider gap for better spacing */
    padding: 6px 10px;
  }

  .logo-card {
    min-width: 70px;
    padding: 5px;
    margin-right: 0;
    /* Rely on gap for spacing */
  }

  .logo-img {
    max-width: 70px;
  }
}


/* ============================================================================
   REVIEWS SLIDER
   ============================================================================
   Always horizontal scrolling slider with fixed-width cards and equal heights.
   Desktop (≥1100px): Right-aligned via auto margin on first item
   Below 1100px: Standard left-aligned scroll
   
   Features:
   - Fixed card width (324px desktop, responsive mobile)
   - Equal height cards via flexbox stretch
   - Scroll snap points for smooth navigation
   - Hidden scrollbar
   - Optional line clamping for uniform text length
   ============================================================================ */

.slder-block {
  display: flex;
  flex-wrap: nowrap;
  /* Single row only */
  overflow-x: auto;
  /* Horizontal scroll always */
  overflow-y: hidden;
  align-items: stretch;
  /* Equal height children */
  gap: 20px;
  /* Fixed space between cards */
  padding: 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
  justify-content: flex-start;
}

.slder-block::-webkit-scrollbar {
  display: none;
}

/* Normalize Elementor heading/text margins for consistent card heights */
.slder-block .slider-item .elementor-heading-title {
  margin: 0 0 8px !important;
  line-height: 1.2;
}

.slder-block .slider-item .elementor-text-editor {
  margin: 0 !important;
}

/* Fixed-width review cards with equal heights */
.slider-item {
  /* Lock width - prevents squeeze/grow during scroll */
  flex: 0 0 324px !important;
  width: 324px !important;
  min-width: 324px !important;
  max-width: 324px !important;

  /* Equal height enforcement via parent's align-items: stretch */
  align-self: stretch;

  /* Internal flex layout for content distribution */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;

  /* Visual styling */
  background: #fff;
  border-radius: 12px;
  padding: 16px;

  /* Snap alignment */
  scroll-snap-align: center;
}

/* Clear legacy margins, use gap for spacing */
.slder-block>.slider-item {
  margin: 0 !important;
}

/* Optional: Limit text length for uniform card heights */
@supports (-webkit-line-clamp: 1) {
  .slder-block .slider-item .elementor-text-editor {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    /* Show up to 8 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* === Tablet (899px - 600px) === */
@media (max-width: 899px) and (min-width: 600px) {
  .slider-item {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }
}

/* === Mobile (≤599px) === */
@media (max-width: 599px) {
  .slder-block {
    gap: 16px;
    padding: 8px 6px;
  }

  .slider-item {
    flex: 0 0 85% !important;
    width: 85% !important;
    min-width: 85% !important;
    max-width: 85% !important;
  }
}

@media (max-width: 375px) {
  .slider-item {
    flex: 0 0 90% !important;
    width: 90% !important;
    min-width: 90% !important;
    max-width: 90% !important;
  }
}

/* === Desktop Right Alignment (≥1100px) === */
@media (min-width: 1100px) {
  .slder-block {
    justify-content: flex-start;
    /* Keep normal scroll physics */
  }

  /* Push entire row to the right by giving first item auto left margin */
  .slder-block>.slider-item:first-child {
    margin-left: auto !important;
  }

  .slder-block .slider-item {
    scroll-snap-align: center;
  }
}

/* === Below 1100px: Standard left alignment === */
@media (max-width: 1099.98px) {
  .slder-block {
    justify-content: flex-start;
  }

  .slder-block>.slider-item:first-child {
    margin-left: 0 !important;
    /* Remove right-anchoring */
  }

  .slder-block .slider-item {
    scroll-snap-align: start;
  }
}