/* reviews.css — блок «Отзывы» на главной и лендинге книги (свой блок вместо
   виджета ReviewLab с 30.09.2026). Разметка — server/lib/reviewsSection.js.

   Сверено с ДС (.interface-design/system.md):
   - рецепт секции «Форзац-вставка (отзывы, состав)»: фон --endpaper с
     форзац-паттерном (.section-skz--endpat), текст --ink на карточках --card;
   - карточка: --card, r8, --shadow-mat, внутренний отступ 24 (16 на телефоне);
   - шрифты — токены: имя `label` (Golos 500 14), дата `helper` (Golos 400 13,
     --ink-soft), текст `body-compact` (Golos 400 15/1.55);
   - радиусы не больше 8: аватар — квадрат r8, не круг (полных скруглений на
     публичке не бывает; стрелки ленты — общий компонент со сторис);
   - звёзды — графика ≥3:1: --accent-text (5,07:1); искра --brass дала бы 1,55;
   - брендовый глиф площадки — Simple Icons, --ink-soft;
   - отступы из шкалы 4/8/12/16/24/32, переломы только 980 и 640. */

.reviews-head{text-align:center;margin:0 0 32px;
  font:800 var(--skz-text-h2,clamp(26px,2.6vw,32px))/1.25 var(--skz-font-serif,Georgia,serif);
  color:var(--ink);text-wrap:balance}

.reviews-rail{position:relative}
/* Три карточки в ряд, остальные доезжают прокруткой. Нижний отступ — место
   под тень карточек: overflow ленты иначе её срезает. */
.reviews-list{display:flex;align-items:flex-start;gap:24px;margin:0;padding:4px 0 24px;
  list-style:none;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:inline proximity;overscroll-behavior-inline:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.reviews-list::-webkit-scrollbar{display:none}

.review-card{flex:0 0 calc((100% - 48px) / 3);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:12px;padding:24px;
  background:var(--card);border-radius:8px;box-shadow:var(--shadow-mat);
  color:var(--ink)}

.review-card__head{display:flex;align-items:center;gap:12px}
.review-card__avatar{position:relative;flex:0 0 40px;width:40px;height:40px;
  border-radius:8px;overflow:hidden;background:var(--endpaper);
  display:flex;align-items:center;justify-content:center;
  font:600 14px/1 var(--skz-font-sans,sans-serif);color:var(--brass-text)}
.review-card__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.review-card__who{min-width:0;flex:1}
.review-card__name{margin:0;font:500 14px/1.4 var(--skz-font-sans,sans-serif);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-card__date{margin:0;font:400 13px/1.5 var(--skz-font-sans,sans-serif);color:var(--ink-soft)}

/* Ссылка на отзыв на площадке: зона нажатия 44px (ДС, публичка), сам знак 20. */
.review-card__src{flex:0 0 44px;width:44px;height:44px;margin:-12px -12px -12px 0;
  display:flex;align-items:center;justify-content:center;border-radius:6px;
  color:var(--ink-soft);transition:color .2s ease-out}
.review-card__src svg{width:20px;height:20px;display:block}
.review-card__src:hover{color:var(--blue-core)}
.review-card__src:focus-visible{outline:2px solid var(--blue-core);outline-offset:-4px}

.review-card__stars{display:flex;gap:4px}
.review-card__star{width:16px;height:16px;display:block;color:var(--line-deep)}
.review-card__star svg{width:100%;height:100%;display:block;fill:currentColor}
.review-card__star.is-on{color:var(--accent-text)}

/* Длинный отзыв обрезан по семи строкам; кнопку «Читать полностью»
   показывает reviews.js, только если текст не влез. Переносы строк автора
   сохраняются — он делил отзыв на абзацы. */
.review-card__text{margin:0;font:400 15px/1.55 var(--skz-font-sans,sans-serif);color:var(--ink);
  white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;overflow:hidden}
.review-card__text.is-open{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.review-card__more{align-self:flex-start;margin:-4px 0 0;padding:0;border:0;background:none;
  min-height:44px;cursor:pointer;
  font:600 14px/1.4 var(--skz-font-sans,sans-serif);color:var(--brass-text);
  transition:color .2s ease-out}
.review-card__more:hover{color:var(--blue-press,#2447A8)}
.review-card__more:focus-visible{outline:2px solid var(--blue-core);outline-offset:2px;border-radius:6px}
.review-card__more[hidden]{display:none}

/* Стрелки — тот же компонент, что у ленты сторис (stories.css). */
.reviews-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);cursor:pointer;box-shadow:var(--shadow-mat);
  transition:border-color .2s ease-out}
.reviews-arrow:hover{border-color:var(--brass-soft)}
.reviews-arrow:disabled{opacity:.4;cursor:default}
.reviews-arrow:focus-visible{outline:2px solid var(--blue-core);outline-offset:2px}
.reviews-arrow::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  border-right:2px solid var(--blue-core);border-bottom:2px solid var(--blue-core)}
.reviews-arrow--prev{left:-22px}
.reviews-arrow--prev::before{transform:translate(-30%,-50%) rotate(135deg)}
.reviews-arrow--next{right:-22px}
.reviews-arrow--next::before{transform:translate(-70%,-50%) rotate(-45deg)}
.reviews-arrow[hidden]{display:none}

@media (max-width:980px){
  .review-card{flex-basis:calc((100% - 24px) / 2)}
}
@media (max-width:640px){
  /* Телефон: лента в край экрана, следующая карточка выглядывает справа —
     подсказка, что отзывы листаются. Стрелок нет, листают пальцем. */
  .reviews-head{margin-bottom:24px}
  .reviews-list{gap:12px;margin:0 -20px;padding:4px 20px 24px;scroll-padding-inline:20px;
    scroll-snap-type:inline mandatory}
  .review-card{flex-basis:84%;padding:16px}
  .reviews-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .reviews-list{scroll-behavior:auto}
  .review-card__src,.review-card__more,.reviews-arrow{transition:none}
}