/* =====================================================================
   FAKTOR — БЛОК «ВІДГУКИ КОМПАНІЇ» (Google-style)
   Самодостатній компонент. Розмітка: index.html → <section class="fr-reviews">.
   Палітра тут локальна (бренд-кольори Google: синій #4285F4, зорі #FBBC04)
   і навмисно не йде через css/tokens.css — це віджет-вставка.
   Джерело: handoff-reviews/reviews.html.
   ===================================================================== */
.fr-reviews{ font-family:inherit; color:#001738; margin-top:var(--sec-gap); background:#fff; } /* той самий міжсекційний ритм, що й .section */
.fr-reviews *{ box-sizing:border-box; }
/* той самий боковий відступ, що й .container (=48px при 1440) — секція в одну лінію з рештою */
.fr-reviews__inner{ margin:0 auto; padding:0 calc((100% - var(--content)) / 2); }

.fr-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:8px; }
.fr-title{ margin:0; font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:var(--ls-h1); font-weight:var(--fw-medium); }
.fr-sub{ margin:11px 0 0; font-size:14px; color:#5b6470; }

.fr-tools{ display:flex; align-items:center; gap:18px; }
.fr-summary{ display:flex; align-items:center; gap:10px; background:#f5f6f8; border:1px solid #e6e9ef; border-radius:999px; padding:8px 16px; }
.fr-g{ width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid #e6e9ef; display:inline-flex; align-items:center; justify-content:center; font:700 13px Arial,sans-serif; color:#4285F4; }
.fr-rate{ font-size:16px; font-weight:700; color:#001738; }
.fr-srow{ display:inline-flex; gap:1px; }
.fr-cnt{ font-size:13px; color:#5b6470; }

.fr-arrows{ display:flex; gap:8px; }
.fr-arrow{ width:38px; height:38px; border-radius:50%; border:1px solid #e6e9ef; background:#fff; color:#9aa1ad; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.15s; }
.fr-arrow:hover{ border-color:#cbd2dc; color:#001738; background:#f7f8fa; }

.fr-track{ display:flex; gap:24px; margin-top:32px; overflow-x:auto; padding:8px 2px 18px; scroll-snap-type:x mandatory; align-items:stretch; }
.fr-track{ scrollbar-width:none; -ms-overflow-style:none; }
.fr-track::-webkit-scrollbar{ display:none; }

.fr-card{ flex:0 0 384px; min-width:300px; scroll-snap-align:start; background:#fff; border:1px solid #e6e9ef; border-radius:12px; box-shadow:0 1px 3px rgba(0,22,56,.06); padding:24px; display:flex; flex-direction:column; gap:14px; }
.fr-ctop{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fr-who{ display:flex; align-items:center; gap:12px; }
.fr-av{ width:42px; height:42px; border-radius:50%; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; flex:none; }
.fr-name{ font-size:15px; font-weight:700; color:#001738; }
.fr-date{ font-size:12px; color:#9aa1ad; }
.fr-gb{ width:24px; height:24px; border-radius:50%; background:#fff; border:1px solid #e6e9ef; display:inline-flex; align-items:center; justify-content:center; font:700 14px Arial,sans-serif; color:#4285F4; flex:none; }
.fr-cstars{ display:flex; gap:2px; }
.fr-text{ margin:0; font-size:14px; line-height:1.62; color:#3b434f; }

/* Адаптив: окремого брейкпоінта немає навмисно — сторінка масштабується як
   єдине ціле через zoom на .frame (css/style.css + js/responsive.js).
   Картки лишаються 384px і зменшуються разом з усім макетом; стрічка
   гортається горизонтально на всіх ширинах (.fr-track{overflow-x:auto}). */