/* =====================================================================
   Learner testimonials (Views/Components/_Testimonial.cshtml)
   Clean and minimal, like the other home sections: white cards, a thin border, a soft tinted shadow, a short clamped quote.
   Self-contained under .tm (own tokens, light and dark). Native scroll-snap row, slow autoplay, progress line, arrows.
   ===================================================================== */
.tm {
    --tm-ink: #0f1b2d; --tm-body: #46566b; --tm-muted: #6b7c91;
    --tm-line: rgba(20, 90, 140, .14); --tm-card: #ffffff;
    --tm-a: #0891b2; --tm-b: #2563eb; --tm-a-ink: #0b6f8c; --tm-soft: rgba(8, 145, 178, .10);
    --tm-star: #e8a317; --tm-glow: 8, 145, 178;
    --tm-lift: 0 1px 2px rgba(15, 60, 100, .06), 0 14px 28px -20px rgba(15, 80, 130, .35);
    --tm-lift-hover: 0 2px 4px rgba(15, 60, 100, .06), 0 24px 40px -22px rgba(var(--tm-glow), .5);
    position: relative;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--tm-body);
    padding: clamp(40px, 6vw, 72px) 0;
}
[data-bs-theme="dark"] .tm {
    --tm-ink: #eef7ff; --tm-body: #b4c6d9; --tm-muted: #7f95ab;
    --tm-line: rgba(110, 190, 230, .16); --tm-card: rgba(9, 28, 50, .8);
    --tm-a: #2fb8d6; --tm-b: #3b82f6; --tm-a-ink: #7fd6ec; --tm-soft: rgba(47, 184, 214, .12);
    --tm-star: #f3b94d; --tm-glow: 47, 184, 214;
    --tm-lift: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 28px -20px rgba(0, 0, 0, .8);
    --tm-lift-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 40px -22px rgba(var(--tm-glow), .4);
}
.tm *, .tm *::before, .tm *::after { box-sizing: border-box; }
.tm-shell { width: min(1240px, 100% - 32px); margin-inline: auto; }
.tm i.bi { line-height: 1; }

.tm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; margin-bottom: 28px; }
.tm-head h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; color: var(--tm-ink); }
.tm-head h2 em { font-style: normal; background: linear-gradient(100deg, var(--tm-a), var(--tm-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tm-score { display: flex; align-items: center; gap: 10px; margin: 0; }
.tm-score b { font-size: 1.5rem; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--tm-ink); }
.tm-score small { font-size: .8125rem; color: var(--tm-muted); }
.tm-stars { display: inline-flex; gap: 2px; color: var(--tm-star); font-size: .8125rem; }

.tm-viewport { margin-inline: -16px; }
.tm-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 16px 20px; outline: none; overscroll-behavior-x: contain; }
.tm-track::-webkit-scrollbar { display: none; }
.tm-card { --mx: 50%; --my: 0%; position: relative; flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; min-height: 236px; padding: 24px; background: var(--tm-card); border: 1px solid var(--tm-line); border-radius: 18px; box-shadow: var(--tm-lift); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s; overflow: hidden; }
.tm-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(var(--tm-glow), .10), transparent 70%); opacity: 0; transition: opacity .25s; }
.tm-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tm-a) 35%, var(--tm-line)); box-shadow: var(--tm-lift-hover); }
.tm-card:hover::before { opacity: 1; }
.tm-card__n { display: none; }
.tm-rate { margin: 0; }
.tm-quote { margin: 0; font-size: .9688rem; line-height: 1.6; font-weight: 500; color: var(--tm-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.tm-who { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 0 0; background: none !important; color: inherit; border-top: 1px solid var(--tm-line); }
.tm-who img { width: 42px; height: 42px; flex: none; object-fit: cover; border-radius: 50%; border: 2px solid var(--tm-soft); }
.tm-who__t { display: grid; min-width: 0; line-height: 1.3; }
.tm-who__t b { font-size: .9375rem; font-weight: 700; color: var(--tm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-who__t small { font-size: .78rem; color: var(--tm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-who__link { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--tm-line); color: var(--tm-a-ink); text-decoration: none; transition: background .2s, color .2s; }
.tm-who__link:hover { background: var(--tm-a); color: #fff; border-color: transparent; }

.tm-nav { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.tm-bar { flex: 1; height: 3px; border-radius: 3px; background: var(--tm-line); overflow: hidden; }
.tm-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--tm-a), var(--tm-b)); transform-origin: left; transform: scaleX(.1); transition: transform .3s; }
.tm-nav__r { display: flex; align-items: center; gap: 16px; }
.tm-all { font-size: .875rem; font-weight: 700; color: var(--tm-a-ink); text-decoration: none; white-space: nowrap; }
.tm-all:hover { color: var(--tm-b); }
.tm-arrows { display: flex; gap: 8px; }
.tm-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tm-line); background: var(--tm-card); color: var(--tm-ink); cursor: pointer; box-shadow: var(--tm-lift); transition: transform .15s, background .2s, color .2s, border-color .2s; }
.tm-arrow:hover:not(:disabled) { background: linear-gradient(135deg, var(--tm-a), var(--tm-b)); color: #fff; border-color: transparent; }
.tm-arrow:active:not(:disabled) { transform: scale(.94); }
.tm-arrow:disabled { opacity: .4; cursor: default; }
.tm-arrow:focus-visible, .tm-track:focus-visible { outline: 2px solid var(--tm-a); outline-offset: 3px; }

.tm.js-in .tm-card { opacity: 0; transform: translateY(16px); }
.tm.js-in.in .tm-card { opacity: 1; transform: none; transition: opacity .6s calc(var(--k) * 70ms), transform .6s calc(var(--k) * 70ms) cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s; }
.tm.js-in.in .tm-card:hover { transform: translateY(-3px); transition-delay: 0s; }

@media (max-width: 991.98px) { .tm-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 639.98px) {
    .tm-card { flex-basis: 86%; min-height: 220px; }
    .tm-nav { gap: 14px; }
    .tm-all { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tm-card, .tm-arrow { transition: none !important; } .tm-card:hover { transform: none; } }

/* the video tile: same height as the cards, a vertical thumbnail with a play button */
.tm-vid { position: relative; flex: 0 0 170px; scroll-snap-align: start; padding: 0; border: 1px solid var(--tm-line); border-radius: 18px; overflow: hidden; background: #0b1b2b; cursor: pointer; box-shadow: var(--tm-lift); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s; }
.tm-vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .25s; }
.tm-vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 16, 30, .78), transparent 55%); }
.tm-vid:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tm-a) 45%, var(--tm-line)); box-shadow: var(--tm-lift-hover); }
.tm-vid:hover img { transform: scale(1.06); opacity: 1; }
.tm-vid:active { transform: scale(.985); }
.tm-vid:focus-visible { outline: 2px solid var(--tm-a); outline-offset: 3px; }
.tm-vid__play { position: absolute; z-index: 1; left: 50%; top: 42%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--tm-a), var(--tm-b)); color: #fff; font-size: 1.7rem; box-shadow: 0 12px 24px -10px rgba(var(--tm-glow), .9); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.tm-vid:hover .tm-vid__play { transform: scale(1.1); }
.tm-vid__cap { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 2px; text-align: left; color: #fff; }
.tm-vid__cap b { font-size: .9375rem; font-weight: 700; }
.tm-vid__cap small { font-size: .75rem; opacity: .8; }
.tm-dlg { width: min(360px, 92vw); padding: 0; border: 0; border-radius: 18px; background: #000; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.tm-dlg::backdrop { background: rgba(4, 12, 24, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tm-dlg__frame { aspect-ratio: 9 / 16; max-height: 82vh; margin-inline: auto; }
.tm-dlg__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.tm-dlg__x { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #0f1b2d; cursor: pointer; }
.tm-dlg__x:hover { background: #fff; }
@media (max-width: 639.98px) { .tm-vid { flex-basis: 46%; } }
@media (prefers-reduced-motion: reduce) { .tm-vid, .tm-vid img, .tm-vid__play { transition: none; } }