/* =============================================================================
   КСП Краснодарского края — стили сайта

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

   ПОРЯДОК СЕКЦИЙ
     Основа            :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)

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

     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("../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: rect(0, 0, 0, 0);
  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 .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 .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; }

  /* Date and label sit on one flex line — let them wrap once enlarged. */
  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;
  padding: 0 40px;
}

.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;
}

.logo__img { width: 64px; height: 65px; }

.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: 18px;
  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 ---------- */

.news-grid { padding: 24px 0; }

.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-section { padding: 30px 0; }

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

.map-card {
  display: flex;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 24px;
}

.map-info {
  flex: 0 0 300px;
}

.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;
}

.map-image svg { width: 100%; height: auto; }

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

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

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

.map-image g[id$="-regi_1_"] path[fill="#757575"] {
  transition: fill .15s ease;
}

.map-image g[id$="-regi_1_"]:hover path[fill="#757575"],
.map-image g[id$="-regi_1_"].is-selected path[fill="#757575"] {
  fill: #fff;
}

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

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

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

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

.tiles { padding: 10px 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: 10px 0 40px; }

.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. */
.breadcrumb {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 24px 0 0;
  font-size: 18px;
  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 ---------- */

.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; }

.press-sidebar__nav { display: contents; }

.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;
  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; }
.news-more svg { flex-shrink: 0; }

.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; }

/* 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;
  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;
  color: var(--text-muted);
  white-space: nowrap;
}

.activity-card__title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  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.4;
  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; }

/* ---------- 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;
}
.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; }

.news-article__title {
  margin: 0;
  font-size: 36px;
  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; }

.news-gallery__arrow {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-muted);
  border-radius: 4px;
  background: #fff;
  color: var(--text-dark);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.news-gallery__arrow:hover { background: var(--blue); border-color: var(--blue-text); color: #fff; }

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

.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; }
.news-doc__icon { flex-shrink: 0; width: 53px; height: 60px; 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__meta { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.news-doc__size {
  width: 180px;
  height: 60px;
  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: 60px;
  height: 60px;
  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); }

.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;
}
.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;
}

/* ---------- 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%;
  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; }

/* -- 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: 16px;
  font-weight: 500;
  color: var(--text-dark);
}
.pager__item {
  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__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; }
}

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

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

.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: 60px 40px 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__img { mix-blend-mode: screen; }
.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. */
.footer__nav-col h2 {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 20px;
}

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

.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;
  padding: 16px 40px 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; }

/* ---------- 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);
}
/* On the roster the horizontal padding drops to 20px so this avatar lines up
   with the avatars of the grid cards below it. */
.person-card--aligned { padding: 40px 20px; }

.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: 20px;
  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; padding: 30px; 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; padding: 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; }

.contact-tile {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 40px;
  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__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 4px;
  background: var(--avatar-bg);
}
.contact-tile__icon img { width: 44px; height: 44px; }

.contact-tile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-tile__title { margin: 0; font-size: 26px; 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; }

.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: 26px; 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: 20px;
  background: #fff;
}

.dept-row__name {
  padding: 20px;
  border-radius: 4px;
  margin: 0;
  font-size: 26px;
  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: 26px; 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; }

/* ---------- 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: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: var(--card-shadow);
  color: var(--text-dark);
  transition: background-color .15s ease, color .15s ease;
}

.section-card__title { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.6; }

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

.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; }
.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; }

/* ---------- "Госуслуги" 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;
  padding: 20px 40px;
  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;
}
.appeal-banner__btn:hover { background: var(--blue); color: #fff; }

/* 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;
}
.appeal-banner__emblem img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  transform: translate(-50%, -50%);
}
.appeal-banner__emblem img:nth-child(1) { height: 95.9%; }
.appeal-banner__emblem img:nth-child(2) { height: 83.2%; }
.appeal-banner__emblem img:nth-child(3) { height: 69.9%; }
.appeal-banner__emblem img:nth-child(4) { height: 48.2%; }

/* ---------- 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); }

/* A run of document plates. */
.doc-list { display: flex; flex-direction: column; 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: 36px; 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: 42px; line-height: 1.6; color: var(--text-dark); }

.error-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 25px 60px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-size: 32px;
  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; }

.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); }

.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: 38px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-dark);
}
.doc-accordion__toggle {
  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;
}
.doc-accordion__toggle:hover { background: #0064b4; }
.doc-accordion__toggle svg { width: 21px; height: 21px; }
/* 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 ---------- */

/* 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. */
@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; }

  /* Below this width the section nav is reachable from the burger menu only —
     the mobile mockups drop the in-page sidebar rather than stacking it above
     the content, and the page keeps the full width for the content itself. */
  .press-page__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .press-sidebar { display: none; }

  .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 { padding: 30px; }
  .timeline__text { font-size: 19px; }
  .timeline__content { padding-bottom: 60px; }

  .person-card { gap: 30px; padding: 30px; }
  .person-card--aligned { padding: 30px 20px; }
  .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; padding: 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; }
  .structure-card, .doc-plate { padding: 30px; }

  .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 { 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; padding: 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: 30px; }
  .error-page__btn { font-size: 24px; padding: 20px 40px; }

  .tabs__item { min-height: 70px; padding: 16px; font-size: 18px; }
  .page-intro { font-size: 19px; }
  .doc-list { gap: 30px; }

  .tabs-panel { gap: 40px; }

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

  .appeal-banner { min-height: 0; padding: 30px; 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 { padding: 30px; }
  .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; padding: 24px; }
  /* 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; }

  .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; }

  /* 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 { flex-direction: column; }

  .footer__bottom { flex-wrap: wrap; }

  .news-search { flex-direction: column; }
  .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; }

  .activity-listing { gap: 40px; }
  .activity-card { padding: 24px; }
  .year-filter { gap: 12px; }
  .year-filter__item { min-width: 88px; 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,
  .person-card--aligned { 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; }
  .mainnav__link { font-size: 15px; }
  .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) {
  .container { padding: 0 24px; }
  .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: 54px; height: 55px; }
  .logo__text { font-size: 13px; }
  .a11y-link { font-size: 13px; }
  .topbar__actions { gap: 10px; }
  .mainnav__list { --mainnav-gap: 10px; }
  .mainnav__link { font-size: 13px; }
  .appeal-link { font-size: 13px; gap: 6px; }
}

@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; }

  .topbar__mobile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px;
  }
  .topbar__mobile-row .logo__img { width: 50px; height: 51px; }
  .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; 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; }
  .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;
  }
  .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: 70px; height: 71px; }
  .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. -- */
  .breadcrumb { font-size: 12px; padding-top: 20px; }
  /* 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; }

  .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; }
  .news-calendar { left: 0; width: 100%; }

  .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; 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 .doc-list on other pages 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; }
  .doc-list { 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 { 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 { gap: 16px; }
  .pager__label, .pager__gap, .pager__item { padding: 4px 10px; font-size: 14px; }

  .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__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: 16px; }
  .head-card__photo { width: 72px; height: 72px; }
  .dept-row { grid-template-columns: minmax(0, 1fr); padding: 16px; 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 .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: 16px; }
  .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; }
  .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; }
  .news-doc__size { width: auto; height: 44px; padding: 0; margin-right: auto; }
  .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); }

  /* Pagination: the page-size row and the page-number row stack. Предыдущая/
     Следующая stay — they're the easiest targets on a phone — and wrap onto
     their own line rather than being dropped. */
  .pager { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pager__group { gap: 12px; row-gap: 12px; flex-wrap: wrap; }
  .pager__label { width: 80px; padding: 10px 0; }
  .pager__label, .pager__btn, .pager__ellipsis { font-size: 14px; }
  .pager__btn, .pager__ellipsis { height: auto; min-height: 40px; padding: 10px 16px; }
}