/* ============================================================
   The Entourage – Text Testimonials Marquee
   ============================================================ */

.te-ttext,
.te-ttext * {
  box-sizing: border-box;
}

.te-ttext {
  width: 100%;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Viewport clips the moving track */
.te-ttext__viewport {
  width: 100%;
  overflow: hidden;
  /* mask the edges so cards fade in/out rather than getting hard-clipped */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* The actual moving row. width:max-content keeps it from wrapping. */
.te-ttext__track {
  display: flex;
  gap: var(--tt-gap, 24px);
  width: max-content;
  animation: te-ttext-marquee var(--tt-duration, 60s) linear infinite;
  will-change: transform;
}

/* The track is duplicated content (rendered twice), so moving by 50%
   of its width plus half the gap lines up exactly with the start.
   Using calc() so we account for the gap between cycle 1's last card
   and cycle 2's first card. */
@keyframes te-ttext-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - (var(--tt-gap, 24px) / 2))); }
}

/* Right-scroll: reverse the animation */
.te-ttext--right .te-ttext__track {
  animation-direction: reverse;
}

/* Pause on hover */
.te-ttext--pause-hover:hover .te-ttext__track,
.te-ttext--pause-hover:focus-within .te-ttext__track {
  animation-play-state: paused;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .te-ttext__track {
    animation: none;
    transform: none;
  }
  .te-ttext__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ----- Card ----- */
.te-ttext__card {
  flex: 0 0 var(--tt-card-w, 320px);
  width: var(--tt-card-w, 320px);
  min-height: var(--tt-card-h, 540px);
  background: var(--tt-card-bg, #FFFFFF);
  border-radius: var(--tt-card-r, 15px);
  padding: var(--tt-card-pad, 28px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 8px 30px rgba(3, 5, 23, 0.06);
  position: relative;
}

.te-ttext__quote-mark {
  font-family: 'Parafina', 'Bebas Neue', Georgia, 'Times New Roman', serif;
  font-weight: 900;
  font-size: var(--tt-quote-fs, 55px);
  line-height: 0.6;
  color: var(--tt-quote-color, #146EF5);
  /* lift it slightly so it lines up with the top of the body text */
  margin: 6px 0 -6px 0;
  user-select: none;
}

.te-ttext__body {
  flex: 1 1 auto;
  font-size: var(--tt-body-fs, 14px);
  line-height: 1.55;
  color: var(--tt-body-color, #030517);
}
.te-ttext__body strong,
.te-ttext__body b { font-weight: 700; }
.te-ttext__body p { margin: 0 0 12px 0; }
.te-ttext__body p:last-child { margin-bottom: 0; }

.te-ttext__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.te-ttext__avatar {
  flex: 0 0 var(--tt-head-size, 60px);
  width: var(--tt-head-size, 60px);
  height: var(--tt-head-size, 60px);
  border-radius: 50%;
  overflow: hidden;
  background: #f0f3f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.te-ttext__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.te-ttext__avatar-placeholder {
  font-family: 'Parafina', 'Bebas Neue', 'Inter', sans-serif;
  font-weight: 900;
  font-size: calc(var(--tt-head-size, 60px) * 0.4);
  color: #94a0b3;
  text-transform: uppercase;
}

.te-ttext__person { min-width: 0; }
.te-ttext__name {
  font-weight: 700;
  font-size: var(--tt-name-fs, 14px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tt-name-color, #030517);
}
.te-ttext__role {
  margin-top: 4px;
  font-weight: 400;
  font-size: var(--tt-name-fs, 14px);
  line-height: 1.2;
  color: var(--tt-role-color, #D92B6B);
}

.te-ttext__highlight {
  margin-top: auto;
  padding: 14px 18px;
  border-radius: 100px;
  text-align: center;
  font-weight: 700;
  font-size: var(--tt-hl-fs, 14px);
  line-height: 1.27;
  color: var(--tt-hl-text, #030517);
  background: color-mix(in srgb, var(--tt-hl-bg, #146EF5) var(--tt-hl-op, 12%), transparent);
}
/* Older-browser fallback for color-mix */
@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
  .te-ttext__highlight {
    background: rgba(20, 110, 245, 0.12) !important;
  }
}

/* ----- Mobile tweak: slightly smaller cards so they fit better ----- */
@media (max-width: 600px) {
  .te-ttext__card {
    flex-basis: min(var(--tt-card-w, 320px), 86vw);
    width: min(var(--tt-card-w, 320px), 86vw);
  }
}