/*
 * ВЕРСИЯ ФАЙЛА: 18 (единое объявление о собрании)
 *
 * Чтобы проверить, какая версия лежит на хостинге, откройте
 * ВАШ-ДОМЕН/assets/site.css — номер написан в первой строке. Если он
 * меньше указанного здесь, файл не обновился: перезалейте assets/site.css
 * и обновите страницу с Ctrl+F5.
 *
 * Слой мобильных исправлений для сайта СНП «Новая Искань».
 *
 * Подключается ПОСЛЕ основного файла стилей и только дополняет его.
 * Исходный скомпилированный CSS (_next/static/chunks/*.css) намеренно
 * не изменяется: у него имя с хешем, и правка содержимого без смены имени
 * оставила бы посетителям с прежним кешем старую версию стилей.
 *
 * Порядок разделов повторяет порядок аудита:
 *   1. Базовая защита от горизонтальной прокрутки
 *   2. Безопасные зоны современных телефонов
 *   3. Читаемость текста
 *   4. Области нажатия не меньше 44×44
 *   5. Шапка и мобильное меню
 *   6. Главная страница
 *   7. Документы и фильтры
 *   8. Формы и модальное окно
 *   9. Cookie-уведомление
 *  10. Футер и фотография Оки
 *  11. Административный раздел на телефоне
 *  12. Альбомная ориентация и низкие экраны
 */

/* ------------------------------------------------------------------ *
 * 1. Базовая защита от горизонтальной прокрутки
 * ------------------------------------------------------------------ */

html {
  /* Отключает автоматическое увеличение шрифта при повороте телефона. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Причина переполнения на 320 px: карточка собрания в сетке .hero-content
 * имела автоматический минимум по ширине самого длинного слова
 * («собственников»), из-за чего колонка вырастала до 303 px внутри
 * контейнера шириной 284 px и тянула за собой весь текст первого экрана.
 */
.hero-content > *,
.notice-card,
.hero-copy,
.quick-card,
.news-grid > *,
.transparency-grid > *,
.document-list article > *,
.article-list article > *,
.contact-grid > *,
.footer-inner > * {
  min-width: 0;
}

/* Длинные слова и адреса переносятся, а не выталкивают макет. */
.hero-copy h1,
.notice-card h2,
.page-intro h1,
.doc-main h2,
.article-list h2,
.news-grid h3,
.empty-notice h2,
.featured-project h2,
.cookie-copy strong,
.footer-brand {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Таблицы и блоки кода не должны растягивать страницу. */
.legal-document table,
.prose-card table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ------------------------------------------------------------------ *
 * 2. Безопасные зоны современных телефонов
 * ------------------------------------------------------------------ */

@supports (padding: max(0px)) {
  .header-inner,
  .content-width,
  .footer-inner {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  /*
   * У футера с фотографией собственные отступы: там нижний край
   * задаётся у .footer-inner (раздел 10), иначе фон и текст разъезжаются.
   */
  .site-footer:not(.has-photo) {
    padding-bottom: max(60px, env(safe-area-inset-bottom));
  }

  .cookie-banner {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------------------------------ *
 * 3. Читаемость текста
 *
 * Основной текст был 13 px — на телефоне это требует увеличения экрана.
 * Служебные надписи (рубрики, «Официальный сайт») остаются мелкими:
 * это подписи, а не текст для чтения.
 * ------------------------------------------------------------------ */

@media (max-width: 820px) {
  .site-footer p,
  .footer-nav a,
  .contact-guidance p,
  .contact-guidance li,
  .step-card p,
  .doc-main p,
  .doc-main small,
  .appeal-aside p,
  .appeal-aside li,
  .cookie-copy p,
  .legal-draft p,
  .privacy-note p,
  .legal-document header p,
  .facts-grid dd,
  .article-more,
  .news-grid p,
  .details-list dd,
  .project-card p {
    font-size: 15px;
    line-height: 1.6;
  }

  .footer-legal a,
  .catalog-summary,
  .consent-details {
    font-size: 13px;
  }

  .article-meta,
  .news-grid span {
    font-size: 12px;
  }
}

/* ------------------------------------------------------------------ *
 * 4. Области нажатия не меньше 44×44
 * ------------------------------------------------------------------ */

@media (pointer: coarse), (max-width: 820px) {
  .footer-nav {
    gap: 2px;
  }

  .footer-nav a,
  .footer-legal a,
  .article-more,
  .text-link-light,
  .doc-status a,
  .section-heading > a,
  .news-featured > a,
  .notice-card a,
  .inline-cta a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-legal {
    gap: 0 18px;
  }

  /* Кнопки фильтров: 41 px не дотягивали до рекомендованных 44 px. */
  .filter-row button {
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }

  .mobile-menu nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/*
 * Поля ввода: 16 px — порог, ниже которого iOS автоматически
 * увеличивает страницу при фокусе.
 */
.form-grid input,
.form-grid select,
.form-grid textarea,
.admin-login-form input,
.login input,
.simple-admin-login input {
  min-height: 48px;
  font-size: 16px;
}

.form-grid textarea {
  min-height: 140px;
}

.consent-list input[type='checkbox'] {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

/* Нажимается вся подпись целиком, а не только квадратик флажка. */
.consent-list label {
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  min-height: 44px;
  display: flex;
  cursor: pointer;
}

@media (max-width: 820px) {
  .consent-list label {
    font-size: 14px;
    line-height: 1.55;
  }

  .form-grid label > span {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------ *
 * 5. Шапка и мобильное меню
 * ------------------------------------------------------------------ */

/* Логотип, название и кнопка меню не должны наезжать друг на друга. */
@media (max-width: 820px) {
  .header-inner {
    gap: 12px;
  }

  .brand {
    gap: 12px;
    min-width: 0;
  }

  .brand-copy {
    min-width: 0;
  }

  .brand-copy strong {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

@media (max-width: 360px) {
  .brand-mark {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .brand-copy strong {
    font-size: 14px;
    line-height: 1.15;
  }
}

/*
 * Меню открывается на весь экран: выпадающая панель шириной 240 px
 * при 320 px экрана прижималась к краю и перекрывала название.
 */
@media (max-width: 820px) {
  /*
   * Пока панель открыта, она перекрывает кнопку-бургер: её место
   * занимает кнопка закрытия внутри самой панели. Если поднять бургер
   * над панелью, он перехватывает нажатия по кнопке закрытия.
   */
  .mobile-menu nav {
    position: fixed;
    inset: 0 0 auto;
    top: 0;
    right: 0;
    /* Выше cookie-уведомления (z-index 100): открытое меню
       не должно ничем перекрываться. */
    z-index: 160;
    width: min(340px, 100%);
    min-width: 0;
    margin-left: auto;
    border-radius: 0;
    border: 0;
    border-left: 1px solid #e2c47d4d;
    height: 100dvh;
    padding: 84px 16px calc(24px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu nav a {
    font-size: 17px;
    padding: 12px 14px;
  }
}

/* Подложка за открытым меню — закрывает по нажатию вне панели. */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 155;
  background: #041a15b8;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Кнопка закрытия меню. */
.menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #ffffff1a;
  border: 1px solid #ffffff4d;
  border-radius: 8px;
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.menu-close:focus-visible,
.mobile-menu summary:focus-visible {
  outline: 3px solid #d3a648a6;
  outline-offset: 2px;
}

/* Пока меню открыто, страница под ним не прокручивается. */
body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/*
 * Шапка задаёт свой слой (z-index 30), поэтому панель меню и подложка
 * не могут подняться выше него относительно остальной страницы: без
 * этого правила cookie-уведомление (z-index 100) оказывалось поверх
 * подложки, и нажатие вне меню его не закрывало.
 */
body.menu-open .site-header {
  z-index: 200;
}

/* ------------------------------------------------------------------ *
 * 6. Главная страница
 * ------------------------------------------------------------------ */

@media (max-width: 560px) {
  .hero-copy h1 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .hero-kicker {
    letter-spacing: 0.16em;
    font-size: 11px;
  }

  .notice-card {
    padding: 20px;
  }

  .notice-card h2 {
    font-size: 21px;
    line-height: 1.25;
  }

  .meeting-card-body {
    gap: 14px;
  }
}

@media (max-width: 360px) {
  .hero-content {
    padding-top: 40px;
  }

  .quick-card {
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 16px 18px;
  }

  .quick-card svg {
    width: 38px;
    height: 38px;
  }

  .quick-card strong {
    font-size: 17px;
    max-width: none;
  }
}

/* ------------------------------------------------------------------ *
 * 7. Документы и фильтры
 * ------------------------------------------------------------------ */

/* Актуальное объявление на странице «Собрания». */
.meeting-announcement {
  padding: clamp(26px, 4vw, 52px);
  border: 1px solid #d8cdb9;
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 18px 48px #0b2d2312;
}

.meeting-announcement h2 {
  margin: 18px 0 14px;
  color: var(--green-950);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
}

.meeting-announcement .meeting-lead {
  max-width: 980px;
  margin: 0;
  color: var(--green-950);
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.55;
}

.meeting-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
}

.meeting-facts > div {
  min-width: 0;
  padding: 18px;
  border: 1px solid #dfd4c2;
  border-radius: 12px;
  background: #f8f3e8;
}

.meeting-facts span {
  display: block;
  margin-bottom: 8px;
  color: #776b59;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.meeting-facts strong {
  display: block;
  color: var(--green-950);
  font-size: 17px;
  line-height: 1.4;
}

.meeting-pending {
  margin: 0 0 12px;
  color: #9b4b2d;
  font-weight: 700;
}

.meeting-announcement > p:last-child {
  max-width: 980px;
  margin-bottom: 0;
}

@media (max-width: 820px) {
  .meeting-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .meeting-announcement {
    padding: 24px 20px;
  }

  .meeting-facts {
    grid-template-columns: 1fr;
    margin: 22px 0;
  }
}

/*
 * На телефоне кнопки категорий переносятся на несколько строк
 * и не выходят за пределы своего блока.
 */
.filter-row {
  max-width: 100%;
}

.filter-row button {
  flex: 0 1 auto;
  max-width: 100%;
}

@media (max-width: 480px) {
  .filter-row {
    gap: 8px;
  }

  .filter-row button {
    flex: 1 1 auto;
    min-width: calc(50% - 4px);
  }
}

/* Скрытые фильтром карточки. */
.document-list article[hidden],
.article-list .article-link[hidden] {
  display: none;
}

/* Сообщение о пустой категории. */
.filter-empty {
  border: 1px solid var(--line, #d9d5c8);
  background: var(--white, #fff);
  border-radius: 12px;
  padding: 32px 25px;
  text-align: center;
  color: var(--muted, #6d756e);
  margin: 0;
}

@media (max-width: 560px) {
  .document-list article {
    gap: 12px;
    padding: 18px;
  }

  .doc-main h2 {
    font-size: 17px;
  }

  .doc-status {
    min-width: 0;
  }

  .doc-status a {
    width: 100%;
    text-align: center;
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------ *
 * 8. Формы и модальное окно
 * ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .appeal-form,
  .form-grid,
  .form-grid label,
  .form-grid input,
  .form-grid select,
  .form-grid textarea {
    width: 100%;
    max-width: 100%;
  }

  .file-field input[type='file'] {
    width: 100%;
    font-size: 14px;
  }
}

.submit-button[aria-busy='true'],
.submit-button:disabled {
  opacity: 0.7;
  cursor: progress;
}

/*
 * Диалог успешной отправки построен на <dialog>: браузер сам держит
 * фокус внутри окна и закрывает его по Escape. Для старых браузеров
 * скрипт открывает то же окно вручную (класс .modal-fallback).
 */
.modal {
  width: min(440px, 100% - 24px);
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.modal::backdrop {
  background: #041a15c4;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Запасной путь: <dialog> без поддержки showModal(). */
.modal.modal-fallback[open] {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  width: 100%;
  max-height: 100dvh;
  padding: 16px;
  background: #041a15c4;
}

.modal-window {
  width: 100%;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
  background: #edf3ed;
  border: 1px solid #b8c7be;
  border-radius: 16px;
  padding: 34px 24px 26px;
  padding-top: max(34px, env(safe-area-inset-top));
  padding-bottom: max(26px, env(safe-area-inset-bottom));
  box-shadow: 0 26px 70px #041a1559;
}

.modal.modal-fallback[open] .modal-window {
  width: min(440px, 100%);
}

.modal-window > span {
  color: var(--green-700, #2f5d46);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
}

.modal-window h2 {
  color: var(--green-950, #062018);
  font: 600 clamp(24px, 6vw, 32px) / 1.2 Georgia, serif;
  margin: 12px 0 6px;
}

.modal-window p {
  color: var(--muted, #6d756e);
  margin: 0 auto;
  max-width: 34ch;
  font-size: 15px;
}

.appeal-number {
  display: inline-block;
  margin: 18px 0 6px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px dashed #9db4a4;
  background: #fff;
  color: var(--green-950, #062018);
  font: 700 clamp(26px, 8vw, 34px) / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
}

.modal-window .button,
.modal-window button {
  margin-top: 22px;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--green-800, #124534);
  background: var(--green-800, #124534);
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
}

.modal-window button:focus-visible {
  outline: 3px solid #d3a648a6;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * 9. Cookie-уведомление
 *
 * Небольшая карточка в правом нижнем углу, а не полоса во всю ширину:
 * уведомление не должно закрывать содержимое страницы. Страница под ним
 * не затемняется — выбор не срочный и работе не мешает.
 * ------------------------------------------------------------------ */

.cookie-banner {
  /* Исходные стили растягивали баннер от края до края: left и right
     заданы одновременно. Слева отступ снимается, ширина фиксируется. */
  left: auto;
  right: 24px;
  bottom: 24px;
  width: min(400px, calc(100vw - 48px));
  display: block;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid #cbbd9d;
  background: #fffdf7f2;
  box-shadow: 0 14px 40px #051e1833;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-copy strong {
  font-size: 18px;
}

.cookie-copy p {
  font-size: 14px;
  line-height: 1.5;
  margin: 6px 0 0;
}

.cookie-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: stretch;
}

.cookie-actions button {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 10px;
  font-size: 13px;
}

@supports (padding: max(0px)) {
  .cookie-banner {
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  /* На телефоне карточка занимает ширину экрана с полями по краям
     и не растягивается по высоте. */
  .cookie-banner {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
    max-height: 42dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border-radius: 14px;
  }

  @supports (padding: max(0px)) {
    .cookie-banner {
      left: max(14px, env(safe-area-inset-left));
      right: max(14px, env(safe-area-inset-right));
      bottom: max(14px, env(safe-area-inset-bottom));
    }
  }

  .cookie-copy strong {
    font-size: 17px;
  }

  .cookie-actions {
    margin-top: 14px;
  }
}

@media (max-width: 340px) {
  /* На самых узких экранах подписи в ряд уже не помещаются. */
  .cookie-actions {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------ *
 * 10. Футер с фотографией реки Оки
 *
 * Фотография — фон самого футера, а не полоса над ним: она занимает
 * всю ширину окна и всю высоту футера, а название партнёрства, меню
 * и правовые ссылки лежат прямо поверх снимка. Читаемость обеспечивает
 * тёмно-зелёный градиент между фотографией и текстом.
 *
 * Здесь переопределяются три правила основного файла стилей, из-за
 * которых футер выглядел полосой:
 *   .site-footer  padding: 60px 0     — давал зелёный кант над фото;
 *   .site-footer  border-top          — вторую линию над кантом;
 *   .footer-inner grid + width        — прижимал текст к левой части.
 * ------------------------------------------------------------------ */

.site-footer.has-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Отступы переносятся внутрь, иначе фон не доходит до краёв футера. */
  padding: 0;
  border-top: 0;
  /* Высота полосы с фотографией: 26vw, но не ниже 440 и не выше 560. */
  min-height: clamp(380px, 22vw, 470px);
  /* Пока фотография грузится, футер уже нужного цвета. */
  background-color: #061f19;
  color: #d7e0d8;
}

/*
 * Сама фотография. Растягивается на весь футер от левого до правого
 * края окна; пропорции сохраняет object-fit: cover.
 *
 * Правило задано и для <picture>, и для <img> внутри: без него
 * <picture> остаётся строчным элементом обычного потока — тогда
 * снимок и вставал отдельной картинкой над текстом, занимая
 * лишь часть ширины.
 */
.site-footer.has-photo .footer-bg,
.site-footer.has-photo .footer-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}

.site-footer.has-photo .footer-bg {
  z-index: 0;
  pointer-events: none;
}

.site-footer.has-photo .footer-bg img {
  object-fit: cover;
  /* Излучина расположена по центру кадра; небо сверху можно срезать. */
  object-position: center 55%;
}

/*
 * Тёмно-зелёный слой поверх фотографии. Снизу он плотнее: там мельче
 * текст правовой информации и копирайт.
 */
.site-footer.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #04180f3d 0%, #04180f80 42%, #031310eb 100%),
    linear-gradient(90deg, #04180f6b 0%, #04180f14 55%, #04180f5c 100%);
}

/*
 * Текст лежит поверх фотографии и градиента и прижат к нижнему краю:
 * сверху остаётся открытый вид на реку.
 */
.site-footer.has-photo .footer-inner {
  position: relative;
  z-index: 2;
  width: min(1240px, 100% - 80px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 0.75fr 1.4fr;
  align-items: end;
  gap: clamp(28px, 4vw, 60px);
  /* Верхний отступ и есть открытая часть снимка. */
  padding-block: clamp(185px, 13vw, 250px) 34px;
}

@supports (padding: max(0px)) {
  .site-footer.has-photo .footer-inner {
    padding-bottom: max(34px, env(safe-area-inset-bottom));
  }
}

.site-footer.has-photo .footer-brand,
.site-footer.has-photo .footer-note strong {
  text-shadow: 0 2px 12px #02120cb3;
}

/* Увеличенный текст футера: сайт рассчитан в том числе на старших посетителей. */
.site-footer.has-photo .footer-brand {
  font-size: clamp(28px, 2vw, 32px);
  line-height: 1.2;
}

.site-footer.has-photo p,
.site-footer.has-photo .footer-nav a {
  font-size: 16px;
  line-height: 1.65;
}

.site-footer.has-photo .footer-note strong {
  font-size: 18px;
  line-height: 1.4;
}

.site-footer.has-photo .footer-legal a {
  font-size: 15px;
  line-height: 1.5;
}

.site-footer.has-photo .footer-note > span {
  font-size: 14px;
  line-height: 1.5;
}

.site-footer.has-photo .footer-nav a,
.site-footer.has-photo .footer-legal a {
  color: #eaf1e9;
  text-shadow: 0 1px 8px #02120cb3;
}

.site-footer.has-photo .footer-nav a:hover,
.site-footer.has-photo .footer-legal a:hover {
  color: var(--gold-light, #e2c47d);
}

.site-footer.has-photo .footer-nav a:focus-visible,
.site-footer.has-photo .footer-legal a:focus-visible {
  outline: 3px solid #d3a648a6;
  outline-offset: 2px;
  border-radius: 4px;
}

.site-footer.has-photo p,
.site-footer.has-photo .footer-note span {
  color: #c4d0c5;
  text-shadow: 0 1px 8px #02120c99;
}

/* Планшет: две колонки, правовой блок занимает всю ширину строки. */
@media (max-width: 1024px) {
  .site-footer.has-photo {
    min-height: clamp(360px, 38vw, 450px);
  }

  .site-footer.has-photo .footer-inner {
    width: min(100% - 48px, 900px);
    grid-template-columns: 1fr 1fr;
    /* Колонки выравниваются по верху: на планшете меню выше названия,
       и по нижнему краю оно повисало в стороне от текста. */
    align-items: start;
    padding-block: clamp(145px, 22vw, 220px) 30px;
    gap: 22px 36px;
  }

  .site-footer.has-photo .footer-note {
    grid-column: 1 / -1;
    text-align: left;
  }

  .site-footer.has-photo .footer-legal {
    justify-content: flex-start;
  }
}

@media (max-width: 1100px) {
  .site-footer.has-photo .footer-bg img {
    object-position: center 58%;
  }
}

/* Телефон: одна колонка, кадр вертикальный. */
@media (max-width: 600px) {
  .site-footer.has-photo {
    min-height: 0;
  }

  .site-footer.has-photo .footer-inner {
    width: min(100% - 36px, 720px);
    grid-template-columns: 1fr;
    padding-block: clamp(125px, 36vw, 170px) 24px;
    gap: 20px;
  }

  .site-footer.has-photo .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
  }

  .site-footer.has-photo .footer-note {
    grid-column: auto;
  }

  /* Кадр для телефона вытянут вертикально — обрезка идёт по краям,
     а изгиб русла остаётся в кадре. */
  .site-footer.has-photo .footer-bg img {
    object-position: center 45%;
  }

  /* Снизу плотнее: на узком экране текста больше, а места меньше. */
  .site-footer.has-photo::after {
    background: linear-gradient(180deg, #04180f47 0%, #04180fa6 38%, #031310f5 100%);
  }
}

/* ------------------------------------------------------------------ *
 * 11. Административный раздел на телефоне
 * ------------------------------------------------------------------ */

@media (max-width: 700px) {
  /* Таблицы обращений превращаются в карточки. */
  .simple-admin-table,
  .simple-admin-table tbody,
  .simple-admin-table tr,
  .simple-admin-table td {
    display: block;
    width: 100%;
  }

  .simple-admin-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .simple-admin-table tr {
    border: 1px solid #ddd8c8;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: #fff;
  }

  .simple-admin-table td {
    padding: 6px 0;
    border: 0;
  }

  .simple-admin-table td::before {
    content: attr(data-label) ': ';
    font-weight: 700;
    color: #4a5751;
  }
}

/* ------------------------------------------------------------------ *
 * 12. Альбомная ориентация и низкие экраны
 *
 * В альбомной ориентации телефона первый экран был высотой 940 px
 * при высоте окна 375 px: пользователь видел только фон.
 * ------------------------------------------------------------------ */

@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    min-height: auto;
  }

  .hero-content {
    padding: 44px 0 28px;
    gap: 24px;
  }

  .hero-copy h1 {
    font-size: clamp(32px, 6vh, 46px);
  }

  .page-intro {
    min-height: auto;
    padding: 40px 0 34px;
  }

  .mobile-menu nav {
    padding-top: 72px;
  }

  .modal-window {
    max-height: calc(100dvh - 24px);
    padding: 22px 20px 18px;
  }

  .modal-window h2 {
    font-size: 24px;
  }

  .appeal-number {
    margin: 12px 0 4px;
    font-size: 26px;
  }
}

/* Планшет в книжной ориентации: карточки в две колонки, а не в одну.
 * Сетка футера здесь не трогается: ею занимается раздел 10. */
@media (min-width: 600px) and (max-width: 820px) {
  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------------------------------------------ *
 * 13. Замечания, найденные повторным прогоном аудита
 * ------------------------------------------------------------------ */

/* Логотип со ссылкой на главную — полноценная область нажатия. */
.brand {
  min-height: 44px;
}

/* Короткие правовые ссылки («Cookie») были уже 44 px по ширине. */
.footer-legal a {
  min-width: 44px;
  justify-content: center;
}

/* Кнопки cookie-уведомления: в исходных стилях 40 px. */
.cookie-actions button {
  min-height: 44px;
}

/* Кнопки категорий доводятся до 44 px и на сенсорных планшетах,
   где ширина экрана больше 820 px. */
.filter-row button {
  min-height: 44px;
}

/*
 * Карточки на странице инфраструктуры: та же причина, что и у карточки
 * собрания на главной — автоматический минимум колонки по длинному слову.
 */
.project-grid > *,
.project-card,
.featured-project {
  min-width: 0;
}

.project-card,
.featured-project {
  overflow-wrap: break-word;
}

@media (max-width: 360px) {
  .project-card,
  .featured-project {
    padding: 20px;
  }
}

/* ------------------------------------------------------------------ *
 * 14. Мелкий текст, который нужно читать (а не подписи-рубрики)
 * ------------------------------------------------------------------ */

@media (max-width: 820px) {
  /* «PDF, JPG или PNG — до 5 МБ», пояснения в карточках контактов. */
  .file-field small,
  .contact-card small {
    font-size: 14px;
  }

  /* Подписи к числам в карточках инфраструктуры. */
  .project-card dd {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Статус документа в каталоге. */
  .doc-status span {
    font-size: 13px;
    letter-spacing: 0.04em;
  }
}

/* ------------------------------------------------------------------ *
 * 15. Изображения: облегчённые фоны
 *
 * Исходный PNG первого экрана весил 2,7 МБ и загружался на каждой
 * странице (он же фон шапки внутренних страниц). Ниже подключаются
 * варианты AVIF и WebP подходящего размера: браузер берёт первый
 * формат, который понимает, и только нужную ширину.
 *
 * Первая строка каждого правила — запасная: браузеры без image-set()
 * возьмут WebP по обычному url().
 * ------------------------------------------------------------------ */

.hero,
.page-intro {
  background-image: url('/assets/img/hero-road-1280.webp');
  background-image: image-set(
    url('/assets/img/hero-road-1280.avif') type('image/avif'),
    url('/assets/img/hero-road-1280.webp') type('image/webp')
  );
}

/* На широком экране немного опускаем кадр, чтобы дорога оставалась заметной. */
.hero {
  background-position: center 62%;
}

/* Чуть более компактная шапка на компьютере; мобильная ширина не меняется. */
@media (min-width: 821px) {
  .header-inner {
    width: min(1320px, 100% - 80px);
  }
}

/* Телефон: 640 px по ширине хватает даже на экранах с двойной плотностью,
   потому что поверх фотографии лежит плотный градиент. */
@media (max-width: 700px) {
  .hero,
  .page-intro {
    background-image: url('/assets/img/hero-road-640.webp');
    background-image: image-set(
      url('/assets/img/hero-road-640.avif') type('image/avif'),
      url('/assets/img/hero-road-640.webp') type('image/webp')
    );
  }

  /* Высокий первый экран раньше показывал в основном небо. Увеличиваем фото
     и привязываем его к нижнему краю — дорога теперь видна сразу. */
  .hero {
    background-size: auto 145%;
    background-position: center 175%;
  }

  .hero-overlay {
    background:
      linear-gradient(180deg, #031f19ad 0%, #031f196b 48%, #031f19c2 100%),
      linear-gradient(90deg, #031f196b 0%, #031f191f 100%);
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .hero,
  .page-intro {
    background-image: url('/assets/img/hero-road-960.webp');
    background-image: image-set(
      url('/assets/img/hero-road-960.avif') type('image/avif'),
      url('/assets/img/hero-road-960.webp') type('image/webp')
    );
  }
}

/*
 * Главная страница получает отдельный премиальный кадр. Фон внутренних
 * страниц выше не меняется. Для телефона используется вертикальная
 * композиция: дорога остаётся заметной по всей высоте первого экрана.
 */
.hero {
  background-image: url('/assets/img/home-road-premium-1920.webp');
  background-image: image-set(
    url('/assets/img/home-road-premium-1920.avif') type('image/avif'),
    url('/assets/img/home-road-premium-1920.webp') type('image/webp')
  );
  background-position: center 62%;
}

@media (max-width: 700px) {
  .hero {
    background-image: url('/assets/img/home-road-premium-mobile-720.webp');
    background-image: image-set(
      url('/assets/img/home-road-premium-mobile-720.avif') type('image/avif'),
      url('/assets/img/home-road-premium-mobile-720.webp') type('image/webp')
    );
    background-size: cover;
    background-position: center center;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .hero {
    background-image: url('/assets/img/home-road-premium-1280.webp');
    background-image: image-set(
      url('/assets/img/home-road-premium-1280.avif') type('image/avif'),
      url('/assets/img/home-road-premium-1280.webp') type('image/webp')
    );
    background-size: cover;
    background-position: center 58%;
  }
}

/* Отдельный образ территории для страницы «О партнёрстве». */
.page-intro-about {
  background-image: url('/assets/img/about-partnership-premium-1920.webp');
  background-image: image-set(
    url('/assets/img/about-partnership-premium-1920.avif') type('image/avif'),
    url('/assets/img/about-partnership-premium-1920.webp') type('image/webp')
  );
  background-position: center 58%;
}

@media (max-width: 700px) {
  .page-intro-about {
    background-image: url('/assets/img/about-partnership-premium-mobile-720.webp');
    background-image: image-set(
      url('/assets/img/about-partnership-premium-mobile-720.avif') type('image/avif'),
      url('/assets/img/about-partnership-premium-mobile-720.webp') type('image/webp')
    );
    background-size: cover;
    background-position: center 54%;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .page-intro-about {
    background-image: url('/assets/img/about-partnership-premium-1280.webp');
    background-image: image-set(
      url('/assets/img/about-partnership-premium-1280.avif') type('image/avif'),
      url('/assets/img/about-partnership-premium-1280.webp') type('image/webp')
    );
  }
}

/* Въезд и информационный стенд для шапки страницы «Контакты». */
.page-intro-contacts {
  background-image: url('/assets/img/contacts-hero-sign-1920.webp');
  background-image: image-set(
    url('/assets/img/contacts-hero-sign-1920.avif') type('image/avif'),
    url('/assets/img/contacts-hero-sign-1920.webp') type('image/webp')
  );
  background-position: center 58%;
}

@media (max-width: 700px) {
  .page-intro-contacts {
    background-image: url('/assets/img/contacts-hero-sign-mobile-720.webp');
    background-image: image-set(
      url('/assets/img/contacts-hero-sign-mobile-720.avif') type('image/avif'),
      url('/assets/img/contacts-hero-sign-mobile-720.webp') type('image/webp')
    );
    background-size: cover;
    background-position: center 54%;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .page-intro-contacts {
    background-image: url('/assets/img/contacts-hero-sign-1280.webp');
    background-image: image-set(
      url('/assets/img/contacts-hero-sign-1280.avif') type('image/avif'),
      url('/assets/img/contacts-hero-sign-1280.webp') type('image/webp')
    );
  }
}

/* Собрание жителей в беседке для шапки страницы «Собрания». */
.page-intro-meetings {
  background-image: url('/assets/img/meetings-hero-1920.webp');
  background-image: image-set(
    url('/assets/img/meetings-hero-1920.avif') type('image/avif'),
    url('/assets/img/meetings-hero-1920.webp') type('image/webp')
  );
  background-position: center 58%;
}

@media (max-width: 700px) {
  .page-intro-meetings {
    background-image: url('/assets/img/meetings-hero-mobile-720.webp');
    background-image: image-set(
      url('/assets/img/meetings-hero-mobile-720.avif') type('image/avif'),
      url('/assets/img/meetings-hero-mobile-720.webp') type('image/webp')
    );
    background-size: cover;
    background-position: center 55%;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .page-intro-meetings {
    background-image: url('/assets/img/meetings-hero-1280.webp');
    background-image: image-set(
      url('/assets/img/meetings-hero-1280.avif') type('image/avif'),
      url('/assets/img/meetings-hero-1280.webp') type('image/webp')
    );
  }
}

/* Логотип в шапке: исходник был 1024×1024 при показе 40–58 px. */
.brand-mark {
  background-image: url('/assets/img/logo-128.png');
  background-image: image-set(
    url('/assets/img/logo-128.avif') type('image/avif'),
    url('/assets/img/logo-128.webp') type('image/webp'),
    url('/assets/img/logo-128.png') type('image/png')
  );
}

/* ------------------------------------------------------------------ *
 * 16. Общее устройство больших модальных окон
 *
 * Одно и то же окно обслуживает схему проезда и просмотр документов:
 * шапка с названием и действиями, под ней прокручиваемая область.
 * ------------------------------------------------------------------ */

.modal-wide {
  width: min(1200px, 100% - 24px);
  max-height: calc(100dvh - 32px);
}

.modal-frame {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
  background: var(--cream-2, #f7f4ea);
  border: 1px solid #b8c7be;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 70px #041a1559;
}

.modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--green-950, #062018);
  color: var(--cream, #f5f1e6);
}

.modal-bar strong {
  font: 600 17px/1.3 Georgia, serif;
  min-width: 0;
  overflow-wrap: break-word;
}

.modal-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Кнопки в шапке окна: основное действие — золотое, остальные — контурные. */
.modal-bar-actions a,
.modal-bar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #ffffff59;
  background: transparent;
  color: var(--cream, #f5f1e6);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.modal-bar-actions a:hover,
.modal-bar-actions button:hover {
  background: #ffffff1a;
}

.modal-bar-actions .modal-close {
  border-color: var(--gold, #d3a648);
  background: var(--gold, #d3a648);
  color: var(--green-950, #062018);
}

.modal-bar-actions a:focus-visible,
.modal-bar-actions button:focus-visible {
  outline: 3px solid #d3a648a6;
  outline-offset: 2px;
}

/* Прокручиваемое тело окна. */
.modal-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #0b1c17;
}

@media (max-width: 700px) {
  .modal-wide {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    margin: 0;
  }

  .modal-frame {
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
  }

  .modal-bar {
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .modal-bar strong {
    font-size: 15px;
    flex: 1 1 100%;
  }

  .modal-bar-actions {
    flex: 1 1 100%;
  }

  .modal-bar-actions a,
  .modal-bar-actions button {
    flex: 1 1 0;
    padding: 0 8px;
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------ *
 * 17. Схема проезда на странице «Контакты»
 *
 * Схема — такая же карточка, как «Территория» или «Реквизиты», и стоит
 * в той же сетке между реквизитами и порядком обращения. Отдельным
 * блоком внизу страницы она выглядела оторванной от контактов.
 * ------------------------------------------------------------------ */

.contact-map-card {
  grid-column: 1 / -1;
  /* Отступы меньше, чем у текстовых карточек: внутри — изображение,
     ему лишние поля не нужны. */
  padding: 24px;
}

.contact-map-head h2 {
  color: var(--green-950, #062018);
  margin: 14px 0 6px;
  font: 600 27px Georgia, serif;
}

.contact-map-head p {
  color: var(--muted, #6d756e);
  margin: 0 0 18px;
  max-width: 60ch;
}

.contact-map {
  margin: 0;
}

.contact-map-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

.map-scheme-button,
.map-external-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 10px 17px;
  font-weight: 650;
  text-decoration: none;
}

.map-scheme-button {
  border: 0;
  background: #12483a;
  color: #fff;
  cursor: pointer;
}

.map-external-link {
  border: 1px solid #cfc7b8;
  color: #12483a;
  background: #fff;
}

.map-scheme-button:hover,
.map-external-link:hover {
  transform: translateY(-1px);
}

.map-scheme-button:focus-visible,
.map-external-link:focus-visible,
.yandex-map-load:focus-visible {
  outline: 3px solid #d3a648a6;
  outline-offset: 3px;
}

.yandex-map-shell {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid #cfc7b8;
  border-radius: 12px;
  background:
    radial-gradient(circle at 78% 25%, #d3a64852 0 3px, transparent 4px),
    linear-gradient(135deg, #082c24 0%, #164b3b 54%, #315e47 100%);
  color: #fff;
}

.yandex-map-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .16;
  background:
    repeating-linear-gradient(28deg, transparent 0 54px, #fff 55px 56px),
    repeating-linear-gradient(118deg, transparent 0 78px, #fff 79px 80px);
  pointer-events: none;
}

.yandex-map-placeholder {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100% - 40px));
  text-align: center;
  padding: 32px;
  border: 1px solid #ffffff3d;
  border-radius: 12px;
  background: #061f19d9;
  box-shadow: 0 22px 55px #0004;
}

.yandex-map-pin {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 50% 50% 50% 12px;
  transform: rotate(-45deg);
  background: #d3a648;
  color: #062018;
  box-shadow: 0 10px 30px #0005;
}

.yandex-map-pin::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #062018;
}

.yandex-map-placeholder h3 {
  margin: 0 0 8px;
  color: #fff;
  font: 600 29px/1.2 Georgia, serif;
}

.yandex-map-placeholder p {
  margin: 0 auto 20px;
  color: #f5f1e6d9;
  font-size: 16px;
}

.yandex-map-placeholder small {
  display: block;
  margin-top: 12px;
  color: #f5f1e6b8;
  font-size: 13px;
}

.yandex-map-load {
  min-height: 48px;
  border: 1px solid #e6c77f;
  border-radius: 8px;
  padding: 11px 20px;
  background: #d3a648;
  color: #062018;
  font-weight: 750;
  cursor: pointer;
}

.yandex-map-load:disabled {
  opacity: .75;
  cursor: wait;
}

.yandex-map-shell.is-loaded {
  display: block;
  background: #e8e5dd;
}

.yandex-map-shell.is-loaded::before {
  display: none;
}

.yandex-map-shell iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
}

/* Вся схема — одна большая кнопка: нажатие открывает её крупнее. */
.contact-map-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line, #d9d5c8);
  border-radius: 10px;
  overflow: hidden;
  background: #0b1c17;
  cursor: zoom-in;
  position: relative;
  line-height: 0;
}

.contact-map-button:hover {
  border-color: #b8ac8e;
}

.contact-map-button:focus-visible {
  outline: 3px solid #d3a648a6;
  outline-offset: 3px;
}

.contact-map-button img {
  display: block;
  width: 100%;
  height: auto;
  /* На компьютере схема показывается целиком: без обрезки
     и без искажения пропорций. */
  object-fit: contain;
}

.contact-map-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 99px;
  background: #06201ad9;
  color: var(--cream, #f5f1e6);
  font: 600 13px/1.2 'Segoe UI', Arial, sans-serif;
  pointer-events: none;
}

@media (max-width: 820px) {
  .contact-map-card {
    padding: 20px;
  }

  .contact-map-head h2 {
    font-size: 24px;
    margin-top: 10px;
  }

  /*
   * Схема широкая (2,5:1). Целиком на телефоне она выходит полосой
   * высотой 130–150 px, где номера участков не разобрать. Поэтому
   * показывается вертикальный фрагмент с самим посёлком, а полная
   * схема открывается по нажатию.
   */
  .contact-map-button img {
    height: 300px;
    object-fit: cover;
    object-position: 72% center;
  }

  .contact-map-hint {
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    padding: 7px 12px;
  }

  .contact-map-actions > * {
    flex: 1 1 220px;
  }

  .yandex-map-shell,
  .yandex-map-shell iframe {
    min-height: 430px;
    height: 430px;
  }

  .yandex-map-placeholder {
    padding: 26px 20px;
  }
}

@media (max-width: 480px) {
  .contact-map-card {
    padding: 16px;
  }

  .contact-map-button img {
    height: 260px;
    object-position: 76% center;
  }

  .yandex-map-shell,
  .yandex-map-shell iframe {
    min-height: 400px;
    height: 400px;
  }

  .yandex-map-placeholder h3 {
    font-size: 24px;
  }
}

/* Схема внутри окна: целиком помещается в доступную область без обрезки. */
.map-view {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.modal-scroll.map-scroll {
  touch-action: pan-x pan-y pinch-zoom;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#map-modal.modal-wide {
  width: min(1600px, calc(100% - 40px));
  max-width: none;
}

#map-modal .modal-frame {
  height: min(88dvh, 900px);
}

@media (max-width: 700px) {
  #map-modal.modal-wide {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
  }

  #map-modal .modal-frame {
    height: 100dvh;
    max-height: 100dvh;
  }

  #map-modal .modal-scroll.map-scroll {
    align-items: flex-start;
    padding: 8px;
  }

  #map-modal .map-view {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ *
 * 18. Действия у карточки документа
 * ------------------------------------------------------------------ */

.doc-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

/* Основное действие — просмотр, дополнительное — скачивание. */
.doc-view {
  border: 1px solid var(--gold, #d3a648);
  background: var(--gold, #d3a648);
  color: var(--green-950, #062018);
  border-radius: 7px;
  padding: 10px 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Правило .doc-status a из основного файла стилей заливает ссылку
   золотым. Здесь специфичность выше, поэтому дополнительное действие
   остаётся контурным и отличается от основного. */
.doc-status .doc-download {
  border: 1px solid #b8ac8e;
  background: transparent;
  color: var(--green-800, #124534);
  border-radius: 7px;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.doc-view:hover {
  filter: brightness(1.05);
}

.doc-status .doc-download:hover {
  border-color: var(--green-800, #124534);
  background: #ffffff;
}

.doc-view:focus-visible,
.doc-download:focus-visible {
  outline: 3px solid #d3a648a6;
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .doc-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .doc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .doc-view,
  .doc-download {
    justify-content: center;
    padding: 12px 10px;
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------ *
 * 19. Просмотр документа
 * ------------------------------------------------------------------ */

.viewer-frame {
  display: block;
  width: 100%;
  height: min(78dvh, 900px);
  border: 0;
  background: #0b1c17;
}

@media (max-width: 700px) {
  .viewer-frame {
    height: calc(100dvh - 132px);
  }
}

/*
 * Постраничный просмотр — то, что видит телефон.
 *
 * Рамку с PDF мобильные браузеры не отрисовывают: раньше на телефоне
 * работало только «Скачать». Теперь документ показывается страницами;
 * они листаются обычной прокруткой и подгружаются по мере пролистывания.
 */
.viewer-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 12px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: #0b1c17;
}

.viewer-page {
  margin: 0;
  width: 100%;
  max-width: 900px;
}

.viewer-page img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 20px #00000059;
}

.viewer-page figcaption {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: #9fb1a6;
}

/* Сообщение, когда встроенный просмотр недоступен или файл не открылся. */
.viewer-notice {
  margin: 0;
  padding: 40px 24px;
  text-align: center;
  color: var(--cream, #f5f1e6);
  background: #0b1c17;
  font-size: 15px;
  line-height: 1.6;
}

.viewer-notice strong {
  display: block;
  margin-bottom: 8px;
  font: 600 20px/1.3 Georgia, serif;
  color: var(--gold-light, #e2c47d);
}

.viewer-notice .button {
  margin-top: 18px;
}

/* ------------------------------------------------------------------ *
 * 20. Увеличенная типографика
 *
 * Текст немного крупнее в шапке, основных разделах и футере. Разница
 * умеренная: макет остаётся компактным, но его легче читать без увеличения.
 * ------------------------------------------------------------------ */

@media (min-width: 821px) {
  .brand-copy strong {
    font-size: 23px;
  }

  .desktop-nav a {
    font-size: 16px;
  }

  .question-link {
    padding-inline: 24px;
    font-size: 15px;
  }
}

main p {
  font-size: 17px;
  line-height: 1.7;
}

.page-intro p {
  font-size: 20px;
  line-height: 1.65;
}

.details-list dt,
.article-meta,
.doc-meta,
.micro-note {
  font-size: 13px;
}

.details-list dd {
  font-size: 17px;
  line-height: 1.6;
}

.button,
.filter-row button {
  font-size: 15px;
}

.site-footer.has-photo .footer-inner {
  width: min(1300px, 100% - 80px);
}

.site-footer.has-photo .footer-brand {
  font-size: clamp(30px, 2.15vw, 34px);
}

.site-footer.has-photo p,
.site-footer.has-photo .footer-nav a {
  font-size: 17px;
}

.site-footer.has-photo .footer-note strong {
  font-size: 19px;
}

.site-footer.has-photo .footer-legal a {
  font-size: 16px;
}

.site-footer.has-photo .footer-note > span {
  font-size: 15px;
}

@media (max-width: 820px) {
  .brand-copy strong {
    font-size: 16px;
  }

  .mobile-menu nav a {
    font-size: 17px;
  }

  .page-intro p {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .site-footer.has-photo .footer-inner {
    width: min(100% - 36px, 720px);
  }
}

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

.vision-toggle {
  position: fixed;
  top: 96px;
  right: 18px;
  z-index: 190;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 9px 14px;
  border: 2px solid #062018;
  border-radius: 10px;
  background: #fff;
  color: #062018;
  font: 750 15px/1.2 Arial, sans-serif;
  box-shadow: 0 8px 26px #0003;
  cursor: pointer;
}

.vision-toggle strong {
  font-size: 20px;
}

.vision-toggle:hover,
.vision-toggle:focus-visible {
  background: #f5cf4b;
}

.vision-toggle[hidden],
.vision-toolbar[hidden] {
  display: none !important;
}

.vision-toolbar {
  position: sticky;
  top: 0;
  z-index: 300;
  border-bottom: 3px solid #000;
  background: #fff;
  color: #000;
  font-family: Arial, sans-serif;
}

.vision-toolbar-inner {
  width: min(1400px, calc(100% - 32px));
  min-height: 72px;
  margin: 0 auto;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.vision-toolbar-inner > strong {
  font-size: 20px;
}

.vision-toolbar-label {
  margin-left: 10px;
  font-size: 18px;
}

.vision-toolbar button {
  min-height: 48px;
  padding: 8px 14px;
  border: 2px solid #000;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font: 700 18px/1.2 Arial, sans-serif;
  cursor: pointer;
}

.vision-toolbar button:hover,
.vision-toolbar button[aria-pressed="true"] {
  background: #000;
  color: #fff;
}

.vision-toolbar .vision-reset {
  margin-left: auto;
  background: #f5cf4b;
  color: #000;
}

html.vision-mode[data-vision-size="large"] {
  --vision-text: 22px;
  --vision-small: 18px;
  --vision-nav: 20px;
  --vision-h1: 56px;
  --vision-h2: 38px;
  --vision-h3: 29px;
  --vision-button: 20px;
}

html.vision-mode[data-vision-size="xlarge"] {
  --vision-text: 28px;
  --vision-small: 22px;
  --vision-nav: 24px;
  --vision-h1: 72px;
  --vision-h2: 48px;
  --vision-h3: 36px;
  --vision-button: 23px;
}

html.vision-mode body {
  font-size: var(--vision-text);
  line-height: 1.75;
}

html.vision-mode main p,
html.vision-mode main li,
html.vision-mode main dd,
html.vision-mode main td,
html.vision-mode main th,
html.vision-mode main label,
html.vision-mode .footer-inner p,
html.vision-mode .footer-inner a,
html.vision-mode .cookie-copy p {
  font-size: var(--vision-text) !important;
  line-height: 1.75 !important;
}

html.vision-mode main small,
html.vision-mode .eyebrow,
html.vision-mode .article-meta,
html.vision-mode .doc-meta,
html.vision-mode .micro-note {
  font-size: var(--vision-small) !important;
  line-height: 1.6 !important;
}

html.vision-mode h1,
html.vision-mode .hero-copy h1,
html.vision-mode .page-intro h1 {
  font-size: var(--vision-h1) !important;
  line-height: 1.12 !important;
}

html.vision-mode h2,
html.vision-mode .notice-card h2,
html.vision-mode .doc-main h2,
html.vision-mode .article-list h2 {
  font-size: var(--vision-h2) !important;
  line-height: 1.2 !important;
}

html.vision-mode h3,
html.vision-mode .news-grid h3 {
  font-size: var(--vision-h3) !important;
  line-height: 1.25 !important;
}

html.vision-mode main a,
html.vision-mode main button,
html.vision-mode main input,
html.vision-mode main select,
html.vision-mode main textarea,
html.vision-mode .mobile-menu nav a {
  font-size: var(--vision-button) !important;
}

html.vision-mode main button,
html.vision-mode .button,
html.vision-mode main input,
html.vision-mode main select,
html.vision-mode main textarea {
  min-height: 58px;
}

html.vision-mode :focus-visible {
  outline: 4px solid #f4bf2a !important;
  outline-offset: 4px !important;
}

html.vision-mode .desktop-nav,
html.vision-mode .question-link {
  display: none !important;
}

html.vision-mode .mobile-menu {
  display: block !important;
}

html.vision-mode .mobile-menu summary {
  width: 58px;
  height: 58px;
}

html.vision-mode .header-inner {
  width: min(1100px, calc(100% - 32px));
}

html.vision-mode .brand-copy strong {
  font-size: clamp(22px, 3vw, 30px) !important;
}

html.vision-mode .hero-content,
html.vision-mode .split-layout,
html.vision-mode .transparency-grid,
html.vision-mode .contact-grid {
  grid-template-columns: 1fr !important;
}

html.vision-mode .quick-grid,
html.vision-mode .three-grid,
html.vision-mode .news-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.vision-contrast body,
html.vision-contrast main,
html.vision-contrast .content-section,
html.vision-contrast .home-section {
  background: #fff !important;
  color: #000 !important;
}

html.vision-contrast .prose-card,
html.vision-contrast .notice-card,
html.vision-contrast .quick-card,
html.vision-contrast .document-list article,
html.vision-contrast .article-list article,
html.vision-contrast .contact-card,
html.vision-contrast .step-card,
html.vision-contrast .project-card {
  border: 3px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
}

html.vision-contrast .site-header,
html.vision-contrast .site-footer {
  background-color: #000 !important;
}

html.vision-contrast .hero-overlay,
html.vision-contrast .page-intro-overlay {
  background: #000c !important;
}

html.vision-contrast main a,
html.vision-contrast .footer-inner a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

/* Обычная компьютерная версия: фотография подвала становится компактнее. */
@media (min-width: 1025px) {
  html:not(.vision-mode) .site-footer.has-photo {
    min-height: clamp(330px, 18vw, 390px);
  }

  html:not(.vision-mode) .site-footer.has-photo .footer-inner {
    padding-block: clamp(120px, 8vw, 155px) 26px;
  }
}

@media (max-width: 900px) {
  html.vision-mode .quick-grid,
  html.vision-mode .three-grid,
  html.vision-mode .news-grid {
    grid-template-columns: 1fr !important;
  }

  html.vision-mode h1,
  html.vision-mode .hero-copy h1,
  html.vision-mode .page-intro h1 {
    font-size: clamp(42px, 12vw, var(--vision-h1)) !important;
  }
}

@media (max-width: 700px) {
  .vision-toggle {
    top: 84px;
    right: 10px;
    padding: 8px 10px;
  }

  .vision-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .vision-toolbar-inner {
    width: min(100% - 20px, 680px);
    gap: 8px;
  }

  .vision-toolbar-inner > strong {
    width: 100%;
  }

  .vision-toolbar-label {
    margin-left: 0;
  }

  .vision-toolbar .vision-reset {
    width: 100%;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ *
 * 22. Исправления компоновки версии для слабовидящих
 * ------------------------------------------------------------------ */

/*
 * На компьютере исходное меню остаётся маленьким выпадающим блоком без
 * z-index. Поэтому затемняющая подложка оказывалась поверх ссылок и
 * перехватывала все нажатия. В специальной версии используется та же
 * полноценная боковая панель, что и на телефоне.
 */
html.vision-mode .mobile-menu nav {
  position: fixed;
  inset: 0 0 auto auto;
  z-index: 160;
  width: min(420px, 100%);
  min-width: 0;
  height: 100dvh;
  margin-left: auto;
  padding: 96px 24px max(28px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-left: 2px solid #e2c47d80;
  border-radius: 0;
  background: var(--green-950);
  box-shadow: -18px 0 50px #0005;
}

html.vision-mode .mobile-menu nav a {
  min-height: 62px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  color: #fff;
}

html.vision-mode .mobile-menu nav a:hover,
html.vision-mode .mobile-menu nav a:focus-visible {
  background: #ffffff1f;
  color: var(--gold-light);
}

html.vision-mode .mobile-menu .menu-close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  width: 54px;
  height: 54px;
  color: #fff;
  font-size: 30px;
}

/*
 * Быстрые ссылки на главной в обычной версии закреплены у нижнего края
 * фотографии. При крупном тексте карточка собрания становилась выше,
 * но абсолютный блок ссылок не сдвигался и перекрывал её. Здесь все
 * части первого экрана снова участвуют в обычном потоке документа.
 */
html.vision-mode .hero {
  min-height: 0;
  height: auto;
  display: block;
  padding-bottom: 0;
}

html.vision-mode .hero-content {
  min-height: 0;
  padding-top: clamp(56px, 7vw, 90px);
  padding-bottom: 44px;
  align-items: start;
  gap: 42px;
}

html.vision-mode .notice-card {
  width: 100%;
  align-self: auto;
  padding: clamp(28px, 4vw, 48px);
}

html.vision-mode .meeting-card-body {
  grid-template-columns: minmax(88px, 120px) minmax(0, 1fr);
  align-items: start;
}

html.vision-mode .quick-grid {
  position: static;
  left: auto;
  bottom: auto;
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: clamp(52px, 6vw, 80px);
  transform: none;
}

html.vision-mode .quick-card {
  min-height: 150px;
  grid-template-columns: 64px minmax(0, 1fr);
  padding: 24px;
}

html.vision-mode .quick-card strong,
html.vision-mode .footer-brand {
  max-width: none;
  font-size: var(--vision-h3) !important;
  line-height: 1.25 !important;
}

/* Внутренние страницы: крупный текст не должен оставаться в узких колонках. */
html.vision-mode .project-grid,
html.vision-mode .appeal-layout,
html.vision-mode .privacy-note,
html.vision-mode .inline-cta,
html.vision-mode .contact-requisites,
html.vision-mode .requisites-list,
html.vision-mode .footer-inner {
  grid-template-columns: 1fr !important;
}

html.vision-mode .four-grid,
html.vision-mode .facts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.vision-mode .document-list article,
html.vision-mode .article-list article {
  grid-template-columns: 1fr !important;
  gap: 16px;
}

html.vision-mode .doc-status,
html.vision-mode .article-more {
  grid-column: auto;
  min-width: 0;
  text-align: left;
}

html.vision-mode .form-grid {
  grid-template-columns: 1fr !important;
}

html.vision-mode .full-row {
  grid-column: auto;
}

html.vision-mode .inline-cta {
  align-items: stretch;
}

html.vision-mode .page-intro {
  min-height: 0;
  height: auto;
}

html.vision-mode .site-footer.has-photo {
  min-height: 0;
}

html.vision-mode .site-footer.has-photo .footer-inner {
  padding-block: clamp(160px, 16vw, 230px) 38px;
  gap: 30px;
}

html.vision-mode .footer-nav,
html.vision-mode .footer-legal {
  justify-content: flex-start;
}

html.vision-mode .cookie-banner {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  html.vision-mode .four-grid,
  html.vision-mode .facts-grid {
    grid-template-columns: 1fr !important;
  }

  html.vision-mode .meeting-card-body,
  html.vision-mode .quick-card {
    grid-template-columns: 1fr;
  }

  html.vision-mode .meeting-calendar {
    width: 86px;
  }
}

/* ------------------------------------------------------------------ *
 * 23. Телефон в альбомной ориентации
 * ------------------------------------------------------------------ */

/*
 * Некоторые современные телефоны после поворота имеют ширину окна
 * 844–932 CSS-пикселя. Это чуть больше прежнего мобильного порога 820 px,
 * поэтому включалась компьютерная шапка, а закреплённые быстрые ссылки
 * перекрывали текст и карточку собрания.
 */
@media (min-width: 821px) and (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
  .desktop-nav,
  .question-link {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .header-inner {
    width: min(100% - 32px, 960px);
    min-height: 72px;
    gap: 14px;
  }

  .brand {
    gap: 12px;
  }

  .brand-mark {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }

  .brand-copy strong {
    font-size: 18px;
  }

  .mobile-menu summary {
    width: 48px;
    height: 48px;
  }

  .mobile-menu nav {
    position: fixed;
    inset: 0 0 auto auto;
    z-index: 160;
    width: min(360px, 100%);
    min-width: 0;
    height: 100dvh;
    margin-left: auto;
    padding: 72px 16px max(20px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-left: 1px solid #e2c47d4d;
    border-radius: 0;
  }

  .mobile-menu nav a {
    min-height: 48px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
  }

  .hero {
    min-height: 0;
    height: auto;
    display: block;
  }

  .hero-content {
    min-height: 0;
    padding: 36px 0 30px;
    gap: 28px;
  }

  .quick-grid {
    position: static;
    left: auto;
    bottom: auto;
    width: min(100% - 80px, 944px);
    margin: 0 auto;
    padding-bottom: 34px;
    transform: none;
  }

  .vision-toggle {
    top: 82px;
    right: 10px;
    padding: 8px 10px;
  }

  .vision-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .vision-toolbar-inner {
    width: min(100% - 20px, 980px);
    min-height: 0;
    padding-block: 6px;
    gap: 8px;
  }

  .vision-toolbar-inner > strong,
  .vision-toolbar-label,
  .vision-toolbar button {
    font-size: 16px;
  }

  .vision-toolbar button {
    min-height: 42px;
    padding: 6px 10px;
  }
}

/* ------------------------------------------------------------------ *
 * 24. Меню под панелью настроек слабовидящих
 * ------------------------------------------------------------------ */

/*
 * Белая панель имеет разную высоту: одну строку на широком экране и
 * несколько строк на телефоне. Скрипт записывает её фактическую высоту
 * в переменную, после чего меню начинается строго под панелью.
 */
html.vision-mode body.menu-open .mobile-menu nav {
  top: var(--vision-toolbar-height, 72px);
  height: calc(100dvh - var(--vision-toolbar-height, 72px));
}

html.vision-mode body.menu-open .menu-backdrop {
  top: var(--vision-toolbar-height, 72px);
}

html.vision-mode body.menu-open .mobile-menu .menu-close {
  top: 16px;
}

/* Контакты, загружаемые из редактируемых настроек сайта. */
.contact-card .pending-value a,
.contact-card > p a {
  color: inherit;
  overflow-wrap: anywhere;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  text-underline-offset: 0.16em;
}

.footer-public-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 14px !important;
}

.footer-public-contacts a {
  color: inherit;
  font-weight: 650;
  overflow-wrap: anywhere;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.16em;
}

.meeting-announcement .meeting-agenda {
  margin-top: 30px;
}

.meeting-announcement .meeting-agenda h3 {
  margin: 0 0 14px;
  color: #0b3a2d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.22rem, 2vw, 1.55rem);
  line-height: 1.2;
}

.meeting-announcement .meeting-agenda p {
  line-height: 1.65;
}

.meeting-announcement .meeting-agenda p + h3 {
  margin-top: 26px;
}

.meeting-announcement .meeting-agenda ol,
.meeting-announcement .meeting-agenda ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.55rem;
}

.meeting-announcement .meeting-agenda ol {
  list-style: decimal;
}

.meeting-announcement .meeting-agenda ul {
  list-style: disc;
}

.meeting-announcement .meeting-agenda li {
  padding-left: 0.25rem;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .meeting-announcement .meeting-agenda {
    margin-top: 24px;
  }

  .meeting-announcement .meeting-agenda ol,
  .meeting-announcement .meeting-agenda ul {
    padding-left: 1.3rem;
  }
}