/* =========================================================================
   ITA Testimonials
   ========================================================================= */

.ita-testimonials {
  width: 100%;
}

/* -------------------------------------------------------------------------
   Header (title left + nav right)
   ------------------------------------------------------------------------- */

.ita-testimonials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
}

.ita-testimonials-heading {
  display: flex;
  flex-direction: column;
}

/* -------------------------------------------------------------------------
   Carousel — full-bleed clip + GSAP track
   ------------------------------------------------------------------------- */

.ita-testimonials-clip {
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.ita-testimonials-track {
  display: flex;
  gap: 16px;
  overflow: visible;
  padding-top: 4px;
  /* Pre-calcula en CSS la alineación con el título para evitar el salto visual
     antes de que el JS (align()) mida el offset real. Coincide exactamente con
     el borde izquierdo de la columna de contenido:
       margen de centrado (max-width 1264px)  +  gutter lateral (--page-padding: 24px).
     El gutter va literal (24px) porque --page-padding es shorthand "0 24px" y no
     puede usarse dentro de calc() para un solo lado. */
  padding-left: calc(max(0px, 50vw - var(--wp--style--global--content-size, 1264px) / 2) + 24px);
  padding-right: 2rem;
  will-change: transform;
}

/* -------------------------------------------------------------------------
   Card
   ------------------------------------------------------------------------- */

.ita-testimonial-card {
  flex: 0 0 292px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.ita-testimonial-card:hover {
  box-shadow: var(--box-shadow);
  transform: translateY(-3px);
}

/* -------------------------------------------------------------------------
   Thumbnail
   ------------------------------------------------------------------------- */

.ita-testimonial-thumbnail {
  position: relative;
  /*aspect-ratio: 16 / 9;*/
  height: 150px;
  overflow: hidden;
  background: #e0e0e0;
  flex-shrink: 0;
}

.ita-testimonial-thumbnail img,
.ita-testimonial-video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play button overlay */
.ita-testimonial-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
}

.ita-testimonial-play::before {
  content: "";
  width: 52px;
  height: 52px;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 50%;
  position: absolute;
  transition: var(--transition);
}

.ita-testimonial-play svg {
  width: 22px;
  height: 22px;
  color: #fff;
  position: relative;
  z-index: 1;
}

.ita-testimonial-play:hover::before {
  background: rgba(0, 0, 0, 0.88);
  transform: scale(1.08);
}

/* Hide play button when video is playing */
.ita-testimonial-thumbnail.is-playing .ita-testimonial-play {
  opacity: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Card body
   ------------------------------------------------------------------------- */

.ita-testimonial-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.ita-testimonial-author-name {
  color: var(--color-text);
}

/* -------------------------------------------------------------------------
   Badges
   ------------------------------------------------------------------------- */

.ita-testimonial-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ita-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
  color: var(--color-text);
  white-space: nowrap;
  font-weight: 400;
  width: fit-content;
}

.ita-badge:not(:last-child) {
  background-color: var(--color-tag-bg);
}
.ita-badge:last-child {
  background-color: var(--color-tag-bg-dark);
}
/* -------------------------------------------------------------------------
   Center link
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------------- */

.ita-testimonials-empty {
  text-align: center;
  padding: 3rem;
  color: var(--color-text);
  font-size: 0.9rem;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Full-bleed clip becomes the scroll container */
  .ita-testimonials-clip {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
  }

  .ita-testimonials-clip::-webkit-scrollbar {
    height: 4px;
  }

  .ita-testimonials-clip::-webkit-scrollbar-track {
    background: var(--color-border-default, #e5e7eb);
    border-radius: 4px;
  }

  .ita-testimonials-clip::-webkit-scrollbar-thumb {
    background: var(--color-text, #37424a);
    border-radius: 4px;
  }

  /* Reset JS-injected paddingLeft */
  .ita-testimonials-track {
    padding-left: 0 !important;
    padding-right: 0 !important;
    will-change: auto;
    padding-bottom: 8px;
  }

  .ita-testimonial-card {
    scroll-snap-align: start;
  }
}