/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
 .wp-block-orphic-ui-testimonials-container {
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  will-change: transform;
  
  &.compact-design {
    margin-top: 1rem;
    margin-bottom: 1rem;
    
    .testimonials-container {
      max-height: 80vh; /* Ensure it doesn't take full height on mobile */
    }
    
    @media (max-width: 768px) {
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      
      .testimonials-container {
        max-height: 60vh;
      }
    }
  }
  
  &.has-shadow {
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 1;
      pointer-events: none;
    }
    
    &::before {
      left: 0;
      background: linear-gradient(to right, 
        var(--orphic-testimonials-shadow-color, var(--wp--preset--color--background, #fff)) 0%,
        rgba(var(--orphic-testimonials-shadow-color-rgb, var(--wp--preset--color--background-rgb, 255, 255, 255)), 0) 100%
      );
    }
    
    &::after {
      right: 0;
      background: linear-gradient(to left, 
        var(--orphic-testimonials-shadow-color, var(--wp--preset--color--background, #fff)) 0%,
        rgba(var(--orphic-testimonials-shadow-color-rgb, var(--wp--preset--color--background-rgb, 255, 255, 255)), 0) 100%
      );
    }
  }
  
  &.alignfull {
    overflow: visible;
    
    &.has-shadow {
      overflow: hidden;
    }
  }
  
  .testimonials-container {
    display: flex;
    gap: 12px;
    will-change: transform;
    padding: 10px 0;
    
    .testimonial-unit-slide {
      flex: 0 0 auto;
      width: calc(33.333% - 8px);
      min-width: 260px;
      
      @media (max-width: 1024px) {
        width: calc(50% - 6px);
      }
      
      @media (max-width: 768px) {
        width: calc(100% - 12px);
        min-width: 200px;
      }
      
      .testimonial-unit-content {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
        border-radius: 6px;
        border: 1px solid;
        background-color: var(--orphic-wp-block-plugin-color-background);
        color: var(--orphic-wp-block-plugin-color-text);
        border-color: var(--orphic-wp-block-plugin-color-border);
        height: 100%;
        box-sizing: border-box;
        
        &.customColor {
          background-color: var(--orphic-ui-testimonial-background-color);
          color: var(--orphic-ui-testimonial-text-color);
          border-color: var(--orphic-ui-testimonial-border-color);
        }
        
        .testimonial-image {
          flex: 0 0 60px;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          overflow: hidden;
          
          @media (max-width: 768px) {
            flex: 0 0 50px;
            width: 50px;
            height: 50px;
          }
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }
        }
        
        .testimonial-text {
          flex: 1;
          min-width: 0;
          
          p {
            margin: 0;
            line-height: 1.4;
          }
          
          @media (max-width: 768px) {
            font-size: 0.9em;
          }
        }
      }
    }
  }
}