/* Отзывы и рейтинг: звёзды, карточка отзыва, сводка оценок, карточка компании. */

/* звёзды: одна полоска, закрашенная на долю оценки и вырезанная по форме звёзд */
.stars {
  --s: 16px; --g: 2px; --v: 5;
  display: inline-block; flex: none;
  width: calc(var(--s) * 5 + var(--g) * 4); height: var(--s);
  background: linear-gradient(90deg, var(--stars-on, var(--star)) calc(var(--v) * (var(--s) + var(--g))), var(--star-empty) 0);
  -webkit-mask: var(--star-shape) 0 0 / calc(var(--s) + var(--g)) var(--s) repeat-x;
          mask: var(--star-shape) 0 0 / calc(var(--s) + var(--g)) var(--s) repeat-x;
  --star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMinYMid meet'%3E%3Cpath d='M12 2.6c.4 0 .8.2 1 .6l2.5 5.2 5.7.8c.9.1 1.3 1.2.6 1.900l-4.100 4 1 5.700c.2.9-.8 1.600-1.600 1.200L12 19.300 6.900 22c-.8.4-1.800-.3-1.600-1.200l1-5.700-4.100-4c-.7-.7-.3-1.800.6-1.900l5.700-.8L11 3.200c.2-.4.6-.6 1-.6Z'/%3E%3C/svg%3E");
}

/* карточка отзыва */
.review { display: flex; flex-direction: column; gap: 10px; }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.review__title { font-size: 15px; line-height: 22px; font-weight: 500; }
.review__text { font-size: 14px; line-height: 21px; color: var(--text-2); }
.review__meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; min-width: 0; }
.review__name { font-size: 14px; line-height: 18px; font-weight: 500; }
.review__date { font-size: 13px; line-height: 18px; color: var(--muted); }
.review__reply { padding: 12px 14px; background: var(--surface); border-radius: var(--r-sm); font-size: 14px; line-height: 21px; color: var(--text-2); }
.review__reply b { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-weight: 500; color: var(--text); }
.review__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* стена отзывов: колонки разной высоты */
.wall { columns: 1; column-gap: 16px; }
.wall > * { break-inside: avoid; margin-bottom: 16px; }
@media (min-width: 720px) { .wall { columns: 2; } }
@media (min-width: 1080px) { .wall { columns: 3; } }

/* сводка рейтинга */
.rating { display: grid; gap: 16px 28px; align-items: center; }
@media (min-width: 560px) { .rating { grid-template-columns: auto 1fr; } }
.rating__score { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rating__num { font: 300 60px/1 var(--font-display); letter-spacing: -.03em; }
.rating__bars { display: grid; gap: 8px; min-width: 0; }
.rating__row { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 10px; font-size: 13px; line-height: 18px; }
.rating__row span:first-child { display: flex; align-items: center; gap: 4px; }
.rating__row .icon { color: var(--star); }
.rating__row [data-star="1"], .rating__row [data-star="2"] { --stars-on: var(--danger); }
.rating__row [data-star="4"], .rating__row [data-star="5"] { --stars-on: var(--brand); }
.rating__row [data-star] .icon { color: var(--stars-on, var(--star)); }
.rating__row span:last-child { text-align: right; color: var(--muted); }
.rating__track { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rating__track i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.rating__track[data-star="1"] i, .rating__track[data-star="2"] i { background: var(--danger); }   /* 1–2 красные, 3 жёлтая, 4–5 зелёные */
.rating__track[data-star="3"] i { background: var(--star); }

/* карточка компании */
.company { display: flex; flex-direction: column; gap: 14px; }
.company__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.company__name { font-size: 15px; line-height: 22px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company__score { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.company__score b { font-size: 14px; font-weight: 500; }
.company__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.company__foot .btn { flex: 1 1 auto; }