/**
 * Общая база для всех шаблонов компонента (листинг, карусель):
 * токены дизайна, звёзды, карточка отзыва.
 * Специфика раскладки — в style.css конкретного шаблона.
 */

.tmr {
    --tmr-bg: #eff1f4;
    --tmr-card: #fff;
    --tmr-ink: #12161c;
    --tmr-text: #2a2f36;
    --tmr-muted: #78808c;
    --tmr-dim: #9aa1ac;
    --tmr-line: #e6e9ee;
    --tmr-line-2: #e3e6eb;
    --tmr-star: #ffb01f;
    --tmr-star-off: #d9dde4;
    --tmr-accent: #2f6bff;
    --tmr-radius: 20px;

    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--tmr-ink);
    -webkit-font-smoothing: antialiased;
}

.tmr,
.tmr *,
.tmr *::before,
.tmr *::after {
    box-sizing: border-box;
}

.tmr__empty {
    color: var(--tmr-dim);
    padding: 12px 0;
}

/* ---------- Звёзды ---------- */

.tmr-stars {
    display: flex;
    gap: 2px;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--tmr-star-off);
    white-space: nowrap;
}

.tmr-stars i {
    font-style: normal;
}

.tmr-stars i.is-on {
    color: var(--tmr-star);
}

/* ---------- Карточка отзыва ---------- */

.tmr-card {
    position: relative;
    border: 1px solid var(--tmr-line);
    border-radius: var(--tmr-radius);
    background: var(--tmr-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px 28px 28px;
}

.tmr-card__stripe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--tmr-source, var(--tmr-dim));
}

.tmr-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.tmr-card__person {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}

.tmr-card__avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 999px;
    background: var(--tmr-tint, #eff1f4);
    color: #3a4250;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
}

.tmr-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tmr-card__meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.tmr-card__name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmr-card__line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.tmr-card__date {
    font-size: 14px;
    color: var(--tmr-dim);
    white-space: nowrap;
}

.tmr-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 26px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    background: #f5f6f8;
    color: #8a929e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tmr-card__badge_link {
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tmr-card__badge_link:hover,
.tmr-card__badge_link:focus-visible {
    background: #eceef2;
    color: var(--tmr-ink);
    text-decoration: none;
}

.tmr-card__badge::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 10px;
    background: var(--tmr-source, var(--tmr-dim));
}

.tmr-card__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.tmr-card__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--tmr-text);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: var(--tmr-clamp, 6);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tmr-card.is-expanded .tmr-card__text {
    display: block;
    overflow: visible;
}

.tmr-card__more {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--tmr-accent);
    cursor: pointer;
}

.tmr-card__more[hidden] {
    display: none;
}

.tmr-card__reply {
    border-radius: 14px;
    background: #f6f8fa;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tmr-card__reply-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #6a7280;
}

.tmr-card__reply-text {
    font-size: 15px;
    line-height: 1.45;
    color: #3a3a3a;
    /* Ответ организации бывает длиннее самого отзыва и раздувал карточку,
       ломая высоту ряда/карусельной ленты. Ограничиваем так же, как текст
       отзыва; полный вид — по той же кнопке «Читать полностью». */
    display: -webkit-box;
    -webkit-line-clamp: var(--tmr-clamp-reply, 5);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tmr-card.is-expanded .tmr-card__reply-text {
    display: block;
    overflow: visible;
}

@media (max-width: 640px) {
    .tmr-card {
        padding: 26px 20px 22px;
    }
}