/* Продающие элементы блога (канон, раздел 17). Задание Павла 30.08.2026.

   Файл подключают только страницы блога: 15 статей из реестра
   home/blog_cta.py и страница-список /blog/. На остальных перенесённых
   страницах его нет, их вид не меняется.

   Что здесь НЕ задаётся:
   - цвет, градиент, постамент, наведение и нажатие кнопки - единое правило
     кнопок сайта в bloki/00_obshchee.css (селектор a.tp-knopka уже в его
     списках); тут только размер и воздух, теми же числами, что у
     страниц услуг (tehperevod.css, «Кнопки внутри перенесённых разделов»);
   - отклик карточек услуг на наведение - общий, bloki/00_obshchee.css,
     раздел 4.3 (селектор .smz li уже в его списках; канон, раздел 5г);
   - вид формы заявки - bloki/14_zayavka.css (класс zayavka-blok);
   - сетка и карточки статей - blog.css (те же, что на странице-списке).

   Плавная прокрутка к форме: решение Павла 30.08.2026 - кнопка врезки
   ведёт прокруткой к форме в конце. Правило стоит в этом файле и потому
   действует только на страницах блога: у них нет механизма возврата к
   заголовку, которому программная плавность могла бы помешать. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Типографика статьи - заголовки по центру, единый ритм, картинки по
   центру - живёт в ОБЩЕМ файле css/site/tekstovaya_stranica.css: те же
   правила нужны разделу «Вакансии», и держать их в двух местах нельзя.
   Здесь - только продающие элементы блога. */

/* Заголовки компонентов держат свой ритм: они не часть текста статьи. */
.pblk p.bcta-k3-zagolovok,
.pblk p.bcta-k5-zagolovok {
  margin-top: 42px;
}

/* ── Картинки статей - один размер (ТЗ Павла 01.09.2026) ────────────
   Было: картинка выводилась во всю свою величину, и у больших статей она
   занимала весь первый экран - текста рядом не видно. Эталон, названный
   Павлом, - картинка статьи про обращение к жителю Китая: замер на
   действующем сайте 798 на 400, то есть высота жёсткая, ширина по колонке.

   Правило стоит в ФАЙЛЕ БЛОГА, а не в общей типографике текстовых
   страниц: у раздела «Вакансии» картинок такого рода нет, и трогать их
   вид незачем.

Как это устроено сейчас (решение Павла 02.09.2026, вторая правка).

   Место под картинку - ФИКСИРОВАННОЕ, размером с фотографию 15 на 10
   сантиметров. Картинка вписывается в него целиком, в своём масштабе и
   своей пропорции (object-fit: contain): влезла по ширине - остаётся
   воздух сверху и снизу, влезла по высоте - по бокам. Так и задумано:
   «нам просто посмотреть, как эти картинки влезают в периметр 10 на 15 в
   своём размере».

   Картинка НЕ обрезается. Первая редакция 01.09.2026 задавала жёсткую
   высоту с object-fit: cover, и от снимков показывалась только середина -
   «где ты в ТЗ увидел, что её надо обрезать».

   Сантиметры здесь настоящие: в CSS 1cm = 37,8 точки, значит 15 на 10
   сантиметров - это 567 на 378 точек. На узком экране место сжимается по
   ширине, пропорция 3:2 держится.

   ВАЖНО: правило действует ТОЛЬКО на тело статьи (класс blog-telo).
   Первая редакция 01.09.2026 была написана через .pblk и задела
   карточки на странице списка /blog/ - их картинки стали вдвое выше и
   показывались куском. Замечание Павла 02.09.2026: «картинки должны
   вернуться в своё положение, показываться ровно такие, какие они
   есть». Карточки списка и карусели живут по своим правилам в
   blog.css: ширина по карточке, высота по пропорции файла. */

.pblk.blog-telo img {
  display: block;
  width: min(15cm, 100%);
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

/* ── Единая форма продающих блоков (ТЗ Павла 01.09.2026) ────────────
   Решение: у всех блоков во всех статьях блога ОДИН вид - всё на белом и
   по центру, без фона, черты слева, красной черты сверху, рамки, скругления
   и тени. «Выделяться блок должен текстом, а не рамкой и фоном».

   До этого призыв был строкой на розовой подложке с красной чертой слева,
   а врезка - белой карточкой с чертой сверху, скруглением и тенью.

   Откат: вернуть правила из истории файла (коммит до 01.09.2026). */

.bcta-yakor,
.bcta-vrezka,
.bcta-usluga {
  margin: 30px 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

/* Строка призыва. Ведёт в окно заказа, как и кнопка под плашками
   (решение Павла 01.09.2026): на страницу услуги она больше не ведёт,
   услуга остаётся только источником плашек. */
.pblk p.bcta-prizyv {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  color: #2f3336;
}

/* Первая строка блока - ссылка, но выглядит как текст: вид у всех
   блоков один (ТЗ, раздел 1), а красным в блоке остаются только числа
   плашек и кнопка. Подчёркивание при наведении показывает, что строка
   нажимается. */
.pblk p.bcta-prizyv a,
.pblk p.bcta-zagolovok a {
  color: inherit;
  text-decoration: none;
}

.pblk p.bcta-prizyv a:hover,
.pblk p.bcta-zagolovok a:hover {
  text-decoration: underline;
}

/* ── Ряд плашек внутри блока ────────────────────────────────────────
   Плашка - готовый компонент страницы услуги (.pl, .pnum, .pbold), и
   числа типографики те же: цифра 28, подпись 16 на компьютере, 20 и 14
   на телефоне (bloki/02_pervyj_ekran.css). Здесь только раскладка ряда:
   на странице услуги плашки лежат в сетке первого экрана, а тут - своим
   рядом внутри текста статьи.

   Плашек всегда четыре (решение Павла 01.09.2026). */

.bcta-plashki {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
  text-align: center;
}

.bcta-plashki .pl {
  min-width: 0;
}

.bcta-plashki .pnum {
  display: block;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  color: var(--krasnyj, #8c1821);
}

.bcta-plashki .pbold {
  display: block;
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 650;
  color: #1e1f22;
  text-wrap: balance;
}

/* Пояснение под подписью есть ровно у одного набора - китайского
   (решение Павла 01.09.2026, статья про обращение к жителю Китая). */
.bcta-plashki .ptext {
  display: block;
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 21.75px;
  font-weight: 400;
  color: #3d4247;
}

@media (max-width: 900px) {
  .bcta-plashki {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .bcta-plashki .pnum {
    font-size: 20px;
  }

  .bcta-plashki .pbold {
    font-size: 14px;
  }

  .bcta-plashki .ptext {
    font-size: 13px;
    line-height: 17.55px;
  }
}

/* Заголовок врезки - стилизованный абзац, НЕ H-тег: структура заголовков
   статьи для поиска не меняется (канон, раздел 17.1, пункт 3). */
.pblk p.bcta-zagolovok {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  color: #2f3336;
}

.pblk p.bcta-podvodka {
  margin: 0 auto 18px;
  max-width: 640px;
  color: #54595f;
}

.pblk p.bcta-dejstvie {
  margin: 0 0 14px;
}

/* Размер кнопки - числа страниц услуг: 240 x 51,2, овал. Подпись длиннее -
   растёт ширина, а не высота (канон, раздел 3). */
.bcta-vrezka a.tp-knopka,
.bcta-vrezka a.tp-knopka:link,
.bcta-vrezka a.tp-knopka:visited,
.bcta-vrezka a.tp-knopka:hover,
.bcta-zayavka a.tp-knopka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  height: 51.2px;
  padding: 0 28px;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

/* Строки доверия «с 2007 года · 1500+ переводчиков · 65 языков» больше
   нет: убрана решением Павла 01.09.2026 вместе с рамкой и фоном врезки.
   Правило снято, разметка её не выводит (blog_cta.py, _k2_razmetka). */

/* ── К3. Блок заявки ────────────────────────────────────────────────── */

/* Отступ прокрутки: якорь встаёт ниже липкой шапки, а не под ней. */
#zayavka-blog {
  scroll-margin-top: 96px;
}

.pblk p.bcta-k3-zagolovok {
  margin: 40px 0 18px;
  text-align: center;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
}

/* Телефон: тот же кегль, что у H2 статьи и у заголовка «Материалы по
   теме» - 20 / 24 (канон, раздел 18.1.1).

   Правка Павла 07.09.2026: «заголовок для формы обратной связи
   "Отправьте документ на расчёт" просто гигантского размера, надо
   вернуть обычный». Мобильное правило у этого заголовка отсутствовало -
   у соседнего, «Материалы по теме», оно есть с самого начала, - и на
   телефоне он оставался 28 px рядом с двадцатыми H2 статьи. Разница в
   восемь пунктов и читалась как «гигантский».

   Отступы тоже приводятся к соседу: 28 сверху, 12 снизу. */
@media (max-width: 900px) {
  .pblk p.bcta-k3-zagolovok {
    margin: 28px 0 12px;
    font-size: 20px;
    line-height: 24px;
  }
}

/* ── К5. «Материалы по теме» и «Популярные услуги» ──────────────────
   Оба заголовка по виду и по отступам - как H2 текстовой страницы
   (tekstovaya_stranica.css): 28/33,6, по центру, 42 сверху и 14 снизу; на
   телефоне 20/24, 28 и 12. H-тегами они не становятся - канон, раздел
   17.1, пункт 3, подтверждено решением Павла 01.09.2026. */

.pblk p.bcta-k5-zagolovok {
  margin: 42px 0 14px;
  text-align: center;
  font-size: 28px;
  line-height: 33.6px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .pblk p.bcta-k5-zagolovok {
    margin: 28px 0 12px;
    font-size: 20px;
    line-height: 24px;
  }
}

/* Карусель статей - решение Павла 30.08.2026: три карточки в ряд,
   кнопки влево-вправо. Лента - обычная горизонтальная прокрутка с
   привязкой к карточкам: кнопки листает blog_cta.js, пальцем и колесом
   лента живёт и без сценария. Полоса прокрутки спрятана - её роль
   выполняют стрелки. */
.bcta-karusel {
  position: relative;
}

.bcta-lenta {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.bcta-lenta::-webkit-scrollbar {
  display: none;
}

.bcta-kartochka {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
}

@media (max-width: 1000px) {
  .bcta-kartochka {
    flex-basis: calc((100% - 24px) / 2);
  }
}

/* Телефон: карточка во всю ширину ленты - правка Павла 06.09.2026
   (проверка мобильных): «должна чётко показываться в экран одна статья»,
   соседние не наезжают ни слева, ни справа. Было 82% - следующая
   карточка выглядывала краем, и статьи стояли обрезанными. Шаг стрелок
   считает blog_cta.js по настоящей ширине карточки, положение всегда
   кратно шагу. */
@media (max-width: 640px) {
  .bcta-kartochka {
    flex-basis: 100%;
  }
}

/* Стрелки: круглые, поверх лент по краям, на высоте картинок. */
.bcta-strelka {
  position: absolute;
  top: 88px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--tenj-bloka, 0 4px 18px rgba(0, 0, 0, .18));
  color: var(--krasnyj, #8c1821);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .18s ease;
}

.bcta-strelka--nazad {
  left: -12px;
}

.bcta-strelka--vpered {
  right: -12px;
}

.bcta-strelka:disabled {
  opacity: .35;
  cursor: default;
}

@media (max-width: 640px) {
  .bcta-strelka {
    top: 72px;
    width: 38px;
    height: 38px;
  }
}

/* Плашка рубрики на карточке - замечание Павла 30.08.2026. */
.pblk p.bcta-rubrika {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #f4eeee;
  color: var(--krasnyj, #8c1821);
  font-size: 13px;
  font-weight: 600;
}

/* Заголовок карточки статьи - абзац с видом заголовка карточки блога
   (blog.css, .blog-kartochka h2): H2 в статье добавлять нельзя. */
.pblk p.blog-kzag {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.pblk p.blog-kzag a {
  color: var(--krasnyj, #8c1821);
  text-decoration: none;
}

.pblk p.blog-kzag a:hover {
  text-decoration: underline;
}

/* Карточки услуг: та же разметка ul.smz, что у блока «С этой услугой
   заказывают» на страницах услуг. Числа - из tehperevod.css, «Смежные
   услуги» (первоисточник вида); сюда перенесены потому, что tehperevod.css
   на статьях блога не подключается целиком. Отклик наведения - общий
   (00_obshchee.css, .smz li в списках раздела 4.3). Вынос правил .smz в
   общий файл - отдельный ход, не при сборке блога. */
.bcta-po-teme .smz {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.bcta-po-teme .smz li {
  background: #fff;
  border-radius: var(--radius-karta, 16px);
  box-shadow: var(--tenj-bloka, 0 4px 18px rgba(0, 0, 0, .08));
}

.bcta-po-teme .smz a {
  display: block;
  padding: 28px 24px;
  text-align: center;
  color: var(--krasnyj, #8c1821);
  text-decoration: none;
  font-weight: 650;
  font-size: 18px;
}

@media (max-width: 900px) {
  .bcta-po-teme .smz {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bcta-po-teme .smz a {
    padding: 18px 16px;
    font-size: 16px;
  }
}

/* ── Сведения о статье: дата и просмотры ────────────────────────────── */

/* Решение Павла 31.08.2026: у каждой статьи показываются дата публикации
   и число просмотров. Дата - из архива действующего сайта, просмотры -
   из Метрики (команда daty_i_prosmotry). */
.pblk p.blog-svedeniya {
  margin: 0 0 8px;
  color: #63676c;
  font-size: 14px;
}

.blog-tochka {
  margin: 0 6px;
}

/* ── CTA-карточка страницы-списка: ОТМЕНЕНА 31.08.2026 ──────────────── */

/* Павел: «на каждой странице блога нужно что-то одно - либо плашка
   „Нужен перевод“, либо форма „Отправьте документ на расчёт“; оставить
   форму по центру, плашку убрать». Разметка карточки снята из шаблона;
   правила ниже оставлены на случай возврата - без разметки они молчат. */

.blog-kartochka-cta {
  display: flex;
}

.blog-cta-ssylka {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 28px 24px;
  background-color: var(--krasnyj, #8c1821);
  background-image: var(--knopka-fon);
  border-radius: var(--radius-karta, 16px);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .18s ease;
}

.blog-cta-ssylka:hover {
  box-shadow: 0 10px 20px -8px rgba(140, 24, 33, .55);
}

.blog-cta-ssylka p {
  margin: 0;
  color: #fff;
}

.blog-cta-zag {
  font-size: 22px;
  font-weight: 700;
}

.blog-cta-tekst {
  font-size: 15px;
  opacity: .92;
}

.blog-cta-strelka {
  font-weight: 650;
}