/* ==========================================================================
   Единые стили контента сайта (классы ui-*)
   Образец — страницы «Образование» и «Педагогический состав»:
   синяя палитра, карточки разделов с полосой слева, градиентные спойлеры.
   Заголовки — Oswald, текст — Rubik (шрифты шаблона).
   ========================================================================== */

:root {
  --ui-primary: #1a5fb4;         /* ссылки, полосы, кнопки (контраст с белым 6.4:1) */
  --ui-primary-dark: #0d4a8e;    /* подзаголовки, наведение */
  --ui-primary-soft: #e3f2fd;    /* информационные плашки */
  --ui-hover: #f0f5ff;           /* фон при наведении */
  --ui-spoiler-from: #3a7bc8;    /* градиент заголовка спойлера */
  --ui-spoiler-to: #5299d9;
  --ui-ink: #2c3e50;             /* основной текст */
  --ui-muted: #5f6b7a;           /* второстепенный текст */
  --ui-surface: #f9f9f9;         /* фон документов и полей */
  --ui-line: #eaeaea;            /* рамки и разделители */
  --ui-warning: #e67e00;
  --ui-warning-soft: #fff4e6;
  --ui-success: #2f7d32;
  --ui-success-soft: #e8f5e9;
  --ui-danger: #b3261e;
  --ui-danger-soft: #fdecea;

  /* Цвета иконок документов по формату */
  --ui-file-pdf: #e74c3c;
  --ui-file-word: #2b579a;
  --ui-file-excel: #1e7145;
  --ui-file-ppt: #d24726;
  --ui-file-image: #8e44ad;
  --ui-file-archive: #7f6a4d;
  --ui-file-video: #c0392b;
  --ui-file-other: #7f8c8d;

  --ui-radius: 8px;
  --ui-radius-lg: 12px;
  --ui-shadow: 0 4px 15px rgba(0, 0, 0, .08);
  --ui-shadow-hover: 0 8px 25px rgba(0, 0, 0, .12);
  --ui-font-heading: "Oswald", sans-serif;
  --ui-font-text: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Контейнер страницы ---------- */

.ui-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  color: var(--ui-ink);
  font-family: var(--ui-font-text);
  font-size: 1rem;
  line-height: 1.65;
}

.ui-page p { margin: 0 0 1em; }

/* Длинные адреса, вставленные текстом ссылки, переносятся, а не вылезают за экран */
.ui-page a { overflow-wrap: anywhere; }

.ui-page a:not(.ui-btn):not(.ui-doc):not(.ui-chip):not(.ui-tile):not(.anketa-link):not(.enrollment-link):not(.suggestion-link):not(.addmedia-image-link) { color: var(--ui-primary); text-decoration: underline; text-underline-offset: 2px; }

.ui-page a:not(.ui-btn):not(.ui-doc):not(.ui-chip):not(.ui-tile):not(.anketa-link):not(.enrollment-link):not(.suggestion-link):not(.addmedia-image-link):hover { color: var(--ui-primary-dark); }

/* ---------- Карточка раздела (как на «Образовании») ---------- */

.ui-section {
  margin: 0 0 30px;
  padding: 30px;
  border-left: 5px solid var(--ui-primary);
  border-radius: var(--ui-radius-lg);
  background: #fff;
  box-shadow: var(--ui-shadow);
}

.ui-section > :last-child { margin-bottom: 0; }

/* ---------- Вступление страницы: «кто мы / о чём страница» ---------- */

.ui-intro {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 0 0 30px;
  padding: 30px 34px;
  border-radius: var(--ui-radius-lg);
  background: linear-gradient(135deg, #1a5fb4 0%, #3a7bc8 60%, #5299d9 100%);
  box-shadow: 0 10px 30px rgba(26, 95, 180, .25);
  color: #fff;
  overflow: hidden;
}

.ui-intro__icon {
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: 1.7rem;
}

.ui-intro__body { position: relative; z-index: 1; flex: 1; min-width: 0; }

.ui-intro__title { margin: 0 0 8px; font-family: var(--ui-font-heading); font-size: 1.35rem; font-weight: 500; line-height: 1.3; text-transform: uppercase; color: #fff; }

.ui-page .ui-intro p { margin: 0 0 .6em; color: #fff; font-size: 1.12rem; line-height: 1.6; }

.ui-page .ui-intro p:last-child { margin-bottom: 0; }

.ui-intro strong { color: #fff; font-weight: 700; }

.ui-page .ui-intro a:not(.ui-btn):not(.ui-doc):not(.ui-chip):not(.ui-tile):not(.anketa-link):not(.enrollment-link):not(.suggestion-link):not(.addmedia-image-link), .ui-page .ui-intro a:not(.ui-btn):not(.ui-doc):not(.ui-chip):not(.ui-tile):not(.anketa-link):not(.enrollment-link):not(.suggestion-link):not(.addmedia-image-link):hover { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }

.ui-intro ul, .ui-intro ol { margin: 0 0 .6em; padding-left: 1.3em; font-size: 1.05rem; }

.ui-page .ui-intro li { color: #fff; }

/* Кнопки-«чипы» со ссылками на связанные документы */
.ui-intro__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, transform .2s;
}

a.ui-chip:hover { background: rgba(255, 255, 255, .28); color: #fff; transform: translateY(-1px); }

a.ui-chip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- Заголовки ---------- */

.ui-title {
  margin: 0 0 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--ui-line);
  font-family: var(--ui-font-heading);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ui-primary);
}

.ui-subtitle {
  margin: 25px 0 15px;
  font-family: var(--ui-font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ui-primary-dark);
}

.ui-title i, .ui-subtitle i { margin-right: 10px; }

.ui-lead { font-size: 1.1rem; color: var(--ui-muted); }

.ui-note { margin-top: 25px; padding-top: 15px; border-top: 1px dashed #ccc; font-size: .95rem; font-style: italic; color: #666; }

.ui-divider { height: 1px; margin: 32px 0; border: 0; background: var(--ui-line); }

/* ---------- Документы ---------- */

.ui-docs { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }

.ui-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-left: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-primary);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: background .2s;
}

a.ui-doc:hover { background: var(--ui-hover); color: var(--ui-primary-dark); }

a.ui-doc:focus-visible { outline: 3px solid var(--ui-primary); outline-offset: 2px; }

/* Документ без ссылки (ещё не опубликован) */
div.ui-doc { border-left-color: #c9ced6; color: var(--ui-muted); font-weight: 400; }

/* Иконка подставляется по расширению файла в href — вручную её ставить не нужно */
.ui-doc::before {
  flex: 0 0 1.4em;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
  content: "\f15b";              /* любой файл */
  color: var(--ui-file-other);
}

.ui-doc--web::before,
a.ui-doc[href^="http"]::before { content: "\f0ac"; color: var(--ui-primary); }  /* внешний сайт */

.ui-doc--pdf::before,
a.ui-doc[href$=".pdf" i]::before, a.ui-doc[href*=".pdf?" i]::before { content: "\f1c1"; color: var(--ui-file-pdf); }

.ui-doc--word::before,
a.ui-doc[href$=".doc" i]::before, a.ui-doc[href*=".doc?" i]::before,
a.ui-doc[href$=".docx" i]::before, a.ui-doc[href*=".docx?" i]::before,
a.ui-doc[href$=".rtf" i]::before, a.ui-doc[href*=".rtf?" i]::before,
a.ui-doc[href$=".odt" i]::before, a.ui-doc[href*=".odt?" i]::before { content: "\f1c2"; color: var(--ui-file-word); }

.ui-doc--excel::before,
a.ui-doc[href$=".xls" i]::before, a.ui-doc[href*=".xls?" i]::before,
a.ui-doc[href$=".xlsx" i]::before, a.ui-doc[href*=".xlsx?" i]::before,
a.ui-doc[href$=".ods" i]::before, a.ui-doc[href*=".ods?" i]::before,
a.ui-doc[href$=".csv" i]::before, a.ui-doc[href*=".csv?" i]::before { content: "\f1c3"; color: var(--ui-file-excel); }

.ui-doc--ppt::before,
a.ui-doc[href$=".ppt" i]::before, a.ui-doc[href*=".ppt?" i]::before,
a.ui-doc[href$=".pptx" i]::before, a.ui-doc[href*=".pptx?" i]::before,
a.ui-doc[href$=".odp" i]::before, a.ui-doc[href*=".odp?" i]::before { content: "\f1c4"; color: var(--ui-file-ppt); }

.ui-doc--image::before,
a.ui-doc[href$=".jpg" i]::before, a.ui-doc[href*=".jpg?" i]::before,
a.ui-doc[href$=".jpeg" i]::before, a.ui-doc[href*=".jpeg?" i]::before,
a.ui-doc[href$=".png" i]::before, a.ui-doc[href*=".png?" i]::before,
a.ui-doc[href$=".gif" i]::before, a.ui-doc[href*=".gif?" i]::before,
a.ui-doc[href$=".webp" i]::before, a.ui-doc[href*=".webp?" i]::before { content: "\f1c5"; color: var(--ui-file-image); }

.ui-doc--archive::before,
a.ui-doc[href$=".zip" i]::before, a.ui-doc[href*=".zip?" i]::before,
a.ui-doc[href$=".rar" i]::before, a.ui-doc[href*=".rar?" i]::before,
a.ui-doc[href$=".7z" i]::before, a.ui-doc[href*=".7z?" i]::before { content: "\f1c6"; color: var(--ui-file-archive); }

.ui-doc--video::before,
a.ui-doc[href$=".mp4" i]::before, a.ui-doc[href*=".mp4?" i]::before,
a.ui-doc[href$=".avi" i]::before, a.ui-doc[href*=".avi?" i]::before,
a.ui-doc[href$=".mov" i]::before, a.ui-doc[href*=".mov?" i]::before { content: "\f1c8"; color: var(--ui-file-video); }

.ui-doc__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.ui-doc strong, .ui-doc b { color: inherit; }

.ui-doc__meta { display: block; margin-top: 2px; font-size: .85rem; font-weight: 400; color: var(--ui-muted); }

/* ---------- Спойлеры (как на «Педагогическом составе») ---------- */
/* <details class="ui-spoiler">; плавное открытие — js/site.js, без JS работают как обычные */

.ui-spoiler {
  margin: 0 0 20px;
  border: 1px solid #e1efff;
  border-radius: var(--ui-radius-lg);
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 50, 100, .1);
  overflow: hidden;
}

.ui-spoiler > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  background: linear-gradient(to right, var(--ui-spoiler-from), var(--ui-spoiler-to));
  color: #fff;
  font-family: var(--ui-font-heading);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: background .3s;
}

.ui-spoiler > summary::-webkit-details-marker { display: none; }

.ui-spoiler > summary::after {
  content: "\f078";              /* chevron-down */
  flex: 0 0 auto;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1rem;
  transition: transform .35s ease;
}

.ui-spoiler[open] > summary::after { transform: rotate(180deg); }

.ui-spoiler.ui-spoiler--closing > summary::after { transform: rotate(0); }  /* во время закрытия (js/site.js) */

.ui-spoiler > summary:hover { background: linear-gradient(to right, #2c5282, var(--ui-spoiler-from)); }

.ui-spoiler > summary:focus-visible { outline: 3px solid #0a2a50; outline-offset: -3px; }

.ui-spoiler__body { padding: 25px 28px 10px; }

/* Спойлер попроще — для вопросов и вложенных списков */
.ui-spoiler--light { box-shadow: none; border-color: var(--ui-line); border-radius: var(--ui-radius); }

.ui-spoiler--light > summary {
  padding: 16px 20px;
  background: var(--ui-surface);
  color: var(--ui-ink);
  font-family: var(--ui-font-text);
  font-size: 1.05rem;
  text-transform: none;
}

.ui-spoiler--light > summary::after { color: var(--ui-primary); }

.ui-spoiler--light > summary:hover { background: var(--ui-hover); }

.ui-spoiler--light > .ui-spoiler__body { padding: 18px 20px 6px; border-top: 1px solid var(--ui-line); }

/* Кнопка «Раскрыть все разделы» */
.ui-spoiler-toggle { display: flex; justify-content: center; margin: 10px 0 35px; }

/* ---------- Таблицы ---------- */

.ui-table-wrap { margin: 0 0 24px; overflow-x: auto; border-radius: var(--ui-radius-lg); box-shadow: 0 6px 18px rgba(0, 0, 0, .07); }

/* Сброс глобальных правил table/td из style.css (рамка, тень, шрифт, выделенная первая колонка) */
.ui-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: .95rem;
  background: #fff;
}

/* Только прямые ячейки: вложенные таблицы (например, в модальных окнах) не затрагиваются */
.ui-table > * > tr > th,
.ui-table > * > tr > td,
.ui-table > * > tr > td:first-child {
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid #e1eef9;
  background: transparent;
  color: inherit;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.ui-table > * > tr > th { background: #e8f1fb; color: #1a365d; font-weight: 500; }

.ui-table > tbody > tr:nth-child(odd) { background: #f8fbff; }

.ui-table > tbody > tr:hover { background: var(--ui-hover); }

.ui-table > * > tr:last-child > td { border-bottom: 0; }

.ui-table > * > tr > td > p { margin: 0 0 .5em; }
.ui-table > * > tr > td > p:last-child { margin-bottom: 0; }

/* Таблица «подпись — значение»: первая колонка выделена (как на «Педагогическом составе») */
.ui-table--kv > tbody > tr > td:first-child {
  width: 28%;
  border-right: 1px solid #e1eef9;
  background: #f3f8fe;
  color: #1a365d;
  font-weight: 500;
}

/* ---------- Картинки ---------- */

.ui-page img { max-width: 100%; height: auto; }

.ui-img { display: block; margin: 0 auto 20px; border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }

.ui-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0 0 24px; }

.ui-images img { width: 100%; border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }

/* ---------- Видео 16:9 (iframe YouTube/VK или <video>) ---------- */

.ui-video { position: relative; margin: 0 0 20px; padding-top: 56.25%; border-radius: var(--ui-radius); overflow: hidden; background: #000; box-shadow: var(--ui-shadow); }

.ui-video > iframe,
.ui-video > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Поле поиска над таблицей ---------- */

.ui-search {
  width: 100%;
  max-width: 420px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid #cfd8e3;
  border-radius: var(--ui-radius);
  font: inherit;
}

.ui-search:focus { outline: 3px solid var(--ui-primary-soft); border-color: var(--ui-primary); }

/* ---------- Метки ---------- */

.ui-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  background: #eef1f5;
  color: var(--ui-muted);
}

.ui-badge--yes { background: var(--ui-success-soft); color: var(--ui-success); }
.ui-badge--no { background: var(--ui-danger-soft); color: var(--ui-danger); }

/* ---------- Карточки ---------- */

.ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 0 0 24px; }

.ui-card {
  padding: 22px;
  border-top: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius);
  background: #fff;
  box-shadow: var(--ui-shadow);
  transition: transform .3s, box-shadow .3s;
}

.ui-card:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow-hover); }

.ui-card__icon { margin-bottom: 12px; font-size: 1.8rem; color: var(--ui-primary); }

.ui-card__title { margin: 0 0 8px; font-family: var(--ui-font-heading); font-size: 1.15rem; font-weight: 500; color: var(--ui-primary-dark); }

.ui-card > :last-child { margin-bottom: 0; }

/* Короткие факты в ряд: «Форма обучения: очная» */
.ui-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 0 0 20px; }

.ui-fact { padding: 15px; border-left: 4px solid var(--ui-primary); border-radius: var(--ui-radius); background: #f8f9fa; }

.ui-fact strong { color: var(--ui-primary-dark); }

/* ---------- Шаги ---------- */

.ui-steps { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: ui-step; }

.ui-steps > li {
  position: relative;
  padding: 16px 20px 16px 72px;
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  counter-increment: ui-step;
}

.ui-steps > li::before {
  content: counter(ui-step);
  position: absolute;
  left: 20px;
  top: 13px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ui-primary);
  color: #fff;
  font-family: var(--ui-font-heading);
  font-size: 1.1rem;
  line-height: 36px;
  text-align: center;
}

/* ---------- Плашки ---------- */

.ui-notice {
  margin: 20px 0;
  padding: 15px 20px;
  border-left: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius);
  background: var(--ui-primary-soft);
  font-weight: 500;
}

.ui-notice--warning { border-left-color: var(--ui-warning); background: var(--ui-warning-soft); }

.ui-notice__title { margin: 0 0 6px; font-weight: 700; }

.ui-notice > :last-child { margin-bottom: 0; }

/* ---------- Реквизиты и контакты ---------- */

.ui-fields { margin: 0 0 24px; border-radius: var(--ui-radius); background: #fff; box-shadow: var(--ui-shadow); }

.ui-field { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--ui-line); }

.ui-field:last-child { border-bottom: 0; }

.ui-field__label { color: var(--ui-muted); }

.ui-field__label i { width: 1.2em; margin-right: 8px; color: var(--ui-primary); }

/* ---------- Кнопки ---------- */

.ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, #2c5282 0%, #4a90e2 100%);
  box-shadow: 0 6px 18px rgba(44, 82, 130, .35);
  color: #fff;
  font-family: var(--ui-font-text);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
}

.ui-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(44, 82, 130, .45); color: #fff; }

.ui-btn--outline { background: #fff; box-shadow: inset 0 0 0 2px var(--ui-primary); color: var(--ui-primary); }

.ui-btn--outline:hover { background: var(--ui-hover); box-shadow: inset 0 0 0 2px var(--ui-primary-dark); color: var(--ui-primary-dark); }

.ui-btn:focus-visible { outline: 3px solid var(--ui-ink); outline-offset: 3px; }

.ui-btn i { transition: transform .35s ease; }

.ui-btn[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

/* ---------- Главное меню (includes/menu.html) ---------- */
/* Названия пунктов и ссылок — официальные, их не сокращаем. Чтобы всё помещалось в одну строку,
   на компьютере меню стоит отдельной строкой под логотипом и занимает всю ширину контейнера */

/* Герб в логотипе: размер задан на всех ширинах (файл большой — без этого он раздувает шапку) */
.site-navbar .site-logo .ui-logo-mark { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.site-navbar .site-logo .ui-logo-emblem { flex: none; width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; border-radius: 0; box-shadow: none !important; }
@media (max-width: 1199.98px) {
  /* Мобильная шапка: с гербом большие отступы шаблона не нужны */
  .site-navbar { padding-top: 14px !important; padding-bottom: 14px !important; }
  .sticky-wrapper .site-navbar.shrink { padding-top: 8px !important; padding-bottom: 8px !important; }
  .site-navbar .site-logo { line-height: 1; }
  .site-navbar .toggle-button { top: 50%; transform: translateY(-50%); }
}

/* Заставка (прелоадер): js/main.js убирает её, когда загрузилась вся страница (но не позже 8 с). Если скрипт не сработал,
   заставка сама исчезает через 9 с — страница не останется закрытой. Обычный путь это не меняет */
@keyframes ui-loader-fallback { to { opacity: 0; visibility: hidden; } }
#overlayer, .loader { animation: ui-loader-fallback .4s 9s forwards; }

/* Кнопка «Наверх»: на телефоне :hover из style.css «залипал» после нажатия — кнопка оставалась увеличенной
   и тёмной. Эффект наведения — только там, где есть мышь */
@media (hover: none) {
  .back-to-top:hover { background: #FF9800; transform: translateY(0); }
  .back-to-top:not(.visible):hover { transform: translateY(20px); }
  .back-to-top:hover i { transform: none; }
}

/* Шапка прячется при прокрутке вниз (js/site.js); плавность — от transition: .3s all шаблона */
.sticky-wrapper.is-sticky .site-navbar.ui-head-hidden { transform: translateY(-100%); box-shadow: none !important; }

/* Правая часть строки логотипа: адрес и быстрые кнопки — только на компьютере */
.site-navbar .ui-head-aside { display: none; }
@media (min-width: 1200px) {
  .site-navbar .ui-head-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; line-height: 1.2; text-transform: none; font-weight: 400; }
  .ui-head-address { color: var(--ui-muted) !important; font-size: .85rem; }
  .ui-head-address i { margin-right: 6px; color: #ff8b00; }
  .ui-head-address:hover { color: var(--ui-primary) !important; }
  .ui-head-actions { display: flex; gap: 8px; }
  /* Кнопки строгие, в цвет логотипа: рамка #ff8b00, текст темнее (чистый оранжевый на белом плохо читается); при наведении — заливка */
  .ui-head-btn { display: inline-block; padding: 6px 14px; border: 1px solid #ff8b00; border-radius: 3px; color: #bf5f00 !important; font-size: .88rem; font-weight: 500; line-height: 1.3; white-space: nowrap; transition: background-color .15s, color .15s; }
  .ui-head-btn:hover { background: #ff8b00; color: #fff !important; }
  .ui-head-btn:focus-visible { outline: 3px solid #ff8b00; outline-offset: 2px; }
}

/* Полное наименование рядом с логотипом — только на компьютере */
.site-navbar .site-logo .ui-logo-name { display: none; }

@media (min-width: 1200px) {
  .site-navbar { padding-top: 12px; padding-bottom: 0; }

  .site-navbar .site-logo { position: static; float: none; display: flex; align-items: center; gap: 18px; width: 100%; box-sizing: border-box; padding: 6px 15px 12px; line-height: 1.2; }

  /* Герб + «Школа 496» */
  .site-navbar .site-logo .ui-logo-mark { gap: 12px; }
  .site-navbar .site-logo .ui-logo-emblem { width: 58px; height: 58px; }

  /* Полное наименование школы рядом с логотипом: три строки с разным весом, текст — официальный */
  .site-navbar .site-logo .ui-logo-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 18px;
    border-left: 2px solid #ff8b00;
    text-transform: none;
    line-height: 1.25;
  }
  .ui-logo-name__top { color: var(--ui-muted); font-size: .82rem; font-weight: 500; }
  .ui-logo-name__main { color: var(--ui-ink); font-family: var(--ui-font-heading); font-size: 1.15rem; font-weight: 500; letter-spacing: .01em; }
  .ui-logo-name__sub { color: var(--ui-muted); font-size: .82rem; font-weight: 400; }

  .site-navbar .site-navigation { padding-left: 0; border-top: 1px solid var(--ui-line); text-align: left !important; }

  .site-navbar .site-navigation .site-menu.main-menu.d-lg-block { display: flex !important; justify-content: space-between; margin: 0; padding: 0; }

  .site-navbar .site-navigation .site-menu.main-menu > li > a { margin-left: 0; margin-right: 0; padding: 14px 0; font-size: 15px; white-space: nowrap; }

  .site-navbar .site-navigation .site-menu.main-menu > li.has-children > a { padding-right: 20px; }

  /* Подменю: удобная ширина, длинные названия переносятся */
  .site-navbar .site-navigation .site-menu .has-children .dropdown { margin-top: 0; }
  .site-navbar .site-navigation .site-menu .has-children .dropdown > li { min-width: 0; width: 340px; }
  .site-navbar .site-navigation .site-menu .has-children .dropdown > li > a { white-space: normal; line-height: 1.35; }

  /* «Сведения об образовательной организации» — две колонки вместо ленты из 14 пунктов */
  /* Колонки, а не сетка: пункты идут подряд без пустот рядом с длинными названиями */
  .site-navbar .site-navigation .site-menu .has-children .dropdown.ui-mega { display: block; width: 660px; column-count: 2; column-gap: 0; padding: 8px 0; }
  .site-navbar .site-navigation .site-menu .has-children .dropdown.ui-mega > li { width: auto; break-inside: avoid; }
  .site-navbar .site-navigation .site-menu .has-children .dropdown > li > a { padding-top: 7px; padding-bottom: 7px; }

  /* Подменю правых пунктов раскрываются влево, чтобы не уходить за край экрана */
  .site-navbar .site-navigation .site-menu.main-menu > li.has-children:nth-last-child(-n+3) > .dropdown { left: auto; right: 0; }
}

/* 992–1199 px: в одну строку не помещается — показываем мобильное меню, как на планшетах */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-navbar .site-menu.main-menu { display: none !important; }
  .site-navbar .toggle-button { display: flex !important; }
  /* Размеры шапки — как у мобильной версии шаблона (у него они заданы только до 991 px) */
  .site-navbar { padding-top: 3rem; padding-bottom: 3rem; }
  .site-navbar .site-logo { float: left; position: relative; }
}

/* ---------- Мобильное меню (бургер) ---------- */

.site-mobile-menu { display: flex; flex-direction: column; top: 0; width: min(360px, 88vw); height: 100vh; height: 100dvh; padding: 0; background: #fff; box-shadow: -10px 0 30px rgba(0, 0, 0, .15); }

.offcanvas-menu .site-mobile-menu { box-shadow: -10px 0 30px rgba(0, 0, 0, .25); }

/* Затемнение страницы под открытым меню */
.offcanvas-menu::after { content: ""; position: fixed; inset: 0; z-index: 1999; background: rgba(15, 25, 40, .45); }
.site-mobile-menu { z-index: 2000; }

.site-mobile-menu .site-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  flex: none;
  float: none;
  width: auto;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ui-line);
}

.site-mobile-menu .site-mobile-menu-header::before { content: "Школа 496"; font: 700 1.2rem var(--ui-font-text); color: #ff8b00; }

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close { float: none; margin: 0 !important; }

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; color: var(--ui-ink); }

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover { background: var(--ui-surface); color: var(--ui-ink); }

.site-mobile-menu .site-mobile-menu-body { flex: 1; min-height: 0; height: auto; padding: 8px 0 0; overflow-y: auto; }

.site-mobile-menu .site-nav-wrap { padding: 0; }

/* Разделы: вся строка кликабельна, крупная область нажатия */
.site-mobile-menu .site-nav-wrap > li { position: relative; border-bottom: 1px solid var(--ui-line); }

.site-mobile-menu .site-nav-wrap > li > a {
  display: block;
  padding: 16px 56px 16px 20px;
  color: var(--ui-ink);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
}

.site-mobile-menu .site-nav-wrap > li.ui-open > a,
.site-mobile-menu .site-nav-wrap > li > a:hover { color: var(--ui-primary); }

.site-mobile-menu .site-nav-wrap > li.ui-open { background: var(--ui-surface); }

.site-mobile-menu .site-nav-wrap .arrow-collapse { top: 8px; right: 10px; width: 40px; height: 40px; border-radius: 50%; }

.site-mobile-menu .site-nav-wrap .arrow-collapse:hover { background: rgba(26, 95, 180, .08); }

/* Страницы внутри раздела */
.site-mobile-menu .site-nav-wrap > li > ul { padding: 0 0 10px; }

.site-mobile-menu .site-nav-wrap > li > ul > li > a {
  display: block;
  margin: 0 12px;
  padding: 10px 12px 10px 16px;
  border-radius: var(--ui-radius);
  color: var(--ui-ink);
  font-size: .98rem;
  line-height: 1.35;
}

.site-mobile-menu .site-nav-wrap > li > ul > li > a:hover { background: #fff; color: var(--ui-primary); }

/* Текущая страница */
.site-mobile-menu .site-nav-wrap a.ui-current { background: #fff; box-shadow: inset 3px 0 0 var(--ui-primary); color: var(--ui-primary) !important; font-weight: 500; }

/* Контакты внизу меню */
.ui-mobile-contacts { display: grid; gap: 4px; padding: 18px 20px 28px; }

.ui-mobile-contacts a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--ui-ink); font-weight: 500; }

.ui-mobile-contacts a:hover { color: var(--ui-primary); }

.ui-mobile-contacts i { width: 20px; color: var(--ui-primary); text-align: center; }

/* ---------- Активный раздел меню и поиск ---------- */

@media (min-width: 1200px) {
  .site-navbar .site-navigation .site-menu.main-menu > li > a { position: relative; }
  .site-navbar .site-navigation .site-menu.main-menu > li.ui-active > a { color: var(--ui-primary) !important; }
  .site-navbar .site-navigation .site-menu.main-menu > li.ui-active > a::after {
    content: ""; position: absolute; left: 0; right: 20px; bottom: 6px; height: 2px; border-radius: 1px; background: #ff8b00;
  }
  .site-navbar .site-navigation .site-menu.main-menu > li:not(.has-children).ui-active > a::after { right: 0; }
  .site-navbar .site-navigation .site-menu.main-menu > li.ui-search-item > a { padding-left: 6px; padding-right: 2px; font-size: 16px; }
}

/* Кнопка поиска в мобильной шапке — рядом с бургером */
/* Обе кнопки — одинаковые квадраты 40×40 с иконкой по центру: у бургера шаблон дал py-5 и отступ h3, он съезжал вверх */
.site-navbar .toggle-button { align-items: center; gap: 4px; margin-right: -8px; }
/* d-inline-block из Bootstrap (!important) перебивал flex — иконки вставали по базовой линии и расходились по высоте */
@media (max-width: 1199.98px) { .site-navbar .toggle-button { display: flex !important; } }
.site-navbar .toggle-button > a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0 !important; line-height: 1; }
.ui-search-mobile { font-size: 16px; }   /* лупа — не выше букв «ШКОЛА 496» и бургера */
.site-navbar .site-menu-toggle .icon-menu { display: block; margin: 0; font-size: 28px; line-height: 1; }
.site-mobile-menu .ui-search-item { display: none !important; }

/* Окно поиска */
.ui-sitesearch { position: fixed; inset: 0; z-index: 1000001;   /* выше панели версии для слабовидящих (999999) */ display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; background: rgba(15, 25, 40, .55); }
.ui-sitesearch[hidden] { display: none; }
/* плавное открытие: фон проявляется, окно выезжает сверху */
.ui-sitesearch { opacity: 0; transition: opacity .2s ease; }
.ui-sitesearch.is-open { opacity: 1; }
.ui-sitesearch__box { transform: translateY(-16px) scale(.98); transition: transform .22s cubic-bezier(.2, .8, .3, 1); }
.ui-sitesearch.is-open .ui-sitesearch__box { transform: none; }
@media (prefers-reduced-motion: reduce) { .ui-sitesearch, .ui-sitesearch__box { transition: none; } }
html.ui-sitesearch-lock, html.ui-sitesearch-lock body { overflow: hidden; }

.ui-sitesearch__box { display: flex; flex-direction: column; width: 100%; max-width: 760px; max-height: 84vh; border-radius: var(--ui-radius-lg); background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); overflow: hidden; }

.ui-sitesearch__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ui-line); }
.ui-sitesearch__head > i { color: var(--ui-primary); font-size: 1.1rem; }
.ui-sitesearch__input { flex: 1; min-width: 0; border: 0; outline: none; font: 400 1.1rem var(--ui-font-text); color: var(--ui-ink); background: transparent; }
.ui-sitesearch__input::-webkit-search-cancel-button { display: none; }
.ui-sitesearch__close { border: 0; background: none; font-size: 28px; line-height: 1; color: var(--ui-muted); cursor: pointer; }
.ui-sitesearch__close:hover { color: var(--ui-ink); }

.ui-sitesearch__status { margin: 0; padding: 10px 18px; font-size: .9rem; color: var(--ui-muted); }

.ui-sitesearch__list { margin: 0; padding: 0 8px 10px; list-style: none; overflow-y: auto; }
.ui-sitesearch__hit { display: flex; gap: 12px; padding: 10px 12px; border-radius: var(--ui-radius); color: var(--ui-ink); text-decoration: none; }
.ui-sitesearch__hit:hover, .ui-sitesearch__hit:focus { background: var(--ui-hover); color: var(--ui-ink); outline: none; }
.ui-sitesearch__hit > i { flex: 0 0 18px; margin-top: 3px; color: var(--ui-primary); text-align: center; }
.ui-sitesearch__hit--d > i { color: var(--ui-file-pdf); }
.ui-sitesearch__title { display: block; line-height: 1.4; }
.ui-sitesearch__hit--p .ui-sitesearch__title { font-weight: 500; color: var(--ui-primary); }
.ui-sitesearch__meta { display: block; margin-top: 2px; font-size: .82rem; color: var(--ui-muted); }
.ui-sitesearch mark { padding: 0 1px; border-radius: 2px; background: #fff1c2; color: inherit; }

/* Раздел, к которому перешли из поиска, — кратко подсвечивается */
.ui-found { outline: 3px solid #ffb35c; outline-offset: 4px; border-radius: 6px; transition: outline-color .6s; }

.ui-form .ui-invalid { border-color: var(--ui-danger) !important; box-shadow: 0 0 0 3px var(--ui-danger-soft) !important; }

/* Хлебные крошки: у текущей страницы (.active) шаблон обнулял отступ слева — разделитель «›» прилипал */
.breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
.breadcrumb-item > span { color: #8a8f98; }
/* Все пункты — на одной линии текста. Раньше пункты центрировались по высоте, а высота разная (домик и ссылка
   у «Главной», крупная стрелка «›» у остальных) — «Главная» стояла на ступеньку выше разделов */
.breadcrumb { align-items: baseline; }
.breadcrumb-item { align-items: baseline; }
.breadcrumb-item a, .breadcrumb-item.active { padding-top: 0; padding-bottom: 0; }
.breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
/* стрелка «›» — посередине строчных букв (по линии текста она стояла бы у их верха) */
/* стрелка у первой строки пункта (на телефоне длинный пункт переносится): строка 1.425rem (.95rem × 1.5), стрелка 1.2rem */
.breadcrumb-item + .breadcrumb-item::before { align-self: flex-start; line-height: 1; margin-top: calc((1.425rem - 1.2rem) / 2); transform: translateY(var(--ui-crumb-arrow-shift, .5px)); }

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


.ui-btn--light { background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .2); color: var(--ui-primary-dark); }

.ui-btn--light:hover { color: var(--ui-primary-dark); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }

/* Верхние карточки главной (оформление из style.css) — на всю ширину, как разделы ниже */
.ui-home-top > .documents-container,
.ui-home-top > .anketa-card,
.ui-home-top > .enrollment-card,
.ui-home-top > .suggestion-card { max-width: none; margin: 0 0 20px; }

.ui-home-top { margin: 0 0 30px; }

.ui-home-top > :last-child { margin-bottom: 0; }

.ui-home-top > p:empty { display: none; }

/* Подъём карточек при наведении без «дрожания»: наведение ловит неподвижная обёртка .ui-lift,
   двигается только карточка внутри. Иначе у нижнего края указатель выпадает из поднятой карточки,
   она опускается, снова попадает под указатель — и так по кругу */
.ui-home-top > .ui-lift { margin: 0 0 20px; }
.ui-home-top > .ui-lift:last-child { margin-bottom: 0; }
.ui-lift > .anketa-card,
.ui-lift > .enrollment-card,
.ui-lift > .suggestion-card { max-width: none; margin: 0; }

.ui-lift > .anketa-card:hover,
.ui-lift > .enrollment-card:hover,
.ui-lift > .suggestion-card:hover,
.ui-lift > .addmedia-image-item:hover { transform: none; }

.ui-lift:hover > .anketa-card { transform: translateY(-5px); }
.ui-lift:hover > .enrollment-card { transform: translateY(-7px); }
.ui-lift:hover > .suggestion-card { transform: translateY(-5px); }
.ui-lift:hover > .addmedia-image-item { transform: translateY(-5px); }

.ui-banners > .ui-lift { display: flex; }
.ui-banners > .ui-lift > .addmedia-image-item { flex: 1; }

/* Плитки и кнопки: невидимое продолжение под нижним краем на время подъёма */
.ui-tile, .ui-btn { position: relative; }
.ui-tile:hover::after,
.ui-btn:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; }

/* Быстрые разделы — плитки-ссылки */
.ui-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

@media (max-width: 900px) { .ui-tiles { grid-template-columns: repeat(2, 1fr); } }

.ui-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 130px;
  padding: 20px 14px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  color: var(--ui-primary-dark);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
}

.ui-tile i { font-size: 1.9rem; color: var(--ui-primary); }

.ui-tile:hover { background: var(--ui-hover); color: var(--ui-primary-dark); transform: translateY(-3px); box-shadow: var(--ui-shadow); }

.ui-tile:focus-visible { outline: 3px solid var(--ui-primary); outline-offset: 2px; }

/* Документы/ссылки в две колонки */
.ui-docs--cols { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Баннеры: сетка в 4 колонки, лишние скрыты до «Показать все» (js/site.js) */
.ui-page .ui-banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0 0 20px; }

.ui-banners > .ui-more-hidden { display: none !important; }

.ui-home-gosuslugi { margin: 0 0 20px; border-radius: var(--ui-radius-lg); overflow: hidden; }

/* ---------- Формы: <form class="... ui-form"> ---------- */

.ui-form ul { margin: 0; padding: 0; list-style: none; }

.ui-form li,
.ui-form .food-form-group { margin: 0 0 18px; }

.ui-form label { display: block; margin: 0 0 6px; font-weight: 500; color: var(--ui-ink); }

.ui-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.ui-form textarea,
.ui-form select {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cfd8e3;
  border-radius: var(--ui-radius);
  background: #fff;
  color: var(--ui-ink);
  font: inherit;
  transition: border-color .2s, box-shadow .2s;
}

.ui-form textarea { min-height: 150px; resize: vertical; }

.ui-form input:focus,
.ui-form textarea:focus,
.ui-form select:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-soft); }

.ui-form .forma-required { color: var(--ui-danger); }

.ui-form .forma-form-note { margin: 6px 0 0; font-size: .9rem; color: var(--ui-muted); }

/* Кнопка отправки выглядит как ui-btn */
.ui-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, #2c5282 0%, #4a90e2 100%);
  box-shadow: 0 6px 18px rgba(44, 82, 130, .35);
  color: #fff;
  font: 500 1rem var(--ui-font-text);
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
}

.ui-form button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(44, 82, 130, .45); }

.ui-form button[type="submit"]:focus-visible { outline: 3px solid var(--ui-ink); outline-offset: 3px; }

/* ---------- Вкладки «Профессионального обучения» (prof-*, переключает скрипт страницы) ---------- */

.ui-page .prof-banner-container { gap: 16px; margin: 0 0 30px; }

.ui-page .prof-banner {
  min-height: 110px;
  padding: 20px;
  border: 1px solid var(--ui-line);
  border-top: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius-lg);
  background: #fff;
  box-shadow: var(--ui-shadow);
  color: var(--ui-primary) !important;   /* перебивает color: #fff !important из style.css */
  text-shadow: none;
}

.ui-page .prof-banner h2 { font-family: var(--ui-font-heading); font-size: 1.3rem; font-weight: 500; text-shadow: none; text-transform: uppercase; }

.ui-page .prof-banner:hover { background: var(--ui-hover); transform: translateY(-2px); }

.ui-page .prof-banner.prof-active-banner {
  border-top-color: transparent;
  background: linear-gradient(135deg, #2c5282 0%, #4a90e2 100%);
  box-shadow: 0 8px 24px rgba(44, 82, 130, .35);
  color: #fff !important;
  transform: none;
}

.ui-page .prof-content-section {
  max-width: none;
  margin: 0 0 30px;
  border: 0;
  border-left: 5px solid var(--ui-primary);
  border-radius: var(--ui-radius-lg);
  font-family: inherit;
}

/* ---------- Вкладки «Научно-методической деятельности» (opor-*, переключает скрипт страницы) ---------- */

.ui-page .opor-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 0; background: none; }

.ui-page .opor-tab {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 0;
  padding: 12px 16px;
  border: 1px solid var(--ui-line);
  border-left: 4px solid var(--ui-primary);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-primary);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.35;
}

.ui-page .opor-tab i { color: var(--ui-primary); }

.ui-page .opor-tab:hover { border-bottom-color: var(--ui-line); background: var(--ui-hover); }

.ui-page .opor-tab.active {
  border-color: transparent;
  background: linear-gradient(135deg, #2c5282 0%, #4a90e2 100%);
  color: #fff;
  font-weight: 500;
}

.ui-page .opor-tab.active i { color: #fff; transform: none; }

.ui-page .opor-subtabs { gap: 6px; padding: 6px; background: var(--ui-primary-soft); border-radius: var(--ui-radius); }

.ui-page .opor-subtab { border-radius: 6px; color: var(--ui-primary-dark); }

.ui-page .opor-subtab:hover { background: rgba(26, 95, 180, .08); }

.ui-page .opor-subtab.active { background: var(--ui-primary); color: #fff; font-weight: 500; }

/* Спойлеры «Педагогического состава» (.edu-spoiler-*): на телефоне шаблон ставил заголовок колонкой, а стрелку —
   absolute без опоры, и она уезжала за край. Заголовок остаётся строкой: текст переносится, стрелка справа по центру */
@media (max-width: 600px) {
  .edu-spoiler-header { flex-direction: row; align-items: center; gap: 12px; padding: 16px 18px; }
  .edu-spoiler-title { flex: 1; min-width: 0; gap: 12px; }
  .edu-spoiler-icon { position: static; flex: none; }
}

/* ---------- Галереи фото (.ui-gallery, js/gallery.js) ---------- */
/* Вид — как у прежних галерей музея: фото в мягких карточках на светлом фоне, всегда целиком, без обрезки.
   Акцент — --ui-gallery-accent (на странице музея — коричневый). Разметка — в начале js/gallery.js, образцы — ui-kit.html */
:root {
  --ui-gallery-accent: var(--ui-primary);
  --ui-gallery-bg: #f8f9fa;
  --ui-gallery-radius: 10px;
  --ui-gallery-shadow: 0 5px 15px rgba(0, 0, 0, .08);
  --ui-gallery-shadow-hover: 0 8px 24px rgba(0, 0, 0, .14);
}

.ui-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
  margin: 16px 0 24px;
}
.ui-gallery__item { margin: 0; min-width: 0; }
.ui-gallery__item[hidden] { display: none; }
.ui-gallery__link {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--ui-gallery-radius); background: var(--ui-gallery-bg);
  box-shadow: var(--ui-gallery-shadow); cursor: zoom-in; transition: box-shadow .25s;
}
.ui-gallery__link:hover { box-shadow: var(--ui-gallery-shadow-hover); }
.ui-gallery__link img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.ui-gallery__link:focus-visible { outline: 3px solid var(--ui-gallery-accent); outline-offset: 3px; }
.ui-gallery__caption { margin-top: 8px; color: var(--ui-muted); font-size: .9rem; line-height: 1.4; text-align: center; }
.ui-gallery__caption strong { display: block; color: var(--ui-ink); font-weight: 500; }

/* Грамоты, сканы, листовки: лист целиком на белом */
.ui-gallery--docs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ui-gallery--docs .ui-gallery__link { aspect-ratio: 3 / 4; padding: 10px; background: #fff; }

/* 2–3 фото — крупно, рядом, как прежние «два фото рядом»: высота ряда — по самому высокому фото */
.ui-gallery--few .ui-gallery__item { display: flex; flex-direction: column; }
.ui-gallery--few .ui-gallery__link { flex: 1; aspect-ratio: auto; min-height: 220px; }
.ui-gallery--few .ui-gallery__link img { max-height: 520px; }

/* Одно фото — крупно */
.ui-gallery--single { grid-template-columns: minmax(0, 900px); justify-content: center; }
.ui-gallery--single .ui-gallery__link { aspect-ratio: auto; }
.ui-gallery--single .ui-gallery__link img { max-height: 500px; }

.ui-gallery__more {
  grid-column: 1 / -1; justify-self: center; margin-top: 4px; padding: 8px 18px;
  border: 1px solid var(--ui-gallery-accent); border-radius: 3px; background: #fff;
  color: var(--ui-gallery-accent); font-size: .95rem; font-weight: 500; cursor: pointer;
}
.ui-gallery__more:hover { background: var(--ui-gallery-accent); color: #fff; }

/* Главное фото + лента миниатюр */
.ui-gallery__lead { margin: 12px 0 0; color: var(--ui-ink); font-size: .95rem; line-height: 1.45; text-align: center; }
.ui-gallery__lead strong { font-weight: 500; }
.ui-gallery--slider { display: block; }
.ui-gallery__stage {
  position: relative; overflow: hidden; height: 500px;
  border-radius: var(--ui-gallery-radius); background: var(--ui-gallery-bg); box-shadow: var(--ui-gallery-shadow);
}
.ui-gallery__view { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ui-gallery__view img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.ui-gallery__arrow {
  position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #2c3e50; font-size: 16px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.ui-gallery__arrow:hover { background: #fff; color: var(--ui-gallery-accent); }
.ui-gallery__arrow--prev { left: 12px; }
.ui-gallery__arrow--next { right: 12px; }
.ui-gallery__count { position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 20px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .8rem; }
.ui-gallery__thumbs { display: flex; justify-content: safe center; gap: 12px; padding: 15px 4px 6px; overflow-x: auto; scrollbar-width: thin; }
.ui-gallery__thumbs .ui-gallery__item { flex: 0 0 100px; }
.ui-gallery__thumbs .ui-gallery__link {
  aspect-ratio: auto; height: 80px; border: 2px solid transparent; border-radius: 8px;
  cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s;
}
.ui-gallery__thumbs .ui-gallery__link:hover { opacity: 1; }
.ui-gallery__thumbs .is-current .ui-gallery__link { opacity: 1; border-color: var(--ui-gallery-accent); }
.ui-gallery__thumbs .ui-gallery__caption { display: none; }

@media (max-width: 767.98px) {
  .ui-gallery { gap: 12px; }
  .ui-gallery--few { grid-template-columns: minmax(0, 1fr); }
  .ui-gallery--few .ui-gallery__link { min-height: 0; }
  .ui-gallery--few .ui-gallery__link img, .ui-gallery--single .ui-gallery__link img { max-height: 70vh; }
  .ui-gallery__stage { height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 575.98px) {
  .ui-gallery:not(.ui-gallery--few):not(.ui-gallery--single):not(.ui-gallery--slider) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-gallery__arrow { width: 38px; height: 38px; margin-top: -19px; }
  .ui-gallery__thumbs { gap: 8px; }
  .ui-gallery__thumbs .ui-gallery__item { flex-basis: 76px; }
  .ui-gallery__thumbs .ui-gallery__link { height: 60px; }
}

/* Окно просмотра */
html.ui-lightbox-lock, html.ui-lightbox-lock body { overflow: hidden; }
.ui-lightbox {
  position: fixed; inset: 0; z-index: 1000002;   /* выше панели версии для слабовидящих (999999) */ display: flex; align-items: center; justify-content: center;
  background: rgba(14, 16, 20, .94); color: #fff;
}
.ui-lightbox[hidden] { display: none; }
.ui-lightbox__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 60px 72px 24px; }
.ui-lightbox__img { max-width: 100%; max-height: calc(100% - 8px); object-fit: contain; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; user-select: none; }
.ui-lightbox__caption { max-width: 900px; margin-top: 12px; color: rgba(255, 255, 255, .85); font-size: .95rem; line-height: 1.45; text-align: center; }
.ui-lightbox__caption[hidden] { display: none; }
.ui-lightbox__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0 18px; }
.ui-lightbox__counter { font-size: .9rem; color: rgba(255, 255, 255, .8); }
.ui-lightbox__btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px; background: rgba(255, 255, 255, .06);
  color: #fff; font-size: 18px; cursor: pointer;
}
.ui-lightbox__btn:hover { background: rgba(255, 255, 255, .16); }
.ui-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ui-lightbox__btn[hidden] { display: none; }
.ui-lightbox__nav { position: absolute; top: 50%; margin-top: -22px; z-index: 1; }
.ui-lightbox__nav--prev { left: 14px; }
.ui-lightbox__nav--next { right: 14px; }
@media (max-width: 767.98px) {
  .ui-lightbox__figure { padding: 60px 8px 16px; }
  .ui-lightbox__nav { top: auto; bottom: 14px; margin-top: 0; }
  .ui-lightbox__figure { padding-bottom: 72px; }
}

/* ---------- Навигация по разделам «Музея» (Музей.html, js/museum.js) ---------- */
/* Цвет — музейный коричневый, как у заголовков .museum-title1; кнопки строгие, как в шапке */
:root {
  --museum-brown: #8B4513;
}
/* Свёрнутые события прошлых лет (js/museum.js) */
/* Полоса во всю ширину — в стиле карточек событий (светлый фон, коричневая полоска слева), стрелка справа */
.ui-museum-archive { margin: 18px 0 26px; }
.ui-museum-archive__btn {
  display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; padding: 16px 22px; text-align: left;
  border: 0; border-left: 4px solid var(--museum-brown); border-radius: 10px;
  background: linear-gradient(135deg, #f8f9fa, #eef0f3); box-shadow: 0 5px 15px rgba(0, 0, 0, .06);
  color: var(--museum-brown); font-family: var(--ui-font-heading); font-size: 1.1rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
}
.ui-museum-archive__btn i { flex: none; font-size: .95rem; transition: transform .3s ease; }
.ui-museum-archive__btn:hover { background: #fbf4ee; box-shadow: 0 8px 20px rgba(139, 69, 19, .12); }
.ui-museum-archive__btn:focus-visible { outline: 3px solid #D2691E; outline-offset: 2px; }
@media (max-width: 575.98px) { .ui-museum-archive__btn { padding: 14px 16px; font-size: 1rem; } }

/* Галереи на странице музея — в его цвете */
.ui-museum { --ui-gallery-accent: var(--museum-brown); }

/* Музей: вид прежних галерей (до ui-gallery) — подпись поверх фото на тёмном градиенте, одно фото крупно
   во всю ширину, подъём карточки при наведении, в слайдере — тёмная полоса внизу и зелёная рамка у текущей миниатюры.
   Наведение отслеживается на неподвижной figure, двигается только ссылка внутри — без дрожания курсора на краю */
.ui-museum .ui-gallery__link { transition: transform .3s ease, box-shadow .25s; }
.ui-museum .ui-gallery__item:hover .ui-gallery__link,
.ui-museum .ui-gallery__stage:hover .ui-gallery__view { transform: translateY(-5px); }
.ui-museum .ui-gallery__stage { overflow: visible; }
.ui-museum .ui-gallery__view { transition: transform .3s ease; border-radius: var(--ui-gallery-radius); overflow: hidden; background: var(--ui-gallery-bg); }

/* Подпись — поверх нижней части фото */
.ui-museum .ui-gallery__item:has(.ui-gallery__caption) { position: relative; }
.ui-museum .ui-gallery__item:has(.ui-gallery__caption) .ui-gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 20px 16px;
  border-radius: 0 0 var(--ui-gallery-radius) var(--ui-gallery-radius);
  background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .55) 60%, transparent);
  color: #fff; font-size: .95rem; text-align: left; pointer-events: none; transition: transform .3s ease;
}
.ui-museum .ui-gallery__item:has(.ui-gallery__caption):hover .ui-gallery__caption { transform: translateY(-5px); }
.ui-museum .ui-gallery__caption strong {
  display: block; margin-bottom: 4px; color: #fff;
  font-family: var(--ui-font-heading); font-size: 1.25rem; font-weight: 500; text-transform: uppercase; line-height: 1.25;
}

/* Одно фото — во всю ширину, высотой 500 px */
.ui-museum .ui-gallery--single { grid-template-columns: minmax(0, 1fr); }
.ui-museum .ui-gallery--single .ui-gallery__link { height: 500px; }
.ui-museum .ui-gallery--single .ui-gallery__link img { max-height: 100%; }

/* Слайдер: тёмная полоса внизу главного фото, текущая миниатюра — зелёная рамка и чуть крупнее */
.ui-museum .ui-gallery__view { position: relative; }
.ui-museum .ui-gallery__view::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
}
.ui-museum .ui-gallery__thumbs { padding-top: 18px; }
.ui-museum .ui-gallery__thumbs .ui-gallery__link { transition: opacity .3s, transform .3s, border-color .3s; }
.ui-museum .ui-gallery__thumbs .ui-gallery__item:hover .ui-gallery__link { transform: scale(1.08); }
.ui-museum .ui-gallery__thumbs .is-current .ui-gallery__link,
.ui-museum .ui-gallery__thumbs .is-current:hover .ui-gallery__link { border-color: #2ecc71; transform: scale(1.1); box-shadow: 0 5px 15px rgba(0, 0, 0, .1); }

@media (max-width: 767.98px) {
  .ui-museum .ui-gallery--single .ui-gallery__link { height: auto; aspect-ratio: 4 / 3; }
  /* На телефоне карточка маленькая — подпись поверх закрыла бы фото, поэтому она под ним */
  .ui-museum .ui-gallery__item:has(.ui-gallery__caption) .ui-gallery__caption {
    position: static; padding: 8px 4px 0; border-radius: 0; background: none;
    color: var(--ui-muted); font-size: .9rem; text-align: center;
  }
  .ui-museum .ui-gallery__caption strong { color: var(--ui-ink); font-size: 1.05rem; }
}
/* Без мыши (телефон) подъёма нет — иначе карточка «залипает» поднятой после касания */
@media (hover: none) {
  .ui-museum .ui-gallery__item:hover .ui-gallery__link,
  .ui-museum .ui-gallery__stage:hover .ui-gallery__view,
  .ui-museum .ui-gallery__item:has(.ui-gallery__caption):hover .ui-gallery__caption { transform: none; }
}

.ui-museum-nav {
  position: sticky; top: 0; z-index: 90;
  transition: top .3s ease;   /* вместе с прячущейся шапкой */   /* ниже закреплённой шапки (z-index 100) — её выпадающие меню должны быть сверху */
  display: flex; align-items: center;
  max-width: 1140px; margin: 0 auto 24px; padding: 8px 0;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #f0e6dc;
  box-shadow: 0 6px 14px -10px rgba(139, 69, 19, .35);
}
/* Полоса в одну строку, листается пальцем; полоса прокрутки скрыта */
.ui-museum-nav__track {
  display: flex; gap: 8px; flex: 1; min-width: 0;
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 2px 12px;
}
.ui-museum-nav__track::-webkit-scrollbar { display: none; }
.ui-museum-nav__track a {
  flex: none; padding: 7px 14px;
  border: 1px solid rgba(139, 69, 19, .35); border-radius: 3px;
  background: #fff; color: var(--museum-brown);
  font-size: .9rem; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.ui-museum-nav__track a:hover { border-color: var(--museum-brown); background: #fbf4ee; color: var(--museum-brown); }
.ui-museum-nav__track a.is-active { border-color: var(--museum-brown); background: var(--museum-brown); color: #fff; }
.ui-museum-nav__track a:focus-visible { outline: 3px solid #D2691E; outline-offset: 2px; }
.ui-museum-nav__arrow {
  flex: none; width: 34px; height: 34px; margin: 0 4px; padding: 0;
  border: 1px solid rgba(139, 69, 19, .35); border-radius: 3px;
  background: #fff; color: var(--museum-brown); cursor: pointer;
}
.ui-museum-nav__arrow:hover { background: #fbf4ee; }
.ui-museum-nav__arrow[hidden] { display: none; }
/* На телефоне стрелки не нужны — полоса листается пальцем */
@media (max-width: 991.98px) {
  .ui-museum-nav { margin-bottom: 16px; padding: 6px 0; }
  .ui-museum-nav__arrow { display: none !important; }
  .ui-museum-nav__track a { padding: 6px 12px; font-size: .85rem; }
}

/* ---------- Телефоны ---------- */

@media (max-width: 640px) {
  .ui-section { padding: 20px 16px; }
  .ui-intro { flex-direction: column; gap: 14px; padding: 22px 18px; }
  .ui-intro__icon { flex-basis: auto; width: 52px; height: 52px; font-size: 1.4rem; }
  .ui-page .ui-intro p { font-size: 1.02rem; }
  .ui-title { font-size: 1.45rem; }
  .ui-subtitle { font-size: 1.2rem; }
  .ui-doc { font-size: 1rem; }
  .ui-spoiler > summary { padding: 16px 18px; font-size: 1.1rem; }
  .ui-spoiler__body { padding: 18px 16px 6px; }
  .ui-field { grid-template-columns: 1fr; gap: 2px; }
  .ui-table--kv > tbody > tr > td { display: block; width: 100%; }
  .ui-table--kv > tbody > tr > td:first-child { width: 100%; border-right: 0; }
  .ui-steps > li { padding-left: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-page *, .ui-page *::before, .ui-page *::after { transition: none !important; }
}

/* ---------- Версия для слабовидящих (js/bvi.min.js, класс .bvi-active на body) ---------- */
/* bvi перекрашивает только сплошной фон — градиенты и тени наших блоков давали светлые поля вокруг чёрного текста */
.bvi-active .ui-section, .bvi-active .ui-intro, .bvi-active .ui-doc, .bvi-active .ui-spoiler > summary,
.bvi-active .museum-event-description, .bvi-active .ui-museum-archive__btn, .bvi-active .ui-gallery__link,
.bvi-active .ui-gallery__stage, .bvi-active .ui-museum-nav, .bvi-active .mb-section, .bvi-active .mb-document-card,
.bvi-active .ui-notice, .bvi-active .ui-card, .bvi-active .site-navbar, .bvi-active .ui-head-btn,
.bvi-active .site-section *:not(img), .bvi-active .site-footer *:not(img) {
  background-image: none !important; box-shadow: none !important;
}
.bvi-active .ui-gallery__view::after { display: none; }
/* Герб — тёмные линии на прозрачном фоне: на чёрной схеме он пропадал; в этом режиме — на белой круглой подложке */
.bvi-active .site-navbar .site-logo .ui-logo-emblem { mix-blend-mode: normal !important; background: #fff !important; border-radius: 50% !important; padding: 2px; }
/* Подпись поверх фото в музее — под фото: белый текст на фотографии в контрастной схеме не читается */
.bvi-active .ui-museum .ui-gallery__item:has(.ui-gallery__caption) .ui-gallery__caption {
  position: static; padding: 8px 4px 0; background: none !important; transform: none !important;
}
.bvi-active .ui-gallery__item:hover .ui-gallery__link, .bvi-active .ui-gallery__stage:hover .ui-gallery__view { transform: none !important; }

/* ВПР: логотип и таблица предметов с отметками «+» по центру */
.ui-page img.ui-vpr-logo { width: 100%; max-width: 560px; height: auto; margin: 0 auto 28px; box-shadow: none; }
.ui-table--marks th:not(:first-child), .ui-table--marks td:not(:first-child) { text-align: center; }
@media (max-width: 575px) {
  /* на телефоне таблица помещается целиком: узкие колонки классов */
  .ui-table--marks { font-size: .85rem; }
  .ui-table.ui-table--marks > * > tr > th, .ui-table.ui-table--marks > * > tr > td { padding: 9px 4px; }
  .ui-table.ui-table--marks > * > tr > td:first-child, .ui-table.ui-table--marks > * > tr > th:first-child { padding-left: 10px; }
}
.ui-table--marks td:not(:first-child) { color: var(--ui-primary); font-weight: 700; }
.ui-table--marks thead th[rowspan] { vertical-align: middle; }
.ui-table.ui-table--marks > thead > tr + tr > th { text-align: center; }   /* «4» — первая ячейка второй строки шапки */

/* ВРЕМЕННО: кнопка конкурса «Сильные решения» 2026 на обложке главной (index.html) */
.ui-btn.ui-contest-btn { margin-top: -1.5rem; padding: 13px 28px; border: 2px solid #fff; border-radius: 2px; background: rgba(255, 255, 255, .08);
  box-shadow: none; color: #fff; font-size: 1.05rem; letter-spacing: .02em; transition: background .25s, color .25s; }
.ui-btn.ui-contest-btn:hover, .ui-btn.ui-contest-btn:focus-visible { transform: none; box-shadow: none; background: #fff; color: #1a365d; }
#silnye-resheniya-2026 { scroll-margin-top: 90px; }
@media (min-width: 992px) { #silnye-resheniya-2026 { scroll-margin-top: 175px; } }
@media (max-width: 575px) { .ui-btn.ui-contest-btn { margin-top: -1.8rem; padding: 11px 16px; font-size: .95rem; } }

/* Просмотр PDF внутри сайта (js/docviewer.js) */
.ui-docview { position: fixed; inset: 0; z-index: 1000002; display: flex; flex-direction: column; background: rgba(14, 16, 20, .94); color: #fff; opacity: 0; transition: opacity .2s ease; }
.ui-docview.is-open { opacity: 1; }
.ui-docview[hidden] { display: none; }
html.ui-docview-lock, html.ui-docview-lock body { overflow: hidden; }
.ui-docview__bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 18px; background: #16191e; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.ui-docview__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .95rem; }
.ui-docview__counter { flex: none; font-size: .85rem; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.ui-docview__tools { flex: none; display: flex; align-items: center; gap: 4px; }
.ui-docview__zoom { min-width: 44px; font-size: .85rem; text-align: center; color: rgba(255, 255, 255, .8); }
.ui-docview__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: #fff !important; font: 500 .9rem var(--ui-font-text); text-decoration: none !important; cursor: pointer; }
.ui-docview__btn:hover { background: rgba(255, 255, 255, .18); }
.ui-docview__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ui-docview__close { font-size: 28px; line-height: 1; }
.ui-docview__body { flex: 1; overflow: auto; padding: 16px 12px 32px; outline: none; -webkit-overflow-scrolling: touch; }
.ui-docview__status { margin: 40px auto; max-width: 560px; text-align: center; color: rgba(255, 255, 255, .85); }
.ui-docview__status[hidden] { display: none; }
.ui-docview__status a { color: #9cc0ea; }
.ui-docview__pages { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: min-content; }
.ui-docview__page { flex: none; max-width: none; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.ui-docview__page:not([data-done]) { background: #f3f4f6 linear-gradient(90deg, #f3f4f6 0, #e8eaed 50%, #f3f4f6 100%) 0 0 / 200% 100%; animation: ui-docview-wait 1.4s linear infinite; }
.ui-docview__page canvas { display: block; width: 100%; height: 100%; }
@keyframes ui-docview-wait { to { background-position: -200% 0; } }
@media (max-width: 767px) {
  .ui-docview__bar { flex-wrap: wrap; gap: 6px 8px; padding: 8px 8px 8px 12px; }
  .ui-docview__title { flex-basis: calc(100% - 56px); order: 0; }
  .ui-docview__close { order: 1; }
  .ui-docview__counter { order: 2; }
  .ui-docview__tools { order: 3; margin-left: auto; }
  .ui-docview__btn--text span { display: none; }
  .ui-docview__body { padding: 10px 6px 24px; }
}
@media (prefers-reduced-motion: reduce) { .ui-docview { transition: none; } .ui-docview__page:not([data-done]) { animation: none; } }

/* Видеогалереи (js/videos.js): карточки с превью и окно-плеер */
.ui-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px 20px; margin: 0 0 24px; }
.ui-videos--single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.ui-page a.ui-videos__item, a.ui-videos__item { display: flex; flex-direction: column; gap: 10px; color: var(--ui-ink) !important; text-decoration: none !important; }
.ui-videos__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ui-radius-lg);
  background: linear-gradient(135deg, #1a365d 0%, #2c5282 55%, #4a90e2 100%); box-shadow: 0 6px 18px rgba(26, 54, 93, .18); transition: transform .25s, box-shadow .25s; }
.ui-videos__thumb--youtube { background: linear-gradient(135deg, #2b2b2b, #5a1a1a); }
.ui-videos__thumb--vk { background: linear-gradient(135deg, #1f3b66, #0077ff); }
.ui-videos__thumb > video, .ui-videos__thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0 !important; object-fit: cover; border-radius: 0 !important; box-shadow: none !important; opacity: 0; transition: opacity .4s; pointer-events: none; }
.ui-videos__thumb.is-ready > video, .ui-videos__thumb.is-ready > img { opacity: 1; }
.ui-videos__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 45%); pointer-events: none; }
.ui-videos__play { position: absolute; left: 50%; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ui-primary); font-size: 22px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); transition: transform .25s, background .25s, color .25s; }
.ui-videos__play i { margin-left: 4px; }
.ui-videos__time, .ui-videos__badge { position: absolute; z-index: 1; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: #fff; font-size: .78rem; font-weight: 500; line-height: 1.3; }
.ui-videos__time { right: 10px; bottom: 10px; }
.ui-videos__time:empty { display: none; }
.ui-videos__badge { left: 10px; top: 10px; }
.ui-videos__title { font-weight: 500; line-height: 1.4; }
a.ui-videos__item:hover .ui-videos__thumb, a.ui-videos__item:focus-visible .ui-videos__thumb { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(26, 54, 93, .28); }
a.ui-videos__item:hover .ui-videos__play, a.ui-videos__item:focus-visible .ui-videos__play { transform: scale(1.1); background: var(--ui-primary); color: #fff; }
a.ui-videos__item:hover .ui-videos__title { color: var(--ui-primary); }
a.ui-videos__item:focus-visible { outline: none; }
a.ui-videos__item:focus-visible .ui-videos__thumb { outline: 3px solid var(--ui-primary); outline-offset: 3px; }
.ui-videos--single .ui-videos__play { width: 80px; height: 80px; margin: -40px 0 0 -40px; font-size: 28px; }

.ui-player { position: fixed; inset: 0; z-index: 1000002; display: flex; flex-direction: column; background: #0b0d11; color: #fff; opacity: 0; transition: opacity .2s ease; }
.ui-player.is-open { opacity: 1; }
.ui-player[hidden] { display: none; }
html.ui-player-lock, html.ui-player-lock body { overflow: hidden; }
.ui-player__bar { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 20px; }
.ui-player__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; font-weight: 500; }
.ui-player__counter { flex: none; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.ui-player__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 18px; cursor: pointer; transition: background .2s; }
.ui-player__btn:hover { background: rgba(255, 255, 255, .22); }
.ui-player__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ui-player__btn[hidden] { visibility: hidden; display: inline-flex; }
.ui-player__close { font-size: 30px; line-height: 1; }
.ui-player__main { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 14px 24px; }
.ui-player__nav { flex: none; }
.ui-player__stage { flex: 1; max-width: min(1200px, calc((100vh - 110px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.ui-player__stage > video, .ui-player__stage > iframe { display: block; width: 100%; height: 100%; border: 0; margin: 0; background: #000; }
@media (max-width: 767px) {
  /* на телефоне видео во всю ширину, стрелки — под ним */
  .ui-player__main { flex-wrap: wrap; align-content: center; justify-content: space-between; gap: 18px 0; padding: 0 16px 20px; }
  .ui-player__stage { flex: 0 0 calc(100% + 32px); max-width: none; margin: 0 -16px; border-radius: 0; }
  .ui-player__nav { order: 1; }
  .ui-videos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ui-player, .ui-videos__thumb, .ui-videos__play { transition: none; } }

/* Место под полосу прокрутки занято всегда: иначе, когда исчезает заставка загрузки (или открывается поиск,
   просмотрщик), полоса появляется/пропадает и вся страница вместе с хлебными крошками сдвигается вбок */
html { scrollbar-gutter: stable; }

/* Музей.html: плашка со ссылкой на отдельный сайт музея */
.ui-museum-site { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; max-width: 1110px; margin: 0 auto 36px; padding: 18px 26px;
  border-left: 4px solid #b3261a; border-radius: 4px 14px 14px 4px; background: linear-gradient(90deg, #f3ead8, #fbf7ef 70%);
  box-shadow: 0 10px 26px -16px rgba(42, 31, 23, .5); color: #2a1f17 !important; text-decoration: none !important; transition: transform .25s, box-shadow .25s; }
.ui-museum-site:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(42, 31, 23, .55); }
.ui-museum-site__kicker { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #b3261a; }
.ui-museum-site__title { flex: 1 1 320px; font: 600 1.35rem/1.25 'Cormorant Garamond', Georgia, serif; }
.ui-museum-site__go { font-weight: 500; color: #b3261a; white-space: nowrap; }
.ui-museum-site__go span { display: inline-block; transition: transform .25s; }
.ui-museum-site:hover .ui-museum-site__go span { transform: translateX(4px); }
.bvi-active .ui-museum-site { background: #fff; box-shadow: none; }

/* Пункт «Музей» в меню — в стиле сайта музея: только красная звезда (шрифт и фон — как у всего меню) */
.ui-nav-museum > a::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .35em; vertical-align: -.06em; background: #b3261a;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: transform .4s; }
.ui-nav-museum > a:hover { color: #b3261a !important; }
.ui-nav-museum > a:hover::before { transform: rotate(72deg); }
.bvi-active .ui-nav-museum > a::before { display: none; }

/* ---------- Обложка внутренней страницы (gulpfile.js: heroCovers) ----------
   У каждого раздела меню свой цвет градиента вместо картинки, справа — иконка раздела */
.site-section-cover.ui-hero { overflow: hidden; --hero-from: #2d3e50; --hero-to: #4f6d8a;
  background: radial-gradient(ellipse 60% 120% at 12% 0%, rgba(255, 255, 255, .16), transparent 60%),
              linear-gradient(100deg, var(--hero-from) 0%, var(--hero-to) 100%); }
.site-section-cover.ui-hero--sveden { --hero-from: #1a365d; --hero-to: #2c5282; }   /* Сведения об образовательной организации — тёмно-синий */
.site-section-cover.ui-hero--study { --hero-from: #1a5fb4; --hero-to: #4a90e2; }   /* Обучение — синий */
.site-section-cover.ui-hero--life { --hero-from: #5b3f8c; --hero-to: #8a63c9; }   /* Внеурочная жизнь — фиолетовый */
.site-section-cover.ui-hero--support { --hero-from: #11706b; --hero-to: #2aa198; }   /* Поддержка — бирюзовый */
.site-section-cover.ui-hero--safety { --hero-from: #b33a1f; --hero-to: #ef7d2f; }   /* Безопасность — красно-оранжевый */
.site-section-cover.ui-hero--parents { --hero-from: #2f6b2f; --hero-to: #5fa34a; }   /* Родителям — зелёный */
.site-section-cover.ui-hero.overlay:before { background: rgba(0, 0, 0, .12); }
.ui-hero__icon { position: absolute; z-index: 1; right: 6%; top: 50%; font-size: 9.5rem; line-height: 1; color: rgba(255, 255, 255, .16);
  transform: translateY(-50%) rotate(-10deg); pointer-events: none; }
.ui-hero .container { z-index: 2; }
@media (max-width: 991.98px) { .ui-hero__icon { font-size: 6rem; right: 4%; } }
@media (max-width: 575.98px) { .ui-hero__icon { font-size: 5.6rem; right: 10px; color: rgba(255, 255, 255, .11); } }   /* на телефоне — целиком, за заголовком */
.bvi-active .ui-hero__icon { display: none; }

/* ---------- Схема структуры управления (Структура_и_органы_управления.html) ----------
   Дерево на CSS вместо картинки: директор, по бокам — коллегиальные органы, ниже пять ветвей с цепочками подчинения.
   На ПК — шина и стрелки, на планшете и телефоне — ветви карточками одна под другой */
.ui-org { position: relative; --org-line: #8aa1bd; --org-gap: 24px; --org-side-gap: 96px; margin: 8px 0 24px; }
.ui-org ol { list-style: none; margin: 0; padding: 0; }
.ui-org__box { position: relative; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #2c5282 0%, #4a90e2 100%); color: #fff;
  font-size: 14.5px; font-weight: 500; line-height: 1.3; text-align: center; box-shadow: 0 4px 12px rgba(26, 54, 93, .16); }
.ui-org__lead { background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); }
.ui-org__head { padding: 14px 34px; font-size: 18px; font-weight: 600; background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); border-bottom: 3px solid #ff8b00; }
.ui-org__side { background: #fff; color: var(--ui-primary-dark); border: 2px solid #4a90e2; box-shadow: none; }
/* заместитель по АХЧ → контрактная служба (положение ставит скрипт на странице): вправо под «Главным бухгалтером» и вниз в блок */
.ui-org__link { position: absolute; z-index: 1; border-top: 2px solid var(--org-line); border-right: 2px solid var(--org-line); border-top-right-radius: 6px; pointer-events: none; }
.ui-org__link::after { content: ""; position: absolute; right: -6px; bottom: -1px; border: 5px solid transparent; border-top: 7px solid var(--org-line); border-bottom: 0; }
.ui-org__link[hidden] { display: none; }
.ui-org__also { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; opacity: .85; }
/* стрелка вниз между блоками цепочки */
.ui-org__chain > li + li { margin-top: 24px; }
.ui-org__chain > li + li::before { content: ""; position: absolute; left: calc(50% - 1px); top: -24px; height: 18px; border-left: 2px solid var(--org-line); }
.ui-org__chain > li + li::after { content: ""; position: absolute; left: calc(50% - 5px); top: -8px; border: 5px solid transparent; border-top: 7px solid var(--org-line); border-bottom: 0; }

/* у каждой ветви свой цвет (те же тона, что у обложек разделов): руководитель залит цветом, подразделения — светлый оттенок с рамкой */
.ui-org__branch--odod { --b: #5b3f8c; --t: #efe8f8; }   /* отделение дополнительного образования — фиолетовый */
.ui-org__branch--uvr  { --b: #1a5fb4; --t: #e3eefb; }   /* УВР — синий */
.ui-org__branch--vr   { --b: #11706b; --t: #e0f2f0; }   /* ВР — бирюзовый */
.ui-org__branch--ahch { --b: #b33a1f; --t: #fbe9e3; }   /* АХЧ — кирпичный */
.ui-org__branch--buh  { --b: #2f6b2f; --t: #e6f2e2; }   /* главный бухгалтер — зелёный */
/* рамка — тенью внутрь, а не border: так у блоков прежние размеры и стрелки не съезжают */
.ui-org__branch .ui-org__box { background: var(--t); color: #222; box-shadow: inset 0 0 0 2px var(--b); }
.ui-org__branch .ui-org__lead { background: var(--b); color: #fff; }

@media (min-width: 992px) {
  .ui-org__top { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--org-side-gap); }
  .ui-org__side--left { justify-self: end; max-width: 220px; }
  .ui-org__side--right { justify-self: start; max-width: 220px; }
  /* директор → коллегиальные органы: стрелки в стороны */
  .ui-org__side--left::after, .ui-org__side--right::after { content: ""; position: absolute; top: calc(50% - 1px); width: var(--org-side-gap); border-top: 2px solid var(--org-line); }
  .ui-org__side--left::after { left: 100%; }
  .ui-org__side--right::after { right: 100%; }
  .ui-org__side--left::before, .ui-org__side--right::before { content: ""; position: absolute; top: calc(50% - 5px); border: 5px solid transparent; }
  .ui-org__side--left::before { left: 100%; border-right: 7px solid var(--org-line); border-left: 0; }
  .ui-org__side--right::before { right: 100%; border-left: 7px solid var(--org-line); border-right: 0; }
  /* от директора вниз к шине */
  .ui-org__top::after { content: ""; position: absolute; left: calc(50% - 1px); top: 100%; height: 46px; border-left: 2px solid var(--org-line); }
  .ui-org .ui-org__branches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--org-gap); margin-top: 46px; }
  .ui-org__branch { position: relative; padding-top: 30px; }
  /* шина: у каждой ветви — свой кусок, у крайних — до середины */
  .ui-org__branch::before { content: ""; position: absolute; top: 0; left: calc(var(--org-gap) / -2); right: calc(var(--org-gap) / -2); border-top: 2px solid var(--org-line); }
  .ui-org__branch:first-child::before { left: 50%; }
  .ui-org__branch:last-child::before { right: 50%; }
  .ui-org__branch::after { content: ""; position: absolute; top: 0; left: calc(50% - 1px); height: 22px; border-left: 2px solid var(--org-line); }
  .ui-org__chain > li:first-child::after { content: ""; position: absolute; left: calc(50% - 5px); top: -8px; border: 5px solid transparent; border-top: 7px solid var(--org-line); border-bottom: 0; }
}

@media (max-width: 991.98px) {
  .ui-org__top { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; }
  .ui-org__head { order: -1; }
  .ui-org__side { width: 100%; max-width: 420px; }
  .ui-org__side::before { content: "Коллегиальный орган"; display: block; margin-bottom: 2px; font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
  .ui-org__branches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
  .ui-org__branch { padding: 14px; border-radius: 12px; background: var(--t); border-left: 4px solid var(--b); }
  .ui-org__branch .ui-org__box { background: #fff; }
  .ui-org__branch .ui-org__lead { background: var(--b); }
}

/* ---------- Подвал (includes/footer.html) ----------
   Контакты с кнопками «Позвонить / Написать / Маршрут / Новости», разделы с официальными названиями, карта с отложенной загрузкой */
.ui-foot { padding: 48px 0 18px; }
.ui-foot__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 28px 40px; align-items: start; }
.ui-foot .footer-title { margin-bottom: 18px; }
.ui-foot__info { margin: 0 0 16px; font-style: normal; }
.ui-foot__info p { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: #fff; line-height: 1.4; }
.ui-foot__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); font-size: 13px; }
.ui-foot__info a { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.ui-foot__info a:hover { text-decoration-color: #fff; }
.ui-foot__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 380px; }
.ui-foot__btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff !important; font-weight: 500; font-size: 15px;
  text-decoration: none !important; transition: background .2s, transform .2s; }
.ui-foot__btn:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }
/* навигация — в прежнем стиле шаблона (иконки, сдвиг при наведении), только длинные названия переносятся с отступом под иконкой */
/* иконка стоит в строке текста (по базовой линии, как рекомендует Font Awesome); перенос — с отступом под иконкой */
.ui-foot .footer-links a { display: block; padding-left: 30px; text-indent: -30px; line-height: 1.35; }
.ui-foot .footer-links a i { display: inline-block; width: 20px; margin-right: 10px; text-indent: 0; vertical-align: -.125em; text-align: center; }
.ui-foot .map-container-wrapper { margin-top: 0; height: 240px; border-radius: 12px; background: rgba(255, 255, 255, .12); }
.ui-foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; margin-top: 36px; padding-top: 16px; text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .22); }
.ui-foot__bottom p { margin: 0; }
/* шаблон центрирует подвал на узких экранах — у нас всё по левому краю */
@media (max-width: 768px) { .ui-foot { text-align: left; } .ui-foot .footer-title::after { left: 0; transform: none; } }
@media (max-width: 991.98px) {
  .ui-foot__grid { grid-template-columns: 1fr 1fr; }
  .ui-foot__map { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .ui-foot { padding: 32px 0 14px; }
  .ui-foot__grid { grid-template-columns: 1fr; gap: 24px; }
  .ui-foot__actions { max-width: none; }
  .ui-foot .map-container-wrapper { height: 200px; }
  .ui-foot__bottom { justify-content: center; text-align: center; margin-top: 24px; }
}


/* ---------- «Версия для слабовидящих» — кнопка в ряду контактов, во всю ширину; «Аа» увеличивается при наведении ---------- */
.ui-foot__actions .ui-foot__bvi { grid-column: 1 / -1; }
.ui-foot__bvi-aa { margin-left: 4px; font: 700 15px/1 Georgia, serif; opacity: .85; transition: font-size .25s; }
.ui-foot__bvi:hover .ui-foot__bvi-aa { font-size: 18px; }
.ui-foot__bvi:hover i { animation: ui-blink 1.6s ease-in-out infinite; }
@keyframes ui-blink { 0%, 44%, 56%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .ui-foot__bvi:hover i, .ui-topbar__bvi:hover .ui-topbar__ico i { animation: none; } }

/* ---------- Верхняя панель: телефон, почта, адрес слева; новости и версия для слабовидящих справа.
   Иконки — Font Awesome в одинаковых кругах (раньше смешивались два шрифта иконок и стояли на разной высоте) ---------- */
.top-bar.ui-topbar { padding: 6px 0; }
.ui-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ui-topbar__group { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; }
.ui-topbar__item { display: inline-flex; align-items: center; gap: 8px; color: #fff !important; font-size: 14.5px; line-height: 1; text-decoration: none !important; white-space: nowrap; }
.ui-topbar__ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .18);
  font-size: 13px; transition: background .2s; }
.ui-topbar__txt { padding: 3px 0; border-bottom: 1px solid transparent; transition: border-color .25s; }
.ui-topbar__item:hover .ui-topbar__ico { background: rgba(255, 255, 255, .34); }
.ui-topbar__bvi:hover .ui-topbar__ico i { animation: ui-blink 1.6s ease-in-out infinite; }   /* глаз моргает, как в подвале */
.ui-topbar__item:hover .ui-topbar__txt { border-bottom-color: rgba(255, 255, 255, .7); }
.ui-topbar__bvi { padding: 3px 12px 3px 3px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); }
.ui-topbar__bvi:hover { background: rgba(255, 255, 255, .24); }
.ui-topbar__bvi:hover .ui-topbar__txt { border-bottom-color: transparent; }
@media (max-width: 767.98px) { .ui-topbar__bvi { padding: 3px; } .ui-topbar__group { gap: 10px; } }

/* ---------- Отдельно стоящие картинки в тексте страниц: по центру, скруглённые, с мягкой тенью ----------
   (раньше прижимались к левому краю, справа оставалась пустота). Галереи, карточки, сетки и ряды картинок не затрагиваются */
.ui-page p > img:only-child, .ui-page p > a:only-child > img,
.ui-page .ui-section > img, .ui-page .ui-section > a > img,
.ui-page .ui-spoiler__body > img, .ui-page .ui-spoiler__body > a > img {
  display: block; margin: 6px auto 18px; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 6px 18px rgba(26, 54, 93, .12); }
.ui-page p:has(> img:only-child), .ui-page p:has(> a:only-child > img) { margin-bottom: 0; }
/* ряд превью (питание: СБП, ФНС, «Народный фронт», кешбэк) — по центру */
.ui-page .ui-img-row { justify-content: center; }

/* ---------- Превью-карточки отдельных картинок (js/gallery.js: initPosters) ----------
   Афиши, плакаты, графики — не во всю страницу, а карточкой на белой подложке, как превью документов; по клику — крупно */
.ui-page a.ui-poster { position: relative; display: table; margin: 6px auto 18px; padding: 10px; border-radius: 12px; background: #fff;
  box-shadow: 0 6px 18px rgba(26, 54, 93, .12); text-decoration: none !important; transition: box-shadow .25s, transform .25s; }
.ui-page a.ui-poster.ui-poster > img { display: block; margin: 0; width: auto; max-width: 100%; max-height: 460px; height: auto; border-radius: 6px; box-shadow: none; }
.ui-page a.ui-poster:hover { box-shadow: 0 10px 26px rgba(26, 54, 93, .2); transform: translateY(-2px); }
.ui-page a.ui-poster--zoom { cursor: zoom-in; }
.ui-page a.ui-poster--zoom::after { content: "\f00e"; position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(26, 54, 93, .78); color: #fff;
  font: 900 14px/1 "Font Awesome 5 Free"; opacity: .85; transition: opacity .25s, transform .25s; }
.ui-page a.ui-poster--zoom:hover::after { opacity: 1; transform: scale(1.08); }
@media (max-width: 575.98px) { .ui-page a.ui-poster { padding: 6px; } .ui-page a.ui-poster.ui-poster > img { max-height: 380px; } }
.bvi-active .ui-page a.ui-poster::after { display: none; }
.ui-page a.ui-poster:not(.ui-poster--zoom) { cursor: default; }
.ui-page a.ui-poster:not(.ui-poster--zoom):not([href$=".pdf"]):not([href^="http"]):hover { transform: none; box-shadow: 0 6px 18px rgba(26, 54, 93, .12); }
/* несколько картинок подряд — в ряд, на телефоне одна под другой */
.ui-page .ui-poster-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; margin: 6px 0 18px; }
.ui-page .ui-poster-row > p { margin: 0; flex: 0 1 auto; max-width: 100%; }
.ui-page .ui-poster-row a.ui-poster { margin: 0; }
.ui-page .ui-poster-row a.ui-poster.ui-poster > img { max-height: 420px; }

/* ---------- Галерея: «Показать ещё» — последний ряд в дымке, кнопка-капсула, появление скрытых фото по очереди ---------- */
.ui-gallery--fold { position: relative; }
.ui-gallery--fold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 56px; height: 120px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%); }
.ui-gallery .ui-gallery__more { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; justify-self: center; grid-column: 1 / -1;
  margin: 6px auto 0; padding: 11px 26px; border: 0; border-radius: 999px; background: var(--ui-gallery-accent); color: #fff; font-weight: 500;
  box-shadow: 0 8px 20px rgba(26, 95, 180, .28); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.ui-gallery .ui-gallery__more:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(26, 95, 180, .36); }
.ui-gallery__more i { transition: transform .25s; }
.ui-gallery__more:hover i { transform: translateY(3px); }
.ui-gallery__item--in { animation: ui-gallery-in .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ui-gallery-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
/* превью: мягкое увеличение при наведении */
.ui-gallery__link img { transition: transform .4s ease; }
.ui-gallery__link:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .ui-gallery__item--in { animation: none; } .ui-gallery__link:hover img { transform: none; } }

/* ---------- «Показать ещё» у списков [data-ui-more] (баннеры на главной) — как у галерей ---------- */
[data-ui-more].ui-more-fold { position: relative; }
[data-ui-more].ui-more-fold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%); }
.ui-btn.ui-more-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 26px; border: 0; border-radius: 999px;
  background: var(--ui-primary); color: #fff; box-shadow: 0 8px 20px rgba(26, 95, 180, .28); transition: transform .25s, box-shadow .25s; }
.ui-btn.ui-more-btn:hover, .ui-btn.ui-more-btn:focus-visible { background: var(--ui-primary); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(26, 95, 180, .36); }
.ui-btn.ui-more-btn i { transition: transform .25s; }
.ui-btn.ui-more-btn[aria-expanded="false"]:hover i { transform: translateY(3px); }
.ui-more-in { animation: ui-gallery-in .5s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .ui-more-in { animation: none; } }

/* ---------- Главная: приветствие первого экрана (js/hero-home.js) ---------- */
.ui-hh h1, .ui-hh p { color: #fff; }
.ui-hh--1 .ui-hh1__hi { font-size: 4.5rem; margin-bottom: 14px; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); animation: ui-hh-in .8s ease both; }
.ui-hh--1 .ui-hh1__sub { font-size: 1.3rem; margin-bottom: 30px; animation: ui-hh-in .8s .15s ease both; }
.ui-hh--1 .ui-hh1__sub b { color: #ffb347; font-weight: 500; }
@keyframes ui-hh-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 991.98px) {
  .ui-hh--1 .ui-hh1__hi { font-size: 2.6rem; }
  .ui-hh--1 .ui-hh1__sub { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .ui-hh * { animation: none !important; transition: none !important; } }
/* дата, приветствие, плашка четверти с полоской «сколько прошло» */
.ui-hh--1 .ui-hh1__date { margin-bottom: 6px; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; opacity: .92; animation: ui-hh-in .8s ease both; }
.ui-hh--1 .ui-hh1__hi { margin-bottom: 8px; }
.ui-hh--1 .ui-hh1__sub { margin-bottom: 22px; font-size: 1.15rem; opacity: .95; }
.ui-hh1__term { width: min(460px, 100%); margin: 0 auto 26px; padding: 14px 18px; border-radius: 14px; background: rgba(20, 22, 40, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .22); animation: ui-hh-in .8s .3s ease both; }
.ui-hh1__term-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; font-size: .98rem; }
.ui-hh1__term-row b { color: #ffb347; font-weight: 500; }
.ui-hh1__bar { height: 6px; margin-top: 10px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.ui-hh1__bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffb347, #ff8b00); transform-origin: left; animation: ui-hh-bar 1.2s .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ui-hh-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 991.98px) {
  .ui-hh--1 .ui-hh1__date { font-size: .8rem; }
  .ui-hh--1 .ui-hh1__sub { font-size: .95rem; margin-bottom: 16px; }
  .ui-hh1__term-row { justify-content: center; text-align: center; font-size: .9rem; }
  .site-section-cover.ui-hh--1, .site-section-cover.ui-hh--1 .container > .row { height: auto; min-height: 400px; }
  .site-section-cover.ui-hh--1 { padding: 28px 0; }
}

/* иконка дома в хлебных крошках (js/breadcrumbs.js) — место под неё занято сразу, крошки не сдвигаются */
.ui-crumb-home { display: inline-block; width: 1.15em; margin-right: .35em; text-align: center; color: #ff8b00; }
/* иконки карточек на главной (раньше — эмодзи) */

/* ---------- Иконки-плашки с градиентом (карточки главной, модули ОРКСЭ): белая иконка строго по центру цветной плашки ---------- */
.anketa-icon, .enrollment-icon, .suggestion-icon, .ui-grid .ui-card__icon:has(> .fas) {
  --g1: #1a5fb4; --g2: #4a90e2;
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; font-size: 24px; line-height: 1;
  box-shadow: 0 8px 18px -8px var(--g1); transition: transform .3s ease; }
.anketa-icon .fas, .enrollment-icon .fas, .suggestion-icon .fas, .ui-card__icon > .fas { color: #fff; line-height: 1; }
.anketa-link[href*="forms.yandex"] .anketa-icon { --g1: #5b3f8c; --g2: #a06cd5; }   /* анкета — фиолетовый */
.enrollment-icon { --g1: #1a5fb4; --g2: #4fb3ff; }                         /* запись в 1 класс — синий */
.suggestion-icon { --g1: #e07a00; --g2: #ffc24a; }                         /* предложения — оранжево-жёлтый */
.anketa-link[href*="коррупции"] .anketa-icon { --g1: #b33a1f; --g2: #ef7d2f; }   /* противодействие коррупции — красный */
.anketa-card:hover .anketa-icon, .enrollment-card:hover .enrollment-icon, .suggestion-card:hover .suggestion-icon { transform: scale(1.06); color: #fff; }
/* модули ОРКСЭ — у каждого свой цвет */
.ui-grid .ui-card:nth-child(1) .ui-card__icon { --g1: #b8860b; --g2: #f2c94c; }
.ui-grid .ui-card:nth-child(2) .ui-card__icon { --g1: #1e7d4f; --g2: #4cc38a; }
.ui-grid .ui-card:nth-child(3) .ui-card__icon { --g1: #c2410c; --g2: #fb923c; }
.ui-grid .ui-card:nth-child(4) .ui-card__icon { --g1: #1a5fb4; --g2: #60a5fa; }
.ui-grid .ui-card:nth-child(5) .ui-card__icon { --g1: #0f766e; --g2: #2dd4bf; }
.ui-grid .ui-card:nth-child(6) .ui-card__icon { --g1: #5b3f8c; --g2: #a78bfa; }
.ui-grid .ui-card__icon:has(> .fas) { margin-bottom: 14px; }

/* галочка в заголовке карточки — градиентом, по середине заглавных букв */
.ui-card__title > .fa-check-circle { display: inline-block; vertical-align: -.06em; margin-right: .3em;
  background: linear-gradient(135deg, #1a8f5a, #4cc38a); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* приветствие: тёмная плашка четверти и кнопка конкурса — одним столбцом одинаковой ширины, с одинаковым скруглением */
.ui-hh1__stack { display: inline-grid; gap: 18px; width: min(460px, 100%); }
.ui-hh--1 .ui-hh1__term { width: auto; margin: 0; }
.ui-hh1__term-row > span { white-space: nowrap; }
.ui-hh1__term-row > i { display: none; }
.ui-hh--1 .ui-hh1__term-row { margin: 0; }
.ui-hh1__stack .ui-btn.ui-contest-btn { margin-top: 0; justify-content: center; border-radius: 14px; }
@media (max-width: 991.98px) { .ui-hh1__stack { gap: 14px; } }
/* «Что идёт сейчас» — строка со звонком под полоской четверти */
.ui-hh--1 .ui-hh1__now { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .16); font-size: .95rem; }
.ui-hh--1 .ui-hh1__now[hidden] { display: none; }
.ui-hh1__now b { color: #ffb347; font-weight: 500; }
.ui-hh1__now .fa-bell { color: #ffb347; font-size: .9em; }
.ui-hh1__now small { margin-left: 4px; font-size: .75rem; opacity: .65; white-space: nowrap; }
@media (max-width: 575.98px) { .ui-hh--1 .ui-hh1__now { flex-wrap: wrap; font-size: .88rem; } }
/* погода в строке даты */
.ui-hh1__weather { white-space: nowrap; }
/* у каждой погоды свой цвет иконки */
.ui-hh1__weather .fas { margin: 0 3px 0 4px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.ui-wx--sun .fas { color: #ffd34d; }
.ui-wx--moon .fas { color: #e9e6ff; }
.ui-wx--part .fas { background: linear-gradient(135deg, #ffd34d 0 40%, #f1f4f8 55%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ui-wx--cloud .fas { color: #e8edf3; }
.ui-wx--fog .fas { color: #cfd6de; }
.ui-wx--rain .fas { color: #8fd3ff; }
.ui-wx--snow .fas { color: #f2f9ff; }
.ui-wx--ice .fas { color: #a8e6ff; }
.ui-wx--storm .fas { color: #ffd34d; }
/* «Листайте вниз» внизу обложки */
.ui-hh .ui-hh1__down { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff !important; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none !important; opacity: .85; transition: opacity .25s; }
.ui-hh .ui-hh1__down:hover { opacity: 1; }
.ui-hh1__down .fas { font-size: 1.1rem; animation: ui-hh-down 1.8s ease-in-out infinite; }
@keyframes ui-hh-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-width: 991.98px) { .ui-hh .ui-hh1__down { display: none; } }
@media (prefers-reduced-motion: reduce) { .ui-hh1__down .fas { animation: none; } }
@media (max-width: 575.98px) { .ui-hh1__weather { display: block; margin-top: 2px; } .ui-hh1__weather:not([hidden]) { display: block; } }
.ui-hh1__sep { font-style: normal; }
@media (max-width: 575.98px) { .ui-hh1__sep { display: none; } }
/* «Добро пожаловать на официальный сайт» — отдельной строкой между тонкими линиями, разрядкой */
.ui-hh1__welcome { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 6px;
  font-size: .78rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #ffd08a; }
.ui-hh1__welcome::before, .ui-hh1__welcome::after { content: ""; flex: 0 0 38px; height: 1px; background: rgba(255, 208, 138, .7); }
@media (max-width: 575.98px) { .ui-hh1__welcome { font-size: .68rem; letter-spacing: .14em; gap: 8px; } .ui-hh1__welcome::before, .ui-hh1__welcome::after { flex-basis: 18px; } }
@media (max-width: 575.98px) { .ui-hh1__welcome { font-size: .6rem; letter-spacing: .08em; white-space: nowrap; } .ui-hh1__welcome::before, .ui-hh1__welcome::after { flex-basis: 12px; } }
/* «Добро пожаловать…» — крупнее, белым, с тенью: на пёстром фото мелкий золотистый текст читался плохо */
.ui-hh1__welcome { font-size: .95rem; font-weight: 600; letter-spacing: .1em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 12px rgba(0, 0, 0, .45); }
.ui-hh1__welcome::before, .ui-hh1__welcome::after { height: 2px; background: #ffb347; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
@media (max-width: 575.98px) { .ui-hh1__welcome { font-size: .74rem; letter-spacing: .05em; } }
/* учебный год — строкой над четвертью в плашке */
.ui-hh--1 .ui-hh1__year { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-align: center; color: #ffd08a; }

/* ---------- Модальные окна «Образования» (описания программ, трудоустройство): заголовки и текст как на страницах, таблица — ui-table ---------- */
.modal .modal-body { color: #2d3748; }
.modal .modal-body h1, .modal .modal-body h2, .modal .modal-body h3 { color: var(--ui-primary-dark); font-family: var(--ui-font-heading); text-transform: uppercase; }
.modal .modal-body h1 { padding-bottom: 14px; border-bottom: 2px solid var(--ui-line); }
.modal .modal-body h2, .modal .modal-body h3 { color: var(--ui-primary); }
.modal .modal-body p, .modal .modal-body li { color: #2d3748; }
.ui-table--modal > * > tr > td { text-align: center; vertical-align: middle; }
.ui-table--modal > * > tr > td:first-child { text-align: left; color: #1a365d; font-weight: 500; background: #f3f8fe; }
.ui-table--modal > * > tr > td[rowspan] { vertical-align: middle; }
.ui-table--modal > tbody > tr:nth-child(-n+2) > td { background: #e8f1fb; color: #1a365d; font-weight: 500; }
@media (max-width: 575.98px) {
  .ui-table--modal { font-size: .82rem; }
  .ui-table--modal > * > tr > td, .ui-table--modal > * > tr > td:first-child { padding: 9px 8px; }
  .modal .modal-content { padding-left: 14px; padding-right: 14px; }
}

/* ---------- Карточка специалиста: фото целиком слева, текст справа (на телефоне — фото сверху) ---------- */
.ui-person { display: flex; align-items: flex-start; gap: 24px; margin: 6px 0 18px; }
.ui-person__photo { flex: 0 0 180px; display: block; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(26, 54, 93, .12); cursor: zoom-in; }
.ui-person__photo img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ui-person__body { flex: 1; min-width: 0; }
.ui-person__body > .ui-subtitle:first-child { margin-top: 0; }
@media (max-width: 575.98px) { .ui-person { flex-direction: column; align-items: center; } .ui-person__photo { flex-basis: auto; width: 200px; } }
/* поля внутри узкой карточки (контакты специалиста) — подпись над значением, без лишней рамки */
.ui-card .ui-fields { margin: 10px 0 0; box-shadow: none; background: transparent; }
.ui-card .ui-field { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
.ui-card .ui-field__label { font-size: .85rem; color: var(--ui-muted, #6b7280); }
.ui-card .ui-field a { overflow-wrap: anywhere; }