/* Testimonial carousel — Figma node 284:3000.
   Loaded on the frontend when the shortcode/block renders, and in the editor
   as the block's preview stylesheet. */

.testimonial-carousel-block {
  padding: 64px 24px;
  border-radius: 8px;
  background-color: #F7F7F7;
  overflow: hidden;
}

.testimonial-carousel-block .testimonial-carousel-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 694px;
  margin: 0 auto;
}

.testimonial-carousel-block .testimonial-carousel-track {
  width: 100%;
}

.testimonial-carousel-block .testimonial-carousel-slide {
  display: none;
}

.testimonial-carousel-block .testimonial-carousel-slide.is-active {
  display: block;
  animation: htc-fade-in 0.35s ease;
}

@keyframes htc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* White card — Figma 284:3002 (custom-shadows/large) */
.testimonial-carousel-block .testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 28px 0;
  border-radius: 20px;
  border: 1px solid #EBEBEB;
  background-color: #FFF;
  box-shadow:
    0 0 0 1px rgba(51, 51, 51, 0.04),
    0 1px 1px 0.5px rgba(51, 51, 51, 0.04),
    0 3px 3px -1.5px rgba(51, 51, 51, 0.02),
    0 6px 6px -3px rgba(51, 51, 51, 0.04),
    0 12px 12px -6px rgba(51, 51, 51, 0.04),
    0 24px 24px -12px rgba(51, 51, 51, 0.04),
    0 48px 48px -24px rgba(51, 51, 51, 0.04),
    0 96px 96px -32px rgba(51, 51, 51, 0.06);
}

.testimonial-carousel-block .testimonial-card-logo {
  height: 32px;
}

.testimonial-carousel-block .testimonial-card-logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* Quote — Figma 284:3005: Inter Medium 18/24, -0.27px, #171717 */
.testimonial-carousel-block .testimonial-card-quote {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.27px;
  color: #171717;
  font-feature-settings: 'ss11' on, 'liga' off, 'calt' off;
}

/* Footer row — Figma 284:3006 */
.testimonial-carousel-block .testimonial-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.testimonial-carousel-block .testimonial-card-author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.testimonial-carousel-block .testimonial-card-avatar {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

.testimonial-carousel-block .testimonial-card-who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.testimonial-carousel-block .testimonial-card-name {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.176px;
  color: #171717;
  font-feature-settings: 'ss11' on, 'liga' off, 'calt' off;
}

.testimonial-carousel-block .testimonial-card-designation {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.176px;
  color: #5C5C5C;
  font-feature-settings: 'ss11' on, 'liga' off, 'calt' off;
}

/* Case-study link — Figma 284:3013: Inter Medium 14/20, #5c5c5c.
   The !importants shield it from the blog theme's content-link rule
   (.single-blog-v2 a:not(...): weight 600, underline, dark color). */
.testimonial-carousel-block .testimonial-card-case-study {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500 !important;
  line-height: 20px;
  letter-spacing: -0.084px;
  color: #5C5C5C !important;
  text-decoration: none !important;
  white-space: nowrap;
  font-feature-settings: 'ss11' on, 'liga' off, 'calt' off;
}

.testimonial-carousel-block .testimonial-card-case-study:hover,
.testimonial-carousel-block .testimonial-card-case-study:focus {
  color: #171717 !important;
  text-decoration: none !important;
}

.testimonial-carousel-block .testimonial-card-case-study svg {
  flex: 0 0 auto;
}

/* Stepper dots — Figma 284:3014 */
.testimonial-carousel-block .testimonial-carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.testimonial-carousel-block .testimonial-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 96px;
  background-color: #D1D1D1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.testimonial-carousel-block .testimonial-carousel-dot.is-active {
  background-color: #262626;
}

@media (max-width: 767.98px) {
  .testimonial-carousel-block {
    padding: 32px 16px;
  }

  .testimonial-carousel-block .testimonial-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Keep blog content rhythm from adding extra space inside the card */
.single-blog-v2 .testimonial-carousel-block .testimonial-card > *,
.single-blog-v2 .testimonial-carousel-block .testimonial-card-quote {
  margin-top: 0;
  margin-bottom: 0;
}