/* ============================================================================
   otzyvy.css — страница «Отзывы» Уролесан (Figma node 1876:2357, 1920×3770).
   Поверх base.css + chrome.css + переиспользует блок формы из gde-kupit.css.
   rem = px/16. Сгенерировано ИИ из Figma REST, baseline 1920, 2026-07.
   Отзывы в макете = демо (2 отзыва ×4 в шахматном порядке); реальные — контент клиента.
   ============================================================================ */
.otz { max-width: 120rem; margin-inline: auto; padding-inline: 5rem; padding-top: 11.4375rem; }

/* хлебные крошки + заголовок + подзаголовок */
.otz__crumbs {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;   /* 24px по истине Figma (Главная→Отзывы старт-старт 103px) */
  font-family: var(--wm-font); font-weight: 400; font-size: 0.875rem; color: var(--wm-ink);
}
.otz__crumbs a { color: inherit; text-decoration: none; opacity: 0.7; }
.otz__crumbs .dot { width: 0.1875rem; height: 0.1875rem; border-radius: 50%; background: currentColor; opacity: 0.5; }
.wm .otz__title {   /* .wm-префикс: перебить сброс base.css `.wm h1{margin:0}` (класс #27) */
  margin: 3.75rem 0 0; text-align: center;
  font-family: var(--wm-font-head); font-weight: 600;
  font-size: 5.125rem; line-height: 1.1; letter-spacing: -0.05125rem; text-transform: uppercase; color: var(--wm-ink);
}
.wm .otz__sub {   /* .wm-префикс: перебить сброс base.css `.wm p{margin:0}` (класс #27) */
  margin: 1.5rem 0 0; text-align: center;
  font-family: var(--wm-font); font-weight: 400; font-size: 1.125rem; color: var(--wm-ink);   /* 18px/400 по истине Figma */
}

/* кнопка «Смотреть все отзывы» (Frame 28) — пагинация/агрегатор = бэкенд */
.otz__all {
  width: 264px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 3.75rem auto 0;   /* 60px: зазор подзаголовок→кнопка по истине Figma */
  height: auto; padding: 6px 6px 6px 28px; border: 0; border-radius: 1.25rem;
  background: var(--wm-brand); color: #fff; cursor: pointer;
  font-family: var(--wm-font); font-weight: 500; font-size: 1rem;
  white-space: nowrap;
}
.otz__allrow { display: flex; justify-content: space-between; }
.otz__allrow img{ max-height: 48px; width: auto }
@media (hover: hover) { .otz__all:hover { filter: brightness(0.95); } }

/* сетка карточек 2×4 */
.otz__grid {
  margin: 3.75rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;   /* 16px */
}
.otz-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 22.6875rem;                              /* 363px */
  padding: 2rem; border-radius: 1.5rem; background: rgba(244, 244, 244, 0.6);   /* Figma card fill */
}
.otz-card__head { display: flex; align-items: center; gap: 1.25rem; padding-right: 5rem; }
.otz-card__avatar {
  flex: 0 0 auto; width: 5.1875rem; height: 5.1875rem;   /* 83px */
  border-radius: 1rem; object-fit: cover;
}
.otz-card__name { margin: 0; font-family: var(--wm-font); font-weight: 400; font-size: 1.3125rem; line-height: 1.24; letter-spacing: -0.0525rem; color: var(--wm-ink); }  /* 21px/400, трекинг -0.84px по истине */
.wm .otz-card__role { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; font-family: var(--wm-font); font-weight: 400; font-size: 1rem; line-height: 1.24; color: var(--wm-ink); opacity: 0.6; }  /* Figma 16px metadata */
.otz-card__role-dot { width: 0.1875rem; height: 0.1875rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.otz-card__rating {
  position: absolute; top: 2rem; right: 2rem;   /* 32px inset по истине */
  display: inline-flex; align-items: center; gap: 0.3125rem;
  font-family: var(--wm-font); font-weight: 400; font-size: 1.125rem; line-height: 1.24; color: #f2d116;   /* 18px Figma */
}
.otz-card__rating img { display: block; width: 1.75rem; height: 1.68125rem; }
.wm .otz-card__text {   /* .wm — перебить сброс #27; 32px отступ головы→текста по истине Figma */
  margin: 2rem 0 0; font-family: var(--wm-font); font-weight: 400;
  max-width: 82%;
  font-size: 1.125rem; line-height: 1.44; letter-spacing: -0.045rem; color: var(--wm-ink);   /* 18px / 26px, трекинг -0.72px по истине */
}
.wm .otz-card__date {   /* .wm — перебить сброс #27, иначе margin-top:auto (прижать к низу) мёртв */
  margin-top: auto;   /* дата прижата к низу карточки (истина Figma offset 319); padding-top убран — раздувал бокс, гейт мерил верх бокса */
  font-family: var(--wm-font); font-weight: 400; font-size: 1rem; color: #333;   /* 16px */
}
.otz-card__divider {
  position: absolute; top: 0; right: 8.3125rem; width: 1px; height: 100%;
  background: rgba(24, 24, 24, 0.12);
}
.otz-card__more {
  position: absolute; right: 2rem; bottom: 2rem; width: 3.5rem; height: 3.5rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1rem; background: var(--wm-brand);
}
.otz-card__more img { display: block; width: 0.4375rem; height: 0.75rem; }

/* Зазор контент→форма = свойство СТРАНИЦЫ (у каждой свой контент перед формой), не общего блока.
   Истина Figma Отзывы: низ сетки y2082 → форма y2282 = 200px. Общий .gk-ask margin 132px = значение
   Онлайна; здесь перекрываем страничным скоупом (внутренняя упаковка формы остаётся общей). */
.wm .otz .gk-ask { margin-top: 12.5rem; }   /* 200px */

/* ============================================================================
   АДАПТИВ — «Отзывы» (пилот). Кадр 360: 2001:6449. Ниже 1280 rem=px (base.css).
   ============================================================================ */

/* ── ПЛАНШЕТ 768–1279 (сетка 2 кол., порядок как на десктопе) ────────────────── */
@media (max-width: 1000px) {
  main{
    background: #fff;
  }
  .otz__all{
    border-radius: 14px;
    width: 235px;
    gap: 16px;
    justify-content: space-between;
  }
  .otz__allrow img{ max-height: 34px; width: auto }
  .otz { padding-inline: 32px; padding-top: 128px; }
  .wm .otz__title { font-size: 56px; margin-top: 40px; }
  .otz__grid { grid-template-columns: repeat(2, 1fr); margin-top: 40px; gap: 16px; }
  .otz-card { min-height: 0; padding: 24px; }
  .otz-card__avatar { width: 68px; height: 68px; }
  .wm .otz .gk-ask { margin-top: 120px; width: 100%;}
}

/* ── МОБИЛЬНЫЙ ≤767 (кадр 2001:6449: 1 кол., кнопка ПОД карточками) ──────────── */
@media (max-width: 1000px) {
  .otz {
    display: flex; flex-direction: column;
    padding-inline: 16px; padding-top: 96px;
  }
  .otz__crumbs  { order: 1; }
  .wm .otz__title { order: 2; margin-top: 51px; font-size: 34px; line-height: 1.1; }
  .wm .otz__sub   { order: 3; margin-top: 16px; font-size: 14px; }
  .otz__grid    { order: 5; grid-template-columns: 1fr; gap: 14px; margin-top: 52px; }
  .otz__allrow  { order: 4; margin-top: 32px; }      /* кнопка ПОД сеткой (кадр) */
  .otz .gk-ask  { order: 6; }
  .wm .otz .gk-ask { margin-top: 100px; width: 100%;}

  .otz-card { min-height: 0; padding: 20px 17px 18px; border-radius: 17px; background: rgba(255,255,255,0.8); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
  .otz-card__head { padding-right: 0; gap: 14px; }
  .otz-card__avatar { width: 58px; height: 58px; border-radius: 12px; }
  .otz-card__name { font-size: 14px; }
  .wm .otz-card__role { font-size: 11px; }
  .otz-card__rating { top: 92px; right: auto; left: 17px; font-size: 13px; }
  .otz-card__rating img{ max-width: 20px; height: auto; }
  .wm .otz-card__text { margin-top: 48px; font-size: 14px; line-height: 1.46; }
  .wm .otz-card__date { font-size: 11px; margin-top: 16px; }
  .otz-card__divider, .otz-card__more { display: none; }

  .otz__all { margin-top: 0; height: 42px; padding: 0 6px 0 20px; font-size: 16px; }
}