/*
 * Testimonials on the site. The theme's own colours and shapes are used when it names them (--paper, --ink, --line, --accent,
 * --radius…), with plain fallbacks for a theme that does not. No inline style anywhere: every choice is a class.
 */

.tm { --tm-gap: 1.25rem; margin-block: 1.5rem; }
.tm-card {
    display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 1.25rem 1.25rem 1.1rem;
    background: var(--paper, #fff); color: var(--ink, #1f2328);
    border: 1px solid var(--line, #e3e5e8); border-radius: var(--radius, 12px);
    box-shadow: var(--shadow, 0 1px 2px rgba(0, 0, 0, .04));
}
.tm-stars { margin: 0; color: #e8a317; font-size: 1.05rem; letter-spacing: .1em; line-height: 1; }
.tm-stars__off { color: var(--line, #d7dadf); }
.tm-body { flex: 1; margin: 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.6; }
.tm-body p { margin: 0; overflow-wrap: anywhere; }
.tm-body p::before { content: "“"; }
.tm-body p::after { content: "”"; }
.tm-by { display: flex; align-items: center; gap: .75rem; }
.tm-face { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.tm-face--letter {
    display: inline-grid; place-items: center; font-weight: 600; font-size: 1.25rem;
    background: var(--accent-quiet, #e8f0fe); color: var(--accent, #1a56db);
}
.tm-who { display: flex; flex-direction: column; min-width: 0; }
.tm-name { font-weight: 600; }
.tm-role { color: var(--ink-quiet, #5f6670); font-size: .9em; }
.tm-more { margin: 1rem 0 0; text-align: center; }

/* A grid: as many columns as fit. */
.tm--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--tm-gap); }
.tm--grid .tm-more { grid-column: 1 / -1; }

/* A list: one under another. */
.tm--list { display: grid; gap: var(--tm-gap); }

/* A carousel: one row that scrolls and snaps — three cards on a wide screen, one and a peek on a phone. */
.tm--carousel { position: relative; }
.tm-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--tm-gap)) / 3); gap: var(--tm-gap);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-bottom: .5rem; scrollbar-width: thin;
}
.tm-track > .tm-card { scroll-snap-align: start; }
.tm-track:focus-visible { outline: 2px solid var(--accent, #1a56db); outline-offset: 4px; }
@media (max-width: 900px) { .tm-track { grid-auto-columns: calc((100% - var(--tm-gap)) / 2); } }
@media (max-width: 600px) { .tm-track { grid-auto-columns: 85%; } }
@media (prefers-reduced-motion: reduce) { .tm-track { scroll-behavior: auto; } }

.tm-nav { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.tm-nav button {
    display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
    border: 1px solid var(--line, #d7dadf); border-radius: 50%; background: var(--paper, #fff); color: var(--ink, #1f2328);
}
.tm-nav button:hover:not(:disabled) { border-color: var(--accent, #1a56db); color: var(--accent, #1a56db); }
.tm-nav button:disabled { opacity: .4; cursor: default; }
.tm-nav svg { width: 1.1rem; height: 1.1rem; }

/* The page and the form. */
.tm-page__actions { margin: 0 0 1.5rem; }
.tm-form { max-width: 40rem; }
.tm-form .tm-rating { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }