/**
 * Clarke Componentes — Carrossel de Depoimentos
 * v2.1.0 — Transições suaves, tipografia refinada,
 *           layout moderno e clean.
 */

/* ── Base ────────────────────────────────────────────── */
.clarke-testimonials-carousel {
  --ctc-green: var(--uzeda-color-secondary, #00BF6A);
  --ctc-green-hover: #34d399;
  --ctc-green-dark: #065f46;
  --ctc-radius: 1rem;
  --ctc-shadow: 0 8px 30px rgba(0,0,0,.12);
  --ctc-shadow-sm: 0 2px 12px rgba(0,0,0,.08);
  --ctc-ease: cubic-bezier(.4, 0, .2, 1);

  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  font-family: inherit;
  box-sizing: border-box;
}

.clarke-testimonials-carousel *,
.clarke-testimonials-carousel *::before,
.clarke-testimonials-carousel *::after {
  box-sizing: inherit;
}

/* ── Carousel container ─────────────────────────────── */
.clarke-testimonials-carousel .clarke-carousel-container {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 0 1rem;
}

.clarke-testimonials-carousel .clarke-carousel-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 380px;
  width: 100%;
}

/* Crossfade: old slides fade out */
.clarke-testimonials-carousel .clarke-carousel-slide.ctc-exit {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ctc-ease);
}

/* Crossfade: new slides start invisible, then fade in */
.clarke-testimonials-carousel .clarke-carousel-slide.ctc-enter {
  opacity: 0;
}

.clarke-testimonials-carousel .clarke-carousel-slide.ctc-enter.slide-left,
.clarke-testimonials-carousel .clarke-carousel-slide.ctc-enter.slide-right {
  opacity: 0;
}

/* ── Slides (figure) ─────────────────────────────────── */
.clarke-testimonials-carousel .clarke-carousel-slide {
  position: absolute;
  border-radius: var(--ctc-radius);
  overflow: hidden;
  box-shadow: var(--ctc-shadow);
  transition: all .45s var(--ctc-ease);
  margin: 0;
  padding: 0;
  will-change: transform, opacity;
}

/* Left slide */
.clarke-testimonials-carousel .clarke-carousel-slide.slide-left {
  left: 0;
  width: 25%;
  height: 60%;
  top: 20%;
  z-index: 0;
  opacity: .5;
  transform: scale(.92);
  filter: brightness(.85);
}

/* Center slide */
.clarke-testimonials-carousel .clarke-carousel-slide.slide-center {
  left: 50%;
  width: 46%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.05);
  z-index: 10;
}

/* Right slide */
.clarke-testimonials-carousel .clarke-carousel-slide.slide-right {
  right: 0;
  width: 25%;
  height: 60%;
  top: 20%;
  z-index: 0;
  opacity: .5;
  transform: scale(.92);
  filter: brightness(.85);
}

/* Slide inner */
.clarke-testimonials-carousel .clarke-carousel-slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.clarke-testimonials-carousel .clarke-carousel-slide.slide-center .clarke-carousel-slide-inner {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
}

.clarke-testimonials-carousel .clarke-carousel-slide.slide-left .clarke-carousel-slide-inner,
.clarke-testimonials-carousel .clarke-carousel-slide.slide-right .clarke-carousel-slide-inner {
  height: 100%;
  padding-bottom: 0;
}

/* Slide images */
.clarke-testimonials-carousel .clarke-carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clarke-testimonials-carousel .clarke-carousel-slide.slide-left img,
.clarke-testimonials-carousel .clarke-carousel-slide.slide-right img {
  object-position: center;
}

/* ── Play button ─────────────────────────────────────── */
.clarke-testimonials-carousel .clarke-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: var(--ctc-green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(14,166,102,.35);
  transition: transform .25s var(--ctc-ease), background-color .25s var(--ctc-ease), box-shadow .25s var(--ctc-ease);
  z-index: 20;
  padding: 0;
}

.clarke-testimonials-carousel .clarke-play-button:hover,
.clarke-testimonials-carousel .clarke-play-button:focus-visible {
  background: var(--ctc-green-hover);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 6px 28px rgba(14,166,102,.45);
}

.clarke-testimonials-carousel .clarke-play-button svg {
  width: 28px;
  height: 28px;
  color: #fff;
  fill: #fff;
  margin-left: 2px; /* optical centering for ▶ */
}

/* ── Nav buttons ─────────────────────────────────────── */
.clarke-testimonials-carousel .clarke-carousel-prev,
.clarke-testimonials-carousel .clarke-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(1);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: background .25s var(--ctc-ease), transform .25s var(--ctc-ease), border-color .25s var(--ctc-ease);
  padding: 0;
}

.clarke-testimonials-carousel .clarke-carousel-prev { left: 16px; }
.clarke-testimonials-carousel .clarke-carousel-next { right: 16px; }

.clarke-testimonials-carousel .clarke-carousel-prev:hover,
.clarke-testimonials-carousel .clarke-carousel-prev:focus-visible,
.clarke-testimonials-carousel .clarke-carousel-next:hover,
.clarke-testimonials-carousel .clarke-carousel-next:focus-visible {
  background: rgba(255,255,255,.92);
  transform: translateY(-50%) scale(1.08);
  border-color: rgba(255,255,255,.6);
}

.clarke-testimonials-carousel .clarke-carousel-prev svg,
.clarke-testimonials-carousel .clarke-carousel-next svg {
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,.9);
  transition: color .25s var(--ctc-ease);
}

.clarke-testimonials-carousel .clarke-carousel-prev:hover svg,
.clarke-testimonials-carousel .clarke-carousel-prev:focus-visible svg,
.clarke-testimonials-carousel .clarke-carousel-next:hover svg,
.clarke-testimonials-carousel .clarke-carousel-next:focus-visible svg {
  color: var(--ctc-green-dark);
}

/* ── Testimonial info ────────────────────────────────── */
.clarke-testimonials-carousel .clarke-testimonial-info {
  max-width: 780px;
  margin: 1.25rem auto 0;
  text-align: center;
  min-height: 220px;
  overflow: hidden;
}

/* Crossfade overlay for text transitions */
.clarke-testimonials-carousel .ctc-info-enter {
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0;
  transition: opacity .3s var(--ctc-ease);
}

.clarke-testimonials-carousel .ctc-info-enter.ctc-info-visible {
  opacity: 1;
}

.clarke-testimonials-carousel .clarke-testimonial-title {
  font-size: 1.25rem;
  line-height: 1.65;
  margin-bottom: 1rem;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: -.01em;
}

.clarke-testimonials-carousel .clarke-testimonial-title .highlight {
  background: var(--ctc-green);
  color: #fff;
  padding: .15rem .65rem .2rem;
  border-radius: .35rem;
  font-weight: 700;
  white-space: nowrap;
}

.clarke-testimonials-carousel .clarke-testimonial-company {
  font-weight: 600;
}

.clarke-testimonials-carousel .clarke-testimonial-text {
  font-size: .9rem;
  line-height: 1.7;
  margin-top: 1rem;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-family: inherit;
  border: none;
  padding: 0;
  opacity: .88;
}

.clarke-testimonials-carousel .clarke-testimonial-text p {
  margin: 0;
}

.clarke-testimonials-carousel .clarke-testimonial-text footer {
  margin-top: .75rem;
  font-style: normal;
  font-size: .8rem;
  opacity: .7;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.clarke-testimonials-carousel .clarke-testimonial-text cite {
  font-style: normal;
  font-weight: 600;
}

.clarke-testimonials-carousel .clarke-testimonial-link {
  display: inline-block;
  margin-top: .35rem;
  font-weight: 600;
  font-size: .85rem;
  color: var(--ctc-green);
  cursor: pointer;
  text-decoration: none;
  transition: color .2s var(--ctc-ease);
}

.clarke-testimonials-carousel .clarke-testimonial-link:hover,
.clarke-testimonials-carousel .clarke-testimonial-link:focus-visible {
  color: var(--ctc-green-hover);
  text-decoration: underline;
}

/* ── Video modal ─────────────────────────────────────── */
.clarke-testimonials-carousel .clarke-video-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.clarke-testimonials-carousel .clarke-video-modal.active {
  display: flex;
}

.clarke-testimonials-carousel .clarke-modal-content {
  position: relative;
  width: 100%;
  max-width: 1024px;
  background: #000;
  border-radius: var(--ctc-radius);
  overflow: hidden;
}

.clarke-testimonials-carousel .clarke-modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background .2s var(--ctc-ease), transform .2s var(--ctc-ease);
  padding: 0;
}

.clarke-testimonials-carousel .clarke-modal-close:hover,
.clarke-testimonials-carousel .clarke-modal-close:focus-visible {
  background: rgba(0,0,0,.7);
  transform: scale(1.1);
}

.clarke-testimonials-carousel .clarke-modal-close svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
}

.clarke-testimonials-carousel .clarke-modal-video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
}

.clarke-testimonials-carousel .clarke-modal-video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Theme: light ────────────────────────────────────── */
.clarke-testimonials-carousel.clarke-theme-light .clarke-testimonial-info,
.clarke-testimonials-carousel.clarke-theme-light .clarke-testimonial-title,
.clarke-testimonials-carousel.clarke-theme-light .clarke-testimonial-text,
.clarke-testimonials-carousel.clarke-theme-light .clarke-testimonial-company {
  color: #232323;
}

/* ── Theme: dark ─────────────────────────────────────── */
.clarke-testimonials-carousel.clarke-theme-dark .clarke-testimonial-info,
.clarke-testimonials-carousel.clarke-theme-dark .clarke-testimonial-title,
.clarke-testimonials-carousel.clarke-theme-dark .clarke-testimonial-text,
.clarke-testimonials-carousel.clarke-theme-dark .clarke-testimonial-company {
  color: #f2f2f2;
}

/* Link verde em ambos os temas */
.clarke-testimonials-carousel .clarke-testimonial-link {
  color: var(--ctc-green);
}

/* ── Responsive ──────────────────────────────────────── */
@media (min-width: 768px) {
  .clarke-testimonials-carousel .clarke-testimonial-title {
    font-size: 1.5rem;
    line-height: 1.55;
  }

  .clarke-testimonials-carousel .clarke-testimonial-text {
    font-size: .95rem;
    line-height: 1.7;
  }
}

@media (max-width: 768px) {
  .clarke-testimonials-carousel .clarke-carousel-slide.slide-left,
  .clarke-testimonials-carousel .clarke-carousel-slide.slide-right {
    display: none;
  }

  .clarke-testimonials-carousel .clarke-carousel-slide.slide-center {
    width: 90%;
  }

  .clarke-testimonials-carousel .clarke-carousel-wrapper {
    height: 260px;
  }

  .clarke-testimonials-carousel .clarke-testimonial-info {
    min-height: 200px;
  }

  .clarke-testimonials-carousel .clarke-testimonial-title {
    font-size: 1.1rem;
  }

  .clarke-testimonials-carousel .clarke-carousel-prev,
  .clarke-testimonials-carousel .clarke-carousel-next {
    width: 38px;
    height: 38px;
  }

  .clarke-testimonials-carousel .clarke-carousel-prev svg,
  .clarke-testimonials-carousel .clarke-carousel-next svg {
    width: 18px;
    height: 18px;
  }
}

/* ── Screen-reader only ──────────────────────────────── */
.clarke-testimonials-carousel .ctc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
