/* ============================================================
   page-otzyvy.css — страница отзывов (/otzyvy/). 1-в-1 с otzyvy.dc.html.
   ============================================================ */

/* ---------- HERO + рейтинг ---------- */
.rev-hero{ display: grid; grid-template-columns: 1fr .8fr; gap: 48px; align-items: center; margin-top: 6px; }
.rev-hero h1{ font-size: clamp(34px,5vw,62px); line-height: 1.02; margin: 0; color: var(--c-text); }
.rev-hero p{ max-width: 54ch; font-size: 18px; line-height: 1.7; color: var(--c-text-muted); margin: 20px 0 26px; }
.rev-rating{ background: var(--c-pattern); color: var(--c-white); border-radius: var(--r-lg); padding: 36px 34px; }
.rev-rating__top{ display: flex; align-items: baseline; gap: 14px; }
.rev-rating__num{ font-family: var(--font-head); font-size: 72px; line-height: 1; color: var(--c-white); }
.rev-rating__stars{ color: var(--c-star); font-size: 20px; letter-spacing: 3px; }
.rev-rating__sub{ font-size: 14px; color: #9FB3AC; margin-top: 4px; }
.rev-dist{ display: flex; flex-direction: column; gap: 8px; margin-top: 26px; }
.rev-dist__row{ display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rev-dist__star{ width: 26px; color: var(--c-on-dark); font-family: var(--font-head); }
.rev-dist__bar{ flex: 1; height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); overflow: hidden; display: block; }
.rev-dist__fill{ display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-green-soft); }
.rev-dist__count{ width: 34px; text-align: right; color: #9FB3AC; }

/* ---------- Фильтр ---------- */
.rev-filters{ display: flex; flex-wrap: wrap; gap: 9px; }
.rev-filter{ padding: 9px 18px; border-radius: var(--r-pill); font-family: var(--font-head); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; background: transparent; color: var(--c-graygreen); border: 1px solid var(--bd-dark-2); }
.rev-filter:hover{ color: var(--c-dark); border-color: var(--c-dark); }
.rev-filter.is-active{ background: var(--c-dark); color: var(--c-white); border-color: var(--c-dark); }

/* ---------- Сетка отзывов ---------- */
.rev-grid{ columns: 3; column-gap: 22px; }
.rev-card{ break-inside: avoid; margin: 0 0 22px; background: var(--c-white); border: 1px solid var(--bd-dark); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.rev-card__head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rev-card__stars{ color: var(--c-star); font-size: 15px; letter-spacing: 2px; }
.rev-card__obj{ font-size: 12px; color: #8a8f8c; background: var(--c-cream); border-radius: 8px; padding: 4px 10px; }
.rev-card blockquote{ margin: 0; font-size: 16px; line-height: 1.65; color: var(--c-graygreen); flex: 1; }
.rev-card figcaption{ margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bd-dark); }
.rev-card__author{ font-family: var(--font-head); font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: var(--c-text); }
.rev-card__date{ font-size: 13px; color: #8a8f8c; margin-top: 3px; }
.rev-card__src{ display: inline-block; font-size: 12px; color: var(--c-green); margin-top: 8px; letter-spacing: .02em; }
.rev-more{ display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }
.rev-more__note{ font-size: 13px; color: #8a8f8c; }

/* ---------- CTA ---------- */
.rev-cta{ background: var(--c-dark); color: var(--c-white); margin-top: 40px; }
.rev-cta__inner{ max-width: var(--maxw-nar); margin: 0 auto; padding: 72px var(--pad-x); display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.rev-cta__inner h2{ font-size: clamp(26px,3.4vw,42px); line-height: 1.06; margin: 0 0 12px; }
.rev-cta__inner p{ font-size: 17px; line-height: 1.6; color: var(--c-on-dark); margin: 0; max-width: 44ch; }
.rev-cta__btns{ display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Тёмная плитка тегов (сливается с футером) ---------- */
.tag-tile--dark{ background: var(--c-dark-deep); }
.tag-tile--dark .tag-tile__summary{ color: #4A5551; }
.tag-tile--dark .tag-tile__cloud a{ color: #4A5551; border-color: rgba(74,85,81,.35); }
.tag-tile--dark .tag-tile__cloud a:hover{ color: var(--c-green-soft); border-color: var(--c-green-soft); }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1024px){ .rev-grid{ columns: 2; } }
@media (max-width: 900px){ .rev-hero{ grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px){ .rev-grid{ columns: 1; } }