/* Start:/local/templates/ksp_krasnodar/css/style.css?1793869048229705*/
/* =============================================================================
   КСП Краснодарского края — стили сайта

   Файл разбит на именованные секции. Чтобы попасть в нужную, ищите строку
   вида  / * ---------- Название ---------- * /  (без пробелов).

   ПОРЯДОК СЕКЦИЙ
     Основа            :root, body, ссылки, .visually-hidden
     Keyboard focus    единое кольцо фокуса для всего сайта
     Версия для слабовидящих
     Topbar · Search panel · Main nav · Dropdown panel      — общая шапка
     Hero · News grid · Map section · Tiles · Links         — главная
     Breadcrumb
     News listing · Activity sub-pages · News detail · Search results
     Footer                                                 — общий подвал
     About page: history timeline / collegium / structure
     Contacts page · Section landing · Long-form text pages · Госуслуги-баннер
     Responsive                                             — все медиа-запросы
     Mobile (390px)
     Кегль контента на 2 мельче                             — все, кроме новостей

   ТОЧКИ АДАПТИВА — только эти шесть значений, других заводить не нужно:

     1680   меню чуть плотнее
     1465   ноутбучная полоса: адрес уходит из шапки, меню мельче
     1200   ГЛАВНЫЙ ПОРОГ: шапка и меню переключаются на бургер
     1100   левое меню раздела скрывается
      800   сетки схлопываются
      600   телефонная раскладка

   ДВА ПРАВИЛА, КОТОРЫЕ ЛЕГКО НАРУШИТЬ

   1. Порог 1200 продублирован в js/main.js — функция isMobileNav().
      Меняете здесь — меняйте и там, иначе CSS покажет бургер, а JS будет
      считать, что открыто десктопное мега-меню.

   2. Блоки версии для слабовидящих идут парой:
        @media (min-width: 1201px)  — крупная шкала
        @media (max-width: 1200px)  — мелкая шкала
      Границы обязаны стыковаться. Если сдвинуть одну и забыть вторую,
      между ними появится полоса ширин, где режим не увеличивает текст
      вообще — визуально это почти незаметно, а пользы от режима там нет.

   Медиа-запросы намеренно встречаются дважды для одного порога: типографика
   версии для слабовидящих живёт рядом со своей секцией в начале файла, а
   раскладка — в секции Responsive в конце. Это не дубль по недосмотру.
   ============================================================================= */

:root {
  --blue: #007AD8;
  /* Текстовый вариант фирменного синего: #007AD8 на белом даёт 4.40:1 —
     чуть ниже порога AA (4.5). #006DC4 визуально почти неотличим, но
     проходит на всех светлых подложках сайта: 5.27 на белом, 4.90 на
     --blue-pale, 4.61 на --avatar-bg. Для заливок остаётся --blue. */
  --blue-text: #006DC4;
  --blue-pale: #EFF8FF;
  --hero-accent: #C5E6FF;
  --avatar-bg: #E2F2FF;
  --text-dark: #373737;
  /* Раньше — rgba(55,55,55,.5): на белом это 2.78:1, на --blue-pale 2.72.
     Сплошной серо-синий той же роли проходит AA на всех светлых фонах
     (6.03 на белом, 5.61 на --blue-pale, 4.63 даже на --hero-accent). */
  --text-muted: #5A646E;
  /* Приглушённый белый на фирменном синем не может пройти 4.5 в принципе —
     даже сплошной белый на #007AD8 даёт лишь 4.40. Подняли с .5 (2.18:1)
     до .85 (3.6:1); режим для слабовидящих поднимает до сплошного белого. */
  --white-muted: rgba(255, 255, 255, 0.85);
  --border-light: #E5EAF0;
  --card-shadow: 0 4px 10px rgba(0, 67, 134, 0.05);
  --container-w: 1840px;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", Arial, Helvetica, sans-serif;
  /* Long Russian compounds have no break opportunities, so in a narrow cell —
     or once the low-vision mode enlarges the type — one word can push the
     whole page sideways. This only engages when a word truly doesn't fit. */
  overflow-wrap: break-word;
  color: var(--text-dark);
  background-color: var(--blue-pale);
  background-image: url("/local/templates/ksp_krasnodar/css/../assets/watermark.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 607px 614px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* iOS Safari and several Android browsers handle a fixed background badly:
   it is either promoted to its own layer and repainted on every scroll frame,
   or sized against the wrong viewport. Touch devices get a scrolling
   watermark instead — visually near-identical, no jank. */
@media (hover: none), (pointer: coarse) {
  body { background-attachment: scroll; }
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* Placeholders for pages that do not exist yet. They carry no href on
   purpose: an <a href="#"> jumps the reader back to the top of the page and
   adds a dead stop to the tab order for something that leads nowhere. The
   attribute marks every spot a real URL still has to be wired into. */
[data-stub] { cursor: default; }

/* Cards and menus carry their own affordances, but a link sitting inside a
   paragraph has nothing else to distinguish it — there it stays coloured and
   underlined so it can't be mistaken for plain text. */
.news-article__content a,
.timeline__text a,
.text-body a,
.text-note a,
.note-card p a,
.text-card > p a {
  color: var(--blue-text);
  text-decoration: underline;
}
.news-article__content a:hover,
.timeline__text a:hover,
.text-body a:hover,
.text-note a:hover,
.note-card p a:hover,
.text-card > p a:hover { text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  /* clip объявлен устаревшим, но его понимают все браузеры; clip-path —
     современная замена, поэтому оставлены оба. */
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* SVG-спрайт в подвале: вынут из потока, чтобы нулевой блок не влиял на
   раскладку. Класс вместо инлайн-атрибута style — под строгий CSP
   (style-src 'self' без 'unsafe-inline') инлайн-стили блокируются. */
.svg-sprite { position: absolute; }

/* ---------- Keyboard focus ---------- */

/* One visible focus ring for the whole site, not just the low-vision mode:
   keyboard-only navigation has to be possible in the ordinary version too.
   :focus-visible keeps it off mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* On the blue surfaces — footer, drawer, mega-menu, hero — a blue ring is
   invisible, so those switch to white. */
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.mainnav a:focus-visible,
.mainnav button:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible,
.appeal-banner a:focus-visible,
.tile--accent a:focus-visible,
.search-panel a:focus-visible,
.search-panel button:focus-visible {
  outline-color: #fff;
}

/* Браузер без :focus-visible отбрасывает правила выше целиком, и навигация с
   клавиатуры остаётся вообще без рамки. Здесь те же три набора повторены на
   обычном :focus — включаются только там, где :focus-visible не поддержан
   (Safari 15.0–15.3, Firefox < 85, Chrome < 86). В современных браузерах блок
   не разбирается, поэтому поведение при клике мышью не меняется.
   Специфичность и порядок повторяют оригинал, чтобы каскад совпадал:
   белая рамка на синих поверхностях перекрывает синюю, а чёрная рамка режима
   для слабовидящих уступает белой внутри подвала — ровно как и выше. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  summary:focus,
  [tabindex]:focus {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 2px;
  }

  html.a11y-mode :focus {
    outline: 3px solid #000;
    outline-offset: 2px;
  }

  .site-footer a:focus,
  .site-footer button:focus,
  .mainnav a:focus,
  .mainnav button:focus,
  .hero a:focus,
  .hero button:focus,
  .appeal-banner a:focus,
  .tile--accent a:focus,
  .search-panel a:focus,
  .search-panel button:focus {
    outline-color: #fff;
  }

  /* Поля поиска рисуют рамку на всём поле через :focus-within и свою
     собственную гасят намеренно — возвращать её здесь не нужно. */
  .news-search__field input:focus,
  .search-field input:focus,
  .mainnav__search input:focus,
  .search-panel__input:focus {
    outline: none;
  }
}

/* ---------- "Версия для слабовидящих" ---------- */

html.a11y-mode {
  --text-dark: #000000;
  --text-muted: rgba(0, 0, 0, 0.85);
  /* Максимум возможного на фирменном синем — сплошной белый (4.40:1). */
  --white-muted: #ffffff;
  --border-light: #6f6f6f;
}

html.a11y-mode body {
  background-image: none;
}

html.a11y-mode a:not(.btn-outline):not(.tile):not(.link-card):not(.icon-btn) {
  text-decoration: underline;
}

html.a11y-mode :focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* The mode enlarges type and opens up line spacing rather than scaling the
   page. An earlier version used zoom:1.25 on the body, which magnified the
   layout as a whole: overlays kept their pre-zoom coordinates and anything
   sized to just fit could push the page sideways. Growing the text alone
   leaves the geometry — and every overlay offset — intact. */
html.a11y-mode {
  line-height: 1.7;
}

/* The top nav bar keeps its normal size: it's a single fixed row of seven
   items already sized to just fit, and enlarging it pushes the row off screen
   at every desktop width. Everything a visitor actually reads does grow. */

/* -- Desktop scale (~1.2× of the normal sizes). Pairs with the narrow block
      below: the two must always meet at the drawer breakpoint, or the widths
      between them get neither scale. -- */
@media (min-width: 1201px) {
  html.a11y-mode .breadcrumb,
  html.a11y-mode .site-footer,
  html.a11y-mode .contact-item { font-size: 21px; }

  html.a11y-mode .section-title,
  html.a11y-mode .news-card h3 { font-size: 48px; }

  html.a11y-mode .news-block-title { font-size: 44px; }
  html.a11y-mode .news-article__title { font-size: 42px; }

  html.a11y-mode .news-feature__body h2,
  html.a11y-mode .news-card-lg__body h3,
  html.a11y-mode .person-card__name,
  html.a11y-mode .member-card__name,
  html.a11y-mode .member-activity__title,
  html.a11y-mode .contact-tile__title,
  html.a11y-mode .head-card__name,
  html.a11y-mode .dept-row__name,
  html.a11y-mode .dept-person__name,
  html.a11y-mode .section-card__title,
  html.a11y-mode .activity-card__title { font-size: 30px; }

  html.a11y-mode .text-card,
  html.a11y-mode .page-intro { font-size: 26px; }
  html.a11y-mode .text-card h2 { font-size: 40px; }
  html.a11y-mode .tabs__item { font-size: 26px; }
  html.a11y-mode .error-page__message { font-size: 40px; }
  html.a11y-mode .search-field input { font-size: 24px; }
  html.a11y-mode .error-page__btn { font-size: 36px; }
  html.a11y-mode .search-result__title { font-size: 30px; }
  html.a11y-mode .search-result__date,
  html.a11y-mode .search-result__text { font-size: 26px; }
  html.a11y-mode .filter-tag,
  html.a11y-mode .search-filters__label,
  html.a11y-mode .pager__item,
  html.a11y-mode .pager__label,
  html.a11y-mode .pager__gap,
  html.a11y-mode .search-result__tag { font-size: 19px; }

  html.a11y-mode .news-card p,
  html.a11y-mode .news-card time,
  html.a11y-mode .news-card__footer > a,
  html.a11y-mode .news-feature__body p,
  html.a11y-mode .news-card-lg__body p,
  html.a11y-mode .activity-card p,
  html.a11y-mode .activity-card__date,
  html.a11y-mode .plan-table th,
  html.a11y-mode .plan-table td,
  html.a11y-mode .news-article__content p,
  html.a11y-mode .timeline__text,
  html.a11y-mode .person-card__role,
  html.a11y-mode .member-card__role,
  html.a11y-mode .member-activity__meta,
  html.a11y-mode .member-activity__excerpt,
  html.a11y-mode .contact-tile__body p,
  html.a11y-mode .head-card__role,
  html.a11y-mode .dept-person__role,
  html.a11y-mode .dept-person__phone,
  html.a11y-mode .news-article__published,
  html.a11y-mode .news-date,
  html.a11y-mode .news-more,
  html.a11y-mode .news-back,
  html.a11y-mode .news-doc__name,
  html.a11y-mode .news-doc__size,
  html.a11y-mode .year-filter__item,
  html.a11y-mode .press-sidebar__title,
  html.a11y-mode .press-sidebar__item,
  html.a11y-mode .press-sidebar__links-title,
  html.a11y-mode .press-link__text,
  html.a11y-mode .news-search__field input,
  html.a11y-mode .dropdown-panel__grid a,
  html.a11y-mode .dropdown-group__list a { font-size: 26px; }

  html.a11y-mode .news-tag,
  html.a11y-mode .pager__label,
  html.a11y-mode .pager__btn,
  html.a11y-mode .pager__ellipsis { font-size: 19px; }
}

/* -- Narrow screens: the same ~1.2× step, applied to the smaller mobile
      sizes so the text still fits the column. Shares the drawer threshold. -- */
@media (max-width: 1200px) {
  html.a11y-mode .breadcrumb { font-size: 15px; }
  html.a11y-mode .contact-item,
  html.a11y-mode .site-footer { font-size: 17px; }
  /* Мобильная шапка не растёт — как и главное меню (см. комментарий выше
     про navbar). Телефон в ней стоит с white-space: nowrap, и на 17px
     строка перестаёт влезать в 320px — весь документ уезжает вбок. */
  html.a11y-mode .topbar__mobile-contacts .contact-item { font-size: 14px; }
  /* Ряд «заголовок + стрелки карусели»: увеличенному заголовку на 320px
     не хватает места рядом со стрелками, и они выталкиваются за край.
     Перенос срабатывает только когда действительно тесно. */
  html.a11y-mode .links-section__row { flex-wrap: wrap; }

  html.a11y-mode .section-title,
  html.a11y-mode .news-card h3 { font-size: 25px; }

  html.a11y-mode .news-block-title,
  html.a11y-mode .news-article__title { font-size: 24px; }

  html.a11y-mode .news-feature__body h2,
  html.a11y-mode .news-card-lg__body h3,
  html.a11y-mode .person-card__name,
  html.a11y-mode .member-card__name,
  html.a11y-mode .member-activity__title,
  html.a11y-mode .contact-tile__title,
  html.a11y-mode .head-card__name,
  html.a11y-mode .dept-row__name,
  html.a11y-mode .dept-person__name,
  html.a11y-mode .section-card__title,
  html.a11y-mode .activity-card__title { font-size: 22px; }

  html.a11y-mode .text-card,
  html.a11y-mode .page-intro { font-size: 17px; }
  html.a11y-mode .text-card h2 { font-size: 24px; }
  html.a11y-mode .tabs__item { font-size: 17px; }
  html.a11y-mode .error-page__message { font-size: 21px; }
  html.a11y-mode .search-field input { font-size: 17px; }
  html.a11y-mode .error-page__btn { font-size: 18px; }
  html.a11y-mode .search-result__title { font-size: 21px; }
  html.a11y-mode .search-result__date,
  html.a11y-mode .search-result__text { font-size: 17px; }
  html.a11y-mode .filter-tag,
  html.a11y-mode .search-filters__label,
  html.a11y-mode .pager__item,
  html.a11y-mode .pager__label,
  html.a11y-mode .pager__gap,
  html.a11y-mode .search-result__tag { font-size: 16px; }

  html.a11y-mode .news-card p,
  html.a11y-mode .news-card time,
  html.a11y-mode .news-feature__body p,
  html.a11y-mode .news-card-lg__body p,
  html.a11y-mode .activity-card p,
  html.a11y-mode .activity-card__date,
  html.a11y-mode .plan-table th,
  html.a11y-mode .plan-table td,
  html.a11y-mode .news-article__content p,
  html.a11y-mode .timeline__text,
  html.a11y-mode .person-card__role,
  html.a11y-mode .member-card__role,
  html.a11y-mode .member-activity__meta,
  html.a11y-mode .member-activity__excerpt,
  html.a11y-mode .contact-tile__body p,
  html.a11y-mode .head-card__role,
  html.a11y-mode .dept-person__role,
  html.a11y-mode .dept-person__phone,
  html.a11y-mode .news-article__published,
  html.a11y-mode .news-date,
  html.a11y-mode .news-more,
  html.a11y-mode .news-doc__name,
  html.a11y-mode .news-doc__size { font-size: 17px; }

  html.a11y-mode .news-tag { font-size: 13px; }

  /* Метка с датой — один флекс-элемент рядом с иконкой; на укрупнённом
     кегле разрешаем ей съехать под иконку, а не выдавливать строку. */
  html.a11y-mode .news-article__published { flex-wrap: wrap; }
}

/* Body copy gets the extra leading; headings stay tight so they don't sprawl. */
html.a11y-mode p { line-height: 1.7; }
html.a11y-mode h1,
html.a11y-mode h2,
html.a11y-mode h3 { line-height: 1.35; }

.a11y-link[aria-pressed="true"] {
  text-decoration: underline;
  color: #005ba3;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 10px;
  z-index: 100;
  /* Не --blue: белому тексту на #007AD8 не хватает контраста (4.40 < 4.5),
     а эта плашка — чисто служебная, её оттенок ни с чем не рифмуется. */
  background: #005FA8;
  color: #fff;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 0 6px 6px;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  /* Боковое поле растёт вместе с окном: 24 на 1200, 120 на 1840 и шире.
     Формула, а не ступени, — иначе на границе брейкпоинта контент прыгал бы
     и при более широком окне оказывался уже, чем при узком. */
  padding: 0 clamp(24px, calc(15vw - 156px), 120px);
}

.icon { display: block; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

/* ---------- Topbar ---------- */

.topbar-stripe {
  height: 20px;
  background: var(--blue);
}

.topbar {
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--border-light);
}

/* ---------- Search panel ---------- */

.search-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--search-overlay-top, 100%);
  z-index: 25;
  background: rgba(0, 122, 216, .9);
}

.search-panel {
  background: var(--blue);
}

.search-panel__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 40px;
}

.search-panel__inner form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-panel__label {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.search-panel__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 0;
  outline: none;
  transition: border-color .15s ease;
}
.search-panel__input::placeholder { color: rgba(255, 255, 255, .6); }
.search-panel__input:focus { border-bottom-color: #fff; }
/* Фокус у поля показывает его собственное подчёркивание (правило выше), а не
   общая рамка: у текстовых полей браузер включает :focus-visible даже при
   фокусе мышью/скриптом, и рамка вспыхивала при каждом открытии панели. */
.search-panel__input:focus-visible { outline: none; }

.search-panel__submit,
.search-panel__close {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.search-panel__submit svg { width: 22px; height: 22px; }
.search-panel__close svg { width: 16px; height: 16px; }
.search-panel__submit:hover,
.search-panel__close:hover { color: rgba(255, 255, 255, .75); }

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Пропорция файла 400×404 — высота всегда на пиксель больше ширины. */
.logo__img { width: 72px; height: 73px; }

.logo__text {
  min-width: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--text-dark);
}

.logo__text strong { font-weight: 700; color: var(--blue-text); }

.topbar__contacts {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid var(--border-light);
  flex: 1;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
}

.contact-item .icon { flex-shrink: 0; }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  padding-left: 20px;
  border-left: 1px solid var(--border-light);
}

.a11y-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue-text);
  white-space: nowrap;
}

.icon-btn {
  display: inline-flex;
  width: 30px;
  height: 30px;
}

.search-btn { width: 36px; height: 36px; }

/* ---------- Main nav ---------- */

.mainnav {
  border-bottom: 1px solid var(--border-light);
  position: relative;
  z-index: 20;
  background: #fff;
}

.mainnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Search / a11y-toggle / social duplicated inside the drawer for widths
   where the desktop topbar's copies are hidden — see the compact-header
   media query below for the visible version. */
.mainnav__utility { display: none; }
/* The "ЕЩЁ" groups repeated as flat top-level drawer items — mobile only;
   on desktop they stay nested in the "ЕЩЁ" mega-menu. */
.mainnav__eshche-item { display: none; }

/* Просвет между пунктами вынесен в переменную: её ступени задают медиа-
   запросы (см. Responsive), а fitMainnav() в main.js дожимает её вниз,
   когда пунктов стало больше, чем помещается в строку. flex-wrap —
   последняя страховка: если ужимать уже некуда, меню переносится на вторую
   строку, а не растягивает шапку за край окна. */
.mainnav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--mainnav-gap, 35px);
  min-width: 0;
  margin: 0;
  padding: 0;
}

.mainnav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dark);
  white-space: nowrap;
}

.mainnav__link-text {
  position: relative;
}

.mainnav__link.is-active,
.mainnav__link:hover {
  color: var(--blue-text);
}

.has-dropdown.is-disabled .mainnav__link { opacity: .5; }

.mainnav__link .chevron {
  width: 9px;
  height: 4.5px;
  color: currentColor;
  transition: transform .15s ease;
}

.has-dropdown.is-open .mainnav__link .chevron { transform: rotate(180deg); }
.has-dropdown.is-open .mainnav__link { color: var(--blue-text); }

/* Hovering a nav item only underlines it; the panel itself waits for a click. */
.has-dropdown.is-open .mainnav__link-text::after,
.mainnav__link:hover .mainnav__link-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 4px;
  background: var(--blue);
}

.appeal-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dark);
  padding: 16px 0;
  white-space: nowrap;
}

.appeal-link:hover { color: var(--blue-text); }

.appeal-link .icon { width: 18px; height: 14px; }

/* Пока открыта выпадающая панель, шапка держится на месте.
   Панель пристыкована к низу шапки и сама по себе зафиксирована, а шапка
   без этого уезжала бы вверх вместе со страницей — между ними появлялся
   бы разрыв. Позицию каждой полосы (`top`) выставляет lockHeader() в
   main.js по её же положению на экране, так что фиксация происходит без
   скачка; высоту шапки он компенсирует отступом у body, чтобы страница
   под ней не подпрыгнула. Ниже 1200px это не нужно: там панель занимает
   весь экран поверх шапки. */
html.is-header-locked .topbar-stripe,
html.is-header-locked .topbar,
html.is-header-locked .mainnav {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 20;
}

/* ---------- Dropdown panel ---------- */

.dropdown-scrim {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--dropdown-scrim-top, 100%);
  z-index: 15;
  background: rgba(0, 122, 216, .9);
  /* Панель «ЕЩЁ» выше 900px: на окнах ниже ~1056px без прокрутки её нижние
     ссылки недостижимы — скрим фиксированный, прокрутка страницы его не
     сдвигает. Мобильная версия скрима (см. Responsive) уже прокручивается. */
  overflow-y: auto;
}

.dropdown-panel {
  background: var(--blue);
  color: #fff;
  position: relative;
}

.dropdown-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 32px;
}

.dropdown-panel__head h2 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}

.goto-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255,255,255,.75);
  transition: color .15s ease;
}

.goto-link:hover {
  color: #fff;
}

.goto-link .icon--arrow {
  width: 14px;
  height: 11px;
  flex-shrink: 0;
}

.dropdown-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.dropdown-close svg { width: 16px; height: 16px; }

.dropdown-panel__divider {
  height: 1px;
  background: rgba(255,255,255,.25);
  margin-top: 24px;
}

/* Ссылки раскладываются сами: сколько бы их ни пришло из меню, они текут
   по трём колонкам и добирают столько рядов, сколько нужно. Число колонок
   задаётся здесь одним значением — от него же считаются разделители рядов
   ниже. */
.dropdown-panel__grid {
  display: grid;
  grid-template-columns: repeat(var(--dropdown-cols, 3), minmax(0, 1fr));
  gap: 24px 40px;
  padding: 32px 0 40px;
}

.dropdown-panel__grid a {
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
  padding-left: 0;
  transition: padding-left .15s ease, color .15s ease;
}

.dropdown-panel__grid a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 11px;
  opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6H15M15 6L10 1M15 6L10 11' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .15s ease;
}

/* Ряды, кроме первого, отбиваются линией сверху. Пока колонок три, ряд
   начинается с четвёртой ссылки — этого правила достаточно и без JS.
   markPanelRows() в main.js затем размечает ряды по факту (класс
   .is-row-next / .is-row-first) — правила ниже перекрывают этот расчёт,
   когда ссылок стало столько, что колонок в раскладке уже не три. */
.dropdown-panel__grid a:nth-child(n+4) {
  padding-top: 24px;
}
.dropdown-panel__grid a:nth-child(n+4)::before { top: 29px; }

.dropdown-panel__grid a:nth-child(n+4)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,.25);
}

.dropdown-panel__grid a.is-row-first { padding-top: 0; }
.dropdown-panel__grid a.is-row-first::before { top: 5px; }
.dropdown-panel__grid a.is-row-first::after { content: none; }

.dropdown-panel__grid a.is-row-next { padding-top: 24px; }
.dropdown-panel__grid a.is-row-next::before { top: 29px; }
.dropdown-panel__grid a.is-row-next::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,.25);
}

.dropdown-panel__grid a:hover {
  padding-left: 24px;
  color: rgba(255,255,255,.75);
}
.dropdown-panel__grid a:hover::before { opacity: 1; }

.dropdown-panel__flat-links {
  display: flex;
  gap: 40px;
  padding-top: 32px;
}

.dropdown-panel__flat-links a {
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  padding-left: 0;
  transition: padding-left .15s ease, color .15s ease;
}
.dropdown-panel__flat-links a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 11px;
  opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6H15M15 6L10 1M15 6L10 11' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .15s ease;
}
.dropdown-panel__flat-links a:hover {
  padding-left: 24px;
  color: rgba(255,255,255,.75);
}
.dropdown-panel__flat-links a:hover::before { opacity: 1; }

.dropdown-panel__groups {
  display: grid;
  grid-template-columns: repeat(var(--dropdown-cols, 3), minmax(0, 1fr));
  gap: 32px 40px;
  padding: 24px 0 40px;
  border-top: 1px solid rgba(255,255,255,.25);
  margin-top: 24px;
}

.dropdown-group {
  position: relative;
  min-width: 0;
}

/* То же, что у ссылок выше: nth-child держит вид без JS, класс от
   markPanelRows() уточняет его по фактической раскладке. */
.dropdown-group:nth-child(n+4) {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.25);
}

.dropdown-group.is-row-first {
  padding-top: 0;
  border-top: none;
}

.dropdown-group.is-row-next {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.25);
}

.dropdown-group__title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.dropdown-group__goto {
  margin-bottom: 16px;
}

.dropdown-group__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dropdown-group__list a {
  position: relative;
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
  padding-left: 0;
  transition: padding-left .15s ease, color .15s ease;
}
.dropdown-group__list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 9px;
  opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6H15M15 6L10 1M15 6L10 11' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity .15s ease;
}
.dropdown-group__list a:hover {
  padding-left: 24px;
  color: rgba(255,255,255,.75);
}
.dropdown-group__list a:hover::before { opacity: 1; }


/* ---------- Hero ---------- */

.hero { padding: 32px 0 0; }

.hero__card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0B72C4;
  color: #fff;
  min-height: 320px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero__text {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
}

.hero__eyebrow {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero__title {
  font-size: 54px;
  line-height: 1.3;
  margin: 0 0 14px;
  font-weight: 700;
  text-transform: uppercase;
  max-width: 940px;
}

.hero__title span { color: var(--hero-accent); }

.hero__lead {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 0 26px;
}

.hero__stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.stat {
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 20px;
  width: 251px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stat strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
}

.stat strong em { font-style: normal; font-size: 14px; font-weight: 600; line-height: 1.7; }

.stat span {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* ---------- News grid ---------- */

/* По макету между баннером, блоком карточек и картой — по 100px. */
.news-grid { padding: 100px 0 90px; }

.news-grid__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
  padding: 40px;
}

.news-card h3 {
  font-size: 42px;
  line-height: 1.3;
  margin: 0 0 20px;
  text-transform: uppercase;
  font-weight: 700;
}

.news-card time {
  display: block;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.news-card p {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-dark);
  margin: 0;
}

/* Slides sit stacked in a single grid cell, so the card is always as tall as
   the longest item and nothing below it shifts when the arrows are used.
   Inactive slides are hidden with visibility (not display) so they keep
   contributing that height. */
.news-card__slides { display: grid; }
.news-card__slide {
  grid-area: 1 / 1;
  visibility: hidden;
}
.news-card__slide.is-active { visibility: visible; }

.news-card__text-only { margin-top: 0; }

.news-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 60px;
}

.news-card__footer > a {
  font-size: 22px;
  font-weight: 600;
  color: var(--blue-text);
}

.carousel-controls { display: flex; gap: 12px; }
.carousel-controls[hidden] { display: none; }

.carousel-controls button {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
  transition: opacity .15s ease, background-color .15s ease;
}

.carousel-controls button img { width: 100%; height: 100%; transition: filter .15s ease; }
.carousel-controls button:not(:disabled):hover {
  opacity: 1;
  background-color: var(--blue-text);
}
.carousel-controls button:not(:disabled):hover img { filter: brightness(0) invert(1); }
.carousel-controls button:disabled { opacity: .3; cursor: default; }

/* ---------- Map section ---------- */

/* Отступы вокруг карты подрезаны, а заголовок прижат к ней: всё, что не ушло
   на них, достаётся самой карте — её высота считается как остаток от окна
   (см. .map-image svg ниже). */
.map-section { padding: 10px 0; }

.section-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.19;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin: 0 0 18px;
}

/* Заголовок раздела лежит на самой белой плашке, а не над ней. Отступы
   взяты из макета: 41px от края карточки и 55px от заголовка до голубой
   плашки с контактами. */
.map-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 41px;
}

.map-card__title {
  margin: 0 0 55px;
}

.map-card__body {
  display: flex;
  gap: 24px;
  /* Голубая плашка облегает свой текст, а не тянется во всю высоту карты. */
  align-items: flex-start;
}

/* Колонка с контактами не должна дышать вслед за содержимым: ширина задана
   жёстко, min-width гасит попытку flex-элемента растянуться под длинную
   ссылку или адрес, а сама панель тянется на высоту карты и прокручивается
   внутри — так карта не съезжает, когда у одной палаты контактов больше,
   чем у другой. */
.map-info {
  flex: 0 0 300px;
  min-width: 0;
  display: flex;
  /* Плашка облегает свой текст, как в макете, а не тянется во всю высоту
     карты. Ширина при этом жёсткая, поэтому от количества контактов
     «дышит» только высота самой плашки — карта не сдвигается. */
  align-items: flex-start;
}

.map-info > * {
  flex: 1;
  min-height: 0;
  /* Выше карты плашка не поднимется: у самых длинных карточек её
     содержимое прокручивается внутри. */
  max-height: 100%;
  overflow-y: auto;
}

/* Длинные адреса сайтов рвутся по любому месту: без этого одна ссылка
   распирала бы колонку на всю свою длину. */
.map-details dd,
.map-details a {
  /* word-break идёт первым как запасной вариант: overflow-wrap: anywhere
     появился в Safari только в 15.4, а без переноса длинный адрес сайта
     распирал бы колонку с контактами. */
  word-break: break-word;
  overflow-wrap: anywhere;
}

.map-hint {
  background: var(--blue-pale);
  border-radius: 5px;
  padding: 40px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-dark);
  margin: 0;
}

.map-details {
  background: var(--blue-pale);
  border-radius: 5px;
  padding: 40px;
}

.map-kso + .map-kso {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.map-details h3 {
  font-size: 18px;
  color: var(--blue-text);
  margin: 0 0 14px;
}

.map-details dl { margin: 0; }
.map-details dl > div { margin-bottom: 12px; }
.map-details dt {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.map-details dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}
.map-details a { color: var(--blue-text); }

.map-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Карта квадратная, и на всю ширину колонки она получалась выше окна — низ
   уходил за экран, приходилось прокручивать. Ограничиваем её высотой окна за
   вычетом заголовка секции и отступов: карта берёт максимум, который влезает
   целиком, а на узких экранах упирается в ширину колонки. Пропорции держит
   сам SVG — размеры заданы у него атрибутами, так что max-* его только
   вписывают, не растягивая. */
.map-image svg {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: max(320px, calc(100vh - 116px));
}

.map-image g[id$="-regi_1_"] > path:first-of-type {
  transition: fill .15s ease, stroke .15s ease, stroke-width .15s ease;
  cursor: pointer;
}

.map-image g[id$="-regi_1_"]:hover > path:first-of-type {
  fill: var(--blue);
}

.map-image g[id$="-regi_1_"].is-selected > path:first-of-type {
  fill: var(--blue);
}

/* Названия районов лежат слоем поверх всех контуров, иначе у мелких районов
   фигура соседа срезала бы часть надписи.
   Класс проставляет main.js — из соседнего слоя :hover сюда не дотягивается. */
.map-image .region-label {
  pointer-events: none;
  transition: fill .15s ease;
}

.map-image .region-label.is-hover,
.map-image .region-label.is-selected {
  fill: #fff;
}

/* Соседние регионы и моря — только подписи, без контуров. */
.map-image .map-neighbour {
  pointer-events: none;
}

.map-image g[id$="-regi_1_"]:focus {
  outline: none;
}

.map-image g[id$="-regi_1_"]:focus-visible > path:first-of-type {
  stroke: #002d52;
  stroke-width: 3;
}

.map-image__error {
  font-size: 16px;
  color: var(--text-muted);
  text-align: center;
  padding: 40px;
}

/* ---------- Tiles ---------- */

/* По макету: карта → плитки, плитки → тематические ссылки и ссылки →
   подвал — по 100px. */
.tiles { padding: 90px 0 30px; }

.tiles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.tile {
  position: relative;
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.tile__icon { width: 100px; height: 100px; flex-shrink: 0; filter: brightness(0); }

.tile__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.tile p {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--blue-text);
}

.tile__arrow {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}
.tile__arrow img { width: 100%; height: 100%; }

.tile:hover {
  background: linear-gradient(90deg, rgba(0,122,216,.2) 0%, rgba(197,230,255,.2) 100%), #007AD8;
}
.tile:hover .tile__icon { filter: brightness(0) invert(1); }
.tile:hover p { color: #fff; }
.tile:hover .tile__arrow { filter: brightness(0) invert(1); }

/* ---------- Links / resources section ---------- */

.links-section { padding: 70px 0 80px; }

.links-section__head {
  margin-bottom: 40px;
}

.eyebrow {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--blue-text);
  margin-bottom: 20px;
}

.links-section__head .rule {
  width: 50px;
  height: 1px;
  background: var(--blue);
  margin-bottom: 20px;
}

.links-section__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.links-section__row .section-title { margin: 0; flex: 1; }

.links-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.link-card {
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  transition: box-shadow .2s ease, transform .2s ease;
}

.link-card:hover {
  box-shadow: 0 12px 28px rgba(0, 67, 134, .18);
  transform: translateY(-3px);
}
.link-card:hover .link-card__url { text-decoration: underline; }

.link-card__url {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--blue-text);
}

.icon--ext { width: 14px; height: 14px; flex-shrink: 0; }

.link-card p {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-dark);
}

/* ---------- Breadcrumb ---------- */

/* Laid out as a flex row so the trailing page title can absorb the leftover
   width and cut itself off with an ellipsis instead of wrapping the whole
   trail onto several lines. */
/* Отступы сверху и снизу от крошек равны. Держится это так:

     сверху = margin-top крошек + padding-top .breadcrumb
     снизу  = margin-bottom крошек + padding-top .press-page

   Крошки — это <p>, и браузерный отступ в 1em у него сверху и снизу
   одинаковый (он схлопывается наружу: сверху через <main>, снизу с
   .press-page). Значит равенство сводится к одному условию:

     **padding-top у .breadcrumb == padding-top у .press-page**

   Сейчас это 40 и 40 — на экране по 56 пикселей с обеих сторон. Уже 600
   пара своя, 20 и 20, — по 32 пикселя. Меняете одно число — меняйте парное,
   иначе крошки съедут к шапке или к контенту.

   Слева — 21px от края колонки, по макету пресс-центра. */
.breadcrumb {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 40px 0 0;
  padding-left: 21px;
  font-size: 18px;
  /* По макету строка хлебных крошек — 29px. */
  line-height: 1.6;
  color: var(--text-muted);
}
/* The separator belongs to the crumb before it, not to the row: as part of the
   crumb's own text flow it follows the last line of a label that wrapped,
   instead of floating beside the whole block. The last crumb gets none. */
.breadcrumb > *:not(:last-child)::after {
  content: '/';
  margin-left: 6px;
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--blue-text); }

/* By default a crumb is shown in full. Only the ones js/main.js marks as long
   (over ten words) give up width and cut off with an ellipsis, so the trail
   stays on one line without clipping labels that would have fitted.
   Links may still shrink: with normal wrapping that costs them extra lines,
   never characters, and it stops a label wider than the container from
   pushing the whole page sideways. */
.breadcrumb a {
  flex-shrink: 1;
  min-width: 0;
}
/* The current crumb wraps like the links do rather than holding its
   max-content width — otherwise a long page title pushes the whole page
   sideways on a phone. Short-enough labels are unaffected: shrinking only
   engages once the line is full. */
.breadcrumb__current { flex-shrink: 1; min-width: 0; }

/* flex-basis 0 keeps this crumb from ever forcing a line break of its own: it
   simply takes whatever room is left on the line and cuts off there, so the
   trail stays on one line whenever the links before it fit. */
.breadcrumb .is-truncatable {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- News listing page ---------- */

/* padding-top связан с .breadcrumb: эти два числа держат симметрию отступов
   вокруг хлебных крошек, см. комментарий в секции Breadcrumb. */
.press-page { padding: 40px 0 80px; }

.press-page__layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 55px;
  align-items: start;
}

.press-sidebar { display: flex; flex-direction: column; gap: 20px; }

/* Раньше было display: contents, и просветы между пунктами задавал
   .press-sidebar. В режиме правки Битрикс оборачивает вывод меню своим
   блоком, contents-цепочка рвалась и пункты слипались. Теперь просвет
   задаёт само меню, а gap: inherit держит его равным просвету колонки. */
.press-sidebar__nav { display: flex; flex-direction: column; gap: inherit; }

.press-sidebar__title {
  display: flex;
  align-items: center;
  min-height: 90px;
  background: var(--blue);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 10px 20px;
}

.press-sidebar__item {
  display: flex;
  align-items: center;
  min-height: 53px;
  padding: 10px 20px;
  border-radius: 4px;
  background: #fff;
  font-size: 22px;
  /* По макету строка пункта — 33px: у трёхстрочного пункта высота 119,
     у шестистрочного 218. */
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-dark);
  transition: background-color .15s ease;
}
.press-sidebar__item:hover { background: var(--hero-accent); }
.press-sidebar__item.is-active { background: var(--hero-accent); }

.press-sidebar__links-title {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dark);
  padding: 10px 20px;
  margin: 33px 0 0;
}

.press-link {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #fff;
  border-radius: 4px;
  padding: 10px 20px;
}
.press-link__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
  font-size: 22px;
  font-weight: 500;
}
.press-link__name { color: var(--text-dark); }
.press-link__url { color: var(--blue-text); }
.press-link:hover .press-link__url { text-decoration: underline; }
.press-link__logo { width: 80px; height: auto; flex-shrink: 0; object-fit: contain; align-self: flex-start; }

.news-listing { display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.news-listing .section-title { margin: 0; }

.news-search { display: flex; gap: 20px; }

.news-search__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 90px;
  padding: 0 50px;
  background: #fff;
  border: 1px solid var(--text-muted);
  border-radius: 4px;
}
.news-search__field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 20px;
  color: var(--text-dark);
}
.news-search__field input::placeholder { color: var(--text-dark); opacity: 1; }
/* The input's own ring is dropped in favour of one drawn by the whole field,
   so the visible focus matches the control the user perceives. Dropping it
   without the :focus-within rule below would leave keyboard users blind. */
.news-search__field input:focus { outline: none; }
.news-search__field:focus-within {
  border-color: var(--blue-text);
  box-shadow: 0 0 0 2px rgba(0, 122, 216, .35);
}
.news-search__field .icon { flex-shrink: 0; color: var(--text-muted); }
.news-search__field button { display: flex; }

.news-search__field--period { position: relative; }

.news-period-trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font: inherit;
  font-size: 20px;
  color: var(--text-dark);
  text-align: left;
}
.news-period-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-period-trigger .icon { color: var(--text-muted); }
.news-period-trigger[aria-expanded="true"] .icon { color: var(--blue-text); }

.news-calendar {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: min(320px, calc(100vw - 40px));
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 67, 134, .18);
  padding: 20px;
  z-index: 30;
}

.news-calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.news-calendar__title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dark);
}
.news-calendar__nav {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-dark);
}
.news-calendar__nav:hover { background: var(--blue-pale); }
.news-calendar__nav svg { width: 12px; height: 9px; }

.news-calendar__weekdays,
.news-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.news-calendar__weekdays {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 4px;
}
.news-calendar__grid { gap: 2px; }

.news-calendar__cell {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-calendar__day {
  border-radius: 4px;
  font-size: 14px;
  color: var(--text-dark);
}
.news-calendar__day:hover { background: var(--blue-pale); }
.news-calendar__day.is-today { box-shadow: inset 0 0 0 1px var(--blue); }
.news-calendar__day.is-in-range { background: var(--hero-accent); border-radius: 0; }
.news-calendar__day.is-start,
.news-calendar__day.is-end {
  background: var(--blue);
  color: #fff;
}

.news-calendar__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}
.news-calendar__reset {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.news-calendar__reset:hover { color: var(--blue-text); text-decoration: underline; }
.news-calendar__apply {
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  padding: 8px 20px;
}
.news-calendar__apply:hover { background: #0068ba; }

.news-feature[hidden],
.news-card-lg[hidden],
.pager[hidden] { display: none; }

.news-empty {
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  font-size: 20px;
  color: var(--text-muted);
  margin: 0;
}

.news-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.news-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.6;
  border-radius: 4px;
  padding: 5px 15px;
}

.news-date {
  display: block;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-muted);
}

/* Matched query text inside the news cards. */
mark.news-highlight {
  background: var(--hero-accent);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}
/* Tags are white-on-blue, where the pale highlight would erase the text. */
.news-tag mark.news-highlight { background: #fff; color: var(--blue-text); }

.news-more {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 22px;
  font-weight: 600;
  color: var(--blue-text);
  margin-top: auto;
  padding-top: 60px;
}
.news-more:hover { text-decoration: underline; }
/* align-items: center у ссылки совмещает середину стрелки с серединой
   строчного бокса, а она приходится ровно на середину прописной буквы —
   выше видимой середины слова. Строчные буквы и хвост «р» тянут массу слова
   вниз, и стрелка читается приподнятой.

   0.125em опускают её на середину чернил слова: у Manrope верх «П» на 0.75em
   выше базовой линии, низ «р» — на 0.25em ниже, середина этого промежутка
   на 0.125em ниже базовой середины бокса. Величина в em, поэтому работает на
   всех кеглях ссылки (22 / 20 / 19 / 17 / 15 / 14) и не зависит от
   интерлиньяжа: половинный отступ строки распределяется поровну и середину
   прописной буквы относительно центра бокса не смещает.

   position: relative вместо margin — сдвиг не должен менять раскладку. */
.news-more svg { flex-shrink: 0; position: relative; top: .125em; }

.news-feature {
  display: flex;
  gap: 60px;
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
  padding: 40px;
}
.news-feature__media {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  border-radius: 4px;
  overflow: hidden;
}
.news-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.news-feature__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.news-feature__body h2 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.news-feature__body h2 a { color: var(--text-dark); }
.news-feature__body h2 a:hover { color: var(--blue-text); }
.news-feature__body p {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0;
}
.news-feature__body .news-more { padding-top: 0; }

/* Крупная новость без фото. Медиа-колонки в разметке просто нет, поэтому текст
   занимает всю ширину сам — flex: 1 у единственного ребёнка. Остаётся габарит:
   без картинки тот же текст на вдвое большей ширине даёт вдвое меньшую высоту,
   и плашка выглядела бы полосой рядом с обычными карточками. Минимальная
   высота держит её крупной.

   Повторить высоту варианта с фото точно нельзя: там она тоже задаётся
   текстом и плавает (на 1440 — 706px, на 1200 — 574px). 320 — нижняя граница,
   ниже которой блок перестаёт читаться как главный.

   Ниже 1100 ограничение снято: там .news-feature и так становится колонкой,
   и высоту задаёт содержимое. */
@media (min-width: 1101px) {
  .news-feature--no-media { min-height: 320px; }
}

/* One grid holds every card, so paging can simply show and hide them without
   the markup having to be re-chunked into rows. The row/column gaps keep the
   original rhythm: 60px between rows, 40px between the two columns.
   Named .news-feed, not .news-grid — the home page already owns that class. */
.news-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 60px;
  align-items: stretch;
}
.news-feed .news-feature { grid-column: 1 / -1; }

.news-card-lg {
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
  padding: 40px;
}
.news-card-lg__media {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.news-card-lg__media img { width: 100%; height: 410px; object-fit: cover; display: block; }

.news-card-lg__body { display: flex; flex-direction: column; gap: 20px; }
.news-card-lg__body h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.news-card-lg__body h3 a { color: var(--text-dark); }
.news-card-lg__body h3 a:hover { color: var(--blue-text); }
.news-card-lg__body p {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0;
}

/* ---------- Activity sub-pages (контрольная деятельность) ---------- */

.activity-listing { display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.activity-listing .section-title { margin: 0; }

.year-filter { display: flex; flex-wrap: wrap; gap: 20px; }
.year-filter__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  min-height: 90px;
  padding: 0 20px;
  border-radius: 4px;
  background: var(--hero-accent);
  color: var(--text-dark);
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.year-filter__item:hover { background: var(--blue); color: #fff; }
.year-filter__item.is-current { background: var(--blue); color: #fff; }

.activity-feed { display: flex; flex-direction: column; gap: 40px; }

.activity-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: 4px;
  padding: 40px;
}
.activity-card[hidden] { display: none; }

.activity-card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.activity-card__date {
  font-size: 22px;
  font-weight: 400;
  /* По макету межстрочный интервал карточки — 1.6. */
  line-height: 1.6;
  color: var(--text-muted);
  white-space: nowrap;
}

.activity-card__title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  /* Плотнее остальной карточки (там 1.6): заголовок мероприятия часто
     занимает две-три строки, и на 1.6 они расползались. */
  line-height: 1.4;
  color: var(--text-dark);
}
.activity-card__title a { color: inherit; }
.activity-card__title a:hover { color: var(--blue-text); }

.activity-card p {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-dark);
}

/* The card's own gap already spaces this — drop the news card's top padding. */
.activity-card .news-more { margin-top: 0; padding-top: 0; line-height: 1.6; }

/* ---------- News detail page ---------- */

.news-detail { display: flex; flex-direction: column; gap: 60px; min-width: 0; }

.news-back {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  font-size: 22px;
  font-weight: 600;
  color: var(--blue-text);
}
.news-back:hover { text-decoration: underline; }
.news-back svg { flex-shrink: 0; }

.news-article {
  display: flex;
  flex-direction: column;
  gap: 60px;
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
  padding: 40px 40px 80px;
}

.news-article__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
/* Внутри — ровно два флекс-элемента: иконка и <span> с текстом. Обёртка
   обязательна. Без неё «Опубликовано:» становится анонимным флекс-элементом,
   и gap раздвигает не только иконку с текстом, но и подпись с датой — вместо
   пробела между ними встаёт 20 пикселей. При переносе в Битрикс <span>
   должен уехать в шаблон вместе с датой. */
.news-article__published {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  font-size: 22px;
  color: var(--text-muted);
}
.news-article__published .icon { flex-shrink: 0; }

/* 32, а не макетные 36: заголовки статей здесь длинные (см. мероприятия —
   в четыре строки и больше), и на такой длине крупный кегль забирает весь
   первый экран. Блок «минус два» в конце файла доводит до 30 — это и есть
   размер, который видит читатель. Меняете здесь — поправьте и там. */
.news-article__title {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
}

.news-article__hero { margin: 0; }
/* Sized by the mockup's proportions rather than its pixel height, so every
   photo keeps the same shape as the column narrows. */
.news-article__hero img {
  width: 100%;
  aspect-ratio: 1285 / 710;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.news-article__content { display: flex; flex-direction: column; gap: 40px; }
.news-article__content p {
  margin: 0;
  font-size: 22px;
  line-height: 1.6;
  color: var(--text-dark);
}
.news-article__content .news-article__source { color: var(--text-muted); }
.news-article__source a { color: inherit; text-decoration: underline; }

.news-article__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.news-article__pair img {
  width: 100%;
  aspect-ratio: 623 / 520;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.news-block-title {
  margin: 0;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-dark);
}

.news-gallery { display: flex; flex-direction: column; gap: 40px; }
.news-gallery__stage { display: flex; align-items: center; gap: 40px; }

/* Cropped slivers of the neighbouring slides, faded back so they read as
   context rather than as pickable thumbnails. */
.news-gallery__peek {
  flex: 1 1 117px;
  min-width: 0;
  aspect-ratio: 117 / 300;
  border-radius: 4px;
  overflow: hidden;
  opacity: .2;
}
.news-gallery__peek img { width: 100%; height: 100%; object-fit: cover; }

.news-gallery__main {
  flex: 1 1 771px;
  min-width: 0;
  aspect-ratio: 771 / 434;
  border-radius: 4px;
  overflow: hidden;
}
.news-gallery__main img { width: 100%; height: 100%; object-fit: cover; }

/* Квадратные стрелки-листалки: у галереи фотографий и у блока «Другие новости
   по теме» это одна и та же кнопка, в макете (узлы 772:2437 и 772:2284) обе
   выглядят одинаково — рамка и стрелка серые #9B9B9B, заливки нет.

   Серый взят из макета пипеткой, а не из палитры: --text-muted (#5A646E) и
   --text-dark (#373737) заметно темнее, кнопки выходили тяжелее рисованных.

   Заливка прозрачная, а не белая: под кнопками светло-голубой фон страницы
   с водяным знаком герба, и белый квадрат вырезал бы в нём дырку. На
   наведении кнопка заливается фирменным синим — единственное состояние,
   где у неё вообще есть фон. */
.news-gallery__arrow {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #9B9B9B;
  border-radius: 4px;
  background: transparent;
  color: #9B9B9B;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Наведение и фокус с клавиатуры выглядят одинаково: синяя заливка, белая
   стрелка. Рамка тоже синяя — иначе серый контур остаётся видимым поверх
   заливки светлой каймой. */
.news-gallery__arrow:hover,
.news-gallery__arrow:focus-visible { background: var(--blue); border-color: var(--blue); color: #fff; }

.news-gallery__counter {
  margin: 0;
  text-align: center;
  font-size: 22px;
  color: var(--text-dark);
}

/* Видео после галереи: заголовок блока и постер на всю ширину колонки в 16:9 —
   та же пропорция, что у кадра галереи (771 / 434), только без стрелок.
   Кнопка play — тот же значок, что у видео на странице истории
   (assets/history/play.svg), но настоящей <button>: до неё можно дойти с
   клавиатуры, а при интеграции на неё вешается запуск плеера. */
.news-video { display: flex; flex-direction: column; gap: 40px; }
.news-video__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--text-dark);
}
.news-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .15);
  cursor: pointer;
  transition: background-color .15s ease;
}
.news-video__play:hover { background: rgba(0, 0, 0, .3); }
.news-video__play img { width: 80px; height: 80px; transition: transform .15s ease; }
.news-video__play:hover img { transform: scale(1.08); }
/* Кольцо фокуса по краю кадра, а не по крошечному значку. */
.news-video__play:focus-visible { outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  .news-video__play img { transition: none; }
  .news-video__play:hover img { transform: none; }
}

/* Отступы и значок на телефоне — как у галереи (24) и у видео истории (42). */
@media (max-width: 600px) {
  .news-video { gap: 24px; }
  .news-video__play img { width: 48px; height: 48px; }
}

.news-docs { display: flex; flex-direction: column; gap: 40px; }
/* Icon, title and controls share one centre line, so a one-line title sits
   level with the middle of the icon instead of hugging its top edge, and a
   title that wraps stays centred against it too. */
.news-doc { display: flex; align-items: center; gap: 20px; }
/* Пропорция листа сохранена (53 / 60), размер уменьшен в ту же меру, что и
   кнопки документа. На телефоне свой размер — 40 × 45, ниже в Responsive. */
.news-doc__icon { flex-shrink: 0; width: 44px; height: 50px; color: var(--text-dark); }
.news-doc__name {
  flex: 1;
  min-width: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--blue-text);
}
.news-doc__name:hover { text-decoration: underline; }
.news-doc__content { flex: 1; min-width: 0; }
.news-doc__content .news-doc__name { display: block; }
.news-doc__description { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--text-dark); }
.news-doc__description p { margin: 0 0 8px; }
.news-doc__description p:last-child { margin-bottom: 0; }
/* Совпадение с поисковым запросом. Браузерный <mark> жёлтый и на синей ссылке
   выглядит чужеродно — подсвечиваем фирменным светло-голубым, цвет текста
   оставляем ссылочный. */
.news-doc__name mark { background: var(--hero-accent); color: inherit; border-radius: 2px; }
.news-doc__meta { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.news-doc__size {
  width: 180px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-muted);
}
.news-doc__action {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-muted);
  border-radius: 4px;
  color: var(--text-dark);
  transition: border-color .15s ease, color .15s ease;
}
.news-doc__action:hover { border-color: var(--blue-text); color: var(--blue-text); }

/* Значки «смотреть»/«скачать» и вес файла — серый #9C9C9C из макета (тот же
   оттенок, что у стрелок-листалок). Оговорка про :not(.a11y-mode) обязательна:
   в режиме для слабовидящих --text-muted становится почти чёрным, и подменять
   его светло-серым нельзя. Контраст #9C9C9C на белом — 2,8:1, ниже порога AA;
   это осознанное решение по макету, см. такую же врезку про #9B9B9B выше. */
html:not(.a11y-mode) .news-doc__size { color: #9C9C9C; }
html:not(.a11y-mode) .news-doc__action { border-color: #9C9C9C; color: #9C9C9C; }
/* Наведение и фокус — синими становятся и значок, и рамка. Правило обязано
   идти после серого и иметь тот же вес: у `.news-doc__action:hover` выше вес
   не появляется, и без этой пары серый перекрывал бы синий. */
html:not(.a11y-mode) .news-doc__action:hover,
html:not(.a11y-mode) .news-doc__action:focus-visible { border-color: var(--blue-text); color: var(--blue-text); }
/* Значок в той же пропорции к кнопке, что был при 60 × 60 (30 из 60). В
   разметке у svg стоят width/height 30 — без этого правила он остался бы
   крупным в уменьшенной кнопке. На телефоне свой размер, 22 (ниже, ≤600). */
.news-doc__action svg { width: 25px; height: 25px; }

.news-related { display: flex; flex-direction: column; gap: 40px; padding-top: 40px; }
.news-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 40px;
}
.news-related__nav { display: flex; gap: 20px; flex-shrink: 0; }

/* Horizontal scroller: two cards visible, the rest reachable via the arrows.
   The vertical padding keeps the cards' drop shadow from being clipped —
   overflow-x:auto forces overflow-y to compute as auto too. */
.news-related__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 20px);
  gap: 40px;
  overflow-x: auto;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.news-related__row::-webkit-scrollbar { display: none; }
.news-related__row > * { scroll-snap-align: start; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.pager__group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pager__group[hidden] { display: none; }
.pager__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
  padding: 5px 15px;
}
.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 37px;
  height: 36px;
  padding: 5px 15px;
  border-radius: 4px;
  background: var(--hero-accent);
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.pager__btn:hover { background: var(--blue); color: #fff; }
.pager__btn.is-current { background: var(--blue); color: #fff; }
.pager__btn.is-disabled {
  background: none;
  border: 1px solid var(--hero-accent);
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
}

/* Многоточие — не подпись, а кнопка: листает на страницу за краем
   показанного промежутка (js/news.js, gapTarget). Скрипт вешает на неё и
   .pager__btn, поэтому наведение и фокус берутся оттуда. Исключение —
   страница поиска: там пагинация статическая, многоточие в ней остаётся
   неактивным span.pager__gap. */
.pager__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 5px 15px;
  border-radius: 4px;
  background: var(--hero-accent);
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 500;
}

/* ---------- Планы работ: таблица мероприятий ---------- */

/* Таблица широкая по смыслу: номер, длинное название мероприятия и две даты.
   Ужимать её в колонку телефона нечем — название не сокращается, — поэтому
   ниже 860px она уезжает в горизонтальную прокрутку внутри .table-scroll,
   а не ломает страницу. У обёртки tabindex="0" (см. разметку): контейнер с
   прокруткой без фокуса недостижим с клавиатуры. Общее кольцо фокуса на неё
   уже распространяется — правило [tabindex]:focus-visible в начале файла. */

/* Подсказка и сама таблица — один элемент раскладки: .news-article__content
   разводит своих детей на 40px, а между подсказкой и таблицей нужно 8px. */
.plan-table-block { min-width: 0; }

.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: 4px;
}

/* Подсказка про боковую прокрутку. Показывается по факту переполнения — класс
   вешает initTableScrollHint() в js/widgets.js. Переполниться таблица может
   только на телефоне (min-width у .plan-table задан лишь в блоке ≤600), так
   что на практике подсказка мобильная; проверка по факту страхует от
   случайно широкого содержимого ячеек. */
.table-scroll__hint {
  display: none;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  /* Подсказка — вспомогательная строка, а не часть содержимого таблицы,
     поэтому приглушённый цвет из палитры, а не фирменный синий. Стрелка
     нарисована через currentColor и подхватывает его сама.
     Светлее --text-muted в палитре ничего нет: следующий шаг уже не проходит
     AA на белом (см. врезку про контраст в :root).

     В разметке подсказка намеренно <div>, а не <p>. Внутри статьи любой <p>
     ловится правилом .news-article__content p — оно задаёт свой кегль, цвет и
     margin, а в блоке «кегль на 2 мельче» у него ещё и селектор с id, который
     одним классом не перебить. Сменить тег дешевле, чем наращивать вес. */
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.4;
}

.table-scroll__hint.is-visible { display: flex; }

/* Стрелка прижата к правому краю подсказки — к той стороне, куда таблица и
   уезжает. flex: none, чтобы она не ужималась, когда текст переносится. */
.table-scroll__hint .icon { flex: none; margin-left: auto; }

/* Горизонтальная прокрутка таблиц — только на телефоне (min-width 620 в блоке
   ≤600). На планшете и ПК таблица всегда вписывается в колонку: текст в
   ячейках переносится, а не распирает её. Раньше здесь стоял min-width 860,
   и в белой плашке на планшетной ширине таблица уезжала вбок. */
.plan-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.plan-table th,
.plan-table td {
  padding: 16px 20px;
  border: 1px solid var(--border-light);
  vertical-align: top;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-dark);
  /* Длинные неразрывные строки — адреса ссылок в «Открытых данных» — иначе
     задают минимальную ширину колонки и выталкивают таблицу за край. */
  overflow-wrap: anywhere;
}

.plan-table thead th {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}

/* На синей заливке шапки рамка --border-light не видна, и три колонки
   сливаются в одну полосу. Внутренние границы проводим белым, внешний контур
   оставляем синим — иначе вокруг шапки появится светлая рамка на фоне
   страницы. Цвет задан с обеих сторон стыка: при border-collapse побеждает
   рамка левой ячейки, и правил только на :not(:first-child) не хватило бы. */
.plan-table thead th:not(:first-child) { border-left-color: rgba(255, 255, 255, 0.6); }
.plan-table thead th:not(:last-child) { border-right-color: rgba(255, 255, 255, 0.6); }

/* Строка-подраздел: «1. Контрольные мероприятия» и «2. Экспертно-аналитические
   мероприятия». Это <th scope="colgroup"> — скринридер объявит её заголовком
   группы строк, а не обычной ячейкой. */
.plan-table__group-title {
  background: var(--blue-pale);
  font-weight: 600;
  text-align: center;
}

.plan-table__num { width: 120px; text-align: center; white-space: nowrap; }
.plan-table__term { width: 190px; text-align: center; }

/* Ширина колонки с названием не задаётся: остаток отдаётся ей целиком. */
.plan-table__name { word-break: break-word; }

.plan-table tbody tr:not(.plan-table__group):hover { background: #F7FBFF; }

/* ---------- Search results page ---------- */

.search-page { padding: 60px 0; }

/* Every block of the page sits on the same 60px rhythm. */
.search-page__layout { display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.search-page__layout .section-title { margin: 0; }

.search-page__query {
  font-size: 20px;
  margin: 0 0 20px;
}

/* -- The wide query field, shared with the 404 page -- */

.search-field {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
  /* min-height, а не height: в режиме правки Битрикс вставляет внутрь
     компонента служебную разметку, и жёсткая высота выпускала её наружу —
     поле налезало на заголовок ниже. */
  min-height: 90px;
  padding: 0 40px;
  border: 1px solid var(--text-dark);
  border-radius: 4px;
  background: #fff;
}
/* The 404 frame draws the same field with square corners and a deeper indent. */
.search-field--flush { border-radius: 0; padding-left: 50px; }

.search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 20px;
  color: var(--text-dark);
}
.search-field input::placeholder { color: var(--text-dark); opacity: 1; }
/* The ring belongs to the whole field, so the input drops its own. */
.search-field input:focus { outline: none; }
.search-field:focus-within {
  border-color: var(--blue-text);
  box-shadow: 0 0 0 2px rgba(0, 122, 216, .35);
}
/* The magnifier is a submit button where the field posts a query, and a plain
   decorative mark where it filters what is already on the page. */
.search-field button,
.search-field__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
}
.search-field button:hover { color: var(--blue-text); }
.search-field svg { width: 39px; height: 39px; }

/* Страницы документов: лупа мельче, в пропорции к уменьшенным там кнопкам
   аккордеона и плашек. Только ПК — селектор с .docs-page тяжелее адаптивных
   правил .search-field svg (30 на планшете, 22 на телефоне) и без медиа-запроса
   перебил бы их. Страница результатов поиска не затронута. */
@media (min-width: 1101px) {
  .docs-page .search-field svg { width: 32px; height: 32px; }
}

/* -- Filter chips -- */

.search-filters { display: flex; flex-direction: column; gap: 30px; }
.search-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
}
.search-filters__label {
  padding: 10px 20px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-dark);
}

.filter-tag {
  padding: 10px 20px;
  border-radius: 4px;
  background: var(--hero-accent);
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1.3;
  transition: background-color .15s ease, color .15s ease;
}
.filter-tag:hover { background: #a9d8ff; }
.filter-tag.is-active { background: var(--blue); color: #fff; }

/* -- Result groups -- */

.search-group { display: flex; flex-direction: column; gap: 60px; }
.search-group__body { display: flex; flex-direction: column; gap: 40px; }
.search-group__title {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-dark);
}

.search-divider { margin: 0; border: 0; border-top: 1px solid var(--text-dark); }
.search-divider[hidden] { display: none; }
.search-group[hidden] { display: none; }

.search-empty { margin: 0; font-size: 22px; line-height: 1.6; color: var(--text-dark); }
.search-empty[hidden] { display: none; }

.search-result {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 40px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.search-result__meta { flex-shrink: 0; width: 280px; display: flex; flex-direction: column; gap: 20px; }
.search-result__date { margin: 0; font-size: 22px; line-height: 1.6; color: var(--text-muted); }
.search-result__tags { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.search-result__tag {
  padding: 5px 15px;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-transform: uppercase;
}

.search-result__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.search-result__title { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.6; color: var(--text-dark); }
.search-result__text { margin: 0; font-size: 22px; line-height: 1.6; color: var(--text-dark); }
/* The shared "Подробнее" link is normally pinned to the bottom of a card; here
   it is just the next item in the stack. */
.search-result__body .news-more { margin-top: 0; padding-top: 0; }

.search-result__media {
  flex-shrink: 0;
  width: 300px;
  height: 225px;
  border-radius: 4px;
  overflow: hidden;
}
.search-result__media img { width: 100%; height: 100%; object-fit: cover; }

/* The matched words: the mockup lays a 20%-opacity blue plate under them. */
.search-hit {
  padding: 0 .12em;
  border-radius: 4px;
  background: rgba(0, 122, 216, .2);
  color: var(--blue-text);
  font-weight: 700;
}

/* -- Pager: page size on the left, page numbers on the right -- */

.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.pager__group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pager__label,
.pager__gap {
  padding: 5px 15px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  color: var(--text-dark);
}
/* По макету элемент пагинации 36px высотой: текст 26 плюс по 5 сверху и снизу. */
.pager__item {
  padding: 5px 15px;
  border-radius: 4px;
  background: var(--hero-accent);
  color: var(--text-dark);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.pager__item:hover { background: #a9d8ff; }
.pager__item.is-current { background: var(--blue); color: #fff; }
/* First page: "Предыдущая" leads nowhere, so it loses its plate as well as
   its href. */
.pager__item.is-disabled { background: none; color: var(--text-muted); cursor: default; }
.pager__item.is-disabled:hover { background: none; }

@media (max-width: 600px) {
  .search-page { padding: 30px 0; }
}

/* ---------- Новости: шрифт в контентной области на 2px мельче ---------- */

/* Класс висит на <main> страницы новостей. Уменьшает каждый кегль в контенте
   ровно на два пикселя; шапка и подвал не затронуты — они вне <main>.
   Правила заперты в диапазон от 1101, где действуют базовые размеры: ниже
   работает своя адаптивная лестница, и перебивать её здесь нечем. */
@media (min-width: 1101px) {
  .news-page .breadcrumb { font-size: 16px; }
  .news-page .section-title { font-size: 40px; }

  .news-page .press-sidebar__title,
  .news-page .press-sidebar__item,
  .news-page .press-sidebar__links-title,
  .news-page .press-link__text { font-size: 20px; }

  .news-page .news-search__field input,
  .news-page .news-period-trigger { font-size: 18px; }

  /* Календарь-дропдаун выпадает из шкалы «на 2 мельче»: его кегль задан ниже,
     вне медиа-запроса, одним размером на все ширины. */

  .news-page .news-tag { font-size: 14px; }
  .news-page .news-date,
  .news-page .news-more,
  .news-page .news-feature__body p,
  .news-page .news-card-lg__body p { font-size: 20px; }
  .news-page .news-feature__body h2,
  .news-page .news-card-lg__body h3 { font-size: 24px; }

  .news-page .pager__label,
  .news-page .pager__gap,
  .news-page .pager__item { font-size: 16px; }
  .news-page .pager__btn,
  .news-page .pager__ellipsis { font-size: 14px; }
}

/* ---------- Календарь периода в новостях: единый кегль 14px ---------- */

/* Весь текст выпадающего календаря — заголовок месяца, шапка дней недели,
   числа и обе кнопки — одного размера, 14px. Базовые правила задают три
   разных кегля (16 / 12 / 14), а блок «на 2 мельче» уводил их ещё ниже, до
   14 / 10 / 12: числа получались мельче подписей в поле поиска рядом.

   Вне медиа-запроса нарочно: панель узкая на любой ширине (320px, а на
   планшете и телефоне — во всю ширину поля), и лестница кеглей ей не нужна.
   Ниже блока «на 2 мельче» по файлу — тем же весом перебивает его правила.

   Календарь есть только на news.html; префикс .news-page здесь ради веса
   над базовыми правилами, а не ради выборки страницы. */
.news-page .news-calendar__title,
.news-page .news-calendar__weekdays,
.news-page .news-calendar__day,
.news-page .news-calendar__reset,
.news-page .news-calendar__apply { font-size: 14px; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--blue);
  color: #fff;
  margin-top: 20px;
}

/* Боковые поля подвала задаёт .container — те же, что у шапки и контента
   (п.20 README). Здесь только вертикальные: прежнее «padding: 60px 40px»
   перебивало поле контейнера фиксированными 40, и на широком окне подвал
   выходил за линию шапки (на 1920 — на 80px с каждой стороны). */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 40px;
  padding-top: 60px;
  padding-bottom: 32px;
}

.footer__col-brand {
  padding-right: 40px;
  border-right: 1px solid var(--white-muted);
}

.footer__brand {
  display: flex;
  /* The wordmark sits level with the middle of the emblem, as in the design —
     two lines of text against a 120px mark look wrong pinned to its top. */
  align-items: center;
  gap: 12px;
}

.footer__brand .logo__text { min-width: 0; }

.footer__brand .logo__text { color: #fff; }
.footer__brand .logo__text strong { color: #fff; }

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 18px;
  margin-top: 30px;
}

.footer__contacts > div { min-width: 0; }

.footer__contacts .label {
  display: block;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--white-muted);
  margin-bottom: 6px;
}

.footer__contacts p { margin: 0; line-height: 1.9; font-weight: 500; }
.footer__contacts a { color: #fff; }

/* The column titles are h2: the footer is a page-level landmark, so an h4
   after the page's h1/h2/h3 left a gap in the heading outline. Their size is
   set here, not inherited from the level. */
/* Кегль пунктов — как у верхнего меню (.mainnav__link): 16, а на окне
   1201–1399 — 13 (правило рядом с меню, п.22 README). В версии для
   слабовидящих — прежние 18, см. ниже. */
.footer__nav-col h2 {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.footer__nav-col a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
}
.footer__nav-col a:hover { opacity: .8; }

/* Версия для слабовидящих: пункты подвала не мельче прежних 18 — ни на 16,
   ни на ступени 13, которая нужна только тесной строке верхнего меню. */
html.a11y-mode .footer__nav-col h2,
html.a11y-mode .footer__nav-col a { font-size: 18px; }

.footer__buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 52px;
}

.btn-outline {
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.btn-outline:hover { background: #fff; color: var(--blue-text); }

/* Matches .footer__top's own 4-column grid exactly (same template, same
   container) so the copyright block lines up under the "О ПАЛАТЕ" column
   and the social icons line up under the "ПРОТИВОДЕЙСТВИЕ КОРРУПЦИИ" /
   buttons column, per the mockup — column 1, under the logo, stays empty. */
.footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  /* The brand column (logo + address/phones/email) is genuinely taller than
     the nav-columns + buttons that sit beside it, so the grid row it shares
     with them sizes to the brand column's height, not theirs. In the
     mockup, the copyright/legal/social row isn't held hostage by that — it
     sits right under the buttons regardless of how much further the brand
     column runs. This margin pulls it back up by exactly that height
     difference; the "columns stay empty at column 1" layout above means
     nothing here actually overlaps the still-running brand text. */
  margin-top: -70px;
  /* Боковые поля — от .container, как у .footer__top выше. */
  padding-top: 16px;
  padding-bottom: 40px;
  font-size: 18px;
  font-weight: 500;
  color: var(--white-muted);
}

.footer__bottom-text {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.footer__copy { margin: 0; line-height: 1.5; }
.footer__legal { color: var(--white-muted); }

.footer__social {
  grid-column: 4;
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer__social img { width: 60px; height: 60px; }

.footer__social--mobile { display: none; }

/* Square with a hairline white outline, matching the footer component — not
   the filled circle this used to be. */
.scroll-top {
  width: 60px;
  height: 60px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-left: 4px;
  transition: background-color .15s ease;
}
.scroll-top:hover { background: rgba(255, 255, 255, .15); }
.scroll-top svg { width: 20px; height: 17px; }

/* Плавающая кнопка «наверх» — та же стрелка, что в подвале, но закреплена в
   правом нижнем углу окна и появляется, когда страница прокручена до
   середины. Класс is-visible вешает js/widgets.js.

   Заливка синяя, а не прозрачная, как у подвальной: та лежит на синем фоне
   подвала, а эта — поверх светлого контента и белых карточек.

   z-index 35 — выше контента и календаря (30), ниже мобильной шапки (40),
   бургер-меню (50) и просмотрщика фотографий (200): всплывающее поверх
   страницы не должно перекрываться кнопкой, но и она не должна лезть на них.

   visibility в паре с opacity — чтобы скрытая кнопка не ловила клики и не
   попадала в обход по Tab. */
.scroll-up {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 35;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 67, 134, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.scroll-up.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-up:hover { background: #0068ba; }
.scroll-up svg { width: 20px; height: 17px; }

/* Пока открыт полноэкранный оверлей — бургер-меню, панель поиска, подменю на
   мобильном — страница под ним не прокручивается (body.no-scroll), и кнопка
   «наверх» бессмысленна. Прятать её приходится явно: панель бургера лежит
   внутри .mainnav со своим z-index 20, то есть весь её слой оказывается ниже
   этой кнопки, сколько бы ни было у неё собственного z-index. */
body.no-scroll .scroll-up { opacity: 0; visibility: hidden; }

/* Системная настройка «уменьшить движение» — кнопка появляется и исчезает
   мгновенно, без выезда снизу. Парная запись к правилу в начале файла. */
@media (prefers-reduced-motion: reduce) {
  .scroll-up { transition: none; transform: none; }
}

/* На планшете и телефоне кнопка мельче и ближе к краю: на узком экране она
   иначе накрывает содержимое, а палец до угла достаёт легко. */
@media (max-width: 800px) {
  .scroll-up { right: 16px; bottom: 16px; width: 48px; height: 48px; }
  .scroll-up svg { width: 16px; height: 14px; }
}

/* ---------- About page: history timeline ---------- */

.history-page { display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.history-page .section-title { margin: 0; }

.timeline {
  list-style: none;
  margin: 0;
  padding: 40px;
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
}

.timeline__item { display: flex; align-items: flex-start; gap: 20px; }

.timeline__year {
  flex-shrink: 0;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 15px;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

/* The marker sits at the top of a line spanning the entry's full height, so
   consecutive entries join into one continuous rail.
   The line is a real element, not a background gradient: a gradient's colour
   stops sit wherever the maths puts them, and with an even rail width the
   1px band landed astride two device pixels and was painted at half strength
   — at 1024 and 768 it faded out of sight entirely. An element's edges get
   snapped to whole pixels, and the 2px width keeps both edges integral at
   every rail size used here. */
.timeline__rail {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  width: 40px;
  display: flex;
  justify-content: center;
  padding: 10px;
}
.timeline__rail::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background: var(--blue);
}
.timeline__rail img { position: relative; width: 20px; height: 20px; }

.timeline__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 2px 0 80px;
}

.timeline__text { font-size: 22px; line-height: 1.6; color: var(--text-dark); }
/* Both rules stay at the same specificity so the later one wins for siblings. */
.timeline__text > * { margin: 0; }
.timeline__text > * + * { margin-top: 1.6em; }
.timeline__text ul { padding-left: 33px; }
.timeline__text li + li { margin-top: 1.6em; }

.timeline__photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}
.timeline__photo--wide { aspect-ratio: 1105 / 500; }
.timeline__photo--tall { aspect-ratio: 1105 / 710; }

.timeline__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.timeline__pair-photo,
.timeline__video { aspect-ratio: 1075 / 788; border-radius: 4px; }
.timeline__pair-photo { width: 100%; height: 100%; object-fit: cover; }

.timeline__video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.timeline__video > img:not(.timeline__video-play) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.timeline__video-play { position: relative; width: 58px; height: 58px; }

/* ---------- About page: collegium roster & member detail ---------- */

.collegium-page,
.structure-page { display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.collegium-page .section-title,
.structure-page .section-title { margin: 0; }

/* Round portrait on a pale disc. When a member has no photo the disc holds a
   small emblem instead, hence the two sizing modes. */
.avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--avatar-bg);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--empty img { width: 70px; height: auto; }

/* -- Chairman card, shared by the roster and the member page -- */

.person-card {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 40px;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
  color: var(--text-dark);
}
.person-card .avatar { width: 225px; height: 225px; }

/* Compact variant — a single officer heading a page rather than a whole board. */
.person-card--sm .avatar { width: 140px; height: 140px; }
.person-card--sm .person-card__name { font-size: 26px; }

a.person-card:hover .person-card__name { color: var(--blue-text); }

.person-card__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.person-card__name { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.4; }
.person-card__role { margin: 0; font-size: 20px; line-height: 1.6; }

/* -- Roster grid -- */

/* auto-fill lands on the mockup's three columns at the design width and drops
   to two, then one, as the column narrows — no extra breakpoints needed. */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 40px;
}

.member-card {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 40px;
  background: #fff;
  border-radius: 4px;
  color: var(--text-dark);
  transition: box-shadow .15s ease;
}
a.member-card:hover { box-shadow: var(--card-shadow); }
a.member-card:hover .member-card__name { color: var(--blue-text); }

.member-card .avatar { width: 140px; height: 140px; }

.member-card__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.member-card__name { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.4; }
.member-card__role { margin: 0; font-size: 20px; }

/* -- Member page: feed of the events they took part in -- */

.member-feed { display: flex; flex-direction: column; gap: 60px; }

.member-activity {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 40px;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
  color: var(--text-dark);
}

.member-activity__meta {
  flex-shrink: 0;
  width: 170px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 20px;
  line-height: 1.6;
}
.member-activity__date { color: var(--text-muted); }

.member-activity__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.member-activity__title { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.4; }
.member-activity__excerpt { margin: 0; font-size: 20px; line-height: 1.6; }

/* Ссылка на материал стоит в заголовке, а её ::after растянут на всю карточку:
   кликом открывается материал из любой точки, но в дереве доступности
   остаётся одна ссылка с текстом заголовка, а не ссылка на весь блок. */
.member-activity__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
}
.member-activity:hover .member-activity__title { color: var(--blue-text); }

.member-activity__media {
  flex-shrink: 0;
  width: 300px;
  height: 225px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--avatar-bg);
  overflow: hidden;
}
.member-activity__media img { width: 100%; height: 100%; object-fit: cover; }
.member-activity__media--empty img { width: 70px; height: auto; }

/* Между 1101 и 1465 боковое меню раздела ещё на месте, а ширины окна уже мало:
   на колонку текста после фиксированных меты (170) и фото (300) остаётся от 0
   до 112 пикселей, и карточка вытягивается на несколько экранов. В этой полосе
   она перестраивается в столбец — той же раскладкой, что и на планшете. Ниже
   1100 боковое меню скрывается, ширины снова хватает, и строка возвращается. */
@media (min-width: 1101px) and (max-width: 1465px) {
  .member-activity { flex-direction: column; gap: 16px; }
  .member-activity__meta { flex-direction: row; flex-wrap: wrap; width: auto; gap: 12px; font-size: 18px; }
  .member-activity__title { font-size: 22px; }
  .member-activity__excerpt { font-size: 18px; }
  .member-activity__media { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .member-activity__media--empty { aspect-ratio: 4 / 1; }
}

/* Сразу над этой полосой строка ещё помещается, но текста в ней мало. Плотная
   раскладка (те же размеры, что и ниже 1100) убирает разрыв на границе: без неё
   лишний пиксель ширины сужал колонку текста втрое. */
@media (min-width: 1466px) and (max-width: 1680px) {
  .member-activity { gap: 30px; }
  .member-activity__meta { width: 150px; font-size: 18px; }
  .member-activity__title { font-size: 22px; }
  .member-activity__excerpt { font-size: 18px; }
  .member-activity__media { width: 240px; height: 180px; }
}

/* ---------- About page: structure chart ---------- */

/* Both the chart and the PDF plate sit on the same white card treatment the
   rest of the content pages use. */
.structure-card,
.doc-plate {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 40px;
}

/* The org chart always fits the column, at every width — the mobile frame
   shows the whole scheme scaled down rather than a pannable slice of it.
   Readable detail comes from the PDF underneath, and a phone can pinch-zoom
   the image itself, which a scroll container would have taken away. */
.structure-chart img { display: block; width: 100%; height: auto; }

/* Desktop keeps the chart card and the PDF plate as separate blocks of the
   page stack, so this wrapper steps out of the layout; on a phone it becomes
   the single card the mockup draws around both. */
.structure-block { display: contents; }

/* ---------- Contacts page ---------- */

.contacts-page { display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.contacts-page .section-title { margin: 0; }

/* Cards that read as one block sit 20px apart, unlike the 60px that separates
   the page's top-level sections. */
.contact-group { display: flex; flex-direction: column; gap: 20px; }

/* -- Address / phone / e-mail tiles -- */

.contact-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Плашка контакта. Поля и иконка уменьшены на четверть относительно
   первоначальных 40 / 44: заголовок опущен до 22, и прежние размеры делали
   плашку заметно тяжелее собственного содержимого. Тот же компонент стоит на
   странице Совета КСО (модификатор --flat), там он уменьшается заодно. */
.contact-tile {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 30px;
  background: #fff;
  border-radius: var(--radius);
  color: var(--text-dark);
}

/* The КСО contact page draws the same tile with the smaller card radius. */
.contact-tile--flat { border-radius: 4px; }

/* Та же плитка внутри белой плашки («Обратная связь для сообщений о фактах
   коррупции»): свой фон и поля ей не нужны — иначе белое на белом с лишним
   отступом. Остаются иконка на голубой подложке, заголовок и ссылка. */
/* Двойной класс — не случайность: адаптивные правила ниже возвращают
   .contact-tile поля 24/20, и с одиночным модификатором плитка на телефоне
   съезжала вправо от текста отдела. */
.contact-tile.contact-tile--bare { padding: 0; background: none; border-radius: 0; flex-shrink: 0; }

/* Шапка плашки обратной связи: слева — кому звонить, сразу за текстом —
   сам телефон. Не space-between: в макете телефон стоит в ~55px от текста,
   а не прижат к правому краю плашки. Ниже 800 блоки встают друг под другом:
   в две колонки текст отдела рвётся по слову в строке. */
.feedback-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 56px;
}
.feedback-head__text {
  margin: 0;
  max-width: 460px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-dark);
}
@media (max-width: 800px) {
  .feedback-head { flex-direction: column; gap: 24px; }
  .feedback-head__text { max-width: none; font-size: 18px; }
}
@media (max-width: 600px) {
  .feedback-head__text { font-size: 16px; }
}

.contact-tile__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 4px;
  background: var(--avatar-bg);
}
.contact-tile__icon img { width: 36px; height: 36px; }

.contact-tile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-tile__title { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.4; }
.contact-tile__body p { margin: 0; font-size: 20px; }

/* -- Chairman / deputy / chief of staff row -- */

.contact-heads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* На ноутбуке и планшете (до 1700) карточки руководителей стоят по две в ряд.
   Три в ряд там не помещаются: на 1201–1439 карточке достаётся около 370–400px,
   на 1440–1700, где рядом левое меню, — около 300px; из них фото с полями
   занимает 220, и ФИО рвётся на три–шесть строк, местами посреди слова —
   «Усенк / о Серге / й». Две в ряд дают вдвое больше места под текст.
   Третья карточка встаёт во второй ряд одна, это нормально: их всего три.
   Порог 1700 — тот же, что у суженного левого меню. Ниже 800 действует своя
   ступень — одна в ряд. */
@media (max-width: 1700px) {
  .contact-heads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.head-card {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 40px;
  background: #fff;
  border-radius: 4px;
  color: var(--text-dark);
}
.head-card__photo {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  background: var(--avatar-bg);
  overflow: hidden;
}
.head-card__photo img { width: 100%; height: 100%; object-fit: cover; }

.head-card__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.head-card__name { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.4; }
.head-card__role { margin: 0; font-size: 20px; }

/* -- Departments: one white row per department, its two officers beside it -- */

.dept-table { display: flex; flex-direction: column; gap: 20px; }

.dept-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  padding: 40px;
  background: #fff;
}

.dept-row__name {
  padding: 20px;
  border-radius: 4px;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-dark);
}

.dept-person {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 4px;
  background: var(--avatar-bg);
  color: var(--text-dark);
}
.dept-person__name { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.4; }
.dept-person__role { margin: 0; font-size: 20px; }
.dept-person__phone { margin: 0; font-size: 20px; color: var(--blue-text); }
a.dept-person__phone:hover { text-decoration: underline; }

/* Один сотрудник в отделе — карточка занимает обе колонки справа от названия,
   а не стоит одна с пустым местом рядом. :only-of-type, а не «+»: служебная
   обёртка Битрикса (display: contents, блок «режим правки» в конце файла)
   встаёт между названием и карточками, соседство рвётся, а единственным
   div среди соседей карточка остаётся. Ниже 1100 — на всю строку, см. там. */
.dept-row .dept-person:only-of-type { grid-column: 2 / -1; }

/* ---------- Section landing (the "ПЕРЕЙТИ В РАЗДЕЛ" page) ---------- */

/* No in-page sidebar here — the section's own pages are the content, laid out
   across the full container width. */
.section-page { display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.section-page .section-title { margin: 0; }

.section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }

.section-card {
  display: flex;
  flex-direction: column;
  padding: 40px;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
  color: var(--text-dark);
  transition: background-color .15s ease, color .15s ease;
}

/* Кегль здесь базовый, «на 2 крупнее»: на самой странице разделов работает
   правило из блока «на 2 мельче» в конце файла, там 22. Интерлиньяж 1.4
   переопределений не имеет — задан один раз и действует на всех ширинах и в
   версии для слабовидящих. */
.section-card__title { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.4; }

/* Reuses the news "Подробнее" link; only the gap above it is larger here. */
.section-card .news-more { padding-top: 100px; line-height: 1.6; }

.section-card:hover { background: var(--blue); color: #fff; }
.section-card:hover .news-more { color: #fff; text-decoration: none; }

/* ---------- Long-form text pages (public reception and similar) ---------- */

.text-page { display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.text-page .section-title { margin: 0; }

.text-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text-dark);
}
.text-card h2 { margin: 0; font-size: 36px; font-weight: 600; line-height: 1.5; }
/* Расстояния между блоками карточки задаёт gap; браузерный отступ абзаца лишний. */
.text-card > p { margin: 0; }
.text-card a { color: #0098E0; }
.text-card a:hover { text-decoration: underline; }

/* Paragraphs and lists inside one run of copy are separated by a blank line,
   the way the mockup's single text blocks are. */
.text-body > * { margin: 0; }
.text-body > * + * { margin-top: 1.6em; }
.text-body ul { padding-left: 33px; }

/* Pulled-out passage — an address, a notice — on a tinted, outlined panel. */
.text-note,
.note-card {
  padding: 40px;
  border: 1px solid #DDF0FE;
  border-radius: 6px;
  background: rgba(221, 240, 254, .4);
}
.text-note p { margin: 0; }

/* Same panel, with an icon above the copy. */
.note-card { display: flex; flex-direction: column; gap: 30px; }
.note-card p { margin: 0; }

.note-card__icon {
  align-self: flex-start;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #DDF0FE;
  border-radius: 4px;
}
.note-card__icon img { width: 44px; height: 44px; }

.note-card__phones { display: flex; flex-direction: column; gap: 10px; }
.note-card__phones a { color: #0098E0; }

.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }

/* A heading and its copy read as one group; use it when the card holds
   something else besides — a banner, a set of notes — at the looser spacing. */
.text-block { display: flex; flex-direction: column; gap: 30px; }
.text-card--loose { gap: 50px; }

/* Открытые данные: вводный текст, перечень и паспорта наборов лежат на одной
   плашке. Заголовок паспорта должен читаться как заголовок СВОЕЙ таблицы, а не
   как подпись к предыдущей, поэтому шаг неравномерный: 16 от заголовка до его
   таблицы и 40 (16 + 24) перед самим заголовком — после предыдущей таблицы или
   после вводного текста. */
.open-data-card { gap: 16px; }
/* .open-data — корень шаблона news.list, .open-data-set — перечень и каждый
   паспорт набора. Обе обёртки — колонки с шагом самой карточки (inherit
   повторяет его на всех ширинах), между наборами и перед первым — ещё 24. */
.open-data,
.open-data-set { display: flex; flex-direction: column; gap: inherit; }
.open-data,
.open-data-set + .open-data-set { margin-top: 24px; }

/* Заголовки перечня и паспортов — 30 вместо 36: их тут шесть подряд, и в
   исходном кегле они спорят с заголовком страницы.
   Вес селектора повторяет блок «кегль на 2 мельче» (там id), иначе его не
   перебить. html:not(.a11y-mode) оставляет версии для слабовидящих её
   собственный кегль. Только ПК: ниже 1100 работает обычная адаптивная
   лестница — 30 на планшете и 20 на телефоне. */
@media (min-width: 1101px) {
  html:not(.a11y-mode) main#main-content:not(.news-page) .open-data-card .news-block-title { font-size: 30px; }
}

/* Аудиозапись гимна. Плеер нативный — рисует его браузер, наши стили задают
   только ширину: по умолчанию <audio> занимает свои ~300px и на широкой
   плашке смотрится обрезком. Высота у разных браузеров своя, не трогаем. */
.anthem-player { width: 100%; }

/* Авторы гимна — подпись под плеером: приглушённый цвет и плотный шаг между
   строками. Две строки читаются как одна подпись, а не как два абзаца, поэтому
   от обычных 1.6em в .text-body здесь остаётся четверть. */
.anthem-credits { color: var(--text-muted); }
.anthem-credits > * + * { margin-top: .2em; }

/* Текст песни — стихи, а не проза: строки идут плотнее обычного абзацного шага,
   иначе куплет рассыпается на отдельные фразы. «Припев» выделен жирным —
   внутри плашки базовое начертание уже 600, поэтому явные 700. */
.anthem-lyrics > * + * { margin-top: .5em; }
.anthem-lyrics strong { font-weight: 700; }

/* ---------- "Госуслуги" call-to-action banner ---------- */

.appeal-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 550px;
  padding: 47px 85px 47px 39px;
  border-radius: 4px;
  overflow: hidden;
  background: #008EE4;
  color: #fff;
}
.appeal-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Copy and emblem keep the mockup's 680 : 456 split as percentages, so the
   pair stays balanced at every container width instead of one starving the
   other; the type scales with the viewport over the same range. */
.appeal-banner__body {
  position: relative;
  flex: 1 1 58%;
  min-width: 0;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
}

.appeal-banner__slogan { display: flex; flex-direction: column; gap: 20px; }
.appeal-banner__title {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
}
.appeal-banner__lead {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 24px);
  font-weight: 600;
  line-height: 1.5;
}

.appeal-banner__features { display: flex; flex-wrap: wrap; gap: 40px; }
.appeal-banner__feature { display: flex; align-items: center; gap: 10px; }
.appeal-banner__feature-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255, 255, 255, .3);
}
.appeal-banner__feature-icon img { width: 44px; height: 44px; }
.appeal-banner__feature span {
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
}

.appeal-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* В макете кнопка 559x83 вместе с обводкой, поэтому её пиксель вычтен из полей. */
  padding: 19px 39px;
  background: #fff;
  border: 1px solid var(--blue);
  color: var(--blue-text);
  font-size: clamp(15px, 1.35vw, 24px);
  font-weight: 700;
  line-height: 1.8;
  text-transform: uppercase;
  transition: background-color .15s ease, color .15s ease;
}
/* Серо-голубая заливка при наведении. Текст на ней чуть темнее фирменного:
   --blue-text на #DCE6F0 даёт лишь 4.17:1, а на телефоне кнопка 14px —
   это обычный текст, ему нужно 4.5. #005AA3 даёт 5.56. */
.appeal-banner__btn:hover { background: #DCE6F0; color: #005AA3; }

/* Three concentric outlined hexagons behind the Госуслуги mark. Everything is
   centred on one point, so each layer is sized as a share of the box. */
.appeal-banner__emblem {
  position: relative;
  flex: 0 1 39%;
  min-width: 0;
  max-width: 456px;
  aspect-ratio: 1;
  pointer-events: none;
}
/* Соты меряются по ширине: в макете внешняя занимает 456 из 1285 ширины
   баннера, а вложенные — 86%, 71.3% и 48.2% от неё. */
.appeal-banner__emblem img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  transform: translate(-50%, -50%);
}
.appeal-banner__emblem img:nth-child(1) { width: 100%; }
.appeal-banner__emblem img:nth-child(2) { width: 86%; }
.appeal-banner__emblem img:nth-child(3) { width: 71.3%; }
.appeal-banner__emblem img:nth-child(4) { width: 48.2%; }

/* Компактный баннер — «Написать обращение» и «Обратная связь для сообщений о
   фактах коррупции». В полном размере он перетягивает внимание с текста
   плашки. Тексты примерно на четверть мельче, значок Госуслуг — тоже.
   Кегли пишем в весе блока «кегль на 2 мельче» (там id) — иначе не перебить;
   :not(.a11y-mode) оставляет версии для слабовидящих её собственную шкалу.
   На телефоне кегли баннера и так мелкие (18/16/14) — там уменьшаем только
   значок. */
@media (min-width: 601px) {
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner--compact .appeal-banner__title { font-size: clamp(18px, 1.45vw, 26px); }
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner--compact .appeal-banner__lead { font-size: clamp(14px, 1.05vw, 18px); }
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner--compact .appeal-banner__feature span { font-size: clamp(12px, .85vw, 14px); }
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner--compact .appeal-banner__btn { font-size: clamp(14px, 1.05vw, 18px); }
  .appeal-banner--compact { min-height: 440px; }
}
/* ПК — точные кегли по согласованию: заголовок 30, подзаголовок 20, подписи у
   иконок 16. Правила того же веса и ниже по файлу, поэтому перекрывают
   плавные значения из блока выше; на планшете (601–1100) остаются плавные. */
@media (min-width: 1101px) {
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner--compact .appeal-banner__title { font-size: 30px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner--compact .appeal-banner__lead { font-size: 20px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner--compact .appeal-banner__feature span { font-size: 16px; }

  /* Отступ от слогана до иконок — 30 вместо 50. Общий gap тела баннера один на
     все промежутки, поэтому кнопке возвращаем её 50 через margin-top. */
  .appeal-banner--compact .appeal-banner__body { gap: 30px; }
  .appeal-banner--compact .appeal-banner__btn { margin-top: 20px; }

  /* «Телефон» на странице обратной связи — 22 по согласованию (в макете 26). */
  html:not(.a11y-mode) main#main-content:not(.news-page) .feedback-head .contact-tile__title { font-size: 22px; }

  /* Значок телефона — по макету (узел 1465:4665): глиф 44 на подложке с полями
     10. У плитки «Контактов» он уменьшен до 36/8, здесь возвращаем размер. */
  .feedback-head .contact-tile__icon { padding: 10px; }
  .feedback-head .contact-tile__icon img { width: 44px; height: 44px; }
}

/* Жирность компактного баннера — на ступень легче. В узле макета стоят те же
   700 / 600 / 600 / 700, что и в базовом баннере, но на синем фоне браузер
   рисует светлый текст заметно плотнее Figma, и на глаз вёрстка тяжелее
   макета. Облегчено по согласованию, чтобы совпасть по восприятию. */
.appeal-banner--compact .appeal-banner__title { font-weight: 600; }
.appeal-banner--compact .appeal-banner__lead,
.appeal-banner--compact .appeal-banner__feature span { font-weight: 500; }
.appeal-banner--compact .appeal-banner__btn { font-weight: 600; }
@media (min-width: 801px) {
  .appeal-banner--compact .appeal-banner__emblem { flex-basis: 30%; max-width: 340px; }
}
@media (min-width: 601px) and (max-width: 800px) {
  .appeal-banner--compact .appeal-banner__emblem { width: 170px; }
}
@media (max-width: 600px) {
  .appeal-banner--compact .appeal-banner__emblem { width: 96px; }
}

/* ---------- Tabs (обзор обращений) ---------- */

/* Two equal halves that read as one control. Each tab carries a full border
   and the next one pulls back a pixel, so neighbours share an edge; the
   active tab is raised so its own colour owns that shared line. Written so
   the active tab may be either of them. */
.tabs { display: flex; }

.tabs__item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 20px;
  border: 1px solid var(--text-dark);
  background: #fff;
  color: var(--text-dark);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}
.tabs__item + .tabs__item { margin-left: -1px; }
.tabs__item:first-child { border-radius: 4px 0 0 4px; }
.tabs__item:last-child { border-radius: 0 4px 4px 0; }

.tabs__item.is-active {
  position: relative;
  z-index: 1;
  background: var(--blue);
  border-color: var(--blue-text);
  color: #fff;
}
.tabs__item:not(.is-active):hover { color: var(--blue-text); border-color: var(--blue-text); z-index: 1; }

/* Each panel keeps the page's own vertical rhythm, so swapping panels does not
   change the spacing around the block. Without the [hidden] rule the class
   below would win over the attribute's display:none. */
.tabs-panel { display: flex; flex-direction: column; gap: 60px; }
.tabs-panel[hidden] { display: none; }

/* The desktop frame opens straight at the tabs and hides the page heading;
   the mobile frame shows it. The h1 stays in the markup either way — a page
   without one is wrong for screen readers and for search. */
@media (min-width: 601px) {
  .tabs-page__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Body copy sitting straight on the page, outside any card. */
.page-intro { margin: 0; font-size: 22px; line-height: 1.6; color: var(--text-dark); }

/* Документы во вкладке — тот же список .news-docs, что и на страницах
   документов (один шаблон news.list), шаг между плашками свой. */
.tabs-panel .news-docs { gap: 40px; }

/* ---------- 404 ---------- */

.error-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 80px 100px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
}

/* The oversized numerals are the page background colour showing through the
   white card, so they read as an embossed watermark rather than as content.
   Scaled off the viewport to keep the same proportion the mockup has at its
   own width, and clipped by the card. */
.error-page__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: min(38vw, 710px);
  font-weight: 600;
  line-height: 1;
  color: var(--blue-pale);
  pointer-events: none;
  /* Без префикса Safari понимает свойство только с 17-й версии. */
  -webkit-user-select: none;
  user-select: none;
}

/* Everything real sits above the watermark. */
.error-page > *:not(.error-page__watermark) { position: relative; }

.error-page__message { font-size: 26px; font-weight: 600; line-height: 1.6; color: var(--text-dark); }
.error-page__message h1,
.error-page__message p { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

.error-page__or { margin: 0; font-size: 26px; line-height: 1.6; color: var(--text-dark); }

/* Кнопка «Перейти на главную» уменьшена вдвое: на десктопе была 415×91, стала
   около 208×46. Поля и кегль урезаны пропорционально — половина ширины
   достижима только вместе с кеглем, одними полями её не получить.
   Значения тут действуют выше 1100: ниже их перекрывают ступени адаптива. */

.error-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  transition: background-color .15s ease;
}
.error-page__btn:hover { background: #0064b4; }

/* ---------- Documents page: accordion of document groups ---------- */

.docs-page { display: flex; flex-direction: column; gap: 60px; min-width: 0; }
.docs-page .section-title { margin: 0; }

/* Страница без групп («Законодательство»): плашки идут прямым списком, а не
   внутри аккордеона. Такой список читается как одна таблица, поэтому он
   плотнее — и между плашками, и внутри них. Селектор с прямым потомком не
   задевает страницы с группами: там .news-docs нет, плашки лежат в
   .doc-accordion__body. */
.docs-page .news-docs { gap: 28px; }
.docs-page .news-docs .doc-plate { padding: 32px; }

@media (max-width: 600px) {
  .docs-page .news-docs { gap: 16px; }
  .docs-page .news-docs .doc-plate { padding: 16px; }
}

.doc-accordion { display: flex; flex-direction: column; gap: 60px; }

/* Every group but the first is preceded by a rule, so the stack reads as one
   list rather than as separate cards. */
.doc-accordion__section { display: flex; flex-direction: column; gap: 40px; }
.doc-accordion__section + .doc-accordion__section { padding-top: 40px; border-top: 1px solid var(--text-dark); }

/* Заголовок обёрнут вокруг кнопки, а не наоборот: заголовок внутри button —
   невалидная разметка, а скринридеру нужен и уровень заголовка, и кнопка. */
.doc-accordion__heading {
  margin: 0;
  font: inherit;
}
.doc-accordion__header {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: left;
}
.doc-accordion__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-dark);
}
.doc-accordion__toggle {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  transition: background-color .15s ease;
}
.doc-accordion__toggle:hover { background: #0064b4; }
.doc-accordion__toggle svg { width: 18px; height: 18px; }
/* One glyph swaps for the other; a rotated plus would read as a plus tilted,
   not as a cross, so the two shapes are separate. */
.doc-accordion__toggle .icon-minus { display: none; }
[aria-expanded="true"] .doc-accordion__toggle .icon-plus { display: none; }
[aria-expanded="true"] .doc-accordion__toggle .icon-minus { display: block; }

.doc-accordion__body { display: flex; flex-direction: column; gap: 40px; }
.doc-accordion__body[hidden] { display: none; }

.docs-empty { margin: 0; font-size: 22px; line-height: 1.6; color: var(--text-dark); }
.docs-empty[hidden] { display: none; }
.doc-accordion__section[hidden] { display: none; }

/* ---------- Photo viewer ---------- */

/* Wrapper the lightbox script puts around every clickable picture. It is
   layout-transparent: the surrounding grid/flex rules still size the image. */
.lightbox-trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px;
}
.lightbox[hidden] { display: none; }

.lightbox__scrim { position: absolute; inset: 0; background: rgba(55, 55, 55, .9); }

/* The picture sits on the same white card the rest of the site uses. */
.lightbox__frame {
  position: relative;
  margin: 0;
  padding: 30px;
  max-width: 1285px;
  max-height: 100%;
  border-radius: var(--radius);
  background: #fff;
  overflow: auto;
}
.lightbox__frame img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  width: auto;
  border-radius: 4px;
  object-fit: contain;
}

.lightbox__arrow {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  transition: background-color .15s ease;
}
.lightbox__arrow:hover { background: #0064b4; }
.lightbox__arrow[hidden] { display: none; }

.lightbox__close {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: #fff;
  transition: background-color .15s ease;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .15); }

.lightbox__dots {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
}
.lightbox__dots[hidden] { display: none; }
.lightbox__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--hero-accent);
}
.lightbox__dot.is-active { background: var(--blue); }

/* A picture that opens the viewer should look like it does something. */
[data-lightbox] { cursor: zoom-in; }

/* ---------- Responsive ---------- */

/* Ноутбучная полоса 1440–1700: боковое меню раздела остаётся, но сужается.
   Поле контейнера здесь ещё растёт (clamp в .container), поэтому на полной
   ширине 420 + 55 колонка контента на 1440 ужимается до ~845px. Узкое меню
   отдаёт контенту ~945px, а само остаётся читаемым. Кегль внутри задан
   отдельным блоком в конце файла — там веса выше, см. комментарий у него.
   Ниже 1440 меню скрывается совсем (правило под этим блоком).

   html:not(.a11y-mode) — в версии для слабовидящих пункты меню 26px, в 320
   они бы ломались; там колонка остаётся полной. Заодно этот довесок даёт
   вес выше базового правила. */
@media (min-width: 1440px) and (max-width: 1700px) {
  html:not(.a11y-mode) .press-page__layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 40px;
  }

  html:not(.a11y-mode) .press-sidebar { gap: 16px; }
  html:not(.a11y-mode) .press-sidebar__title { min-height: 72px; padding: 10px 16px; }
  html:not(.a11y-mode) .press-sidebar__item { min-height: 46px; padding: 10px 16px; }
  html:not(.a11y-mode) .press-sidebar__links-title { padding: 10px 16px; margin-top: 24px; }

  html:not(.a11y-mode) .press-link { gap: 14px; padding: 10px 16px; }
  html:not(.a11y-mode) .press-link__text { gap: 8px; }
  html:not(.a11y-mode) .press-link__logo { width: 60px; }
}

/* Tablet landscape (~900–1100px, e.g. iPad landscape): trims desktop type
   scale down a notch and switches the 3/4-column grids to 2 columns, but
   keeps news cards side by side and the footer nav in two columns — there's
   still enough width for that here. */
/* Ниже 1440 боковое меню раздела убирается: на такой ширине колонка контента
   становится слишком узкой, а сами разделы остаются доступны из меню в шапке.
   Контент при этом занимает всю ширину. */
@media (max-width: 1439px) {
  .press-page__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .press-sidebar { display: none; }
}

@media (max-width: 1100px) {
  .topbar__contacts { display: none; }

  .hero__eyebrow { font-size: 16px; letter-spacing: 3px; }
  .hero__title { font-size: 42px; max-width: 780px; }
  .hero__lead { font-size: 20px; }
  .section-title { font-size: 34px; }

  .news-card h3 { font-size: 32px; }
  .news-card time { font-size: 19px; }
  .news-card p { font-size: 19px; }

  .tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile p { font-size: 19px; }

  .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .link-card__url, .link-card p { font-size: 19px; }

  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__col-brand { grid-column: 1 / -1; border-right: none; padding-right: 0; }

  .news-feature__body h2, .news-card-lg__body h3 { font-size: 22px; }
  .news-feature__body p, .news-card-lg__body p, .news-search__field input, .news-date { font-size: 19px; }

  .timeline__text { font-size: 19px; }
  .timeline__content { padding-bottom: 60px; }

  .person-card { gap: 30px; }
  .person-card .avatar { width: 180px; height: 180px; }
  .person-card__name { font-size: 26px; }
  .person-card__role { font-size: 19px; }

  .member-grid { gap: 30px; }
  .member-card { gap: 20px; }
  .member-card .avatar { width: 120px; height: 120px; }
  .member-card__name { font-size: 22px; }
  .member-card__role { font-size: 18px; }

  .member-feed { gap: 40px; }
  .member-activity { gap: 30px; }
  .member-activity__meta { width: 150px; font-size: 18px; }
  .member-activity__title { font-size: 22px; }
  .member-activity__excerpt { font-size: 18px; }
  .member-activity__media { width: 240px; height: 180px; }

  .structure-page { gap: 40px; }

  .docs-page { gap: 40px; }
  .doc-accordion { gap: 40px; }
  .doc-accordion__section { gap: 30px; }
  .doc-accordion__section + .doc-accordion__section { padding-top: 30px; }
  .doc-accordion__title { font-size: 28px; }
  .doc-accordion__body { gap: 30px; }

  .search-page__layout { gap: 40px; }
  .search-field { min-height: 70px; padding: 0 24px; gap: 20px; }
  .search-field--flush { padding-left: 30px; }
  .search-field svg { width: 30px; height: 30px; }
  .search-group { gap: 40px; }
  .search-group__body { gap: 30px; }
  .search-group__title { font-size: 28px; }
  .search-result { gap: 30px; }
  .search-result__meta { width: 200px; }
  .search-result__date, .search-result__text { font-size: 18px; }
  .search-result__title { font-size: 22px; }
  .search-result__body .news-more { font-size: 18px; }
  .search-result__media { width: 240px; height: 180px; }

  .error-page { padding: 60px 40px; gap: 30px; }
  .error-page__message { font-size: 26px; }
  .error-page__or { font-size: 24px; }
  .error-page__btn { font-size: 24px; padding: 20px 40px; }

  .tabs__item { min-height: 70px; padding: 16px; font-size: 18px; }
  .page-intro { font-size: 19px; }
  .tabs-panel .news-docs { gap: 30px; }

  .tabs-panel { gap: 40px; }

  .text-page { gap: 40px; }
  .text-card { font-size: 19px; gap: 24px; }
  .text-card h2 { font-size: 28px; }
  .text-card--loose { gap: 40px; }
  .text-block { gap: 24px; }

  .appeal-banner { min-height: 0; gap: 24px; }
  .appeal-banner__body { gap: 30px; }
  .appeal-banner__btn { padding: 16px 28px; }

  .section-page { gap: 40px; }
  .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .section-card__title { font-size: 22px; }
  .section-card .news-more { padding-top: 60px; }

  .contacts-page { gap: 40px; }
  .contact-tile__title, .head-card__name, .dept-row__name, .dept-person__name { font-size: 22px; }
  .contact-tile__body p, .head-card__role, .dept-person__role, .dept-person__phone { font-size: 18px; }
  .head-card { gap: 20px; }
  /* Three officer cards beside a long department name leave no usable column
     width here, so the department heads its own full-width row. */
  .dept-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dept-row__name { grid-column: 1 / -1; }
  .dept-row .dept-person:only-of-type { grid-column: 1 / -1; }

  .news-article__title { font-size: 28px; }
  .news-block-title { font-size: 30px; }
  .news-article__content p,
  .news-article__published,
  .news-gallery__counter,
  .news-doc__name,
  .news-doc__size,
  .news-back { font-size: 19px; }
  .news-more { font-size: 19px; }
  .plan-table th,
  .plan-table td { font-size: 18px; padding: 14px 16px; }

  /* footer__bottom's column-4/column-2 alignment only makes sense against
     footer__top's own 4-column desktop grid — once that collapses to 2
     columns here, fall back to a plain left/right split instead. The
     desktop-only negative margin-top (compensating for the brand column
     overflowing its grid row) doesn't apply either: brand becomes its own
     full-width row here, so nothing overflows into nav-col-last's row. */
  .footer__bottom { display: flex; justify-content: space-between; margin-top: 0; }
  .footer__bottom-text { grid-column: auto; }
  .footer__social { grid-column: auto; }
  /* Once the copyright fills the row, the button wraps onto a line of its own
     and would otherwise start at the left. This keeps it on the right edge,
     flush with the content column above. */
  .footer__bottom .footer__social { margin-left: auto; }
}

/* Tablet portrait (~600–800px, e.g. iPad portrait): the point where the
   two-up news grid and the side-by-side map card get too tight, so those
   stack — but tiles, links and the footer nav stay in two columns, since a
   single column would waste the width tablets still have over phones. */
@media (max-width: 800px) {
  .hero__text { padding: 32px; }
  .hero__title { font-size: 34px; max-width: none; }
  .hero__lead { font-size: 18px; }
  .hero__stats { flex-wrap: wrap; }
  .stat { width: 100%; }

  .news-grid__inner { grid-template-columns: minmax(0, 1fr); }
  .news-card h3 { font-size: 26px; }

  .section-title { font-size: 28px; }
  .map-card__body { flex-direction: column; }

  .footer__bottom { flex-wrap: wrap; }

  /* -- Фильтры новостей: с 800 берут мобильный вид целиком. --

     В строку поля живут за счёт `flex: 1` — они делят ширину поровну. Как
     только строка становится колонкой, та же `flex: 1` начинает управлять
     ВЫСОТОЙ: `flex-basis: 0` перебивает `height: 90px`, и поля схлопываются
     до высоты содержимого (42px), сохраняя при этом боковые поля в 50px и
     иконку в 40px. Получалась узкая полоса с огромными полями по краям.

     Поэтому колонка и мобильная отделка неразделимы: `height: auto` с
     padding 15px убирают конфликт, а не просто уменьшают кегль. Ниже 600
     эти же правила и работают — 600 входит в 800, отдельного блока там
     больше нет. */
  .news-search { flex-direction: column; gap: 10px; }
  .news-search__field {
    height: auto;
    padding: 15px;
    gap: 15px;
    border: 1px solid var(--text-muted);
  }
  .news-search__field input,
  .news-period-trigger { font-size: 14px; }
  .news-period-trigger { gap: 15px; }
  .news-search__field .icon,
  .news-period-trigger .icon { width: 24px; height: 24px; }
  /* Календарь выходит на всю ширину поля, а не висит окном в 320px. */
  .news-calendar { left: 0; width: 100%; }

  .news-feature { flex-direction: column; gap: 30px; padding: 24px; }
  .news-feature__media img { height: 280px; }
  .news-feed { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .news-card-lg { padding: 24px; }
  .section-card, .member-card, .dept-row, .search-result { padding: 24px; }

  .activity-listing { gap: 40px; }
  .activity-card { padding: 24px; }
  .year-filter { gap: 12px; }
  .year-filter__item { min-width: 88px; min-height: 64px; font-size: 19px; }

  .history-page { gap: 40px; }
  .timeline { padding: 24px; }
  .timeline__content { gap: 20px; padding-bottom: 40px; }
  .timeline__pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  .collegium-page { gap: 40px; }
  /* Matches the mobile frame: portrait on top, name and role centred below. */
  .person-card { flex-direction: column; text-align: center; padding: 24px; gap: 20px; }
  .person-card__text { align-items: center; }

  .structure-card, .doc-plate { padding: 24px; }

  .contact-tiles { grid-template-columns: minmax(0, 1fr); }
  .contact-heads { grid-template-columns: minmax(0, 1fr); }
  .contact-tile { padding: 24px; }

  /* Below this width the meta column and the thumbnail stop fitting beside
     the text, so the card becomes a single stack. */
  .search-result { flex-direction: column; gap: 20px; }
  .search-result__meta { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .search-result__tags { flex-direction: row; flex-wrap: wrap; }
  .search-result__media { width: 100%; height: auto; aspect-ratio: 4 / 3; }

  .error-page { padding: 40px 24px; }
  .error-page__message { font-size: 22px; }
  .error-page__or { font-size: 24px; }
  .error-page__btn { font-size: 20px; padding: 16px 32px; }

  .tabs__item { font-size: 16px; }

  .text-card { padding: 24px; }
  .text-note, .note-card { padding: 24px; }
  .note-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .text-card--loose { gap: 24px; }

  /* Arrows move below the picture once they stop fitting either side of it. */
  .lightbox { flex-wrap: wrap; gap: 20px; padding: 24px; }
  .lightbox__frame { order: -1; flex-basis: 100%; padding: 16px; }
  .lightbox__frame img { max-height: calc(100vh - 260px); }
  .lightbox__arrow { width: 48px; height: 48px; }
  .lightbox__close { top: 16px; right: 16px; width: 48px; height: 48px; }
  .lightbox__dots { bottom: 16px; gap: 10px; }
  .lightbox__dot { width: 10px; height: 10px; }

  /* Too narrow to keep the mark beside the copy — it moves below it, staying
     on the same left edge as the text rather than drifting to the centre. */
  .appeal-banner { flex-direction: column; align-items: stretch; padding: 24px; }
  .appeal-banner__body { flex: 0 0 auto; max-width: none; }
  .appeal-banner__emblem { flex: 0 0 auto; width: 220px; align-self: flex-start; }

  /* The thumbnail drops below the copy, and the category/date pair — a column
     beside the text on desktop — becomes a single line above the headline. */
  .member-activity { flex-direction: column; padding: 24px; gap: 16px; }
  .member-activity__meta { flex-direction: row; flex-wrap: wrap; width: auto; gap: 12px; }
  .member-activity__media { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .member-activity__media--empty { aspect-ratio: 2 / 1; }

  .news-detail { gap: 40px; }
  .news-article { padding: 24px 24px 40px; gap: 40px; }
  .news-article__pair { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Too little width left for the neighbour slivers to read as anything. */
  .news-gallery__peek { display: none; }
  .news-gallery__main { flex: 1 1 auto; }
  .news-doc { flex-wrap: wrap; }
  .news-doc__meta { width: 100%; justify-content: flex-end; }
  .news-related { padding-top: 20px; }
  .news-related__head { padding: 0 24px; }
  .news-related__row { grid-auto-columns: calc(100% - 8px); }
  .pager { justify-content: flex-start; }
}

/* ---------- Mobile (matches the Figma "моб Главная" frame, 390px) ---------- */

.topbar__mobile { display: none; }
.mobile-menu-toggle { display: none; }
.mobile-nav-close { display: none; }
/* The drawer's own "Версия для слабовидящих" / search — scoped past the
   .mainnav__utility wrapper's own display:none above, since these sit
   directly in the drawer now rather than nested inside it. Desktop already
   has its own copies of both in .topbar__actions. */
.mainnav__inner > .a11y-link { display: none; }
.mainnav__search { display: none; }

/* Header/nav switch to the compact mobile layout + hamburger drawer below
   laptop width. "ПРОТИВОДЕЙСТВИЕ КОРРУПЦИИ" was moved into the "ЕЩЁ" panel
   specifically so the remaining 6 items + "ОБРАЩЕНИЕ" (~1315px unwrapped)
   fit on ordinary laptop screens (1366px, 1440px) as the real desktop nav,
   not the compact one — only genuine tablets and phones need this. */
/* Between the full desktop layout and the hamburger there's a compact tier:
   the nav keeps all seven items on one row by tightening the gaps and the
   type instead of collapsing into a drawer. Without it the row needs 1664px
   of container and a 1600×900 monitor would drop to the mobile header. */
@media (max-width: 1680px) and (min-width: 1201px) {
  .mainnav__list { --mainnav-gap: 16px; }

  .appeal-link { font-size: 15px; gap: 8px; }
  .appeal-link .icon { width: 17px; height: 14px; }
}

/* Laptop band. A 1280–1440 screen is a desktop and gets the real horizontal
   menu, but the full-size header does not fit there: the address moves out of
   the top bar (it is still in the footer and on the contacts page) and the
   remaining type tightens a step. Below 1200 the drawer takes over. */
@media (max-width: 1465px) and (min-width: 1201px) {
  .topbar__inner { gap: 20px; }
  .topbar__contacts { gap: 16px; }
  /* The address is the first contact item; the phone stays. */
  .topbar__contacts .contact-item:first-child { display: none; }
  .topbar__contacts .contact-item { font-size: 14px; }
  .logo { gap: 12px; }
  .logo__img { width: 60px; height: 61px; }
  .logo__text { font-size: 13px; }
  .a11y-link { font-size: 13px; }
  .topbar__actions { gap: 10px; }
  .mainnav__list { --mainnav-gap: 10px; }
  /* Кегль пунктов ниже 1400 задаёт отдельное правило под этим блоком. */
  .appeal-link { font-size: 13px; gap: 6px; }
}

/* Шестнадцатый кегль укладывается в одну строку, пока под ряд остаётся
 * около 1280 пикселей, то есть примерно до окна 1400. Ниже пункты
 * приходится ужимать, иначе ряд переносится на вторую строку. */
@media (max-width: 1399px) and (min-width: 1201px) {
  .mainnav__link { font-size: 13px; }
  /* Пункты подвала держат кегль меню и здесь (кроме версии для слабовидящих). */
  html:not(.a11y-mode) .footer__nav-col h2,
  html:not(.a11y-mode) .footer__nav-col a { font-size: 13px; }
}

@media (max-width: 1200px) {
  /* -- Top blue stripe -- */
  .topbar-stripe { height: 10px; }

  /* -- Header: swap desktop row for the mobile 2-row layout -- */
  .topbar__inner { display: none; }
  .topbar__mobile { display: block; }
  .topbar { border-bottom: none; }

  .topbar__mobile-contacts {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 10px;
  }
  .topbar__mobile-contacts .contact-item { font-size: 14px; gap: 8px; }
  .topbar__mobile-contacts .contact-item:last-child { flex-shrink: 0; white-space: nowrap; }

  /* Адрес занимает две строки, телефон одну, а базовое правило центрирует
     иконку по всей высоте пункта — из-за этого булавка уезжала вниз, к
     середине двух строк, и оказывалась на 9 пикселей ниже трубки.

     Обе иконки прижаты к верху и уложены в одинаковый квадрат высотой в
     строку, поэтому их центры совпадают с центром первой строки — и друг с
     другом. Квадрат нужен именно одинаковый: исходники разного формата
     (булавка 20×25, трубка 22×22), и от высоты по факту зависела бы
     вертикаль. object-fit: contain вписывает рисунок в квадрат целиком,
     сохраняя пропорции. */
  .topbar__mobile-contacts .contact-item { align-items: flex-start; }
  .topbar__mobile-contacts .contact-item .icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .topbar__mobile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px;
  }
  .topbar__mobile-row .logo__img { width: 56px; height: 57px; }
  .topbar__mobile-row .logo__text { font-size: 14px; min-width: 0; }
  /* The logo is flex: 0 0 auto by default; on a 320px screen it would hold its
     full width and shove the burger off the edge, so here it may shrink and
     let the wordmark wrap. */
  .topbar__mobile-row .logo { min-width: 0; flex-shrink: 1; }
  .topbar__mobile-row .mobile-menu-toggle { flex-shrink: 0; }

  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .mobile-menu-toggle svg { width: 36px; height: 36px; }

  /* -- Main nav: collapses into a full-screen drawer opened by the hamburger -- */
  .mainnav { border-bottom: none; }

  .mainnav__inner {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--blue);
    color: #fff;
    flex-direction: column;
    align-items: stretch;
    /* Overrides the desktop rule's justify-content:space-between — left in
       place it stretches this drawer's few flow children evenly across the
       full height, producing huge uncontrolled gaps instead of the specific
       ones set below. */
    justify-content: flex-start;
    padding: 20px 10px 40px;
    overflow-y: auto;
  }
  .mainnav__inner.is-open { display: flex; }

  .mobile-nav-close {
    display: flex;
    position: absolute;
    top: var(--mobile-nav-close-top, 20px);
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    align-items: center;
    justify-content: center;
    color: var(--blue-text);
    z-index: 1;
  }
  .mobile-nav-close svg { width: 14px; height: 14px; }

  /* A real input, not a button that opens the full-screen search panel: the
     drawer stays open, the line keeps its place, and the query is typed right
     here on the blue. */
  .mainnav__search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto;
    /* Now the drawer's first flow item (search took over the slot "Версия
       для слабовидящих" used to sit in) — lines up with the address line in
       the header underneath, same as that used to (container padding-top is
       20px, so subtract that back out), plus 10px lower per request. Sits
       well clear of the close button regardless, since that floats further
       down at the toggle's own position, not up here with the address
       line. */
    margin-top: calc(var(--mobile-address-top, 44px) - 10px);
    margin-bottom: 56px;
    padding: 0 60px 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 15px;
    text-align: left;
  }
  .mainnav__search:focus-within { border-bottom-color: #fff; }
  .mainnav__search-submit { display: flex; flex-shrink: 0; color: #fff; }
  .mainnav__search-submit svg { color: #fff; }
  .mainnav__search input {
    flex: 1;
    min-width: 0;
    /* Без префикса Safari понимает свойство только с 15.4. */
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    font: inherit;
    color: #fff;
  }
  .mainnav__search input::placeholder { color: rgba(255, 255, 255, .75); opacity: 1; }
  /* The field carries the focus indication on its underline. */
  .mainnav__search input:focus { outline: none; }

  .mainnav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }
  .mainnav__list > li { border-bottom: 1px solid rgba(255,255,255,.25); }
  .mainnav__link { width: 100%; justify-content: space-between; padding: 20px 10px; font-size: 16px; color: #fff; white-space: normal; text-align: left; }
  .has-dropdown.is-open .mainnav__link,
  .mainnav__link.is-active,
  .mainnav__link:hover { color: #fff; }
  .appeal-link { padding: 24px 10px; margin-top: 12px; color: #fff; }

  /* The "ЕЩЁ" group titles run considerably longer than the other nav
     labels — let the text wrap and shrink instead of overflowing past the
     chevron, which stays put via flex-shrink:0. */
  .mainnav__link-text { flex: 1; min-width: 0; }
  .mainnav__link .chevron { width: 16px; height: 8px; flex-shrink: 0; }

  /* "ЕЩЁ" itself is replaced by its contents as flat items — see the HTML
     comment above .mainnav__eshche-item in the markup. */
  .mainnav__eshche-parent { display: none; }
  .mainnav__eshche-item { display: block; }

  /* Inline accordion: a nav item's own sub-links expand in place (borrowed
     from its .dropdown-panel — see openAccordion/closeAccordion in main.js)
     instead of opening the full-screen mega-menu, and the drawer's own
     overflow-y:auto scrolls to reach whatever it reveals. Collapsed to 0
     rather than hidden outright so the max-height transition has something
     to animate between. */
  .mainnav__accordion {
    overflow: hidden;
    max-height: 0;
    padding: 0 10px 0 20px;
    transition: max-height .3s ease;
  }
  .has-dropdown.is-accordion-open .mainnav__link { color: #fff; }
  .has-dropdown.is-accordion-open .mainnav__link .chevron { transform: rotate(180deg); }

  /* The borrowed content keeps its .dropdown-panel styling (already tuned
     for this same breakpoint), just with tighter top/bottom padding to suit
     living under a nav item instead of under a full-screen panel header. */
  .mainnav__accordion .dropdown-panel__divider { display: none; }
  .mainnav__accordion .dropdown-panel__grid,
  .mainnav__accordion .dropdown-panel__groups { padding: 0 0 24px; margin-top: 0; border-top: none; }
  .mainnav__accordion .dropdown-panel__flat-links { padding: 0 0 20px; }
  .mainnav__accordion > .goto-link,
  .mainnav__accordion > .dropdown-group__goto {
    /* .mainnav__accordion's own left padding (20px) sits 10px further in
       than the item's own title button (10px, from .mainnav__link) — pull
       this back out so "ПЕРЕЙТИ В РАЗДЕЛ" lines up with the title above it,
       same as the accordion's other list items are meant to look nested,
       just not this one call-to-action line. */
    margin-left: -10px;
    padding: 4px 0 32px;
    margin-bottom: 0;
  }

  /* The "ЕЩЁ" groups (Кадровое обеспечение и т.д.), now listed as their own
     top-level accordions, otherwise space their links with plain flex gap
     and no line between them — give them the same nth-child divider
     treatment .dropdown-panel__grid a already gets above, so every
     accordion's link list reads the same regardless of which one it
     borrowed its content from. */
  .mainnav__accordion .dropdown-group__list { gap: 0; }
  .mainnav__accordion .dropdown-group__list a { padding: 20px 0; }
  .mainnav__accordion .dropdown-group__list a:first-child { padding-top: 0; }
  .mainnav__accordion .dropdown-group__list a:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,.25); }

  .mainnav__utility {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    margin-top: 12px;
  }
  .mainnav__utility > .a11y-link { color: #fff; font-size: 15px; }
  .mainnav__utility > .a11y-link img { filter: brightness(0) invert(1); }
  .mainnav__utility-row {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .mainnav__utility-row .icon-btn { width: 48px; height: 48px; }
  .mainnav__utility-row .icon-btn img { width: 100%; height: 100%; }

  /* Dropdown sub-panels: full-screen takeover on top of the nav drawer */
  .dropdown-scrim {
    position: fixed;
    inset: 0;
    height: auto;
    z-index: 50;
    background: var(--blue);
    overflow-y: auto;
  }
  .dropdown-panel__head { padding-top: 20px; }
  .dropdown-panel__head h2 { font-size: 20px; }
  .dropdown-panel__grid,
  .dropdown-panel__groups { --dropdown-cols: 1; }
  .dropdown-panel__grid a:nth-child(n+2) { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.25); }
  .dropdown-panel__grid a:nth-child(n+4) { padding-top: 20px; }
  .dropdown-group:nth-child(n+2) { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.25); }
  /* В одну колонку ряд — это одна ссылка, и линию здесь рисует border-top,
     а не ::after десктопной раскладки: без этого у размеченных ссылок
     сошлись бы обе и линия стала бы вдвое толще. */
  .dropdown-panel__grid a.is-row-first { padding-top: 0; border-top: none; }
  .dropdown-panel__grid a.is-row-next { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.25); }
  .dropdown-panel__grid a.is-row-next::after { content: none; }
  .dropdown-panel__grid a.is-row-next::before { top: 25px; }
  .dropdown-group.is-row-next { padding-top: 20px; }
  .dropdown-panel__flat-links { flex-direction: column; gap: 20px; }
}

@media (max-width: 600px) {
  .container { padding: 0 10px; }
  /* #mainnav-inner also carries .container (for its desktop centering/
     max-width) — the rule above would otherwise zero out the vertical
     padding this drawer depends on for every offset set above. ID beats
     class regardless of source order, so this restores it. */
  #mainnav-inner { padding: 20px 10px 40px; }
  body { background-image: none; }

  /* -- Hero -- */
  .hero { padding: 10px 0 0; }
  .hero__card { min-height: 0; background: #0098e0; }
  .hero__bg {
    top: auto;
    bottom: 0;
    height: 25%;
    object-position: bottom;
  }
  .hero__text { padding: 20px; min-height: 0; max-width: none; }
  .hero__eyebrow { font-size: 14px; letter-spacing: 2.8px; }
  .hero__title { font-size: 30px; max-width: none; }
  .hero__lead { font-size: 15px; max-width: none; }
  .hero__stats { flex-direction: column; gap: 20px; }
  .stat { width: 100%; }

  /* -- News cards -- */
  .news-grid { padding: 20px 0; }
  .news-grid__inner { gap: 20px; }
  .news-card { padding: 20px; border: 1px solid #e4e4e4; }
  .news-card h3 { font-size: 18px; margin-bottom: 10px; }
  .news-card time { font-size: 14px; margin-bottom: 10px; }
  .news-card p { font-size: 14px; }
  .news-card__footer { padding-top: 30px; }
  .news-card__footer > a { font-size: 14px; }
  .carousel-controls { gap: 10px; }
  .carousel-controls button { width: 36px; height: 36px; }

  /* -- Map section: map first, hint card below -- */
  .map-section { padding: 20px 0; }
  .section-title { font-size: 20px; }
  .map-card { padding: 0; background: none; border: none; box-shadow: none; }
  .map-card__title { margin-bottom: 20px; }
  .map-card__body { gap: 20px; }
  .map-image { order: -1; }
  .map-info { flex-basis: auto; }
  .map-hint, .map-details { border-radius: 10px; padding: 20px; font-size: 14px; }
  .map-details h3 { font-size: 16px; }

  /* -- Tiles: single column, smaller icons, visible border -- */
  .tiles { padding: 0 0 20px; }
  .tiles__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tile { padding: 20px; gap: 20px; border: 1px solid #d8dbdf; }
  .tile__icon { width: 60px; height: 60px; }
  .tile p { font-size: 14px; }
  .tile__arrow { width: 36px; height: 36px; }

  /* -- Links section: horizontal swipe carousel, tinted cards -- */
  .links-section { padding: 0 0 20px; }
  .links-section__head { margin-bottom: 20px; }
  .eyebrow { font-size: 12px; letter-spacing: 2.4px; margin-bottom: 10px; }
  .links-section__row .section-title { font-size: 20px; }
  /* Карусель выходит на всю ширину экрана (отрицательные поля гасят поля
     контейнера), а свои 10px возвращают первую и последнюю карточку на общую
     линию с заголовками и плитками. */
  .links-grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    /* Область привязки по умолчанию — padding-box, поэтому «start» у первой
       карточки означал её край вплотную к краю экрана: браузер сам прокручивал
       ленту на 10px, и отступ слева пропадал. Здесь область привязки сдвинута
       внутрь на те же 10px, и непрокрученное положение снова допустимо. */
    scroll-padding-left: 10px;
    scroll-padding-right: 10px;
  }
  .link-card {
    background: #fff;
    flex: 0 0 245px;
    padding: 20px;
    scroll-snap-align: start;
  }
  .link-card__url, .link-card p { font-size: 14px; }

  /* -- Footer: social icons sit next to the email row, not at the bottom -- */
  .footer__email-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
  }
  .footer__social--mobile { display: flex; }
  .footer__bottom .footer__social > a { display: none; }

  /* -- Footer: single column, nav columns hidden (not present on mobile design) -- */
  .footer__top { grid-template-columns: minmax(0, 1fr); padding: 30px 10px; gap: 30px; }
  .footer__col-brand { border-right: none; padding-right: 0; }
  .footer__nav-col { display: none; }
  .footer__brand .logo__img { width: 78px; height: 79px; }
  .footer__brand .logo__text { font-size: 16px; }
  .footer__contacts { font-size: 16px; margin-top: 20px; }
  .footer__contacts .label { font-size: 16px; }
  .footer__buttons { margin-top: 20px; }
  .btn-outline { font-size: 16px; }
  .footer__social img { width: 50px; height: 50px; }
  .scroll-top { width: 36px; height: 36px; }
  .scroll-top svg { width: 13px; height: 15px; }
  .footer__bottom { padding: 20px 10px 30px; font-size: 14px; flex-wrap: wrap; gap: 12px; }
  .footer__bottom-text { gap: 12px; }

  /* -- News listing page: matches the Figma "моб Новости" frame (390px).
     The press-centr sidebar (submenu + "Полезные ссылки") isn't part of
     that frame at all, not just reflowed, so it's hidden outright rather
     than stacked above the content. -- */
  /* padding-top парный к .press-page ниже — держит отступы вокруг крошек
     одинаковыми, см. комментарий в секции Breadcrumb. */
  .breadcrumb { font-size: 12px; padding-top: 20px; padding-left: 0; }
  /* The current page starts on its own line, so it always has the full width
     to fill before the ellipsis. */
  .breadcrumb .is-truncatable { flex-basis: 100%; }
  .press-page { padding: 20px 0 40px; }
  .press-page__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .news-listing { gap: 30px; }
  .news-listing .section-title { font-size: 28px; }

  /* Фильтры новостей сюда не дублируются: их мобильный вид переехал в блок
     @media (max-width: 800px) целиком, а 600 входит в 800. */

  .news-feature,
  .news-card-lg { flex-direction: column; padding: 20px; gap: 10px; }
  .news-feature__media,
  .news-card-lg__media { margin-bottom: 0; }
  .news-feature__media img,
  .news-card-lg__media img { height: 230px; }
  .news-feature__body,
  .news-card-lg__body { gap: 10px; }
  .news-tag { font-size: 11px; }
  .news-date { font-size: 14px; }
  .news-feature__body h2,
  .news-card-lg__body h3 { font-size: 18px; }
  .news-feature__body p,
  .news-card-lg__body p { font-size: 14px; }
  .news-feature__body .news-more,
  .news-card-lg .news-more { margin-top: 0; padding-top: 10px; }
  .news-more { font-size: 14px; gap: 10px; }
  .news-more svg { width: 16px; height: 14px; }

  .news-feed { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }

  .activity-listing { gap: 24px; }
  .activity-card { padding: 20px; gap: 10px; }
  .activity-card__meta { gap: 10px; }
  .activity-card__date { font-size: 14px; }
  .activity-card__title { font-size: 18px; }
  .activity-card p { font-size: 14px; }
  .year-filter { gap: 10px; }
  .year-filter__item { min-width: 0; min-height: 44px; padding: 0 14px; font-size: 14px; }

  .collegium-page, .structure-page, .contacts-page, .section-page { gap: 24px; }
  .text-page { gap: 30px; }
  /* The mobile frame tints the standalone document plates; the ones stacked
     inside a .news-docs list stay white. */
  .text-page .doc-plate { background: var(--avatar-bg); }
  .collegium-page .section-title,
  .structure-page .section-title,
  .contacts-page .section-title,
  .section-page .section-title,
  .text-page .section-title { font-size: 20px; }

  /* The mobile frame keeps both tabs on one row — the labels wrap inside
     their halves rather than the pair stacking. */
  .tabs__item { min-height: 74px; padding: 10px 20px; font-size: 14px; }
  .page-intro { font-size: 14px; }
  .tabs-panel .news-docs { gap: 20px; }

  .docs-page { gap: 24px; }
  .docs-page .section-title { font-size: 20px; }
  .doc-accordion { gap: 24px; }
  .doc-accordion__section { gap: 20px; }
  .doc-accordion__section + .doc-accordion__section { padding-top: 20px; }
  .doc-accordion__header { gap: 12px; }
  .doc-accordion__title { font-size: 18px; }
  .doc-accordion__toggle { width: 36px; height: 36px; }
  .doc-accordion__toggle svg { width: 14px; height: 14px; }
  .doc-accordion__body { gap: 16px; }
  .docs-empty { font-size: 14px; }

  .search-page__layout { gap: 24px; }
  .search-page__layout .section-title { font-size: 20px; }
  .search-field { min-height: 52px; padding: 0 16px; gap: 10px; }
  .search-field--flush { padding-left: 16px; }
  .search-field input { font-size: 14px; }
  .search-field svg { width: 22px; height: 22px; }
  .search-filters { gap: 16px; }
  .search-filters__row { gap: 8px; padding: 0; }
  .search-filters__label { padding: 6px 0; font-size: 14px; width: 100%; }
  .filter-tag { padding: 6px 12px; font-size: 14px; }
  .search-group { gap: 24px; }
  .search-group__body { gap: 16px; }
  .search-group__title { font-size: 20px; }
  .search-result { padding: 20px; }
  .search-result__date, .search-result__text { font-size: 14px; }
  .search-result__title { font-size: 17px; }
  .search-result__tag { font-size: 13px; padding: 4px 10px; }
  .search-result__body .news-more { font-size: 15px; gap: 12px; }
  /* Пагинация поиска идёт по общему правилу ниже в этом же блоке — оба вида
     плашек (.pager__item статической разметки и .pager__btn от скрипта)
     приведены к одному размеру по макету. */

  .error-page { padding: 30px 16px; gap: 20px; }
  .error-page__message { font-size: 17px; }
  .error-page__or { font-size: 18px; }
  .error-page__btn { font-size: 15px; padding: 14px 24px; }

  .tabs-panel { gap: 20px; }

  .text-card { padding: 20px; font-size: 14px; gap: 20px; }
  .text-card h2 { font-size: 18px; font-weight: 500; }
  .text-block { gap: 20px; }
  .text-body ul { padding-left: 22px; }
  .text-note, .note-card { padding: 20px; }
  .note-card { gap: 16px; }
  .note-card__icon { width: 48px; height: 48px; }
  .note-card__icon img { width: 32px; height: 32px; }

  /* The mobile mockup runs the banner edge to edge — out through the card's
     padding and the container's — and tucks a small mark into the right side
     of the copy rather than placing it below. */
  /* Dropping the card's bottom padding lets the banner finish the card, the
     way the mockup ends the block at the banner's edge. */
  .text-card--loose { padding-bottom: 0; }
  .appeal-banner {
    display: block;
    margin: 0 -30px;
    padding: 20px 30px;
    border-radius: 0;
  }
  .appeal-banner__body { gap: 20px; max-width: none; }
  .appeal-banner__slogan { gap: 20px; }
  .appeal-banner__title { font-size: 20px; }
  .appeal-banner__lead { font-size: 18px; font-weight: 500; }
  .appeal-banner__features { flex-direction: column; gap: 10px; }
  .appeal-banner__feature-icon { width: 36px; height: 36px; }
  .appeal-banner__feature-icon img { width: 24px; height: 24px; }
  .appeal-banner__feature span { font-size: 16px; }
  /* Tighter than the mockup's 20px so the label still fits on one line at
     375px, the narrowest common phone. */
  .appeal-banner__btn { font-size: 14px; padding: 15px 12px; align-self: stretch; }
  /* Anchored to the bottom so it keeps sitting on the button no matter how
     many lines the headline takes. */
  .appeal-banner__emblem {
    position: absolute;
    right: 36px;
    bottom: 75px;
    width: 121px;
  }
  .section-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .section-card { padding: 20px; }
  .section-card__title { font-size: 17px; }
  .section-card .news-more { padding-top: 30px; }
  .structure-card, .doc-plate { padding: 20px; }

  /* One card holds the chart and its PDF, 30px apart — as in the mobile frame.
     The two blocks give up their own card treatment to the wrapper. */
  .structure-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    border-radius: 4px;
    background: #fff;
    box-shadow: var(--card-shadow);
  }
  .structure-block > .structure-card,
  .structure-block > .doc-plate {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .structure-block > .doc-plate { padding: 0 15px; }

  .contact-tiles, .contact-heads, .dept-table { gap: 16px; }
  .contact-tile { gap: 16px; padding: 20px; }
  .contact-tile__icon { padding: 8px; }
  .contact-tile__icon img { width: 32px; height: 32px; }
  .contact-tile__body { gap: 12px; }
  .head-card { gap: 16px; padding: 20px; }
  .head-card__photo { width: 72px; height: 72px; }
  .dept-row { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 12px; }
  .dept-row__name { padding: 0 0 4px; }
  .dept-person { padding: 16px; gap: 6px; }
  .contact-tile__title, .head-card__name,
  .dept-row__name, .dept-person__name { font-size: 17px; }
  .contact-tile__body p, .head-card__role,
  .dept-person__role, .dept-person__phone { font-size: 14px; }
  .person-card { padding: 20px; }
  .person-card .avatar { width: 150px; height: 150px; }
  .person-card__name { font-size: 20px; }
  .person-card__role { font-size: 15px; }

  .member-grid { gap: 16px; }
  .member-card { gap: 16px; padding: 20px; }
  .member-card .avatar { width: 90px; height: 90px; }
  .member-card .avatar--empty img { width: 46px; }
  .member-card__text { gap: 6px; }
  .member-card__name { font-size: 17px; }
  .member-card__role { font-size: 14px; }

  .member-feed { gap: 20px; }
  .member-activity { padding: 20px; }
  .member-activity__meta { font-size: 14px; }
  .member-activity__title { font-size: 18px; }
  .member-activity__excerpt { font-size: 14px; }
  .member-activity__media--empty img { width: 46px; }

  .history-page { gap: 24px; }
  .history-page .section-title { font-size: 20px; }
  .timeline { padding: 20px; }
  /* Year, rail and text side by side leave the copy barely 200px here, so the
     year chip moves above the text and only the rail keeps its own column. */
  .timeline__item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas: "rail year" "rail content";
    column-gap: 12px;
  }
  .timeline__year { grid-area: year; width: 66px; padding: 4px 8px; font-size: 13px; margin-bottom: 12px; }
  .timeline__rail { grid-area: rail; width: 24px; padding: 6px; }
  .timeline__content { grid-area: content; gap: 16px; padding-bottom: 30px; }
  .timeline__rail img { width: 12px; height: 12px; }
  .timeline__text { font-size: 14px; }
  .timeline__text ul { padding-left: 22px; }
  .timeline__video-play { width: 42px; height: 42px; }

  .news-detail { gap: 24px; }
  .news-back { font-size: 16px; padding: 0; gap: 12px; }
  .news-article { padding: 20px; gap: 30px; }
  .news-article__title { font-size: 20px; }
  .news-block-title { font-size: 20px; }
  .news-article__meta { gap: 12px; }
  .news-article__published { font-size: 14px; gap: 12px; }
  /* The clock reads as clutter at this size — the date alone is enough. */
  .news-article__published .icon { display: none; }
  .news-article__content { gap: 24px; }
  .news-article__content p,
  .news-gallery__counter,
  .news-doc__name,
  .news-doc__size { font-size: 14px; }
  .plan-table { min-width: 620px; }
  .plan-table th,
  .plan-table td { font-size: 16px; padding: 10px 12px; }
  .plan-table__num { width: 76px; }
  .plan-table__term { width: 120px; }
  .news-gallery,
  .news-docs { gap: 24px; }
  .news-gallery__stage { gap: 16px; }
  .news-gallery__arrow { width: 44px; height: 44px; }
  .news-doc { gap: 12px; }
  .news-doc__icon { width: 40px; height: 45px; }
  .news-doc__meta { gap: 12px; }
  /* Размер стоит вплотную к кнопкам, группой у правого края — как в мобильном
     макете документов («моб Документы»). Раньше margin-right: auto уводил его
     к левому краю плашки, отрывая от файла, к которому он относится. */
  .news-doc__size { width: auto; height: 44px; padding: 0; }
  .news-doc__action { width: 44px; height: 44px; }
  .news-doc__action svg { width: 22px; height: 22px; }
  .news-related { padding-top: 10px; gap: 24px; }
  .news-related__head { padding: 0; flex-direction: column; align-items: flex-start; gap: 16px; }
  .news-related__row { gap: 20px; grid-auto-columns: calc(100% - 8px); }

  /* Пагинация по мобильному макету (390px, узел «пагинация» 370×74): два
     ряда высотой 32, между рядами и между плашками — по 10. Подпись 80px без
     боковых полей, плашка — 5 сверху и снизу, 15 по бокам, строка 22.

     «Предыдущая» и «Следующая» в макете на телефоне отсутствуют. Скрыты
     здесь, а не убраны из разметки: на десктопе они нужны, а рисует их общий
     код пагинации (js/news.js и js/activity.js) для обеих раскладок. Без
     этого ряд номеров переносился на третью строку и блок вырастал вдвое. */
  .pager { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pager__group { gap: 10px; row-gap: 10px; flex-wrap: wrap; }
  /* Подпись держит колонку, чтобы плашки в обоих рядах начинались с одной
     вертикали, как в макете. Там колонка 80px, но «Страницы:» шрифтом сайта
     занимает 83.5 и в 80 не влезает — переносилось на вторую строку и ряд
     разъезжался. Отсюда 85 и запрет переноса: ширина минимальная, поэтому в
     режиме для слабовидящих подпись просто раздвигает колонку, а не рвётся. */
  .pager__label { min-width: 85px; padding: 0; white-space: nowrap; }
  /* Две разновидности плашек: .pager__btn рисует скрипт на новостях и
     мероприятиях, .pager__item лежит статикой на поиске. Размер у них один.
     inline-flex нужен .pager__item и .pager__gap: это ссылки и span, у строчных
     элементов высота не работает. */
  .pager__label,
  .pager__btn, .pager__ellipsis,
  .pager__item, .pager__gap { font-size: 16px; line-height: 22px; }
  .pager__btn, .pager__ellipsis,
  .pager__item, .pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-height: 0;
    min-width: 0;
    padding: 5px 15px;
  }
  /* Многоточие в макете — такая же голубая плашка, как номера. На новостях
     (.pager__ellipsis) она такой и была, на поиске (.pager__gap) шла голым
     текстом; здесь оба вида приведены к макету. */
  .pager__gap { background: var(--hero-accent); border-radius: 4px; }

  /* После правил выше: они задают плашкам display, и с равным весом побеждает
     то, что ниже по файлу. */
  .pager__nav { display: none; }
}

/* ---------- Кегль контента на 2 мельче: все страницы, кроме новостей ---------- */

/* Каждый кегль внутри <main> уменьшен ровно на два пикселя; 16px и мельче
   оставлены как были. Шапка и подвал лежат вне <main> — их блок не касается.

   Почему отдельным блоком, а не правкой базовых правил: страница новостей
   должна остаться прежней (у неё свой блок, п.21 README), а базовые правила
   у неё общие с остальными. Селектор main#main-content:not(.news-page)
   отсекает её и не требует ни одной правки в HTML.

   html:not(.a11y-mode) обязателен. Вес этого селектора выше, чем у правил
   версии для слабовидящих (html.a11y-mode .foo), — без оговорки блок перебил
   бы их и режим перестал бы увеличивать текст.

   Строки, где кегль совпадает с исходным (16px и мельче), выписаны нарочно:
   вес селектора здесь выше базового, и без них значение с широкой раскладки
   протекало бы в узкую вместо адаптивной лестницы. Медиа-запросы повторяют
   исходные один в один и идут в том же порядке, поэтому эффективный размер
   на любой ширине равен исходному минус два.

   Меняете кегль в базовых правилах — поправьте и здесь. */

html:not(.a11y-mode) main#main-content:not(.news-page) .hero__eyebrow { font-size: 16px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .hero__title { font-size: 52px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .hero__lead { font-size: 22px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .stat strong { font-size: 36px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .stat strong em { font-size: 14px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .stat span { font-size: 15px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-card h3 { font-size: 40px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-card time,
html:not(.a11y-mode) main#main-content:not(.news-page) .news-card p,
html:not(.a11y-mode) main#main-content:not(.news-page) .news-card__footer > a { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .section-title { font-size: 40px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .map-hint { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .map-details h3 { font-size: 16px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .map-details dt { font-size: 13px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .map-details dd { font-size: 15px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .map-image__error { font-size: 16px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .tile p { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .eyebrow { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .link-card__url,
html:not(.a11y-mode) main#main-content:not(.news-page) .link-card p { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .breadcrumb { font-size: 16px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .press-sidebar__title,
html:not(.a11y-mode) main#main-content:not(.news-page) .press-sidebar__item,
html:not(.a11y-mode) main#main-content:not(.news-page) .press-sidebar__links-title,
html:not(.a11y-mode) main#main-content:not(.news-page) .press-link__text { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-search__field input,
html:not(.a11y-mode) main#main-content:not(.news-page) .news-period-trigger { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-calendar__title { font-size: 16px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-calendar__weekdays { font-size: 12px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-calendar__day,
html:not(.a11y-mode) main#main-content:not(.news-page) .news-calendar__reset,
html:not(.a11y-mode) main#main-content:not(.news-page) .news-calendar__apply { font-size: 14px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-empty { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-tag { font-size: 16px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-date,
html:not(.a11y-mode) main#main-content:not(.news-page) .news-more { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-feature__body h2 { font-size: 24px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-feature__body p { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-card-lg__body h3 { font-size: 24px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-card-lg__body p,
html:not(.a11y-mode) main#main-content:not(.news-page) .year-filter__item,
html:not(.a11y-mode) main#main-content:not(.news-page) .activity-card__date { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .activity-card__title { font-size: 24px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .activity-card p,
html:not(.a11y-mode) main#main-content:not(.news-page) .news-back,
html:not(.a11y-mode) main#main-content:not(.news-page) .news-article__published { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-article__title { font-size: 30px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-article__content p { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .plan-table th,
html:not(.a11y-mode) main#main-content:not(.news-page) .plan-table td { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-block-title { font-size: 36px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .news-gallery__counter,
html:not(.a11y-mode) main#main-content:not(.news-page) .news-doc__name,
html:not(.a11y-mode) main#main-content:not(.news-page) .news-doc__size { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .pager__label,
html:not(.a11y-mode) main#main-content:not(.news-page) .pager__btn,
html:not(.a11y-mode) main#main-content:not(.news-page) .pager__ellipsis { font-size: 16px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .search-page__query,
html:not(.a11y-mode) main#main-content:not(.news-page) .search-field input { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .search-filters__label,
html:not(.a11y-mode) main#main-content:not(.news-page) .filter-tag { font-size: 16px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .search-group__title { font-size: 36px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .search-empty,
html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__date { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__tag { font-size: 16px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__title { font-size: 24px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__text { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .pager__label,
html:not(.a11y-mode) main#main-content:not(.news-page) .pager__gap,
html:not(.a11y-mode) main#main-content:not(.news-page) .pager__item,
html:not(.a11y-mode) main#main-content:not(.news-page) .timeline__year { font-size: 16px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .timeline__text { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .person-card--sm .person-card__name { font-size: 24px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .person-card__name { font-size: 30px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .person-card__role { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .member-card__name { font-size: 24px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .member-card__role,
html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__meta { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__title { font-size: 24px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__excerpt { font-size: 18px; }

@media (min-width: 1101px) and (max-width: 1465px) {
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__meta { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__title { font-size: 20px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__excerpt { font-size: 16px; }
}

@media (min-width: 1466px) and (max-width: 1680px) {
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__meta { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__title { font-size: 20px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__excerpt { font-size: 16px; }
}

html:not(.a11y-mode) main#main-content:not(.news-page) .contact-tile__title { font-size: 22px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .contact-tile__body p { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .head-card__name { font-size: 22px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .head-card__role { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .dept-row__name,
html:not(.a11y-mode) main#main-content:not(.news-page) .dept-person__name { font-size: 22px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .dept-person__role,
html:not(.a11y-mode) main#main-content:not(.news-page) .dept-person__phone { font-size: 18px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .section-card__title { font-size: 22px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .text-card { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .text-card h2 { font-size: 34px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner__title { font-size: clamp(20px, 1.9vw, 32px); }
html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner__lead { font-size: clamp(15px, 1.35vw, 22px); }
html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner__feature span { font-size: clamp(13px, 1vw, 16px); }
html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner__btn { font-size: clamp(15px, 1.35vw, 22px); }
html:not(.a11y-mode) main#main-content:not(.news-page) .tabs__item,
html:not(.a11y-mode) main#main-content:not(.news-page) .page-intro { font-size: 20px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__watermark { font-size: min(38vw, 708px); }   /* декоративная цифра 404: предел кадрирования, не кегль текста */
html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__message { font-size: 24px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__or { font-size: 24px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__btn { font-size: 15px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .doc-accordion__title { font-size: 30px; }
html:not(.a11y-mode) main#main-content:not(.news-page) .docs-empty { font-size: 20px; }

@media (max-width: 1100px) {
  html:not(.a11y-mode) main#main-content:not(.news-page) .hero__eyebrow { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .hero__title { font-size: 40px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .hero__lead { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .section-title { font-size: 32px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card h3 { font-size: 30px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card time,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .tile p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .link-card__url,
  html:not(.a11y-mode) main#main-content:not(.news-page) .link-card p { font-size: 17px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-feature__body h2,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card-lg__body h3 { font-size: 20px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-feature__body p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card-lg__body p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-search__field input,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-date,
  html:not(.a11y-mode) main#main-content:not(.news-page) .timeline__text { font-size: 17px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .person-card__name { font-size: 24px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .person-card__role { font-size: 17px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-card__name { font-size: 20px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-card__role,
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__meta { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__title { font-size: 20px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__excerpt { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .doc-accordion__title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-group__title { font-size: 26px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__date,
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__text { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__title { font-size: 20px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__body .news-more { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__message { font-size: 24px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__or { font-size: 22px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__btn { font-size: 22px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .tabs__item { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .page-intro,
  html:not(.a11y-mode) main#main-content:not(.news-page) .text-card { font-size: 17px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .text-card h2 { font-size: 26px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .section-card__title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .contact-tile__title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .head-card__name,
  html:not(.a11y-mode) main#main-content:not(.news-page) .dept-row__name,
  html:not(.a11y-mode) main#main-content:not(.news-page) .dept-person__name { font-size: 20px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .contact-tile__body p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .head-card__role,
  html:not(.a11y-mode) main#main-content:not(.news-page) .dept-person__role,
  html:not(.a11y-mode) main#main-content:not(.news-page) .dept-person__phone { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-article__title { font-size: 26px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-block-title { font-size: 28px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .plan-table th,
  html:not(.a11y-mode) main#main-content:not(.news-page) .plan-table td { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-article__content p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-article__published,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-gallery__counter,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-doc__name,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-doc__size,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-back,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-more { font-size: 17px; }
}

@media (max-width: 800px) {
  html:not(.a11y-mode) main#main-content:not(.news-page) .hero__title { font-size: 32px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .hero__lead { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card h3 { font-size: 24px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .section-title { font-size: 26px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .year-filter__item { font-size: 17px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__message { font-size: 20px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__or { font-size: 22px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__btn { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .tabs__item { font-size: 16px; }
}

@media (max-width: 600px) {
  html:not(.a11y-mode) main#main-content:not(.news-page) .hero__eyebrow { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .hero__title { font-size: 28px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .hero__lead { font-size: 15px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card h3 { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card time,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card__footer > a { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .section-title { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .map-hint,
  html:not(.a11y-mode) main#main-content:not(.news-page) .map-details { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .map-details h3 { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .tile p { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .eyebrow { font-size: 12px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .links-section__row .section-title { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .link-card__url,
  html:not(.a11y-mode) main#main-content:not(.news-page) .link-card p { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .breadcrumb { font-size: 12px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-listing > .section-title { font-size: 26px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-search__field input,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-period-trigger { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-tag { font-size: 11px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-date { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-feature__body h2,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card-lg__body h3 { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-feature__body p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-card-lg__body p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-more,
  html:not(.a11y-mode) main#main-content:not(.news-page) .activity-card__date { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .activity-card__title { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .activity-card p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .year-filter__item { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .collegium-page > .section-title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .structure-page > .section-title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .contacts-page > .section-title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .section-page > .section-title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .text-page > .section-title { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .tabs__item,
  html:not(.a11y-mode) main#main-content:not(.news-page) .page-intro { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .docs-page > .section-title { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .doc-accordion__title { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .docs-empty { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-page__layout > .section-title { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-field input,
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-filters__label,
  html:not(.a11y-mode) main#main-content:not(.news-page) .filter-tag { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-group__title { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__date,
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__text { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__title { font-size: 15px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__tag { font-size: 13px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .search-result__body .news-more { font-size: 15px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .pager__label,
  html:not(.a11y-mode) main#main-content:not(.news-page) .pager__gap,
  html:not(.a11y-mode) main#main-content:not(.news-page) .pager__item { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__message { font-size: 15px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__or { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .error-page__btn { font-size: 15px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .text-card { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .text-card h2 { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner__title { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner__lead,
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner__feature span { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .appeal-banner__btn { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .section-card__title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .contact-tile__title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .head-card__name,
  html:not(.a11y-mode) main#main-content:not(.news-page) .dept-row__name,
  html:not(.a11y-mode) main#main-content:not(.news-page) .dept-person__name { font-size: 15px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .contact-tile__body p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .head-card__role,
  html:not(.a11y-mode) main#main-content:not(.news-page) .dept-person__role,
  html:not(.a11y-mode) main#main-content:not(.news-page) .dept-person__phone { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .person-card__name { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .person-card__role,
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-card__name { font-size: 15px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-card__role,
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__meta { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__title { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .member-activity__excerpt { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .history-page > .section-title { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .timeline__year { font-size: 13px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .timeline__text { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-back { font-size: 16px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-article__title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-block-title { font-size: 18px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .plan-table th,
  html:not(.a11y-mode) main#main-content:not(.news-page) .plan-table td { font-size: 14px; }
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-article__published,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-article__content p,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-gallery__counter,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-doc__name,
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-doc__size,
  html:not(.a11y-mode) main#main-content:not(.news-page) .pager__label,
  html:not(.a11y-mode) main#main-content:not(.news-page) .pager__btn,
  html:not(.a11y-mode) main#main-content:not(.news-page) .pager__ellipsis { font-size: 14px; }
}

/* ---------- Кегль бокового меню раздела ---------- */

/* Отдельным блоком и в самом конце файла — потому что кегль этих элементов
   приходит из двух шкал «на 2 мельче»: `.news-page .press-sidebar__item`
   (страница новостей) и `html:not(.a11y-mode) main#main-content:not(.news-page) …`
   (все остальные). Вторая тяжелее любого разумного селектора и лежит ниже по
   файлу, так что перебить её можно только тем же весом и позже — иначе 20px
   оттуда протекли бы сюда.

   html:not(.a11y-mode) обязателен во всех ветках: в версии для слабовидящих
   пункты меню — 26px, и уменьшать их здесь нельзя. */

/* Пункты меню и блок «Полезные ссылки» под ним — 18px. Без медиа-запроса:
   ниже 1440 колонка скрыта целиком (`.press-sidebar { display: none }` в
   секции Responsive), так что правило и так работает только на ПК.
   `.press-link__text` — общий родитель названия и адреса ссылки, оба
   наследуют кегль от него. */
html:not(.a11y-mode) .news-page .press-sidebar__item,
html:not(.a11y-mode) .news-page .press-sidebar__links-title,
html:not(.a11y-mode) .news-page .press-link__text,
html:not(.a11y-mode) main#main-content:not(.news-page) .press-sidebar__item,
html:not(.a11y-mode) main#main-content:not(.news-page) .press-sidebar__links-title,
html:not(.a11y-mode) main#main-content:not(.news-page) .press-link__text { font-size: 18px; }

/* Синяя шапка раздела над пунктами. Выше 1700 колонка полная (420px) и шапка
   остаётся 20px; в полосе 1440–1700 колонка сужена до 320px, и там шапка
   идёт вровень с пунктами — иначе она ломается на лишнюю строку. */
@media (min-width: 1440px) and (max-width: 1700px) {
  html:not(.a11y-mode) .news-page .press-sidebar__title,
  html:not(.a11y-mode) main#main-content:not(.news-page) .press-sidebar__title { font-size: 18px; }
}

/* ---------- Заголовок детальной страницы Деятельности — 24 ---------- */

/* Мероприятие (activity-detail) и план работы (activity-plan-detail):
   название здесь в четыре-шесть строк, поэтому кегль 24 вместо общих 30/26
   у `.news-article__title`. Новость (news-detail) не затрагивается.
   Перебивает шкалу «на 2 мельче» тем же весом плюс класс-модификатор.
   На телефоне (≤600) остаётся общие 18, версия для слабовидящих — своя. */
@media (min-width: 601px) {
  html:not(.a11y-mode) main#main-content:not(.news-page) .news-article__title--activity { font-size: 24px; }
}

/* ---------- «Как обратиться»: плашки плотнее ---------- */

/* reception-how-to.html. Белые плашки идут одна за другой без заголовков
   между ними, и общий шаг .text-page (60 / 40 / 30) разрывал страницу на
   отдельные куски. Здесь между плашками 24 / 20 / 16, а от заголовка
   страницы до первой плашки — прежние 60 / 40 / 30 (добор margin-ом).
   Оба документа лежат в одной .doc-plate внутри .news-docs. */
.text-page--compact { gap: 24px; }
.text-page--compact .section-title { margin-bottom: 36px; }
.text-page--compact .doc-plate .news-docs { gap: 32px; }

@media (max-width: 1100px) {
  .text-page--compact { gap: 20px; }
  .text-page--compact .section-title { margin-bottom: 20px; }
}

@media (max-width: 600px) {
  .text-page--compact { gap: 16px; }
  .text-page--compact .section-title { margin-bottom: 14px; }
  .text-page--compact .doc-plate .news-docs { gap: 20px; }
}

/* ---------- Иконка документа: расширение подписью ---------- */

/* Один символ #icon-file (лист с пустой синей плашкой) на все форматы, а
   расширение выводится текстом поверх плашки. Подходит любое: PDF, DOC,
   DOCX, XLSX, PPTX, TXT и прочие. Текста нет — плашка остаётся пустой,
   так помечается ссылка на внешний ресурс.
   textLength="40" с lengthAdjust="spacingAndGlyphs" в разметке подгоняет
   подпись под ширину плашки, поэтому и «TXT», и «XLSX» встают одинаково. */
.news-doc__ext {
  fill: #fff;
  font-family: Manrope, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}

/* ---------- Плашка документа принадлежит самому документу ---------- */

/* Белая плашка раньше была только у обёртки .doc-plate. Если компонент
   выводил .news-doc без неё или заворачивал его в свой служебный блок (так
   получается у документа, добавленного в режиме правки Битрикса), документ
   оставался на прозрачном фоне. Теперь фон и поля есть у самого .news-doc,
   где бы он ни лежал внутри списка. */
.news-docs .news-doc,
.doc-accordion__body .news-doc {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 40px;
}
.docs-page .news-docs .news-doc { padding: 32px; }

@media (max-width: 1100px) {
  .news-docs .news-doc,
  .doc-accordion__body .news-doc { padding: 24px; }
}

@media (max-width: 600px) {
  .news-docs .news-doc,
  .doc-accordion__body .news-doc { padding: 20px; }
  .docs-page .news-docs .news-doc { padding: 16px; }
}

/* Документ уже на белой плашке — фон и поля даёт она. Сюда попадают и
   .doc-plate из вёрстки, и модификатор --flat (документ внутри карточки,
   несколько документов на одной плашке). Блок идёт после размеров полей,
   чтобы перебить их при равном весе селектора. */
.doc-plate .news-doc,
.docs-page .doc-plate .news-doc,
.news-doc--flat,
.news-docs .news-doc--flat,
.docs-page .news-docs .news-doc--flat {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* ---------- Битрикс: режим правки ---------- */

/* В режиме правки компонент оборачивает свой вывод служебным блоком, иногда
   в несколько уровней. Для раскладки это лишние уровни: просветы пропадали,
   элементы слипались, карточки сетки вставали в одну колонку.
   Служебная обёртка — это div без класса или с классом Битрикса (bx-…).
   В колонке она ведёт себя как сама колонка, а gap: inherit протягивает
   просвет через любую вложенность. Своей разметки правила не касаются:
   внутри этих блоков все наши элементы с классами (проверено на всех
   страницах), а текстовые теги правило не трогает — только div. */
.press-sidebar div:not([class]),
.press-sidebar div[class^="bx"],
.press-sidebar__nav div:not([class]),
.press-sidebar__nav div[class^="bx"],
.news-docs div:not([class]),
.news-docs div[class^="bx"],
.doc-accordion div:not([class]),
.doc-accordion div[class^="bx"],
.doc-accordion__body div:not([class]),
.doc-accordion__body div[class^="bx"],
.activity-feed div:not([class]),
.activity-feed div[class^="bx"],
.member-feed div:not([class]),
.member-feed div[class^="bx"],
.dept-table div:not([class]),
.dept-table div[class^="bx"],
.timeline div:not([class]),
.timeline div[class^="bx"],
.open-data div:not([class]),
.open-data div[class^="bx"],
.news-listing div:not([class]),
.news-listing div[class^="bx"],
.activity-listing div:not([class]),
.activity-listing div[class^="bx"],
.news-detail div:not([class]),
.news-detail div[class^="bx"],
.docs-page div:not([class]),
.docs-page div[class^="bx"],
.text-page div:not([class]),
.text-page div[class^="bx"],
.section-page div:not([class]),
.section-page div[class^="bx"],
.collegium-page div:not([class]),
.collegium-page div[class^="bx"],
.contacts-page div:not([class]),
.contacts-page div[class^="bx"],
.history-page div:not([class]),
.history-page div[class^="bx"],
.structure-page div:not([class]),
.structure-page div[class^="bx"],
.contact-group div:not([class]),
.contact-group div[class^="bx"],
.tabs-panel div:not([class]),
.tabs-panel div[class^="bx"],
.search-group__body div:not([class]),
.search-group__body div[class^="bx"],
.search-filters div:not([class]),
.search-filters div[class^="bx"] {
  display: flex;
  flex-direction: column;
  gap: inherit;
}

/* В сетках и рядах лишний уровень ломает саму раскладку, поэтому обёртка
   пропускает карточки наверх, а не строит колонку. */
.section-grid div:not([class]),
.section-grid div[class^="bx"],
.member-grid div:not([class]),
.member-grid div[class^="bx"],
.contact-tiles div:not([class]),
.contact-tiles div[class^="bx"],
.note-grid div:not([class]),
.note-grid div[class^="bx"],
.tiles__grid div:not([class]),
.tiles__grid div[class^="bx"],
.links-grid div:not([class]),
.links-grid div[class^="bx"],
.news-grid__inner div:not([class]),
.news-grid__inner div[class^="bx"],
.news-card__slides div:not([class]),
.news-card__slides div[class^="bx"],
.dept-row div:not([class]),
.dept-row div[class^="bx"],
.year-filter div:not([class]),
.year-filter div[class^="bx"],
.tabs div:not([class]),
.tabs div[class^="bx"],
.search-filters__row div:not([class]),
.search-filters__row div[class^="bx"],
.hero__stats div:not([class]),
.hero__stats div[class^="bx"],
.contact-heads div:not([class]),
.contact-heads div[class^="bx"],
.news-feed div:not([class]),
.news-feed div[class^="bx"] { display: contents; }

/* End */


/* Start:/local/templates/ksp_krasnodar/components/bitrix/menu/footer_menu/style.css?179386904859*/
div.footer__brand .logo__img {
    mix-blend-mode: unset;
}
/* End */
/* /local/templates/ksp_krasnodar/css/style.css?1793869048229705 */
/* /local/templates/ksp_krasnodar/components/bitrix/menu/footer_menu/style.css?179386904859 */