/* ==========================================================================
   Testimonial Slider Custom Element
   ========================================================================== */

.ts-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 60px auto;
  border-radius: 12px;
  overflow: hidden;
  background: #eef5f7;
  font-family: inherit;
}

/* --- Base Slider Resets (Bulletproof WPBakery Editor Fix) --- */
.ts-slider-container {
  display: block;
  width: 100%;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 1. THE ULTIMATE EDITOR FIX: If in the visual builder, hide all slides unconditionally */
.ts-editor-mode .ts-slide {
  display: none !important;
}

/* 2. Force ONLY the first slide to show in the visual builder */
.ts-editor-mode .ts-slide:first-child {
  display: flex !important;
}

/* 3. Standard fallback for the live site before the Javascript loads */
.ts-slider-container:not(.slick-initialized) .ts-slide {
  display: none;
}

.ts-slider-container:not(.slick-initialized) .ts-slide:first-child {
  display: flex;
}

/* --- WPBakery & Salient Visual Builder Fixes --- */
/* Overrides Salient's scroll-animation engine while in edit mode */
body.vc_editor .ts-wrapper.has-animation,
body.compose-mode .ts-wrapper.has-animation,
.vc_inline-shortcode-wrapper .ts-wrapper.has-animation {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* --- Core Slide Layout --- */
.ts-slide {
  display: flex !important;
  flex-direction: column;
  outline: none;
  height: 100%; /* Forces the slide to take up the full height of the track */
}

.ts-flex {
  display: flex;
  align-items: stretch;
  flex: 1;
  width: 100%;
  height: 100%; /* Passes the height down to the inner wrapper */
}

/* --- Image Side --- */
.ts-image-side {
  width: 50%;
  min-height: 480px;
  background-color: #dfdfdf; /* placeholder color if no image */
  display: flex;
  margin-bottom: 0 !important;
}

.ts-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin-bottom: 0 !important;
}

.ts-slider-container .slick-slide {
  margin-bottom: 0 !important;
}

/* --- Content Side --- */
.ts-content-side {
  width: 50%;
  padding: 60px 80px 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers the text vertically */
  flex: 1; /* Forces the content side to grow and fill the empty space */
}

.ts-accent-line {
  width: 40px;
  height: 3px;
  background: #ee512a;
  margin-bottom: 25px;
}

/* --- Typography & Spacing --- */
.ts-quote {
  font-size: var(--ts-quote-size) !important;
  color: var(--ts-quote-color) !important;
  line-height: 1.6;
  font-style: normal;
}

.ts-name {
  margin: 0 !important;
  color: #0f2e40 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.ts-title {
  margin: 0 !important;
  color: #666 !important;
  font-size: 15px !important;
  padding: 0 !important;
}

.ts-company {
  margin: 0 !important;
  color: var(--ts-comp-color) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  padding-bottom: 20px !important;
}

/* --- Navigation --- */
.ts-nav {
  position: absolute;
  bottom: 40px;
  left: calc(50% + 60px);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.ts-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #0f2e40;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 0;
}

.ts-nav button svg {
  width: 28px;
  height: 28px;
  fill: #0f2e40;
  transition: fill 0.3s ease;
}

.ts-nav button:hover {
  border-color: #ee512a;
}

.ts-nav button:hover svg {
  fill: #ee512a;
}

/* --- OPTIONAL: NO IMAGE MODE --- */
.ts-no-image .ts-content-side {
  width: 100%;
  align-items: center;
  text-align: center; 
  padding: 80px 120px 120px 120px; 
}

/* THE FIX: Re-center the navigation when the whole slider is text-only */
.ts-text-only-mode .ts-nav {
  left: 50%;
  transform: translateX(-50%);
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 900px) {
  .ts-wrapper {
    margin: 40px auto;
  }

  .ts-flex {
    flex-direction: column;
  }

  /* Hide the image entirely on mobile */
  .ts-image-side {
    display: none !important;
  }

  /* Keep text left-aligned for readability */
  .ts-content-side,
  .ts-no-image .ts-content-side {
    width: 100% !important;
    padding: 40px 30px 100px 30px !important; 
    align-items: flex-start !important; /* Forces left alignment */
    text-align: left !important; /* Forces left alignment */
  }

  /* Keep the orange accent line on the left */
  .ts-accent-line {
    margin: 0 0 25px 0 !important;
  }

  /* Scale down typography for small phone screens */
  .ts-quote {
    font-size: calc(var(--ts-quote-size) * 0.85) !important;
  }
  .ts-name { font-size: 16px !important; }
  .ts-title { font-size: 14px !important; }
  .ts-company { font-size: 12px !important; }

  /* Put navigation buttons back to the bottom left to match the text flow */
  .ts-nav,
  .ts-text-only-mode .ts-nav {
    left: 30px !important;
    bottom: 30px !important;
    transform: none !important;
  }
}