/* ═══════════════════════════════════════════════════════════════════════
   1016 положительных отзывов
   ──────────────────────────
   Плашки площадок с оценками и звёздами, ленты отзывов, кнопки прокрутки.

   ЭТОТ ФАЙЛ - ДЛЯ ПРАВОК ТОЛЬКО ЭТОГО БЛОКА.

   Заведено 17.08.2026 по решению Павла: «разведи блоки по файлам», чтобы
   над разными блоками можно было работать одновременно и правки не
   затирали друг друга.

   ПРАВИЛА ДЛЯ ТОГО, КТО ПРАВИТ ЭТОТ ФАЙЛ:

   1. Пиши сюда только то, что относится к этому блоку. Общее - карточки,
      тени, ритм между блоками, заголовки разделов - в 00_obshchee.css.
   2. Файл подключается ПОСЛЕ glavnaya.css и guide.css, поэтому перебивает
      их при равной силе селектора. Но эталонные стили (css/etalon/*)
      написаны через [data-h] и [data-b] - против них пиши той же формы
      селектор или сильнее, иначе правило молча проиграет.
   3. Каждой правке - комментарий: что меняем, по чьей команде, и строка
      «Откат: …», чтобы можно было вернуть как было.
   4. Эталонные файлы css/etalon/* не трогать: они заморожены, на них
      ссылается манифест контрольных сумм.
   5. Проверять замером на живой странице, а не на глаз.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   Правка 18.08.2026: уплотнение блока на телефоне.

   Диктовка Павла: «сократить расстояние между блоками, где у нас идёт
   карусель отзывов и карусель самих текстов - и по высоте, и по ширине,
   сделать ещё более компактно».

   Меняем четыре числа, все - только на телефоне (body.mob, до 640px):

   1. промежуток между карточками внутри ленты: 18px -> 10px (по ширине);
   2. запас под лентой: 24px -> 12px (по высоте). Запас нужен, чтобы
      лента не срезала тень карточек - overflow-x у неё auto, а значит и
      по вертикали содержимое обрезается. Тень 0 10px 20px мягкая, на
      12px её хвост уже почти не виден, зато лента перестала «дышать»
      пустотой;
   3. воздух между лентой площадок и лентой отзывов: 26px -> 12px;
   4. поля самих карточек: у отзыва 10/12 -> 8/10, у плашки площадки
      8/10 -> 6/8.

   Боковые 22px и вынос margin: 0 -22px не трогаем: ими карточки выходят
   к самым краям экрана, а тень не срезается сбоку.

   Замер на 375px: блок отзывов был 409px в высоту, стал 363px.

   Откат: удалить этот раздел - вернутся 18px, 24px, 26px и прежние поля
   карточек (они заданы в glavnaya.css, разделы 7, 20 и 29).
   ─────────────────────────────────────────────────────────────────────── */
body.mob #otzyvy .strip[data-b] {
  gap: 10px;
  padding: 6px 22px 12px;
}

/* ПРАВКА 19.08.2026: эти 12px перебиты 30-ю в последнем разделе файла.
   Число не «выросло»: воздух между лентами и был 30 (12 поля ленты сверху
   + 12 отбивки + 6 поля снизу), просто теперь поля вынесены из счёта. */
body.mob #otzyvy .lenta + .lenta {
  margin-top: 12px;
}

body.mob #otzyvy .strip[data-b] .rev[data-b] {
  padding: 8px 10px;
}

body.mob #otzyvy .strip[data-b] .plat[data-b] {
  padding: 6px 8px;
}

/* ───────────────────────────────────────────────────────────────────────
   Правка 19.08.2026: количество отзывов - 10,5 -> 10,8 px.

   Задание Павла в справочнике кеглей телефонной версии
   (C:\Users\Павел\Claude\Projects\Вебсайт\ШРИФТЫ_МОБИЛЬНЫЕ 2.docx,
   таблица «Отзывы», строка «Количество отзывов»): «Сделать 10,8 px».
   10,8 - мелкая строка образца «24/7» с первого экрана.

   Меняем только кегль, как и сказано. Межстрочный множитель 1,3 стоит в
   glavnaya.css (`.plat .pcnt`) и остаётся: 10,8 x 1,3 = 14,04 вместо
   прежних 13,65. Цвет (серый #63676C) и начертание не трогаем - про них
   речи не было.

   Правило под body.mob: компьютер остаётся на 10,5 px, там Павел кегль
   не менял. Замер на 1440 до и после - 10,5 / 13,65.

   Замер на 375 до: 10,5 / 13,65. После: 10,8 / 14,04.

   Откат: удалить этот раздел - вернётся 10,5 px из glavnaya.css.
   ─────────────────────────────────────────────────────────────────────── */
body.mob #otzyvy .plat[data-b] .pcnt[data-b] {
  font-size: 10.8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   Правка 19.08.2026: тень лент растворяется до конца, а ритм считается
   от белого края карточки
   ───────────────────────────────────────────────────────────────────────
   Две диктовки Павла одного дня.

   ПЕРВАЯ - про тень: «там, где „1016 положительных отзывов на различных
   площадках“, тень реализована не очень хорошо… сейчас идеально тень
   выставлена там, где у нас компания - „150 400“, „до 70 %“, „2 часа“,
   „тесты“, „анкеты переводчика“. Там все внешние границы блоков построены
   так, чтобы тень успевала раствориться до белого. А там, где „1016
   положительных отзывов“, видно границу тени - и это плохо».

   ВТОРАЯ - про отступы: расстояние до H2 и после H2 должно считаться от
   белого края карточки, а не от коробки блока и не от края тени.

   ─────────────────────────────────────────────────────────────────────
   ПОЧЕМУ БЫЛА ВИДНА ГРАНИЦА ТЕНИ

   Обе ленты лежат в div.strip с `overflow-x: auto`. По правилам CSS, если
   по одной оси стоит auto, по другой «видимое» превращается в прокрутку,
   поэтому лента режет содержимое и СВЕРХУ И СНИЗУ - ровно по своему полю.
   Поле снизу было 12 точек на телефоне и 24 на компьютере.

   Тень карточек - `0 10px 20px rgba(21,72,137,.08)`. Сколько ей надо,
   замерено контрольным образцом (белая карточка на белом листе, счёт по
   пикселям - разбор в 08_preimushchestva_chastnym.css, раздел 10):
   26 точек вниз и 16 вбок, а не 20 и 10, как считали по формуле
   «смещение плюс половина размытия».

   Замер пикселей по колонке под карточкой отзыва (375, последний пиксель
   внутри поля против первого снаружи):
     · было: на 12-й точке под карточкой тень ещё 247,249,251, а 13-я уже
       255,255,255 - ступенька 8 единиц, её и видно чертой;
     · образец Павла, письмо корпоративного заказчика (.pisma-okno, поля
       ему хватает): тень идёт 26 точек и приходит к 254,254,254 -
       ступенька 1 единица, глазом не читается.

   ЧТО СДЕЛАНО. Поле снизу доведено до 26 точек - ровно столько, сколько
   тени нужно. Поле сверху 6 точек оставлено: тень при смещении 10 и
   охвате 16 вылезает над карточкой на 6, и это ровно оно.

   ─────────────────────────────────────────────────────────────────────
   ПОЧЕМУ ЭТО НЕ ПОРТИТ ОТСТУПЫ

   Запас под тень - место пустое, пользователь его не видит. Считать его
   расстоянием нельзя (об этом и была вторая диктовка), поэтому ленте
   выданы отрицательные внешние отступы той же величины: коробка ленты
   садится ровно на белый край карточки, а тень по-прежнему рисуется в
   своём поле, и никто её не режет. Общее правило - в 00_obshchee.css,
   раздел 5.

   Внутренний воздух между лентой площадок и лентой отзывов от этого
   схлопнулся бы с 30 точек до 12, поэтому отбивка второй ленты поднята
   с 12 до 30 на телефоне и с 26 до 56 на компьютере - ровно те числа,
   которые между карточками были и раньше. Внешне середина блока не
   изменилась ни на точку.

   Замер до (375): от H2 до плашки площадки 41, от карточки отзыва до H2
   «Услуги нашего Бюро переводов» 47. Положено 35 и 35.
   Замер после: 35 и 35. На 1440 было 76 и 94, стало 70 и 70.

   Откат: удалить этот раздел - вернутся поля 12/24, отбивка лент 12/26 и
   срезанная тень.
   ─────────────────────────────────────────────────────────────────────── */
/* display: flow-root у обёртки .lenta обязателен. Без него отрицательные
   отступы ленты «протекают» наружу и складываются с отбивкой между
   лентами по правилу схлопывания (берётся самое отрицательное, а не
   сумма): замер показал воздух между лентами 36 вместо 30 на телефоне и
   62 вместо 56 на компьютере. С flow-root отступы остаются внутри своей
   обёртки, коробка .lenta садится ровно на карточку, и все три числа
   считаются напрямую.

   .lenta создаёт сценарий (glavnaya.js), атрибута data-b у неё нет -
   поэтому в селекторе он стоит только у блока и у самой ленты .strip. */
#otzyvy[data-b] .lenta {
  display: flow-root;
}

#otzyvy[data-b] .lenta .strip[data-b] {
  padding-top: 6px;      /* тень вылезает над карточкой на 6 - это оно */
  padding-bottom: 26px;  /* было 12 на телефоне и 24 на компьютере */
  margin-top: -6px;      /* запас есть, а расстоянием не считается */
  margin-bottom: -26px;
}

#otzyvy[data-b] .lenta + .lenta {
  margin-top: 56px;      /* было 26: 24 поля ленты + 26 отбивки + 6 поля */
}

body.mob #otzyvy[data-b] .lenta + .lenta {
  margin-top: 30px;      /* было 12: 12 поля ленты + 12 отбивки + 6 поля */
}

/* Отступ СВЕРХУ у блока: вычитаем запас под тень буллетов первого экрана.

   Над блоком стоит полоса переключателя «Частным клиентам / Компаниям», у
   её секции .segblock снизу 28 точек пустого поля - место под тень
   буллетов (02_pervyj_ekran.css, чужой файл). Ритм 35/70 отмерялся от
   низа этого поля, и от белого края буллета до заголовка выходило 63,4 на
   телефоне и 98,4 на компьютере.

   Вычитаем 28 из собственного отступа блока. Чтобы вычитание сработало,
   у полосы-переключателя снят её `margin-bottom: 32px` - правило 5.1 в
   00_obshchee.css (иначе 32 перебили бы нужные 7 на телефоне).

   Замер после: 35,4 на 375 и 70,4 на 1440. Лишние 0,4 - округление
   высоты дорожки сценарием (он ставит целое число точек), не поле.

   Сила селектора: body-класс + .blk[data-b]#otzyvy против
   `main > .blk[data-b]` из раздела 1.1 файла 00_obshchee.css -
   перебивает идентификатором.

   ПРАВКА 04.09.2026 (приёмка Павла, В-2): правило привязано к ГЛАВНОЙ
   (body.template-homepage). Вычитание 28 существует из-за полосы
   переключателя «Частным клиентам / Компаниям», которая стоит над
   отзывами только на главной. Файл же подключён и к страницам услуг -
   там полосы нет, и вычитание давало 42 вместо канонных 70: Павел
   увидел это на всех страницах кластера апостиля. Теперь на услугах
   работает общий ритм (guide.css: .blk + .blk -> var(--sp-block)).

   Откат: убрать body.template-homepage из селектора - на услугах
   вернутся 42. */
body.template-homepage main > .blk[data-b]#otzyvy {
  margin-top: calc(var(--sp-block) - 28px);
}


/* ── Видимые кнопки листания лент ─────────────────────────────────────────

   Павел 19.08.2026, несколько раз подряд: «не крутятся отзывы, никак»,
   «плашки, где Яндекс, Гугл и так далее, не крутятся».

   Разбор. Замерами лента листалась исправно - настоящее нажатие мышью
   давало сдвиг ровно 979 точек, и с выключенными системными анимациями
   тоже. Дефекта в работе не было. А вот на снимке экрана видно, в чём
   дело: кнопки - серые кружки 38x38 с прозрачностью 0,28, и стоят они
   ПОВЕРХ содержимого, налезая на текст отзыва. На белой карточке такой
   кружок почти не читается, и человек просто не понимает, что лента
   листается. То есть чинить надо не механику, а заметность.

   Что сделано: кнопка становится белой с бордовой стрелкой, с рамкой и
   тенью - как отдельный предмет управления, а не пятно поверх текста.
   Размер 44 точки: это принятый минимум для попадания пальцем, и такой
   кружок видно сразу.

   Цвета фирменные: бордовый #8C1821 - тот же, что у кнопок сайта.

   Откат: удалить этот раздел - вернутся полупрозрачные серые кружки из
   glavnaya.css, раздел 913. */
body #otzyvy .lentabtn {
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid rgba(27, 27, 27, .12);
  box-shadow: 0 4px 14px -4px rgba(27, 27, 27, .35);
  color: #8c1821;
  font-size: 24px;
}

/* Наведение - только при настоящем курсоре (решение Павла
   08.09.2026, правило 4.5 в bloki/00_obshchee.css: на сенсорном
   экране :hover не отпускает и залипает после касания).
   Откат: снять @media. */
body #otzyvy .lentabtn:focus-visible {
  background: #8c1821;
  border-color: #8c1821;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  body #otzyvy .lentabtn:hover {
    background: #8c1821;
    border-color: #8c1821;
    color: #fff;
  }
}

/* Кнопки отодвинуты за край ленты, чтобы не лежать на тексте отзыва.
   Место под них есть: полоса шире колонки страницы.
   Откат: вернуть left/right 6px. */
body #otzyvy .lentabtn.prev { left: -10px; }
body #otzyvy .lentabtn.next { right: -10px; }


/* ── Кегль 13: отзывы (диктовка Павла 20.08.2026) ─────────────────────────

   Правки из книги замера «ШРИФТЫ_МОБИЛЬНЫЕ применить на стр. О компании».
   Число кегля - переменная --kegl-melkij, задана в
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\00_obshchee.css

   Было: количество отзывов на площадке 10,8px, текст отзыва 13,5px,
   кнопка «Ещё» / «Свернуть» 12px. Стало: 13px у всех трёх.

   Веса: у количества тот же селектор, что выше по файлу (перебивает
   порядком); у текста эталон .rev[data-b] p[data-b] (0,3,1), здесь
   (1,3,1); у кнопки glavnaya.css .strip .rev .rev-tog (0,3,0), здесь
   (1,3,0). !important нигде не нужен.

   Откат: удалить раздел.
   ─────────────────────────────────────────────────────────────────────── */
body.mob #otzyvy .plat[data-b] .pcnt[data-b] {
  font-size: var(--kegl-melkij);
}

body.mob #otzyvy .rev[data-b] p[data-b] {
  font-size: var(--kegl-melkij);
}

body.mob #otzyvy .rev[data-b] .rev-tog {
  font-size: var(--kegl-melkij);
}


/* ═══════════════════════════════════════════════════════════════════════
   Ленты отзывов - принято с «О компании» 21.08.2026
   ═══════════════════════════════════════════════════════════════════════

   ОТКУДА ПРИЕХАЛО. Павел принял вид страницы «О компании» как
   окончательный и велел перенести всё на главную. Раздел переехал сюда из
   примерочного слоя
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\test_o_kompanii_lenty.css
   Слой удалён целиком вместе со строкой подключения в home_page.html.

   Пара к сценарию
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\js\site\lenty.js
   (он тоже переехал - был test_o_kompanii_lenty.js).

   ЧТО ИЗМЕНИЛОСЬ ПРИ ПЕРЕЕЗДЕ: приставка «body.stranica-o-kompanii»
   заменена на «body», правила поставлены в конец файла - при равном весе
   с правилами выше по файлу побеждают они, порядком.

   Задание целиком:
   C:\Users\Павел\Claude\Projects\Вебсайт\ЗАДАНИЕ_ШАПКА_И_LENTY_21.08.md
   ═══════════════════════════════════════════════════════════════════════ */


/* ── О-Л1. Правый край ленты на телефоне - как левый (пункт Е.1) ──────────

   Дословно Павел: «правый край обрезан, левый нет», отдельным сообщением
   уточнено - «это про мобильную версию».

   РАЗБОР. Обе ленты блока отзывов сделаны с выносом за колонку страницы: в
   glavnaya.js у них padding 22 по бокам и margin 0 -22px. Смысл выноса -
   дать место тени карточек, не сдвигая сами карточки: содержимое ленты
   встаёт ровно по колонке.

   На телефоне вынос работает только слева. Виноват эталонный движок
   C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\etalon\dvizhok.css
   правилом `body.mob .wrap * { max-width: 100% }`. Оно запрещает ленте
   стать шире колонки, и вместо расширения в обе стороны коробка просто
   съезжает влево на 22 точки.

   Замер на 375x812 до правки: колонка 12,8-347,2, лента -9,2-325,2 при
   ширине 334,4 (равна колонке, хотя с выносом должна быть 378,4).
   Содержимое ленты при этом занимает 12,8-303,2 - слева карточки стоят по
   колонке, а справа обрываются на 44 точки раньше. Это и есть «срезанный
   правый край».

   ЛЕЧЕНИЕ. Снимаем запрет на ширину - вынос начинает работать в обе
   стороны, содержимое становится 12,8-347,2, ровно по колонке с обеих
   сторон. Чтобы правый вынос не создал горизонтальной прокрутки страницы
   (369,2 при ширине страницы 360), обёртка ленты подрезается по колонке.
   Слева лента и так уходила за экран, справа теперь подрезана - края
   выглядят одинаково.

   Подрезка только по горизонтали: тени сверху и снизу остаются видны.
   Эталон не правится - правило перебивается своим, более частным.

   Только телефон: на компьютере правило эталона не действует, вынос и так
   работает в обе стороны (замер на 1440: колонка 123-1303, лента
   101-1325).

   Откат: удалить О-Л1 - правый край снова станет короче левого. */
body.mob #otzyvy .strip {
  max-width: none;
}

body.mob #otzyvy .lenta {
  overflow-x: clip;
  overflow-y: visible;
}


/* ── О-Л2. Кнопки листания отзывов: прозрачный кружок на карточке ────────

   Пункты Е.3, Е.6 и Е.7 задания 21.08. Дословно: «кнопки листания
   разместить на самом отзыве, обе»; «вид кнопок: кружок, но максимально
   прозрачный, чтобы не мешал тексту, и маленькая аккуратная стрелка на
   нём»; «на компьютере стрелки сейчас исчезли - вернуть».

   ИСТОРИЯ. 20.08 Павел просил кружок убрать совсем и оставить серую
   стрелку; тогда же, чтобы стрелка не лежала на тексте, на широком экране
   её вынесли за край ленты. 21.08 решение изменено: кружок возвращается,
   но прозрачный.

   ПОЧЕМУ НА КОМПЬЮТЕРЕ СТРЕЛКИ ПРОПАЛИ. Из-за того самого выноса за край.
   Замер на 1440: у страницы есть обрезающая обёртка div.device с
   overflow-x: clip, её края 107-1319, а вынесенная стрелка стояла на
   82-110 - почти целиком снаружи, и document.elementFromPoint в её центре
   возвращал body, а не кнопку. То есть стрелка не «исчезла», а была
   срезана обёрткой.

   Вынос больше не нужен: Павел просит кнопки НА карточке. Ставим их внутри
   колонки, по 6 точек от края, - они заведомо внутри обрезки и видны на
   любой ширине. Это отменяет прежние -10px из раздела выше по файлу.

   ПРОЗРАЧНОСТЬ. Заливка белая с прозрачностью 0,42 и почти незаметная
   рамка: текст под кружком читается, а сам кружок виден как предмет
   управления. При наведении и с клавиатуры кружок густеет, стрелка
   краснеет фирменным цветом - становится понятно, что он нажимается.

   РАЗМЕР. Кружок 30 точек, знак 15 - «маленькая аккуратная стрелка».
   Прежние 44 точки непрозрачного белого закрывали текст, из-за чего всё и
   переделывалось второй раз.

   Откат: удалить О-Л2 - вернутся кружки 44 точки из раздела выше. */
body #otzyvy .lentabtn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(27, 27, 27, .10);
  border-radius: 50%;
  box-shadow: none;
  background: rgba(255, 255, 255, .42);
  color: #63676C;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* Наведение - только при настоящем курсоре (решение Павла 08.09.2026,
   правило 4.5 в bloki/00_obshchee.css: на сенсорном экране :hover не
   отпускает и залипает после касания). Обход клавишей отделён: он обязан
   работать на любом устройстве. Откат: снять @media. */
body #otzyvy .lentabtn:focus-visible {
  background: rgba(255, 255, 255, .85);
  border-color: rgba(27, 27, 27, .18);
  color: #8C1821;
}

@media (hover: hover) and (pointer: fine) {
  body #otzyvy .lentabtn:hover {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(27, 27, 27, .18);
    color: #8C1821;
  }
}

body #otzyvy .lentabtn:focus-visible {
  outline: 2px solid #8C1821;
  outline-offset: 2px;
}

/* На карточке, а не за краем ленты: 6 точек от колонки страницы. */
body #otzyvy .lentabtn.prev { left: 6px; }
body #otzyvy .lentabtn.next { right: 6px; }