/* LUNARTECH RISE ACADEMY: "Learners, in their own words." The learner testimonials below the numbers on index.html, driven by
   js/lunartech-voices.js. Two rows of cards drift in opposite directions under a soft edge fade; a row pauses while it
   is hovered or holds focus, and both stop while the section is off screen. With reduced motion the rows stand still
   and scroll sideways by hand. The rows clip their own overflow, so the page never scrolls sideways. */

.lt-voices-title { max-width: 46vw; margin: 0; font-size: 3.33vw; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; text-transform: none; color: #f5f5f5; }
.lt-voices-meta { margin: 1.5rem 0 0; font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 300; letter-spacing: 0.02em; color: #6a6a6a; }

/* ---------- Rows ---------- */

.lt-voices-rows { display: flex; flex-direction: column; gap: 16px; }
.lt-voices-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.lt-voices-track { display: flex; align-items: stretch; width: max-content; }

/* The track holds the cards twice, so moving it by half its width lands exactly where it started. */
.lt-voices-row.is-moving .lt-voices-track { animation: lt-voices-left var(--lt-voices-duration, 120s) linear infinite paused; will-change: transform; }
.lt-voices-row.is-moving[data-dir="right"] .lt-voices-track { animation-name: lt-voices-right; }
.lt-voices.is-visible .lt-voices-row.is-moving .lt-voices-track { animation-play-state: running; }
.lt-voices.is-visible .lt-voices-row.is-moving:hover .lt-voices-track,
.lt-voices.is-visible .lt-voices-row.is-moving:focus-within .lt-voices-track { animation-play-state: paused; }

@keyframes lt-voices-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes lt-voices-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* ---------- Cards ---------- */

/* A margin rather than a flex gap, so half the track is exactly one set of cards and their spacing. */
.lt-voice {
  flex: 0 0 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  width: 22rem; margin: 0 16px 0 0; padding: 2rem; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 6px; background-color: #080808;
  font-family: 'Geist', sans-serif; transition: border-color 0.3s;
}
.lt-voice:hover { border-color: rgba(255, 255, 255, 0.16); }
.lt-voice--wide { width: 34rem; }

.lt-voice-quote { margin: 0; padding: 0; border: 0; }
.lt-voice-quote p { margin: 0; font-family: inherit; font-size: 15px; font-weight: 300; line-height: 1.65; color: #b5b5b5; }

.lt-voice-by { display: flex; align-items: center; gap: 12px; margin: 0; text-align: left; } /* Webflow centres figcaptions */
.lt-voice-avatar {
  display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%;
  font-size: 10px; font-weight: 300; letter-spacing: 0.06em; color: #8a8a8a;
}
.lt-voice-avatar svg { width: 12px; height: 12px; }
.lt-voice-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lt-voice-name { font-size: 13px; font-weight: 300; line-height: 1.3; color: #e6e6e6; }
.lt-voice-role { font-size: 11px; font-weight: 300; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: #6a6a6a; }

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

@media (max-width: 991px) {
  .lt-voices-title { max-width: none; font-size: 5vw; }
}

@media (max-width: 767px) {
  .lt-voices-title { font-size: 8vw; }
  .lt-voices-row {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .lt-voice { width: min(78vw, 22rem); padding: 1.5rem; }
  .lt-voice--wide { width: min(86vw, 30rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lt-voices-row.is-static { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .lt-voices-row.is-static::-webkit-scrollbar { display: none; }
  .lt-voice { transition: none; }
}