/* Testimonials - quote cards in four layouts. Stars are decorative (the
   rating is also screen-reader text); initials avatars use six fixed tints
   with dark-mode variants. Slider slides share one grid cell, so the frame
   keeps the height of the tallest slide and never jumps. */
:root {
    --tm-star: #c27c00; --tm-star-off: #dedbe8;
    --tm-t1: #e0e7ff; --tm-i1: #3730a3; --tm-t2: #fce7f3; --tm-i2: #9d174d; --tm-t3: #dcfce7; --tm-i3: #166534;
    --tm-t4: #fef3c7; --tm-i4: #92400e; --tm-t5: #e0f2fe; --tm-i5: #075985; --tm-t6: #f3e8ff; --tm-i6: #6b21a8;
}
html[data-theme="dark"] {
    --tm-star: #fbbf24; --tm-star-off: #2f395e;
    --tm-t1: #2b3170; --tm-i1: #c7d2fe; --tm-t2: #4a1d38; --tm-i2: #fbcfe8; --tm-t3: #173b2a; --tm-i3: #bbf7d0;
    --tm-t4: #45311a; --tm-i4: #fde68a; --tm-t5: #123650; --tm-i5: #bae6fd; --tm-t6: #3a2258; --tm-i6: #e9d5ff;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --tm-star: #fbbf24; --tm-star-off: #2f395e;
        --tm-t1: #2b3170; --tm-i1: #c7d2fe; --tm-t2: #4a1d38; --tm-i2: #fbcfe8; --tm-t3: #173b2a; --tm-i3: #bbf7d0;
        --tm-t4: #45311a; --tm-i4: #fde68a; --tm-t5: #123650; --tm-i5: #bae6fd; --tm-t6: #3a2258; --tm-i6: #e9d5ff;
    }
}

.tm-wrap { display: grid; gap: 10px; }
.tm-wrap > * { min-width: 0; }
.tm-items { display: grid; gap: 12px; }
.tm-l-grid .tm-items, .tm-l-slider .tm-items { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tm-card {
    position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 16px 14px;
    background: var(--e-surface); border: 1px solid var(--e-line); border-radius: calc(var(--e-radius-sm) + 2px); min-width: 0;
}
.tm-mark { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; fill: color-mix(in srgb, var(--e-accent) 22%, transparent); }
.tm-quote { margin: 0; flex: 1; padding-right: 26px; }
.tm-quote p { margin: 0; color: var(--e-ink); line-height: 1.55; overflow-wrap: anywhere; }
.tm-quote p::before { content: "\201C"; }
.tm-quote p::after { content: "\201D"; }
.tm-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tm-av { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--e-surface-2); }
.tm-ini { display: inline-grid; place-items: center; font-weight: 750; font-size: .9em; letter-spacing: .02em; }
.tm-t1 { background: var(--tm-t1); color: var(--tm-i1); } .tm-t2 { background: var(--tm-t2); color: var(--tm-i2); }
.tm-t3 { background: var(--tm-t3); color: var(--tm-i3); } .tm-t4 { background: var(--tm-t4); color: var(--tm-i4); }
.tm-t5 { background: var(--tm-t5); color: var(--tm-i5); } .tm-t6 { background: var(--tm-t6); color: var(--tm-i6); }
.tm-id { display: grid; min-width: 0; line-height: 1.3; }
.tm-name { font-weight: 700; color: var(--e-ink); overflow-wrap: anywhere; }
.tm-role { font-size: .84em; color: var(--e-ink-3); overflow-wrap: anywhere; }
.tm-rating { display: inline-flex; }
.tm-stars { display: inline-flex; gap: 2px; }
.tm-star { position: relative; display: inline-block; width: 17px; height: 17px; }
.tm-star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-star .tm-bg { fill: var(--tm-star-off); }
.tm-star .tm-fg { fill: var(--tm-star); }
.tm-half .tm-fg { clip-path: inset(0 50% 0 0); }
.tm-none .tm-fg { display: none; }

/* featured and slider: one large quote */
.tm-l-featured .tm-card, .tm-slide .tm-card { padding: 22px 22px 18px; gap: 14px; }
.tm-l-featured .tm-quote p, .tm-slide .tm-quote p { font-size: 1.12em; line-height: 1.5; letter-spacing: -.005em; }
.tm-l-featured .tm-av, .tm-slide .tm-av { width: 56px; height: 56px; }
.tm-l-featured .tm-mark, .tm-slide .tm-mark { width: 40px; height: 40px; }
.tm-l-featured .tm-quote, .tm-slide .tm-quote { padding-right: 36px; }

/* list: rows with a divider, no card surface */
.tm-l-list .tm-items { gap: 0; }
.tm-l-list .tm-card { background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--e-line); padding: 14px 2px; }
.tm-l-list .tm-card:last-child { border-bottom: 0; }
.tm-l-list .tm-mark { display: none; }
.tm-l-list .tm-quote { padding-right: 0; }

/* slider */
.tm-carousel { display: flex; flex-direction: column; gap: 10px; }
.tm-slides { display: grid; touch-action: pan-y; }
.tm-slide { grid-area: 1 / 1; min-width: 0; display: grid; }
.tm-slide.tm-off { visibility: hidden; }
.tm-slide:not(.tm-off) { animation: tm-in .35s var(--e-ease); }
@keyframes tm-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.tm-controls { order: 2; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tm-nav {
    display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer; flex: none;
    color: var(--e-ink); background: var(--e-bg); border: 1px solid var(--e-line-strong); border-radius: 50%;
    transition: border-color .15s var(--e-ease), color .15s var(--e-ease), background-color .15s var(--e-ease);
}
.tm-nav:hover { border-color: var(--e-accent); color: var(--e-accent-fg); background: var(--e-surface); }
.tm-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tm-pause svg { fill: currentColor; stroke-width: 2.6; }
.tm-where { display: inline-flex; align-items: center; gap: 10px; min-width: 64px; justify-content: center; }
.tm-pos { font-size: .82em; font-weight: 650; color: var(--e-ink-2); font-variant-numeric: tabular-nums; }
.tm-dots { display: inline-flex; gap: 5px; }
.tm-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--e-line-strong); transition: width .2s var(--e-ease); }
.tm-dots i.tm-on { width: 16px; border-radius: 999px; background: var(--e-accent); }

.tm-note { margin: 0; font-size: .74em; color: var(--e-ink-3); }

@media (max-width: 360px) {
    .tm-card, .tm-l-featured .tm-card, .tm-slide .tm-card { padding: 14px 13px 12px; }
    .tm-l-featured .tm-quote p, .tm-slide .tm-quote p { font-size: 1.02em; }
    .tm-dots { display: none; }
}
html[data-compact="1"] .tm-card { padding: 12px; gap: 8px; }