/* LUNARTECH Academy: Testimonials (/testimonials), generated by tools/testimonials/build.mjs.
   This file only adds what the page needs. The rest is shared on purpose, so this page moves when they do: the hero, edges, titles, spacing, logo wall and fellows slider are lunartech-stories.css,
   the logo strip is lunartech-logo-strip.css with Success Stories' changes, the cards and the rating are the home page's lunartech-voices.css.
   Under the slider, one vertical line runs down the page: names and topics to its left, what was said to its right. Pure black surfaces. Nothing here uses 100vw, so the page never scrolls sideways. */

.tm-leads { padding-top: var(--lt-space-4); } /* the slider's arrows sit in the slider's own bottom padding, so the line below needs its own room */

/* ───────────── the line: every row below the slider has the same two columns ───────────── */
.tm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 1.5rem clamp(2rem, 4vw, 4rem); padding-top: var(--lt-space-4); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.tm-side { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; text-align: left; } /* Webflow centres figcaptions */
.tm-main .tm-who { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.4; letter-spacing: 0; text-transform: none; color: #f5f5f5; }
.tm-side .lt-voice-role { font-family: 'Geist', sans-serif; }

/* ───────────── the two long reviews: a touch above the cards' 15px, dim, with the words their source emphasises in white. Small on purpose (user, 2026-11-07: 34px was "way too big") ───────────── */
.tm-lead { margin: 0; padding-bottom: var(--lt-space-4); }
.tm-lead-quote { margin: 0; padding: 0; border: 0; }
.tm-main .tm-lead-quote p { margin: 0; max-width: 42em; font-family: 'Geist', sans-serif; font-size: clamp(15px, 1.1vw, 18px); font-weight: 300; line-height: 1.65; color: #9a9a9a; }
.tm-lead-quote em { font-style: normal; color: #fff; }

/* ───────────── every other review, held still so it can be read ───────────── */
.tm-groups { margin-top: var(--lt-space-4); }
.tm-group { padding-bottom: var(--lt-space-4); }
/* the topic stays beside its reviews while they pass, clear of the navbar */
.tm-group > .tm-side { position: sticky; top: 7.5rem; align-self: start; }
.tm-cards { columns: 2; column-gap: 16px; }
.tm-cards .lt-voice { width: auto; margin: 0 0 16px; background-color: #000; break-inside: avoid; }

/* ───────────── arriving: a slow settle, once. Hidden only after the script has run, so without it everything simply shows ───────────── */
.tm-main.tm-js .tm-reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tm-main.tm-js .tm-reveal.is-in { opacity: 1; transform: none; }

@media (min-width: 1800px) {
  .tm-cards { columns: 3; }
}
@media (max-width: 991px) {
  .tm-row { grid-template-columns: minmax(0, 1fr); }
  .tm-group > .tm-side { position: static; }
}
@media (max-width: 767px) {
  .tm-cards { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-main.tm-js .tm-reveal { opacity: 1; transform: none; transition: none; }
}