/* ═══════════════════════════════════════════════════════════════════════
   Рекомендации корпоративных заказчиков
   ─────────────────────────────────────
   Окно письма, скан с увеличением, пересказ, ФИО и должность подписанта, стрелки листания.

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

   Заведено 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: компактная карточка на телефоне.

   Диктовка Павла: «Рекомендации корпоративных заказчиков: оставить
   название работы - „Локализация инструкций для бытовой техники“ - чтобы
   оно подсвечивалось красным, понятно, что можно ткнуть и оно раскроется,
   а ниже скан письма. Чтобы этот блок целиком легко заходил в один
   экран».

   Что видно на телефоне в свёрнутом виде: название работы красным и под
   ним скан письма. Пересказ, имя подписанта, должность и логотип уходят
   под название - их показывает нажатие. Текст из разметки не убирается,
   поисковик видит его целиком; прячет и раскрывает сценарий
   pisma_kompaktno в js/site/glavnaya.js.

   Название превращено в кнопку .pismo-tog. На компьютере кнопка выглядит
   ровно как прежний заголовок (шрифт, цвет и вес наследуются), поэтому
   правила ниже, кроме общего сброса кнопки, действуют только на телефоне.

   Замер на 375px: карточка была 795px в высоту при экране 812px - блок
   в экран не помещался; стала 369px. Весь раздел с заголовком - 463px.

   Откат: удалить этот раздел и функцию pisma_kompaktno из
   js/site/glavnaya.js - карточка снова развернётся целиком.
   ─────────────────────────────────────────────────────────────────────── */

/* Кнопка-название: на компьютере неотличима от прежнего абзаца. */
.blk.pisma .pismo-zagolovok .pismo-tog {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  /* на компьютере пересказ раскрыт всегда - нажимать не на что,
     поэтому и курсор обычный */
  cursor: default;
}

.blk.pisma .pismo-zagolovok .pismo-tog:focus-visible {
  outline: 2px solid #8c1821;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  /* Название - фирменным красным и с уголком: видно, что можно ткнуть. */
  .blk.pisma .pismo-zagolovok .pismo-tog {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    color: #8c1821;
    cursor: pointer;
  }

  .blk.pisma .pismo-zagolovok .pismo-tog::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: .35em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .blk.pisma .pismo-zagolovok .pismo-tog[aria-expanded="true"]::after {
    margin-top: .55em;
    transform: rotate(-135deg);
  }

  /* Свёрнутое прячем. Отдельное правило обязательно: у .pismo-niz свой
     display: flex, он сильнее браузерного [hidden] { display: none }. */
  .blk.pisma .pismo-tekst[hidden],
  .blk.pisma .pismo-niz[hidden] {
    display: none;
  }

  /* Карточка: воздух убран, скан сразу под названием. */
  .blk.pisma .pismo {
    gap: 8px;
    padding: 10px 12px;
  }

  .blk.pisma .pismo-osnova {
    gap: 6px;
  }

  .blk.pisma .pismo-zagolovok {
    margin: 0;
  }

  .blk.pisma .pismo-niz {
    margin-top: 8px;
  }

  /* Скан крупнее прежнего: он теперь главное, что видно в карточке. */
  .blk.pisma .pismo-skan {
    width: 200px;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   Правка 18.08.2026: кнопке скана задан свой цвет - иначе в Safari на
   iPhone она голубая.

   Что нашёл контроль. У button.pismo-skan (их на странице четыре) цвет не
   задавало ни одно правило: в glavnaya.css, раздел «скан письма», стоит
   только `border: 0; background: none`, а `color` не назначен. Замер на
   живой странице показал `color: rgb(0, 0, 0)` и `border-color:
   rgb(0, 0, 0)` - это не наш чёрный #1B1B1B = rgb(27, 27, 27), а «цвет не
   назначен»: браузер подставляет свой системный. В Chrome на компьютере
   он чёрный, поэтому на стенде дефекта не видно, а в Safari на iPhone -
   системный голубой #007AFF. Ровно на это Павел и жаловался: «у тебя
   остался он синий».

   Где это вылезло бы у посетителя. Кнопка - обёртка вокруг картинки
   письма, своего текста у неё нет, но цвет наследуют:
     · подпись картинки (alt), если скан не загрузился;
     · кольцо фокуса при обходе страницы с клавиатуры;
     · рамка кнопки - `border: 0` обнуляет ширину, но не цвет, и
       computed border-color остаётся «системным».
   В сегменте «Частным» раздел писем скрыт, в «Компаниям» кнопки видны:
   замер дал 200x303 px на телефоне и 170x258 px на компьютере.

   Что задано:
     · color: #1B1B1B - наш чёрный, тот же, что у текста сайта;
     · border-color: #E0E0EC - тот же серый, что у соседних кнопок
       листания .pismo-strelka в этом же блоке. Ширина рамки остаётся 0,
       то есть на вид ничего не меняется; цвет задан, чтобы в вычисленных
       стилях не оставалось системного значения;
     · своё кольцо фокуса фирменным красным - как у .pismo-tog выше.
       Без него Safari рисует кольцо своим системным голубым, и одного
       color для этого мало.

   Правило стоит вне @media: кнопка видна и на телефоне, и на компьютере.

   Откат: удалить этот раздел - кнопка снова останется без цвета
   (чёрная в Chrome, голубая в Safari на iPhone).
   ─────────────────────────────────────────────────────────────────────── */
.blk.pisma .pismo-skan {
  color: #1b1b1b;
  border-color: #e0e0ec;
}

.blk.pisma .pismo-skan:focus-visible {
  outline: 2px solid #8c1821;
  outline-offset: 3px;
}

/* ───────────────────────────────────────────────────────────────────────
   Правка 19.08.2026: название работы крупнее и по центру, должность мельче.

   Задания Павла в справочнике кеглей телефонной версии
   (C:\Users\Павел\Claude\Projects\Вебсайт\ШРИФТЫ_МОБИЛЬНЫЕ 2.docx,
   таблица «Письма-рекомендации»):
     · «Название работы в письме» - «Сделать 16 px. Написать по центру»;
     · «Должность подписанта» - «Сделать 13,5 px».

   1. НАЗВАНИЕ РАБОТЫ. Кегль 14 -> 16 (крупная строка образца «24/7»).
      Множитель 1,35 оставлен прежний, поэтому межстрочный 18,9 -> 21,6.
      Кегль ставим абзацу .pismo-zagolovok, а не кнопке: у кнопки стоит
      `font: inherit` (раздел выше), она берёт кегль у абзаца сама, и два
      числа в файле не разъедутся.

      Выключка по центру. Кнопка .pismo-tog - это flex со
      `space-between`: слева текст, справа уголок-шеврон ::after. Если
      просто поставить `justify-content: center`, шеврон приклеится к
      последнему слову и центр съедет на его ширину. Поэтому шеврон
      уводим из потока в правый край строки (position: absolute), а
      кнопке даём симметричные поля 18px слева и справа - тогда середина
      текста совпадает с серединой карточки. Приём тот же, что у
      названий способов в блоке «Как получить готовый перевод»
      (C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\bloki\07_kak_poluchit.css,
      раздел 2-5).

      Оба состояния шеврона переписаны заново: в прежних правилах поворот
      задан одним `transform`, а к нему теперь добавлен сдвиг
      translateY(-50%) - без него уголок уехал бы к верхнему краю строки.

   2. ДОЛЖНОСТЬ ПОДПИСАНТА. Кегль 15 -> 13,5 - как у имени подписанта и
      пересказа письма в этой же карточке. Прежние 15px заданы в
      glavnaya.css, раздел 8 добавки цветов; перебиваем той же формой
      селектора с припиской body, иначе правило не выиграет.

   Компьютер не задет: весь раздел стоит в @media (max-width: 760px).
   Замер на 1440 до и после: название 16 / 23,2 слева, должность 15 /
   21,75.

   Замер на 375 до: название 14 / 18,9, выключка слева, середина текста
   не совпадала с серединой карточки; должность 15 / 20,25.
   Замер на 375 после: название 16 / 21,6 по центру; должность 13,5 /
   18,23.

   Откат: удалить этот раздел - вернутся 14px слева и должность 15px.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body .blk.pisma .pismo-zagolovok {
    font-size: 16px;
    line-height: 1.35;
    text-align: center;
  }

  body .blk.pisma .pismo-zagolovok .pismo-tog {
    position: relative;
    justify-content: center;
    gap: 0;
    padding: 0 18px;
    text-align: center;
  }

  body .blk.pisma .pismo-zagolovok .pismo-tog::after {
    position: absolute;
    right: 2px;
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%) rotate(45deg);
  }

  body .blk.pisma .pismo-zagolovok .pismo-tog[aria-expanded="true"]::after {
    margin-top: 0;
    transform: translateY(-50%) rotate(-135deg);
  }

  body .blk.pisma .pismo-dolzhnost {
    font-size: 13.5px;
  }
}


/* ── Кегль 13: письма-рекомендации (диктовка Павла 20.08.2026) ────────────

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

   Было 13,5px у пересказа письма, ФИО и должности подписанта. Стало 13px.

   Веса: пересказ - glavnaya.css .blk.pisma .pismo-tekst (0,3,0); ФИО -
   только эталонное `p` из dvizhok.css (0,0,1); должность - правило этого
   же файла в @media 760 (0,3,1). Здесь у всех (1,2,1) - перебивает без
   !important.

   Откат: удалить раздел.
   ─────────────────────────────────────────────────────────────────────── */
body.mob #rekomendacii .pismo-tekst,
body.mob #rekomendacii .pismo-imya,
body.mob #rekomendacii .pismo-dolzhnost {
  font-size: var(--kegl-melkij);
}

/* ───────────────────────────────────────────────────────────────────────
   Карточка без скана. У двух писем страницы «Перевод инструкций» скана нет
   ни в медиатеке, ни на странице корпоративных рекомендаций действующего
   сайта. Решение Павла 26.08.2026: карточка выводится без скана, а место
   под него остаётся пустым - иначе соседние карточки ленты разной ширины.
   ─────────────────────────────────────────────────────────────────────── */
.blk.pisma .pismo-skan--net {
  cursor: default;
}

/* На телефоне место под скан не резервируется: карточка идёт в одну
   колонку, и пустой блок оставлял бы дыру под заголовком (замер
   26.08.2026 на 375). */
@media (max-width: 760px) {
  .blk.pisma .pismo-skan--net {
    display: none;
  }

  /* Карточка занимает столько, сколько занимает её содержимое. Иначе лента
     равняет все карточки по самой высокой - той, где есть скан, - и под
     карточкой без скана остаётся пустая треть экрана (замер 26.08.2026). */
  .blk.pisma .pisma-rail {
    align-items: flex-start;
  }
}