/* Продающие элементы блога (канон, раздел 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;
}

/* Схема внутри текста статьи - в обертке figure с классом shema-v-tekste.

   Проверка канона 23.09.2026 по статье «Что такое апостиль»: схема стояла
   голым img, и абзац под ней начинался вплотную - просвет 0 точек (канон
   5и: у картинки видимый просвет до соседнего текста сверху и снизу).
   У эталона «Перевод рекламы» картинки в тексте обернуты в figure и
   стоят с просветом 16 / 16 - здесь те же 16. Боковые поля figure
   браузера (по 40) сняты: иначе на телефоне схема сужается на 80 точек.

   Правило только для этого класса: у картинок других статей свои обертки
   (замечание Павла: правка названного блока не расползается на чужие).

   Откат: удалить правило и обертку в сборщике статьи
   C:\Users\Павел\Claude\Projects\SEO\tools\statya_apostil_pilot.py. */
.pblk.blog-telo figure.shema-v-tekste {
  margin: 16px 0;
}

/* ── Единая форма продающих блоков (ТЗ Павла 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;
}

/* ── Статья «Что такое апостиль»: блок «Образцы апостилей» (24.09.2026) ──

   Павел 24.09.2026: схему бумажного апостиля убрать, вместо нее - три снимка
   «сделать таким же образом, как на "Апостиле"» (блок «Образцы апостилей»).
   Стили того блока живут в tehperevod.css и на блог не подключаются
   (правило сборки стилей), поэтому раздел свой.

   Вторая правка Павла 24.09.2026 (вечер): «чтобы не было полей посередине,
   слева и справа - снимки стоят ровно в прямоугольном блоке по размеру
   самого скриншота, побольше; сверху и снизу полоска нашего фирменного
   красного, чтобы привлекал внимание; при клике полоска убирается - это
   просто рамка; подписи по центру каждого рисунка». Отсюда: снимок на всю
   ширину колонки, рамка ровно по снимку - красные полосы 6 точек сверху и
   снизу, по бокам тонкая линия и мягкая тень; крупный снимок в окне - без
   полос; подпись по центру. На телефоне снимок 70 % ширины (не шире 280),
   полосы 4 точки, лупа в углу видна всегда.
   Крупный снимок - окно .obrazec-zum (сценарий blog_cta.js), вид как у
   .pismo-zum главной.

   Откат: вернуть раздел из blog_cta.css.do_ukrasheniya (черновики сессии)
   или удалить раздел целиком вместе с блоком в статье. */
.pblk.blog-telo .obrazcy-apostilya {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 24px;
  margin: 18px 0 20px;
  align-items: stretch;
}

.pblk.blog-telo .obrazcy-apostilya .obrazec {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.pblk.blog-telo .obrazcy-apostilya .obrazec-nomer {
  display: flex;
  width: 100%;
  margin: 0 0 6px;
  color: var(--krasnyj, #8c1821);
  font-size: 15px;
  line-height: 23.25px;
  font-weight: 700;
}

/* Рамка ровно по снимку: полосы - границы самой кнопки, поэтому окно
   крупного снимка (там только img) показывает снимок без них. */
.pblk.blog-telo .obrazcy-apostilya .obrazec-snimok {
  position: relative;
  display: block;
  align-self: start;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 6px solid var(--krasnyj, #8c1821);
  border-bottom: 6px solid var(--krasnyj, #8c1821);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(27, 27, 27, .10), 0 14px 28px -16px rgba(27, 27, 27, .45);
  cursor: zoom-in;
  transition: box-shadow .2s, transform .2s;
}

/* Общее правило картинок статьи (.pblk.blog-telo img выше) держит рамку 3:2
   и вписывает в нее снимок - стоячий лист выходил маленьким с серыми полями
   по бокам (замер 24.09: 272 на 181). Образцу рамка 3:2 не нужна: высота по
   пропорции файла.
   До загрузки картинки место держится в пропорции 3:4 - это рамка образцов по
   канону (все образцы статей 1500 x 2000). Было «auto»: пока ленивая картинка
   не загрузилась, ее высота была 0, текст под образцом прыгал, а сценарий
   выравнивания отступов считал по пустому месту (найдено на боевом 26.10.2026).
   Откат: вернуть «auto» (копия blog_cta.css.do_mesto_2610). */
.pblk.blog-telo .obrazcy-apostilya .obrazec-snimok img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 3 / 4;
  object-fit: fill;
  margin: 0;
  border-radius: 0;
  background: #f5f6f7;
}

.pblk.blog-telo .obrazcy-apostilya .obrazec-snimok::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(140, 24, 33, .92);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3Cpath d='M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  opacity: 1;
  transition: none;
  pointer-events: none;
}

.pblk.blog-telo .obrazcy-apostilya .obrazec-snimok:focus-visible::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .pblk.blog-telo .obrazcy-apostilya .obrazec-snimok:hover {
    box-shadow: 0 0 0 1px rgba(27, 27, 27, .12), 0 18px 34px -16px rgba(27, 27, 27, .55);
    transform: translateY(-2px);
  }

  .pblk.blog-telo .obrazcy-apostilya .obrazec-snimok:hover::after {
    opacity: 1;
  }
}

/* Решение Павла 25.10.2026 (статья блога № 3): образцы в статьях блога на 30 %
   меньше - на 1366 x 768 было 377 x 503, стало около 264 x 352. Снимок и номер -
   70 % ширины колонки по центру, высота по пропорции файла. Только статьи блога
   (.blog-telo); блок образцов страниц услуг не трогается.
   Откат: удалить это правило и правки 70 % ниже (копия blog_cta.css.do_2510). */
.pblk.blog-telo .obrazcy-apostilya .obrazec-nomer,
.pblk.blog-telo .obrazcy-apostilya .obrazec-snimok {
  width: 70%;
  justify-self: center;
}

.pblk.blog-telo .obrazcy-apostilya .obrazec-podpis {
  margin: 12px 0 12px;
  font-size: 15px;
  line-height: 21.75px;
  color: #3d4247;
  text-align: center;
}

/* Узкое окно компьютера: три колонки держатся до 640, дальше - одна,
   снимок не шире 360 по центру. */
@media (max-width: 640px) {
  .pblk.blog-telo .obrazcy-apostilya {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .pblk.blog-telo .obrazcy-apostilya .obrazec {
    grid-row: auto;
    grid-template-rows: none;
  }

  .pblk.blog-telo .obrazcy-apostilya .obrazec-nomer,
  .pblk.blog-telo .obrazcy-apostilya .obrazec-snimok {
    width: min(70%, 252px); /* было min(100%, 360px), на 30 % меньше (25.10.2026) */
    margin-left: auto;
    margin-right: auto;
  }

  .pblk.blog-telo .obrazcy-apostilya .obrazec-podpis {
    font-size: 13px;
    line-height: 17.55px;
  }
}

body.mob .pblk.blog-telo .obrazcy-apostilya {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  gap: 4px;
}

body.mob .pblk.blog-telo .obrazcy-apostilya .obrazec {
  grid-row: auto;
  grid-template-rows: none;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--liniya, #d9dbde);
}

body.mob .pblk.blog-telo .obrazcy-apostilya .obrazec:last-child {
  border-bottom: 0;
}

body.mob .pblk.blog-telo .obrazcy-apostilya .obrazec-nomer {
  width: 49%; /* было 70 % и 280, на 30 % меньше (25.10.2026) */
  max-width: 196px;
  margin: 6px auto 4px;
  font-size: 12px;
  line-height: 1.2;
}

body.mob .pblk.blog-telo .obrazcy-apostilya .obrazec-snimok {
  width: 49%; /* было 70 % и 280, на 30 % меньше (25.10.2026) */
  max-width: 196px;
  margin: 0 auto;
  border-top-width: 4px;
  border-bottom-width: 4px;
  cursor: pointer;
}

/* Решение Павла 25.10.2026 (Р25-5 свода): образцы в статьях блога - без
   нумерации. В разделе статьи обычно один образец, и номер «1» над ним в
   каждом разделе Павел назвал бредом. Сборщик статей по-прежнему ставит
   span.obrazec-nomer, здесь он скрыт - и у одиночного образца, и у группы,
   на любой ширине (правило стоит после всех правил номера). Страницы услуг
   с тем же блоком не задеты: правило только под .blog-telo.
   Откат: удалить это правило (копия blog_cta.css.do_nomera_soderzhanie_2510). */
.pblk.blog-telo .obrazcy-apostilya .obrazec-nomer,
body.mob .pblk.blog-telo .obrazcy-apostilya .obrazec-nomer {
  display: none;
}

/* Без номера у образца две строки (снимок, подпись), а не три: пустая третья
   строка давала под подписью лишние 12 точек (замер 25.10 на 1366). Только
   сетка в три колонки - на узком окне и на телефоне строк сетки нет. */
@media (min-width: 641px) {
  body:not(.mob) .pblk.blog-telo .obrazcy-apostilya { grid-template-rows: auto auto; }
  body:not(.mob) .pblk.blog-telo .obrazcy-apostilya .obrazec { grid-row: span 2; }
}

/* Решение Павла 25.10.2026 (Р25-5 свода, дополнение): справа от образца не
   должно быть пустого места - «где есть картинка, место для текста просто
   становится уже по ширине, но все те же правила должны сохраняться». На
   компьютере (от 901) одиночный образец стоит слева, остальное содержимое
   раздела идет справа по своим обычным правилам: абзацы, списки, H2 и H3 с их
   отступами, врезки. Своих правил для текста рядом с образцом нет.
   - Врезки, блоки, вопросы и списки получают свой контекст раскладки
     (flow-root): их фон, рамка и маркеры встают в узкую колонку, а не под
     образец. Отступы и оформление у них прежние.
   - Таблица рядом с образцом не встает: clear уводит ее ниже, во всю ширину.
   - Раздел образец НЕ держит (правка Павла 25.10 «обтекает плохо»): если
     текст раздела короче картинки, обтекание продолжает следующий раздел -
     его H2, абзацы, врезки, - без пустого места справа. Ниже картинки уходят
     только блоки, которым нельзя стоять узко: отзывы, форма заявки,
     «Материалы по теме».
   - Место под образец - один прямоугольник: снимок 264 и подпись в его
     ширину. Справа до текста 16 точек. Сверху и снизу зазор до текста один и
     тот же и не больше строки: его ставит сценарий vyrovnyat_obrazcy в
     js/site/blog_cta.js. Стилем ровно не выходит - строки текста идут шагом
     21,75, и строка, задевшая образец, встает под него целиком. Отступы ниже
     (6 сверху, 6 снизу) - запас на случай, если сценарий не сработал.
   - Группа из нескольких образцов («Что такое апостиль», data-n > 1) остается
     сеткой в ряд, как была. На телефоне и в узком окне обтекания нет: образец
     по центру, текст под ним.
   Откат: удалить этот блок (копии blog_cta.css.do_obtekanie_2510 - до
   обтекания, blog_cta.css.do_obtekanie2_2510 - первый вариант обтекания). */
@media (min-width: 901px) {
  body:not(.mob) .pblk.blog-telo .obrazcy-apostilya[data-n="1"] {
    display: block;
    float: left;
    clear: left;
    width: min(264px, 32%);
    margin: 6px 16px 6px 0;
  }

  body:not(.mob) .st-otzyvy,
  body:not(.mob) .pblk.bcta-zayavka,
  body:not(.mob) .pblk.bcta-po-teme {
    clear: both;
  }

  body:not(.mob) .pblk.blog-telo .obrazcy-apostilya[data-n="1"] .obrazec {
    display: block;
  }

  body:not(.mob) .pblk.blog-telo .obrazcy-apostilya[data-n="1"] .obrazec-snimok {
    width: 100%;
  }

  body:not(.mob) .pblk.blog-telo .obrazcy-apostilya[data-n="1"] .obrazec-podpis {
    margin: 12px 0 0;
  }

  body:not(.mob) .pblk.blog-telo > :is(aside, figure, blockquote, details, ul, ol, hr,
      .bcta-vrezka, .bcta-usluga, .bcta-yakor, .st-blok, .st-opora, .st-sposoby) {
    display: flow-root;
  }

  body:not(.mob) .pblk.blog-telo > table {
    clear: both;
  }
}

body.mob .pblk.blog-telo .obrazcy-apostilya .obrazec-snimok::after {
  right: 8px;
  bottom: 8px;
  width: 34px;
  height: 34px;
  background-color: rgba(140, 24, 33, .92);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3Cpath d='M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 20px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  opacity: 1;
  transition: none;
}

body.mob .pblk.blog-telo .obrazcy-apostilya .obrazec-podpis {
  font-size: 13px;
  line-height: 17.55px;
  text-align: center;
  margin: 8px 0 0;
}

/* Окно крупного снимка - как .pismo-zum главной (glavnaya.css, tehperevod.css). */
.obrazec-zum {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  cursor: zoom-out;
}

.obrazec-zum img {
  max-width: 92vw;
  max-height: 94vh;
  box-shadow: 0 12px 40px -12px rgba(27, 27, 27, .5);
}

.obrazec-zum::after {
  content: "";
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M7.5 10.5h6'/%3E%3C/svg%3E"), var(--knopka-fon);
  background-position: center, center;
  background-size: 26px 26px, auto;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
}

/* Таблицы статей блога на телефоне (26.10.2026, статья 004 «Гражданство Армении»): поля ячейки 10 точек слева и
   справа (perenesyonnaya.css, .pblk td) не давали таблице в три столбца уместиться в колонку 349 - правый столбец
   уходил за край на 8 точек, а прокрутка таблицы (там же, .pblk table - display: block, overflow-x: auto) не видна,
   и текст выглядел срезанным. На телефоне в статье блога поля 6 точек: три столбца встают в колонку. Таблица шире
   этого (4 столбца и больше - правило статейника «не больше 3») по-прежнему прокручивается.
   Откат: удалить это правило (копия blog_cta.css.do_tablicy_2610). */
@media (max-width: 640px) {
  .pblk.blog-telo th,
  .pblk.blog-telo td {
    padding-left: 6px;
    padding-right: 6px;
  }
}

body.mob .pblk.blog-telo th,
body.mob .pblk.blog-telo td {
  padding-left: 6px;
  padding-right: 6px;
}