/* ==== Замена шрифтов Karla (текст) и Public Sans (заголовки) на
   Nunito Sans (2026-09-21, доработано в тот же день) ====
   Причина: ни Karla, ни Public Sans не поддерживают кириллицу вообще -
   подтверждено по официальным метаданным Google Fonts (github.com/
   google/fonts/.../{karla,publicsans}/METADATA.pb: у обоих subsets
   только "latin"/"latin-ext"/"menu"(+"vietnamese" у Public Sans),
   кириллицы нет ни у одного). Сначала считали (ошибочно, см. историю в
   чате), что проблема только в Karla/тексте - Public Sans "тоже
   проверяли" и решили что с ним всё ок. Проверка была недостаточно
   внимательной (не читали сам список subsets построчно) - на самом деле
   баг был и в заголовках тоже, просто не бросался в глаза, пока
   пользователь не увидела его на большом заголовке слайдера (засечки
   вместо Nunito/Public Sans на "АВТОМАТИЗАЦІЯ", "БІБЛІОТЕК" и т.п.).
   Заголовки на сайте (h1-h6, включая заголовок слайдера .hero-title)
   везде используют одну общую переменную --heading-font-family -
   значит баг был не только в слайдере, а во ВСЕХ заголовках с
   украинским текстом на сайте.

   Решение: объединить текст и заголовки на одном и том же Nunito Sans
   (тоже подтверждено по METADATA.pb: subsets включают cyrillic и
   cyrillic-ext), вместо подбора отдельного похожего на Public Sans
   шрифта - пользователь выбрала более простой и единообразный вариант.
   Заголовки на сайте используют начертание 500 (--heading-font-weight
   в /media/t4/css/13.css) - оно уже входит в список ниже, отдельно
   догружать не нужно.

   @import ОБЯЗАН стоять первым правилом во всём файле (кроме @charset) -
   это требование самого CSS, поэтому он здесь, в самом начале, а не в
   блоке "Свой шрифт на весь сайт" в конце файла (там теперь просто
   переопределение переменных, использующих то, что подключено тут). */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   ОБРІЙ MIDNIGHT v2 — тёмная тема (2026-10-01)
   ============================================================
   Решение по итогам обсуждения и сравнения с ec.udu.edu.ua/loginguest
   (полный разбор вариантов — в Artifact, обсуждался в диалоге, сюда
   перенесён только финальный выбранный вариант). Стоковая тёмная тема
   T4 (templates/ja_purity_iv/css/template.css, body.dark-active{...}) —
   буквально --body-bg-color:#000 + белый текст на 80% прозрачности, без
   всякой привязки к бренду — плоская инверсия "как у всех".

   Midnight v2: фон — не чистый чёрный, а почти чёрный с едва уловимым
   синим оттенком (бренд-синий rgb(24,112,181), тот же, что у подвала/
   иконок Контактів); поверхности (шапка — см. фикс ниже, карточки,
   выпадающее меню) на ступень светлее страницы — "слоистость" вместо
   одного плоского цвета; акценты — бренд-синий (ссылки/ховеры) + один
   тёплый янтарный акцент для второстепенных меток (дата у новости, см.
   секцию НОВИНИ ниже) — второй акцент специально подсмотрен у референса
   (там тёплый оранжевый/жёлтый контрастирует с холодной базой) и спасает
   от монотонности лучше, чем просто "синее на чёрном".

   Правим те же CSS-переменные, которые T4 сам генерирует под
   body.dark-active — файл с ними подключается строго раньше custom.css,
   поэтому переопределение здесь побеждает по каскаду без !important
   (тот же механизм, что уже используется для шрифтов в конце файла).
   За счёт того, что почти все элементы сайта (заголовки/текст/рамки/
   ссылки/выпадающие меню/пагинация и т.д.) читают цвет именно из этих
   переменных, а не хардкодят его — переопределение здесь автоматически
   применяется практически ко всем страницам и материалам сайта, без
   необходимости переписывать каждый компонент отдельно. */
body.dark-active {
  /* 2026-10-01, доработка после двух проверок на фронте: сначала была
     #06090C (технически "не чистый чёрный", но на глаз неотличима от
     #000), затем пользователь сама предложила #13242f — заметно светлее,
     но ещё раз поправила на #101b28 (тот же синий диапазон, H≈213° —
     рядом с фирменным синим rgb(24,112,181), H≈206°, просто темнее).
     Берём именно это, финальное значение. */
  --body-bg-color: #101b28;
  --t4-body-bg-rgb: 16, 27, 40;
  --body-text-color: rgba(231, 238, 244, 0.85);
  --headings-color: #F2F6F9;
  --masthead-bg-color: rgba(58, 159, 230, 0.09);
  --t4-border-color: rgba(167, 199, 224, 0.14);
  --t4-white: #1a2c42;
  --body-link-color: #35C2D6;
  --body-link-hover-color: #7FE0EE;

  /* Свои (не T4) переменные для "поверхностей" — карточки/шапка/подвал/
     выпадающее меню должны быть на ступень светлее страницы, а не того
     же цвета с одной только рамкой (первая версия фикса именно так и
     выглядела — рамка почти не видна, фон карточки = фон страницы,
     отсюда и жалоба "ничем не выделяются"). Пересчитаны от актуальной
     --body-bg-color (тот же H≈213°, просто светлее): surface — следующая
     ступень вверх, surface-hover — ещё одна ступень, под hover/активное
     состояние. Единая пара переменных используется теперь везде - и у
     шапки, и у подвала, и у карточек - поэтому они визуально одной
     "породы", а не разных цветов (см. правки шапки/подвала ниже). */
  --obriy-surface: #1a2c42;
  --obriy-surface-hover: #213854;

  /* Пункты меню в шапке (ГОЛОВНА/ПОСЛУГИ/ПРО НАС/НОВИНИ) — ховер/активный
     пункт сейчас наследует стоковый светлый Bootstrap-синий
     (--mainnav-link-hover-color не переопределён под тёмную тему нигде в
     template.css, только --mainnav-link-color:#fff). Переводим на тот же
     бирюзовый акцент, что и у обычных ссылок выше — единообразно. */
  --mainnav-link-hover-color: #35C2D6;
  --mainnav-link-active-color: #35C2D6;
}

/* Подпункты выпадающего меню (Послуги -> Хостинг/Встановлення/Підтримка,
   Про нас -> Контакти) — стоковый цвет текста (--t4-dropdown-link-color:
   #212529, тёмно-серый, рассчитан на СВЕТЛУЮ подложку) нигде не
   переопределён под тёмную тему во всём template.css — на тёмном фоне
   текст был практически нечитаем ещё до этой сессии. Это не наша более
   ранняя правка, баг существовал в стоке — чиним заодно, раз теперь
   приводим тёмную тему в порядок по всему сайту. Фон выпадающей панели
   (--t4-white) теперь берёт новую поверхность автоматически — здесь
   ничего дополнительно задавать не нужно. */
body.dark-active .t4-megamenu .dropdown-menu {
  --t4-dropdown-link-color: #E7EEF4;
  --t4-dropdown-link-hover-color: #ffffff;
  --t4-dropdown-link-hover-bg: rgba(53, 194, 214, 0.12);
}

/* Кнопки-стрелки переключения слайдов для SlideshowNew (JA ACM Hero: style-1),
   как на старом сайте — поверх картинки, по краям, по вертикальному центру.

   Сами кнопки-стрелки (nav:true) включены отдельно, в оверрайде
   templates/ja_purity_iv/local/acm/hero/tmpl/style-1.php — без этого файла
   их не будет вообще, эта CSS только переставляет их с "под картинкой"
   (стандартное место по шаблонному CSS) на "поверх картинки, по краям". */

.acm-hero.style-1 div.owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  pointer-events: none;
  z-index: 5;
}

.acm-hero.style-1 div.owl-nav button {
  pointer-events: auto;
}

/* Точки-пагинация слайдера — были синими (переменная темы --t4-primary),
   сделаны белыми/светлыми: неактивные полупрозрачные, активная сплошная
   белая. Не трогает точки других каруселей на сайте (выборка только
   внутри .acm-hero.style-1). */

.acm-hero.style-1 div.owl-carousel .owl-dots span {
  background-color: #fff;
}

.acm-hero.style-1 div.owl-carousel .owl-dots .owl-dot.active span {
  background-color: #fff;
}

/* ==== Слайдер (Hero) на мобиле — меньше высота + меньше заголовок
   (2026-09-22). Стоковый T4 уже уменьшает .hero-content с 45rem до 30rem
   на <=991.98px (правило в template.css) - для реальных телефонов
   (проверено на CSS-ширинах 393-440px) этого мало, снижаем ещё специально
   под мобильный порог. Заголовок .hero-title - обычный <h1> без своего
   класса в CSS, размер берётся из общей Bootstrap-формулы
   calc(1.375rem + 1.5vw) (~28px на этих ширинах) - фиксируем чуть меньшим
   значением, только на мобильном пороге. ==== */
@media only screen and (max-width: 767.98px) {
  .acm-hero.style-1 .has-bg .hero-content {
    min-height: 22rem;
  }
  .acm-hero.style-1 .hero-title {
    font-size: 1.5rem;
  }
  /* Текст и стрелки (div.owl-nav) центрируются по вертикали независимо
     друг от друга в одном блоке - на длинных заголовках (3 строки)
     средняя строка попадает на высоту стрелок. У текста нет бокового
     отступа, поэтому широкие строки заходят под стрелки (36px кнопка +
     15px отступ от края, см. template.css). Отступ ниже освобождает им
     место при любом количестве строк (баг всплыл на слайде "КОМПЛЕКСНА
     АВТОМАТИЗАЦІЯ БІБЛІОТЕК ТА МУЗЕЇВ", 2026-09-22). */
  .acm-hero.style-1 .hero-content-inner {
    padding-left: 55px;
    padding-right: 55px;
  }
}

/* ==== Карточки Хостинг/Встановлення/Підтримка (главная страница) ====
   Пороги адаптива (768/1200px) пересчитаны под реальные точки излома
   T4-сетки (не унаследованы от T3) - подробности см. references.md,
   раздел "Стилизация блоков Хостинг/Встановлення/Підтримка". */

div[id="t4-spotlight-1-(services)"] {
  margin-top: 45px;
}

/* Убираем встроенный gutter Bootstrap-колонки (--bs-gutter-x) - весь
   промежуток между карточками теперь управляется ТОЛЬКО margin у
   .custom ниже. Без этого "шире карточки" и "больше промежуток"
   конкурировали за одно и то же ограниченное место (2026-09-21). */
div[id="t4-spotlight-1-(services)"] .section-1,
div[id="t4-spotlight-1-(services)"] .section-2,
div[id="t4-spotlight-1-(services)"] .section-3 {
  padding-left: 0;
  padding-right: 0;
}

/* Расширяем контейнер этого ряда на десктопе шире стандартного
   .container (у него по умолчанию потолок 1140px c 1200px и выше,
   до 1320px только с 1400px) - чтобы было куда расти одновременно и
   карточкам, и промежуткам. Ниже 1200px контейнер не трогаем -
   стандартное адаптивное поведение Bootstrap сохраняется как есть
   (2026-09-21). */
@media only screen and (min-width: 1200px) {
  div[id="t4-spotlight-1-(services)"] .t4-section-inner.container {
    max-width: 1320px;
  }
}

/* ==== До 768px: колонки ещё не зафиксированы в 33% (Bootstrap col-sm/xs),
   карточки стоят друг под другом в столбик - разная высота тут не режет
   глаз так, как в ряду, поэтому min-height остаётся просто "полом", не
   меняем. ==== */
@media only screen and (max-width: 767.98px) {
.section-1 .custom{
  display: block;
  border-radius: 7px;
  border: 1px #cccccc solid;
  position: relative;
  margin: 10px 15px;
  min-height: 200px;
  padding: 10px 10px;
}
.imghosting{ margin-top: 10px; text-align: center; }
.hostimg{ width: 70px; }
.itemhosting{ margin-top: 20px; text-align: center; }
.description-hosting{ font-size: 16px; text-align: center; margin-top: 8px; }
.text-hosting{ font-size: 15px; }

.section-2 .custom{
  display: block;
  border-radius: 7px;
  border: 1px #cccccc solid;
  position: relative;
  margin: 10px 15px;
  min-height: 200px;
  padding: 10px 10px;
}
.imginstall{ margin-top: 10px; text-align: center; }
.instimg{ width: 70px; }
.iteminstall{ margin-top: 20px; text-align: center; }
.description-install{ font-size: 16px; text-align: center; margin-top: 8px; }
.text-install{ font-size: 15px; }

.section-3 .custom{
  display: block;
  border-radius: 7px;
  border: 1px #cccccc solid;
  position: relative;
  margin: 10px 15px;
  min-height: 200px;
  padding: 10px 10px;
}
.imgsupport{ margin-top: 10px; text-align: center; }
.supimg{ width: 70px; }
.itemsupport{ margin-top: 20px; text-align: center; }
.description-support{ font-size: 16px; text-align: center; margin-top: 8px; }
.text-support{ font-size: 15px; }
}

/* ==== 768px - 1199px: col-md-4 уже включён (33% каждая колонка), три
   карточки стоят в один ряд - отсюда и важна одинаковая высота.
   height:100% растягивает .custom на всю высоту уже выровненной
   Bootstrap-колонки (flex stretch по умолчанию), min-height остаётся
   как подстраховка-пол на случай короткого текста везде. margin
   увеличен до 14px (промежуток шире, gutter колонки убран выше) -
   запрошено 2026-09-21. ==== */
@media only screen and (min-width: 768px) and (max-width: 1199.98px) {
.section-1 .custom{
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  border: 2px #cccccc solid;
  position: relative;
  margin-right: 14px;
  margin-left: 14px;
  height: 100%;
  min-height: 280px;
  padding: 10px 10px;
}
.section-1 .custom:hover{
  cursor: pointer;
  border-color: rgba(24, 112, 181, 1);
  transition: border-color 0.3s ease-in, color 0.3s;
}
.imghosting{ margin-top: 10px; text-align: center; }
.hostimg{ width: 90px; }
.itemhosting{ font-size: 18px; margin-top: 20px; text-align: center; }
.description-hosting{ font-size: 16px; text-align: center; margin-top: 10px; }
.text-hosting{ font-size: 16px; }

.section-2 .custom{
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  border: 2px #cccccc solid;
  position: relative;
  margin-right: 14px;
  margin-left: 14px;
  height: 100%;
  min-height: 280px;
  padding: 10px 10px;
}
.section-2 .custom:hover{
  cursor: pointer;
  border-color: rgba(24, 112, 181, 1);
  transition: border-color 0.3s ease-in, color 0.3s;
}
.imginstall{ margin-top: 10px; text-align: center; }
.instimg{ width: 90px; }
.iteminstall{ font-size: 18px; margin-top: 20px; text-align: center; }
.description-install{ font-size: 16px; text-align: center; margin-top: 10px; }
.text-install{ font-size: 16px; }

.section-3 .custom{
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  border: 2px #cccccc solid;
  position: relative;
  margin-right: 14px;
  margin-left: 14px;
  height: 100%;
  min-height: 280px;
  padding: 10px 10px;
}
.section-3 .custom:hover{
  cursor: pointer;
  border-color: rgba(24, 112, 181, 1);
  transition: border-color 0.3s ease-in, color 0.3s;
}
.imgsupport{ margin-top: 10px; text-align: center; }
.supimg{ width: 90px; }
.itemsupport{ font-size: 18px; margin-top: 20px; text-align: center; }
.description-support{ font-size: 16px; text-align: center; margin-top: 10px; }
.text-support{ font-size: 16px; }
}

/* ==== 1200px и шире. Та же логика: height:100% выравнивает высоту по
   самой длинной карточке (без обрезки текста - карточки НЕ фиксированной
   высоты, просто все растягиваются до высоты самой высокой), margin
   увеличен до 22px (шире промежуток), контейнер ряда расширен до 1320px
   (см. блок выше) - вместе это даёт и более широкие карточки, и более
   заметный зазор между ними одновременно (запрошено 2026-09-21). ==== */
@media only screen and (min-width: 1200px) {
.section-1 .custom{
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  border: 2px #cccccc solid;
  position: relative;
  margin-right: 22px;
  margin-left: 22px;
  height: 100%;
  min-height: 320px;
  padding: 15px 15px;
}
.section-1 .custom:hover{
  cursor: pointer;
  border-color: rgba(24, 112, 181, 1);
  transition: border-color 0.3s ease-in, color 0.3s;
}
.imghosting{ margin-top: 10px; text-align: center; }
.hostimg{ width: 130px; }
.itemhosting{ font-size: 25px; margin-top: 25px; text-align: center; }
.description-hosting{ font-size: 20px; text-align: center; margin-top: 20px; }
.text-hosting{ font-size: 22px; }

.section-2 .custom{
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  border: 2px #cccccc solid;
  position: relative;
  margin-right: 22px;
  margin-left: 22px;
  height: 100%;
  min-height: 320px;
  padding: 15px 15px;
}
.section-2 .custom:hover{
  cursor: pointer;
  border-color: rgba(24, 112, 181, 1);
  transition: border-color 0.3s ease-in, color 0.3s;
}
.imginstall{ margin-top: 10px; text-align: center; }
.instimg{ width: 130px; }
.iteminstall{ font-size: 25px; margin-top: 25px; text-align: center; }
.description-install{ font-size: 20px; text-align: center; margin-top: 20px; }
.text-install{ font-size: 22px; }

.section-3 .custom{
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  border: 2px #cccccc solid;
  position: relative;
  margin-right: 22px;
  margin-left: 22px;
  height: 100%;
  min-height: 320px;
  padding: 15px 15px;
}
.section-3 .custom:hover{
  cursor: pointer;
  border-color: rgba(24, 112, 181, 1);
  transition: border-color 0.3s ease-in, color 0.3s;
}
.imgsupport{ margin-top: 10px; text-align: center; }
.supimg{ width: 130px; }
.itemsupport{ font-size: 25px; margin-top: 25px; text-align: center; }
.description-support{ font-size: 20px; text-align: center; margin-top: 20px; }
.text-support{ font-size: 22px; }
}

/* ==== Тёмная тема: инлайн-цвет #353535 в тексте блоков не виден на
   чёрном фоне. !important нужен, чтобы перебить инлайн-стиль в HTML. ==== */
body.dark-active .section-1 .custom a,
body.dark-active .section-1 .custom a span,
body.dark-active .section-2 .custom a,
body.dark-active .section-2 .custom a span,
body.dark-active .section-3 .custom a,
body.dark-active .section-3 .custom a span{
  color: #e6e6e6 !important;
}

/* ==== Obriy Midnight v2 — карточка-поверхность + hairline-рамка
   (2026-10-01, доработано после проверки на фронте) ====
   Первая версия фикса меняла только border-color, фон карточки не
   задавался вообще (наследовался от страницы) — на новой тёмной базе
   карточка оказалась визуально неотличима от фона, рамка слишком тонкая,
   чтобы спасти ситуацию в одиночку. Добавлен собственный фон
   (--obriy-surface — на ступень светлее страницы) + полноценный hover
   (подъём + свечение + более светлый фон), а не только смена цвета
   рамки, как было. transition вынесен на ОСНОВНОЕ состояние (не на
   :hover, как раньше было с border-color) — так анимируются все
   свойства сразу, плавно в обе стороны. */
body.dark-active .section-1 .custom,
body.dark-active .section-2 .custom,
body.dark-active .section-3 .custom {
  background-color: var(--obriy-surface);
  border-color: rgba(255, 255, 255, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    background-color 0.25s ease, border-color 0.3s ease-in;
}
body.dark-active .section-1 .custom:hover,
body.dark-active .section-2 .custom:hover,
body.dark-active .section-3 .custom:hover {
  background-color: var(--obriy-surface-hover);
  box-shadow: 0 12px 30px -10px rgba(24, 112, 181, 0.55);
  transform: translateY(-4px);
}

/* Иконки услуг — мягкий синий ореол СНАРУЖИ картинки (box-shadow), сам
   файл не трогается ни на пиксель. Проверено построчным разбором
   PNG-заголовка: hosting.png/install2.png/support.png — это цельный
   файл (синий квадрат+белый значок запечены в один PNG, colorType 6/
   RGBA, но непрозрачны почти целиком), а не CSS-фон под прозрачной
   картинкой — поэтому "залить фон иконки" было бы физически не видно,
   а border-radius здесь нужен только затем, чтобы box-shadow повторял
   скруглённую форму картинки снаружи (скругление самой картинки — через
   альфа-канал внутри PNG, не CSS). Размер иконки разный на разных
   брейкпоинтах (70/90/130px) - % масштабируется сам, фиксированный px
   пришлось бы дублировать на каждый брейкпоинт отдельно. */
body.dark-active .hostimg,
body.dark-active .instimg,
body.dark-active .supimg {
  border-radius: 18%;
  box-shadow: 0 0 24px 3px rgba(24, 112, 181, 0.55);
  transition: box-shadow 0.25s ease;
}
/* Чуть ярче при наведении на саму карточку (не только на иконку) —
   усиливает ощущение "карточка отзывается", а не просто смена рамки */
body.dark-active .section-1 .custom:hover .hostimg,
body.dark-active .section-2 .custom:hover .instimg,
body.dark-active .section-3 .custom:hover .supimg {
  box-shadow: 0 0 30px 4px rgba(24, 112, 181, 0.75);
}

/* ==== Заготовки под будущую стилизацию (пока без правил, 2026-09-21) ====
   Пустые блоки под селекторы, которые запросила пользователь: шапка,
   переключатель языка, переключатель темы, материалы (статьи), картинка
   материала, свой шрифт на весь сайт. Все селекторы сверены с реальным
   HTML/CSS живого сайта (fetch главной + страницы материала "Хостинг"),
   не придуманы теоретически - подробности см. references.md, раздел
   "Заготовки под стилизацию других элементов сайта". Просто впиши нужные
   CSS-свойства внутрь фигурных скобок нужного блока. */

/* --- Шапка сайта --- */
header.header-block.header-block-2 {
box-shadow: 0 7px 7px rgba(0, 0, 0, 0.4);
}

/* ==== Тёмная тема: та же тень невидима на чёрном фоне (2026-10-01,
   заменено на фирменное синее свечение в рамках Obriy Midnight v2) ====
   Правило выше (box-shadow чёрного цвета) даёт на светлой теме мягкую
   видимую линию-разделитель под шапкой - на тёмной теме и шапка, и фон
   страницы под ней одинаково чёрные, тень того же цвета сливается
   полностью, шапка визуально никак не выделена. Вместо нейтрального
   светлого варианта (была первая версия фикса) - мягкое синее свечение
   бренд-цветом, в тон общей концепции Midnight v2 (слоистые поверхности +
   синее сияние у "привилегированных" блоков - шапка/слайдер). Не в
   media-запросе - действует на всех брейкпоинтах, как и парное светлое
   правило выше (селектор с body.dark-active весомее мобильного блока
   ниже по специфичности, побеждает независимо от порядка подключения). */
body.dark-active header.header-block.header-block-2 {
  box-shadow: 0 0 48px -4px rgba(24, 112, 181, 0.65);
}

/* ==== Логотип и флаги языков в шапке — тот же принцип "ореол снаружи,
   файл не трогаем", что и у иконок услуг выше, но с поправкой на разницу
   форматов (2026-10-01, по уточнению пользователя):
   - Логотип (images/obrijy.png) — проверен декодированием PNG построчно:
     у него НАСТОЯЩАЯ альфа-прозрачность (все 4 угла и большая часть фона
     - alpha:0, видны только буквы/дуга). Поэтому box-shadow (он обводит
     прямоугольную рамку картинки, включая прозрачные поля) дал бы тусклое
     прямоугольное пятно вместо аккуратного свечения по контуру букв -
     вместо этого filter:drop-shadow(), он учитывает реальный альфа-канал
     и обводит именно видимые пиксели, как и положено для логотипа.
   - Флаги (media/mod_languages/images/uk_ua.gif, en_gb.gif) — проверены
     построчным разбором GIF-заголовка: оба формата GIF87a, в котором
     прозрачность в принципе невозможна (блок Graphic Control Extension,
     отвечающий за неё, появился только в GIF89a и в этих файлах
     отсутствует) - то есть флаги такие же сплошные непрозрачные
     картинки, как иконки услуг. Для них - тот же box-shadow снаружи
     прямоугольника, без изменения формы (флаг и должен остаться
     прямоугольным, в отличие от скруглённых иконок услуг). */
body.dark-active header.header-block.header-block-2 .navbar-brand.logo-image .logo-img {
  filter: drop-shadow(0 0 12px rgba(24, 112, 181, 0.65));
  transition: filter 0.25s ease;
}
body.dark-active header.header-block.header-block-2 .navbar-brand.logo-image:hover .logo-img {
  filter: drop-shadow(0 0 18px rgba(24, 112, 181, 0.9));
}
body.dark-active header.header-block.header-block-2 div.mod-languages img {
  box-shadow: 0 0 12px 1px rgba(24, 112, 181, 0.6);
  transition: box-shadow 0.25s ease;
}
body.dark-active header.header-block.header-block-2 div.mod-languages li:hover img {
  box-shadow: 0 0 16px 2px rgba(24, 112, 181, 0.85);
}

/* ==== Активный язык — убираем стоковый светлый фон, не рассчитанный на
   тёмную тему (2026-10-01) ====
   Стоковое правило модуля (media/mod_languages/css/template.min.css,
   отдельный файл, НЕ template.css шаблона): "div.mod-languages ul
   li.lang-active{background-color:#f0f0f0}" - светло-серая плашка под
   активным флагом, которая на светлой теме сливается с фоном, а на
   тёмной превращается в чужеродный белый прямоугольник (найдено по
   скриншоту пользователя). Не глобальная правка - только на тёмной теме,
   на светлой стоковое поведение не трогаем. Вместо плашки - постоянное
   (не только по hover) свечение вокруг самого флага, тем же приёмом, что
   и остальные ореолы на странице - значок активного языка и так заметно
   ярче неактивного, без постороннего фона. */
body.dark-active header.header-block.header-block-2 div.mod-languages ul li.lang-active {
  background-color: transparent;
}
body.dark-active header.header-block.header-block-2 div.mod-languages li.lang-active img {
  box-shadow: 0 0 16px 2px rgba(24, 112, 181, 0.85);
}

/* ==== Фон прилипшей шапки (2026-09-22) ====
   Включена "липкая" шапка (sticky:"top" в JSON-пресете layout, см.
   references.md) - но у неё по умолчанию вообще нет сплошного фона.
   Стоковое правило .not-at-top #t4-header.t4-sticky{background:#fff}
   в template.css добавляет фон, только когда счётчик скролла (JS-датчик
   в base.js) пройдёт 100px - первые ~100px шапка уже "прилипла" сверху,
   но ещё без фона, слайдер просвечивает сквозь неё. Даём фон сразу,
   без привязки к этому порогу. */
/* Сама "липкость" (2026-09-22, доп. правка) - на десктопе position:sticky
   сработал, на мобиле (Android Chrome/Firefox) - нет. Подозреваемая
   причина - сгенерированное T4 правило #t4-header идёт ДВУМЯ строками:
   "position: -webkit-sticky !important;" (устаревшее значение, только
   для старого Safari) ПЕРЕД "position: sticky;" (без !important). Из-за
   !important первая строка перебивает вторую - если браузер не признаёт
   -webkit-sticky валидным значением, могло отвалиться всё правило.
   Перебиваем понадёжнее - только современное значение, с !important,
   чтобы точно победить независимо от порядка. Файл, где генерируется
   исходное правило (section.tpl.css), сам не редактируется - он
   пересобирается T4 автоматически при каждом сохранении стиля. */
/* ==== "Липкая" шапка (sticky:"top" в JSON-пресете layout, см.
   references.md). Стоковое правило .t4-sticky{top:auto!important} на
   ширинах <=575.98px (templates/ja_purity_iv/css/template.css) гасило
   sticky - без явного top у sticky нет порога "прилипания". Правило
   ниже побеждает его по специфичности селектора (#id+.class против
   одного .class у обоих объявлений с !important) - работает надёжно
   независимо от того, останется ли сток нетронутым или будущее
   обновление JA Purity IV перезапишет template.css (2026-09-22,
   подтверждено рабочим на десктопе и мобиле). */
#t4-header.t4-sticky {
  position: sticky !important;
  top: 0 !important;
}

#t4-header.t4-sticky {
  background-color: #fff;
}
body.dark-active #t4-header.t4-sticky {
  /* 2026-10-01: было var(--body-bg-color) — тот же цвет, что у страницы
     целиком, из-за чего шапку выделяла только тень (box-shadow), а не
     сама заливка. По концепции Midnight v2 шапка — "поверхность", на
     ступень светлее страницы, как и карточки/выпадающее меню. */
  background-color: var(--obriy-surface);
}

/* --- Переключатель языка (флажки uk/en в шапке) --- */
div.mod-languages {

}

/* --- Переключатель светлая/тёмная тема --- */
div.ja-dark-mode {

}

/* --- Материалы (статьи). Внимание: тега <article> в разметке сайта нет,
   реальный контейнер материала - вот такой. --- */
.com-content-article.item-page {

}

/* --- Картинка материала --- */
div.full-image {

}

/* ==== Мобильный адаптив шапки (2026-09-22) ====
   До этой правки логотип не был ограничен по CSS вообще (рендерился в
   исходном размере картинки 130x78px, у HTML-элемента нет класса
   .logo-control, под который в template.css уже есть готовое ограничение
   max-height:40px) и диктовал высоту всей шапки - остальные элементы
   (флаги/переключатель темы/бургер) выглядели мелкими только из-за этого
   контраста. Заодно из-за нехватки ширины языковой переключатель на узких
   экранах (~390-400px CSS) переносил второй флаг на отдельную строку
   (сравнение скриншотов iPhone 16 / iPhone 16 Pro Max, 2026-09-22) -
   помимо освобождения места (уменьшенный логотип), добавлен явный
   white-space:nowrap как гарантия против переноса независимо от точной
   ширины экрана.
   Переключатель темы (.ja-dark-mode) увеличен пропорционально (иконка,
   сам "тумблер"-трек и бегунок) - формула отступа бегунка в активном
   состоянии (свойство left) пересчитана под новую ширину трека по той же
   логике, что и в оригинале шаблона (track - thumb - 3px отступ), чтобы
   бегунок не вылезал за трек. */
@media only screen and (max-width: 767.98px) {

  header.header-block.header-block-2{
    box-shadow: 0 7px 7px rgba(0, 0, 0, 0.4);
    height: 50pt;
    padding-top: 3pt;
}

  header.header-block.header-block-2 .navbar-brand.logo-image .logo-img {
    max-height: 45px;
    width: auto;
  }

  header.header-block.header-block-2 div.mod-languages img {
    width: 25px;
    height: auto;
  }
  header.header-block.header-block-2 div.mod-languages ul.lang-inline {
    white-space: nowrap;
  }

  header.header-block.header-block-2 .ja-dark-mode svg {
    width: 16px;
    height: 16px;
  }
  header.header-block.header-block-2 .ja-dark-mode .dark-mode-status {
    width: 40px;
    height: 20px;
  }
  header.header-block.header-block-2 .ja-dark-mode .dark-mode-status span {
    width: 14px;
    height: 14px;
  }
  body.dark-active header.header-block.header-block-2 .dark-mode-status span {
    left: 21px;
  }

  header.header-block.header-block-2 .navbar-toggler,
  header.header-block.header-block-2 .navbar-toggler .fa {
    font-size: 24px;
  }

  /* Отступы между элементами правого блока шапки (флаги/тема/бургер) -
     стоковое правило .t4-header-r > * (template.css) задаёт только
     margin-left:1rem, без media-запроса (действует на всех ширинах).
     Правим отступы именно здесь, в мобильном блоке, а не переопределяем
     .t4-header-r > * глобально - чтобы не менять расстояния на
     десктопе/планшете, которые никто не просил трогать. */
  header.header-block.header-block-2 .t4-header-r > * {
    margin-left: 1rem;
    margin-right: 0.5rem;
  }
}

/* Отступы вокруг каждого флага (li) в переключателе языка - стоковое
   правило div.mod-languages li (media/mod_languages/css/template.css,
   отдельный файл модуля, НЕ template.css шаблона) задаёт margin:0 .5rem
   без media-запроса, на всех ширинах. Нужны только на планшете/мобиле
   (подтверждено 2026-09-22) - десктоп не трогаем, поэтому в отдельном
   @media, а не в общем мобильном блоке выше (у него порог 767.98px, тут
   нужен более широкий - и планшет тоже, по принятому в проекте делению
   768-1199.98px = планшет). */
@media only screen and (max-width: 1199.98px) {
  header.header-block.header-block-2 div.mod-languages li {
    margin: 0 0.2rem;
  }
}

/* --- Меню в шапке (megamenu). Селекторы сверены с реальным HTML,
   присланным пользователем из devtools (2026-09-21), не придуманы. --- */

/* Весь блок меню целиком */
div#t4-megamenu-mainmenu {

}

/* ==== Мобильное меню - анимация высоты отключена (2026-09-22) ====
   ДЕТАЛЬНО ПРО САМУ ПРОБЛЕМУ И РАССЛЕДОВАНИЕ - см. references.md,
   раздел "Мобильное меню - «залипание» при закрытии". Коротко: анимация
   высоты (.collapsing{transition:height .35s ease}) у мобильной панели
   меню визуально "зависала" на доли секунды перед полным закрытием -
   не нашлось единственной "сломанной строчки" - похоже на сумму обычных
   некритичных издержек браузера (height не ускоряется видеокартой).
   Высота теперь меняется мгновенно - анимировать нечему, риска нет. */
@media only screen and (max-width: 991.98px) {
  .nav-breakpoint-lg .t4-megamenu.collapsing {
    transition: none;
  }

  /* Симметричная анимация раскрытия/закрытия - прозрачность+смещение
     вместо анимации height (2026-09-22, по запросу пользователя после
     отключения height-анимации выше). opacity/transform ускоряются
     видеокартой - не тот же риск, что был у height. Раскрытие срабатывает
     само по классу .show (Bootstrap добавляет его в конце своего show()) -
     высота к этому моменту уже мгновенно полная, есть на чём проявляться.
     Закрытие сложнее устроено - см. подробный комментарий в
     local/js/template.js, почему понадобился JS (высота обнуляется
     мгновенно в тот же момент, что Bootstrap убирает .show, - без JS
     угасать было бы буквально не на чем, высота уже 0). Свой класс
     .t4-menu-closing (добавляет JS) должен стоять ПОСЛЕ .show по тексту
     файла - при закрытии оба класса есть одновременно, нужна победа по
     порядку, не только по специфичности (она у них одинаковая). */
  .nav-breakpoint-lg .t4-megamenu {
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: translateY(-8px);
  }
  .nav-breakpoint-lg .t4-megamenu.show {
    opacity: 1;
    transform: translateY(0);
  }
  .nav-breakpoint-lg .t4-megamenu.t4-menu-closing {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Один пункт меню верхнего уровня (и с дропдауном, и без) */
.t4-megamenu .nav-item {

}

/* Текст/ссылка пункта меню (и "Головна", и заголовки с дропдауном типа
   "Послуги"/"Про нас" - оба варианта используют класс .nav-link) */
.t4-megamenu .nav-item .nav-link {

}

/* Текущий активный пункт меню (сейчас - "Головна" на главной странице) */
.t4-megamenu .nav-item.current.active .nav-link {

}

/* Сама выпадающая панель подменю ("Послуги" -> Хостинг/Встановлення/
   Підтримка, "Про нас" -> Контакти) */
.t4-megamenu .dropdown-menu {

}

/* Ссылка внутри выпадающего подменю */
.t4-megamenu .dropdown-item {

}

/* --- Свой шрифт на весь сайт (текст И заголовки). Само подключение
   (@import) - в самом верху файла (CSS требует, чтобы @import шёл
   первым правилом во всём файле). Здесь - только переопределение
   переменных, от которых реально зависит рендер: T4 генерирует на
   каждой странице :root с --body-font-family (было Karla) и
   --heading-font-family (было Public Sans) в файле /media/t4/css/NN.css,
   который подключается РАНЬШЕ этого custom.css - переопределение здесь
   автоматически побеждает по каскаду, без !important. Проверено на
   практике (2026-09-21) - именно эти переменные, а НЕ --t4-body-font-family
   из template.css (та почти нигде реально не используется, читать её
   не нужно - см. references.md, раздел про замену шрифта).

   Если понадобится сменить ещё раз - для своего файла шрифта: залить
   .woff2 по FTP в templates/ja_purity_iv/local/fonts/, подключить через
   @font-face в начале файла вместо @import; дальше так же. */
:root {
  --body-font-family: 'Nunito Sans', sans-serif;
  --heading-font-family: 'Nunito Sans', sans-serif;
}

/* ==== Вёрстка страниц Хостинг/Встановлення/Підтримка — по аналогии со
   старым сайтом (2026-09-23) ====
   Старый сайт (T3, /posluhy/hostyng-ukr и т.п.): картинка стоит НАД
   текстом, во всю ширину контента, сразу под хлебными крошками -
   .item-image идёт перед <section class="article-content"> в самой
   разметке, контейнер col-xs-12 (полная ширина на любом экране, T3 не
   различает мобилу/десктоп для этого блока).

   Новый сайт (T4) рендерит для каждого такого материала 3 отдельных
   <div class="container"> подряд: 1) .top-article-info (текст,
   .desc-article), 2) .full-image (картинка), 3) .bottom-article-info -
   пустая зарезервированная разметка под сайдбар + "тело статьи"
   (com_content), которая у этих материалов всегда пуста (весь текст уже
   в .desc-article выше, читать больше неоткуда). Порядок обратный
   старому сайту (текст перед картинкой), плюс T4-скрипт добавляет класс
   .no-sidebar (раз сайдбар пуст) - он сам сужает и центрирует текст
   (max-width:768px) и картинку (max-width:928px) вместо полной ширины
   контейнера.

   Фикс: 1) переставляем картинку выше текста через flex+order (без
   медиа-запроса - на старом сайте этот блок одинаковый что на десктопе,
   что на мобиле, поэтому и здесь одно правило работает сразу для обеих
   вёрсток); 2) убираем принудительные max-width/центрирование у текста и
   картинки; 3) прячем пустой .bottom-article-info целиком.

   Скоуп - только по body-классам этих 6 пунктов меню (uk item-118/119/
   120 = Хостинг/Встановлення/Підтримка, en item-121/122/123 = Hosting/
   Installation/Support), НЕ общим селектором по .no-sidebar - чтобы не
   зацепить Контакти (другая структура, будет отдельная правка) и любой
   будущий материал, которому реально понадобится sidebar/продолжение
   текста через "Читати далі". */
:is(body.item-118, body.item-119, body.item-120,
    body.item-121, body.item-122, body.item-123)
  .com-content-article.item-page {
  display: flex;
  flex-direction: column;
}

:is(body.item-118, body.item-119, body.item-120,
    body.item-121, body.item-122, body.item-123)
  .com-content-article.item-page > div.container:nth-of-type(1) {
  order: 2; /* текст (.top-article-info) - после картинки */
}
:is(body.item-118, body.item-119, body.item-120,
    body.item-121, body.item-122, body.item-123)
  .com-content-article.item-page > div.container:nth-of-type(2) {
  order: 1; /* картинка (.full-image) - первой, как на старом сайте */
}
:is(body.item-118, body.item-119, body.item-120,
    body.item-121, body.item-122, body.item-123)
  .com-content-article.item-page > div.container:nth-of-type(3) {
  display: none; /* .bottom-article-info - всегда пустой сайдбар+body */
}

:is(body.item-118, body.item-119, body.item-120,
    body.item-121, body.item-122, body.item-123)
  .item-page.layout-default.no-sidebar .top-article-info,
:is(body.item-118, body.item-119, body.item-120,
    body.item-121, body.item-122, body.item-123)
  .item-page.layout-default.no-sidebar .full-image {
  max-width: none;
  text-align: left;
}

/* ==== Картинка материала - меньше, по центру, скруглённые углы
   (2026-09-23, по запросу пользователя после проверки фикса выше) ====
   Причина, почему картинка после предыдущей правки выглядела огромной -
   не в самом фиксе выше, а в стоковом правиле T4 (template.css):
   "figure.pull-none.item-image img { width: 100%; }" - растягивает
   картинку на всю ширину контейнера (~1300px на широком десктопе).
   Сами файлы (pic11.jpg/pic33.jpg и т.п., images/materialy/) - всего
   500x235px, при растяжении получаются мыльными.
   Ограничиваем ширину САМОЙ figure (500px = собственный размер файлов -
   картинка никогда не растягивается больше своего реального размера,
   не мылится); img внутри остаётся width:100% ОТ УЖЕ ОГРАНИЧЕННОЙ figure
   (стоковое правило трогать не нужно). На мобиле, где ширина контейнера
   и так меньше 500px, ограничение само по себе не мешает - figure просто
   занимает всю доступную ширину, как блочный элемент по умолчанию. */
:is(body.item-118, body.item-119, body.item-120,
    body.item-121, body.item-122, body.item-123)
  .full-image figure.pull-none.item-image {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
:is(body.item-118, body.item-119, body.item-120,
    body.item-121, body.item-122, body.item-123)
  .full-image figure.pull-none.item-image img {
  border-radius: 10pt;
}

/* ==== Контакти — по аналогии со старым сайтом (2026-09-23) ====
   Старый сайт (T3, /pro-nas/kontakty): блок .kontakty (телефон/email/сайт)
   стоит full-width сразу под хлебными крошками, подтянут вверх негативным
   margin-top, чтобы прижаться к шапке. Материал "Контакти" сам по себе
   пустой уже на старом сайте (introtext=''/fulltext='') - вся суть в этом
   модуле, не в материале (см. references.md, раздел про Main Body).

   Новый сайт (T4): тот же самый HTML-блок .kontakty перенесён 1-в-1
   текстом, но модуль сидит в позиции section-5 (зона "Spotlight 2",
   col-md-3 - 25% ширины) и рендерится НИЖЕ пустого #t4-main-body (та же
   зарезервированная разметка item-page/top-article-info/full-image/
   bottom-article-info, что у Хостинг/Встановлення/Підтримка выше - тут
   она пустая целиком, включая текст, весь контент только в модуле).

   Фикс без переназначения позиции модуля в админке: #t4-header,
   #t4-main-body, #t4-spotlight-2, #t4-footernav - прямые соседи по
   разметке (все внутри .t4-content-inner) в этом самом порядке уже в
   HTML. Если скрыть пустой #t4-main-body, #t4-spotlight-2 (Контакти)
   автоматически становится первым видимым блоком сразу под шапкой -
   никакой перестановки не нужно.

   Цвет иконок (rgba(24, 112, 181, 1) - фирменный синий) и размеры по
   3 брейкпоинтам - взято из живого template.css старого сайта построчно
   (там же и pадding-left:20px у .kontakty, повторяется на всех 3
   брейкпоинтах одинаково - перенесён как единое правило, без привязки к
   ширине экрана). Брейкпоинты у старого сайта были 990/1400px - здесь
   адаптированы под уже принятые в этом проекте пороги 768/1200px (те же,
   что у карточек услуг и картинок материалов выше), значения размеров
   взяты из ближайшего по смыслу тира старого сайта (мобил+планшет /
   стандартный десктоп / широкий десктоп).

   Точную "подтяжку" под шапку негативным margin-top (как на старом
   сайте) не повторяем буквально - там это работало поверх обычной
   (не прилипающей) шапки старого дизайна; на новом сайте шапка sticky
   (position:sticky, см. выше) - воспроизведённый один-в-один негативный
   отступ спрятал бы верх блока ПОД шапку при прокрутке. Вместо этого
   просто уменьшен штатный отступ модуля сверху/снизу (T4-класс
   .top-large/.bottom-large, изначально 6rem/4rem/2rem по брейкпоинтам) -
   блок сидит заметно ближе к шапке, чем по умолчанию, без риска наезда.
   Если после проверки покажется, что нужно ещё теснее/просторнее -
   подправить значения ниже. */

:is(body.item-115, body.item-117) #t4-main-body {
  display: none;
}

:is(body.item-115, body.item-117) #t4-spotlight-2 .t4-col.section-5 {
  flex: 0 0 100%;
  max-width: 100%;
}

:is(body.item-115, body.item-117) #t4-spotlight-2 .top-large {
  padding-top: 10rem;
}
:is(body.item-115, body.item-117) #t4-spotlight-2 .bottom-large {
  padding-bottom: 2rem;
}
@media (max-width: 767.98px) {
  :is(body.item-115, body.item-117) #t4-spotlight-2 .top-large {
    padding-top: 6rem;
  }
}

:is(body.item-115, body.item-117) .kontakty {
  padding-left: 20px;
}

:is(body.item-115, body.item-117) .kontakty i.fa.fa-phone::before,
:is(body.item-115, body.item-117) .kontakty i.fa.fa-envelope::before,
:is(body.item-115, body.item-117) .kontakty i.fa.fa-globe::before {
  color: rgba(24, 112, 181, 1);
}

/* Мобил (<768px) - взято из тира старого сайта "≤990px" */
@media (max-width: 767.98px) {
  :is(body.item-115, body.item-117) .kontakty {
    font-size: 19px;
  }
  :is(body.item-115, body.item-117) .kontakty i.fa.fa-phone::before {
    font-size: 23px;
  }
  :is(body.item-115, body.item-117) .kontakty i.fa.fa-envelope::before {
    font-size: 20px;
  }
  :is(body.item-115, body.item-117) .kontakty i.fa.fa-globe::before {
    font-size: 23px;
  }
}

/* Планшет/стандартный десктоп (768-1199.98px) - тир старого сайта
   "992-1400px" */
@media (min-width: 768px) and (max-width: 1199.98px) {
  :is(body.item-115, body.item-117) .kontakty {
    font-size: 18px;
  }
  :is(body.item-115, body.item-117) .kontakty i.fa.fa-phone::before {
    font-size: 22px;
  }
  :is(body.item-115, body.item-117) .kontakty i.fa.fa-envelope::before {
    font-size: 19px;
  }
  :is(body.item-115, body.item-117) .kontakty i.fa.fa-globe::before {
    font-size: 22px;
  }
}

/* Широкий десктоп (>=1200px) - тир старого сайта "1401px+" */
@media (min-width: 1200px) {
  :is(body.item-115, body.item-117) .kontakty {
    font-size: 25px;
  }
  :is(body.item-115, body.item-117) .kontakty i.fa.fa-phone::before {
    font-size: 30px;
  }
  :is(body.item-115, body.item-117) .kontakty i.fa.fa-envelope::before {
    font-size: 30px;
  }
  :is(body.item-115, body.item-117) .kontakty i.fa.fa-globe::before {
    font-size: 35px;
  }
}

/* ==== Подвал (копірайт) — по аналогии со старым сайтом (2026-09-23) ====
   Глобальная правка (весь сайт, не по body-классам страниц) - подвал
   один и тот же на любой странице.

   Старый сайт: модуль копірайту сидел в классе .mod-copyright
   (Purity III/css/template.css) - text-align:center, плюс сама колонка
   в разметке T3 (footer.php, t3-footer-sl) была на всю ширину
   (col-lg-12) - текст визуально по центру всей страницы.

   Новый сайт: тот же текст модуля перенесён 1-в-1, но T4 игнорирует
   суффикс класса модуля (тот же баг, что и у карточек услуг выше -
   класс .mod-copyright никогда не попадает в HTML), а сама колонка в
   готовом T4-блоке "footer" - только col-md-10 (не на всю ширину,
   оставшиеся 2 колонки зарезервированы под footer-r, у нас там ничего
   нет). Итог - текст прижат к левому краю вместо центра.

   Фикс: колонку "footer" растягиваем на всю ширину (как section-5 у
   Контакти выше), текст внутри центрируем - оба правила работают
   одинаково на любой ширине экрана, без media-запросов. */
#t4-footer .t4-col.footer {
  flex: 0 0 100%;
  max-width: 100%;
}
#t4-footer .t4-col.footer .custom {
  text-align: center;
}

/* ==== Подвал — прижат к низу страницы (sticky footer), 2026-09-23 ====
   На страницах с малым объёмом контента (Хостинг/Встановлення/Підтримка/
   Контакти и т.п.) подвал заканчивался сразу за текстом, а не у нижнего
   края экрана - ниже оставалось пустое белое поле до конца окна браузера.
   Причина - у T4 в разметке нет встроенного sticky-footer механизма: все
   секции (header/navhelper/main-body/footernav/footer) просто идут блоками
   подряд внутри одного .t4-content-inner, без flex/height-обвязки, а
   родители выше (main/.t4-wrapper/.t4-content) не имеют явной высоты.

   Фикс - на .t4-content-inner: min-height:100vh (единица vh не зависит от
   высоты родителей, поэтому всей цепочке выше явную высоту можно не
   выставлять) + display:flex, flex-direction:column. На #t4-footernav
   (первая из двух подвальных секций, #t4-footer идёт сразу за ней) -
   margin-top:auto: стандартный приём sticky-footer на flex-контейнере -
   раз footernav "уезжает" вниз, footer вслед за ним тоже прижимается к
   низу. На длинных страницах, где контента больше высоты экрана, ничего
   не меняется - подвал как и раньше идёт сразу за контентом, без разрыва.
   Правка глобальная (весь сайт), без media-запросов - работает одинаково
   на десктопе и мобиле. */
.t4-content-inner {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#t4-footernav {
  margin-top: auto;
}

/* ==== Фон подвала — фирменный синий вместо чёрного (2026-09-23) ====
   Стоковый T4 красит подвал через CSS-переменную --footer-bg-color: #000
   (template.css, объявлена один раз в :root, не переопределяется под
   тёмную тему - секция и так всегда с классом t4-palette-dark независимо
   от переключателя светлая/тёмная). Перебиваем background-color прямо у
   #t4-footer (id-селектор специфичнее .t4-footer из template.css, поэтому
   !important не нужен).

   Светлая/по умолчанию - тот же фирменный синий, что у иконок Контакти
   (rgba(24, 112, 181, 1), см. выше). Тёмная тема (body.dark-active) - тот
   же оттенок (H/S не менялись), но темнее: lightness понижена примерно
   вдвое (HSL(206°, 77%, 40%) -> HSL(206°, 77%, 22%)), чтобы подвал не
   "светил" на тёмном фоне остального сайта. */
#t4-footer {
  background-color: rgb(24, 112, 181);
}
/* ==== 2026-10-01, Obriy Midnight v2 — подвал в тёмной теме переведён на
   ту же схему, что и шапка (см. header.header-block.header-block-2 выше):
   раньше был отдельный насыщенный синий блок (просто темнее светлой
   версии, без связи с остальной палитрой) - пользователь явно попросила
   оформить шапку и подвал ОДИНАКОВО. Теперь оба - одна и та же
   поверхность (--obriy-surface) с мягким синим свечением со стороны
   контента (у шапки - снизу, у подвала - сверху, зеркально). Светлая
   тема не тронута (правило выше). */
body.dark-active #t4-footer {
  background-color: var(--obriy-surface);
  box-shadow: 0 -10px 40px -8px rgba(24, 112, 181, 0.45);
}

/* ==== Слайдер / меню в шапке / иконки шапки — только для больших
   десктопных экранов (2026-09-23) ====
   Три отдельные правки по скринам/HTML старого сайта, все ТОЛЬКО для
   десктопа. Порог взят не "с потолка" - на старом сайте (Purity III,
   bootstrap.css/template.css) И ширина .container (слайдер), И
   font-size у .navbar-nav (пункты меню) сами увеличиваются РОВНО на
   одном и том же пороге @media (min-width: 1600px) - на экранах уже
   (992-1599px, обычные ноутбуки) старый сайт эти элементы НЕ укрупняет,
   остаётся тот же компактный вид, что и на мобиле/планшете. Раз сам
   старый сайт (проверенный годами в проде) не рискует укрупнять на
   таких ширинах - вероятно, там уже не хватает места без риска переноса
   строк/наезда на соседние элементы шапки. Используем тот же порог у
   себя - и для параллели со старым сайтом, и как уже проверенную
   безопасную границу, без риска что-то сломать на обычных ноутбучных
   разрешениях (по её же просьбе "будь очень внимателен... не задень
   ничего лишнего"). Мобила/планшет/обычный десктоп (<1600px) - вообще не
   затронуты ни одним из правил ниже. */

/* --- 1. Слайдер (Hero) - на старом сайте на этом пороге .container
   становится 1400px (не на всю ширину экрана). Делаем нашему слайдеру
   аналогичное ограничение, но шире (1600px, не 1400px), по прямой
   просьбе пользователя ("почти так же, но шире"). Добавлен явный
   position:relative - у стрелок (div.owl-nav, см. выше)
   position:absolute с left:0/right:0, а ближайший ИЗНАЧАЛЬНО
   позиционированный предок у них - вся секция #t4-hero-(slideshow)
   (стоковое правило .t4-section{position:relative}, шире слайдера) -
   без этой строки стрелки остались бы растянуты на всю секцию, а не на
   новую узкую рамку картинки. Задав position:relative прямо на обёртке
   слайдера, делаем её новым (более близким) якорем позиционирования -
   стрелки автоматически сужаются вместе с картинкой. */
@media (min-width: 1600px) {
  .ja-acm.acm-hero.style-1 {
    position: relative;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Побочный эффект правки выше, найден сразу после проверки (2026-09-23):
   у самой секции #t4-hero-(slideshow) класс t4-palette-blue
   (media/t4/css/NN.css - генерируется T4 под конкретный стиль сайта,
   в статике шаблона его нет) - background-color:#0a58ca. Пока слайдер
   был во всю ширину секции, этот фон был полностью перекрыт и не виден.
   Как только слайдер сузился до 1600px - по бокам стали видны синие
   полосы (сама секция шире слайдера). На старом сайте у этой секции
   фона нет вообще (обычный белый фон страницы) - убираем и здесь,
   заменяя на цвет фона страницы (поддерживает и тёмную тему через ту же
   переменную, что уже используется для фона шапки выше). Селектор через
   атрибут id, не через #id - та же причина, что и у section-1(services)
   в блоке карточек услуг: круглые скобки в самом id нужно либо
   экранировать, либо обойти атрибутным селектором. */
@media (min-width: 1600px) {
  div[id="t4-hero-(slideshow)"] {
    background-color: #f2f9ff;
  }
  /* Obriy Midnight v2 (2026-10-01): на тёмной теме вместо плоского фона -
     мягкое синее свечение за слайдером (радиальный градиент от верхнего
     края), как лёгкая подсветка за кадром. Видно только здесь (>=1600px,
     где секция шире самой картинки слайдера) - на более узких экранах
     слайдер и так закрывает секцию целиком, разницы не будет видно, поэтому
     отдельное мобильное/планшетное правило не нужно. */
  body.dark-active div[id="t4-hero-(slideshow)"] {
    background: radial-gradient(120% 160% at 50% -20%, rgba(24, 112, 181, 0.4) 0%, var(--body-bg-color) 65%);
  }
}

/* ==== Хлебные крошки — по аналогии со старым сайтом (2026-09-23) ====
   Правка НЕ только для десктопа (в отличие от блока выше) - по общему
   правилу проекта прорабатывать вёрстку сразу для десктопа и мобилы.

   Старый сайт (template.css, тот же паттерн 3 повторяющихся блоков под
   разные брейкпоинты, что уже встречался у .kontakty/.mod-copyright):
   font-size 18px на мобиле+обычном десктопе (320-1400px), 25px только на
   широком десктопе (>=1401px).

   Новый сайт: сейчас 14px (0.875rem) на всех ширинах без исключений
   (t4-breadcrumb-font-size, template.css). Не повторяем скачок до 25px
   буквально (по просьбе - "не делать чересчур огромным"), увеличиваем
   умеренно на всех трёх принятых в проекте тирах (мобил / 768-1199.98 /
   >=1200, тот же порог, что у .kontakty и карточек услуг выше - не
   спец-порог 1600px, который использовался только для самой шапки).
   Селектор через #t4-navhelper (секция с крошками) - специфичнее
   стокового .t4-section.t4-breadcrumbs .breadcrumb, побеждает вне
   зависимости от порядка подключения файлов. */
#t4-navhelper .breadcrumb {
  font-size: 15px;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  #t4-navhelper .breadcrumb {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  #t4-navhelper .breadcrumb {
    font-size: 16pt;
    margin-top: 20pt;
  }
}

/* ==== Слайдер в тёмной теме — рамка, как у карточек услуг (2026-09-23,
   сужена до 3 сторон 2026-10-01) ====
   У карточек Хостинг/Встановлення/Підтримка везде есть
   border:...#cccccc solid + border-radius:7px (см. блок выше). У
   слайдера рамки не было вообще - на тёмной теме из-за этого он визуально
   "выпадает" из общего стиля страницы. Добавляем ту же рамку, тем же
   цветом - для целостного вида. Не привязано к десктопному порогу 1600px
   выше (тот - только про ширину/фон) - рамка нужна при любой ширине
   экрана, ровно как и у самих карточек (у них рамка тоже есть и на
   мобиле). overflow:hidden обязателен - иначе скруглённые уголки рамки не
   обрежут картинку/карусель под собой, получится скруглённая рамка с
   квадратными углами картинки, торчащими из-под неё.
   2026-10-01: по запросу сверху рамки быть не должно (слайдер примыкает
   к шапке без разделительной линии) - оставлены только левая/правая/
   нижняя стороны, скругление тоже только у нижних углов (верхние
   остаются прямыми, т.к. верхней границы, которую скруглять, больше
   нет). Цвет рамки заменён с нейтрального #cccccc на фирменный синий
   (rgba(24,112,181,.5)) в рамках Obriy Midnight v2 - у слайдера рамка
   сознательно осталась заметной/акцентной (в отличие от карточек услуг
   ниже, где рамка стала hairline) - это "привилегированный" блок. */
body.dark-active .ja-acm.acm-hero.style-1 {
  border-left: 2px solid rgba(24, 112, 181, 0.65);
  border-right: 2px solid rgba(24, 112, 181, 0.65);
  border-bottom: 2px solid rgba(24, 112, 181, 0.65);
  border-radius: 0 0 7px 7px;
  overflow: hidden;
}

/* --- 2. Пункты меню в шапке (и подпункты выпадающего списка) - сейчас
   16px (1rem) у самого верхнего уровня (ГОЛОВНА/ПОСЛУГИ/ПРО НАС,
   template.css: .t4-megamenu .navbar-nav > li > .nav-link) и тоже 16px
   (унаследовано от body) у подпунктов (Хостинг/Встановлення/Підтримка,
   .dropdown-item). На старом сайте на этом же пороге - 22px У ОБОИХ
   уровней сразу (.navbar-nav{font-size:22px}, подпункты наследуют это
   же значение). Не повторяем 22px буквально (по просьбе - "не делать
   чересчур огромным"), увеличиваем умеренно и с сохранением иерархии
   (верхний уровень чуть крупнее подпунктов). Высоты/line-height у обоих
   уровней и так с большим запасом (80px/line-height:40px у верхнего,
   auto у подпунктов) - обрезки текста не будет. */
@media (min-width: 1600px) {
  .t4-megamenu .navbar-nav > li > .nav-link {
    font-size: 19px;
  }
  .t4-megamenu .dropdown-menu li .dropdown-item {
    font-size: 18px;
  }
}

/* --- 3. Иконки правого блока шапки (флаги языка + переключатель темы) -
   на десктопе сейчас мельче некуда: у флагов в CSS вообще нет ширины
   (рендерятся в исходном крошечном размере .gif-файла), у переключателя
   темы - сток 32x16px трек / 10x10px бегунок / 14x14px SVG-иконки
   (media/mod_languages/css/template.css, template.css:13045-13070).
   Кнопка-гамбургер в этом же блоке (.navbar-toggler) НЕ трогаем - у неё
   даже в HTML стоит инлайн style="display:none" (это скрытая заглушка,
   см. references.md про два гамбургера в разметке T4-меню, реальным
   пользуется другая, отдельная кнопка) - увеличивать невидимый элемент
   незачем.
   Значения ниже - тот же принцип и почти те же цифры, что уже
   применялись для МОБИЛЬНОГО адаптива шапки выше (см. блок 2026-09-22) -
   только здесь работает исключительно на этом десктопном пороге. */
@media (min-width: 1600px) {
  header.header-block.header-block-2 div.mod-languages img {
    width: 22px;
    height: auto;
  }
  header.header-block.header-block-2 .ja-dark-mode svg {
    width: 16px;
    height: 16px;
  }
  header.header-block.header-block-2 .ja-dark-mode .dark-mode-status {
    width: 36px;
    height: 18px;
  }
  header.header-block.header-block-2 .ja-dark-mode .dark-mode-status span {
    width: 12px;
    height: 12px;
  }
  body.dark-active header.header-block.header-block-2 .dark-mode-status span {
    left: 21px;
  }
}
/* ============================================================
   НОВИНИ/NEWS — список: карточки по образцу lib.udu.edu.ua/novyny
   (только СПИСОК, страницы отдельных статей не затронуты —
   скоуп внутри .com-content-category-blog__items, 2026-09-30)
   ============================================================ */

/* Карточка целиком — рамка+скругление, картинка+текст одной высоты в ряду */
body.item-129 .com-content-category-blog__items .item-inner,
body.item-130 .com-content-category-blog__items .item-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #cccccc;
  border-radius: 7px;
  overflow: hidden;
}

/* ==== Obriy Midnight v2 (2026-10-01, доработано после проверки на
   фронте) — карточка на ступень светлее страницы (--obriy-surface,
   пересчитан от новой, более светлой базы #13242f) + hairline-рамка +
   полноценный hover (подъём + свечение), а не только смена цвета. */
body.dark-active.item-129 .com-content-category-blog__items .item-inner,
body.dark-active.item-130 .com-content-category-blog__items .item-inner {
  background-color: var(--obriy-surface);
  border-color: rgba(255, 255, 255, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease, background-color 0.25s ease;
}
body.dark-active.item-129 .com-content-category-blog__items .item-inner:hover,
body.dark-active.item-130 .com-content-category-blog__items .item-inner:hover {
  background-color: var(--obriy-surface-hover);
  border-color: rgba(24, 112, 181, 0.6);
  box-shadow: 0 12px 30px -10px rgba(24, 112, 181, 0.5);
  transform: translateY(-4px);
}

/* Дата — тёплый янтарный акцент на второстепенной метке, подсмотрено у
   референса ec.udu.edu.ua (там так же тёплый оттенок на холодной базе
   вместо просто серого текста). Затрагивает только <time> внутри
   .article-info (dd.published), сам блок уже стилизован ниже
   (text-transform/font-size) — здесь только цвет/подложка для тёмной
   темы. */
body.dark-active.item-129 .com-content-category-blog__items .article-info time,
body.dark-active.item-130 .com-content-category-blog__items .article-info time {
  display: inline-block;
  background: #E8A33D;
  color: #1A1203;
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 600;
}

/* Картинка вверху, обрезана до одной высоты у всех карточек */
body.item-129 .com-content-category-blog__items figure.item-image,
body.item-130 .com-content-category-blog__items figure.item-image {
  margin: 0;
}
body.item-129 .com-content-category-blog__items figure.item-image img,
body.item-130 .com-content-category-blog__items figure.item-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
@media (max-width: 575.98px) {
  body.item-129 .com-content-category-blog__items figure.item-image img,
  body.item-130 .com-content-category-blog__items figure.item-image img {
    height: 180px;
  }
}

/* Текстовый блок — растягивается, кнопка всегда внизу карточки */
body.item-129 .com-content-category-blog__items .item-content,
body.item-130 .com-content-category-blog__items .item-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 15px 15px;
}

/* "Распускаем" промежуточные обёртки, чтобы порядок можно было
   задать одним flex-рядом: дата -> заголовок -> анонс -> кнопка */
body.item-129 .com-content-category-blog__items .intro-title,
body.item-129 .com-content-category-blog__items .intro-conten,
body.item-130 .com-content-category-blog__items .intro-title,
body.item-130 .com-content-category-blog__items .intro-conten {
  display: contents;
}

body.item-129 .com-content-category-blog__items .article-info,
body.item-130 .com-content-category-blog__items .article-info {
  order: 1;
  margin: 0;
  padding: 12px 0 0;
}
body.item-129 .com-content-category-blog__items .article-info time,
body.item-130 .com-content-category-blog__items .article-info time {
  text-transform: uppercase;
  font-size: 12px;
}

body.item-129 .com-content-category-blog__items .page-header,
body.item-130 .com-content-category-blog__items .page-header {
  order: 2;
  margin: 4px 0 0;
}
body.item-129 .com-content-category-blog__items .page-header h2,
body.item-130 .com-content-category-blog__items .page-header h2 {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
}

body.item-129 .com-content-category-blog__items .item-intro,
body.item-130 .com-content-category-blog__items .item-intro {
  order: 3;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 18px;
}

/* Кнопка — залитый прямоугольник на всю ширину, а не просто ссылка */
body.item-129 .com-content-category-blog__items .readmore,
body.item-130 .com-content-category-blog__items .readmore {
  order: 4;
  padding-top: 15px;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
}
body.item-129 .com-content-category-blog__items .readmore .btn-readmore,
body.item-130 .com-content-category-blog__items .readmore .btn-readmore {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 10px;
  border-radius: 6px;
  background: rgb(24, 112, 181);
  color: #ffffff;
  border: none;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
body.item-129 .com-content-category-blog__items .readmore .btn-readmore:hover,
body.item-129 .com-content-category-blog__items .readmore .btn-readmore:focus,
body.item-130 .com-content-category-blog__items .readmore .btn-readmore:hover,
body.item-130 .com-content-category-blog__items .readmore .btn-readmore:focus {
  background: rgb(13, 61, 99);
  color: #ffffff;
}

/* ширина контейнера списка + обрезка анонса + отступы между рядами
   + более плавная сетка колонок 4-3-2-1 (доработка 2026-09-30) */

/* Расширяем именно контейнер СПИСКА новостей (а не статьи) — :has()
   ловит контейнер по наличию внутри блока-списка, статью не трогает.
   Потолок по ширине снят целиком (не просто увеличен) — контейнер
   становится fluid, с небольшим отступом по краям, как у эталона. */
body.item-129 #t4-main-body .t4-section-inner.container:has(.com-content-category-blog__items),
body.item-130 #t4-main-body .t4-section-inner.container:has(.com-content-category-blog__items) {
  max-width: none;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

/* Анонс — обрезаем до 3 строк с многоточием, как в эталоне,
   независимо от реальной длины текста материала */
body.item-129 .com-content-category-blog__items .item-intro,
body.item-130 .com-content-category-blog__items .item-intro {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ==== Obriy Midnight v2 (2026-10-01) — текст-анонс был плохо читаем.
   Причина — стоковое правило T4 (template.css): ".blog .item-intro,
   .blog-featured .item-intro { color: var(--t4-gray-600); }" (серый
   #6c757d) - рассчитано на светлую тему, не переопределено под тёмную
   нигде в шаблоне. На тёмной карточке серый текст на тёмном фоне даёт
   низкий контраст. !important нужен, чтобы перебить этот стоковый
   селектор + инлайновый <span> без цвета внутри (сам по себе ничего не
   перебивает, но на случай будущих инлайн-стилей в контенте - на всякий
   случай побеждаем принудительно, по аналогии с .section-N .custom a
   выше). */
body.dark-active.item-129 .com-content-category-blog__items .item-intro,
body.dark-active.item-130 .com-content-category-blog__items .item-intro,
body.dark-active.item-129 .com-content-category-blog__items .item-intro *,
body.dark-active.item-130 .com-content-category-blog__items .item-intro * {
  color: rgba(231, 238, 244, 0.92) !important;
}

/* Отступ между рядами карточек — у стокового Joomla-блога его не было
   вообще (только горизонтальный gutter между колонками) */
body.item-129 .com-content-category-blog__items .item,
body.item-130 .com-content-category-blog__items .item {
  margin-bottom: 24px;
}

/* Более плавная сетка: 1 -> 2 -> 3 -> 4 колонки вместо резкого скачка
   2 -> 4 (у стоковых классов Joomla не было промежуточного шага на 3) */
body.item-129 #item-container.items-row > .item,
body.item-130 #item-container.items-row > .item {
  width: 100%;
}
@media (min-width: 576px) {
  body.item-129 #item-container.items-row > .item,
  body.item-130 #item-container.items-row > .item {
    width: 50%;
  }
}
@media (min-width: 992px) {
  body.item-129 #item-container.items-row > .item,
  body.item-130 #item-container.items-row > .item {
    width: 33.3333%;
  }
}
@media (min-width: 1400px) {
  body.item-129 #item-container.items-row > .item,
  body.item-130 #item-container.items-row > .item {
    width: 25%;
  }
}
/* ================================================================
   Вёрстка страницы ОТДЕЛЬНОЙ НОВИНИ/NEWS — картинка слева, текст
   ОБТЕКАЕТ её (float), точно по эталону lib.udu.edu.ua (2026-10-01,
   полностью переработано). Было - через CSS Grid с жёсткой границей
   между "анонсом" (desc-article) и "повним текстом" (article-body):
   анонс стоял рядом с картинкой, а весь текст ниже шёл на всю ширину
   одним прыжком - на эталоне же оба куска текста перетекают один в
   другой СПЛОШНЫМ потоком, который просто обтекает картинку
   (классическое float), и расширяется на всю ширину ровно в том
   месте, где заканчивается высота картинки - Grid так не умеет
   (ширина колонки фиксирована на всю высоту строки), а float умеет
   от природы.

   Joomla физически кладёт картинку (full-image) МЕЖДУ вступом
   (desc-article) и основним текстом (article-body) - из-за этого
   чистым CSS обтекание не получить (float работает только с тем, что
   идёт ПОСЛЕ него по DOM). Перестановка (дата и картинка - перед
   вступом, вступ и текст - сплошным потоком сразу после картинки)
   сделана через JS в local/js/template.js (см. там подробный
   комментарий о причине) - здесь остаётся только сам float и
   косметика, никакой сетки/flex для раскладки уже не нужно.
   Скоуп через .com-content-article — есть только у статьи, не у
   списка, несмотря на общий body.item-129/130. */

body.item-129 .com-content-article .article-aside,
body.item-130 .com-content-article .article-aside {
  display: none;
}

/* T4 добавляет классу .no-sidebar сужение .top-article-info до
   max-width:768px (см. references.md) - снимаем, картинке+тексту
   внутри нужна вся доступная ширина контента, не 768px */
body.item-129 .item-page.layout-default.no-sidebar .top-article-info,
body.item-130 .item-page.layout-default.no-sidebar .top-article-info {
  max-width: none;
}

/* Найдено по скрину с пустыми полями слева/справа (2026-10-01):
   .top-article-info (а после перестановки JS - и картинка, и весь текст
   внутри неё) лежит в обычном Bootstrap <div class="container"> - у него
   свой потолок ширины (до 1320px на широком десктопе), независимый от
   того, что #t4-main-body > .t4-section-inner у .no-sidebar уже
   переключён в container-fluid (на всю ширину) тем же инлайн-скриптом
   Joomla. Именно этот "container" поджимал блок к центру. display:contents
   убирает у него собственную коробку - .top-article-info становится
   прямым потомком .com-content-article и получает всю доступную ширину
   родителя, как в эталоне. */
body.item-129 .com-content-article > .container,
body.item-130 .com-content-article > .container {
  display: contents;
}

/* desktop/планшет (>=768px) — картинка float:left, весь текст (после
   перестановки JS идёт одним потоком сразу после картинки) просто
   обтекает её и расширяется на всю ширину, как только высота картинки
   кончилась - штатное поведение float, без JS-пересчёта. */
@media (min-width: 768px) {
  body.item-129 .com-content-article .full-image,
  body.item-130 .com-content-article .full-image {
    float: left;
    width: 480px;
    /* !important обязателен - у стокового T4-правила ".item-page.
       layout-default.no-sidebar .full-image { margin-left:auto;
       margin-right:auto; ... }" (template.css) селектор весомее (4
       класса против наших 3) и перебивал именно margin-right (ставил
       auto вместо 28px) - а margin:auto у float-элемента по спецификации
       CSS всегда схлопывается в 0, поэтому отступ между картинкой и
       текстом пропадал полностью (найдено по скрину 2026-10-01). */
    margin: 0 28px 16px 0 !important;
  }
}

/* Найдено после проверки вживую (2026-10-01): стоковое правило T4
   ".item-page .article-body { display: inline-block; }" (template.css,
   строка ~17492) превращает основний текст статьи в отдельный блочный
   форматирующий контекст - такие блоки не оборачивают свои строки
   вокруг float построчно, а целиком "обходят" его прямоугольником: если
   не помещаются рядом целиком - съезжают ПОД float полностью, даже если
   справа ещё остаётся место (именно это было видно на скрине - анонс,
   обычный блочный div без этого правила, обтекал нормально, а текст
   после него прыгал под картинку). Возвращаем обычное блочное
   поведение - тогда строки честно обтекают картинку по высоте, как в
   эталоне. */
body.item-129 .com-content-article .article-body,
body.item-130 .com-content-article .article-body {
  display: block;
}

/* мобила (<768px) — картинка НЕ обтекается (обтекание на узком экране
   только мешало бы), просто полная ширина над текстом */
@media (max-width: 767.98px) {
  body.item-129 .com-content-article .full-image,
  body.item-130 .com-content-article .full-image {
    margin-bottom: 16px;
  }
}

body.item-129 .com-content-article .full-image figure.item-image,
body.item-130 .com-content-article .full-image figure.item-image {
  margin: 0;
}
body.item-129 .com-content-article .full-image img,
body.item-130 .com-content-article .full-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* шрифт анонса и полного текста статьи — 12pt (16px). !important
   обязателен — перебивает инлайновый font-size:14px в самом контенте */
body.item-129 .com-content-article .desc-article,
body.item-130 .com-content-article .desc-article,
body.item-129 .com-content-article .desc-article *,
body.item-130 .com-content-article .desc-article *,
body.item-129 .com-content-article .article-body,
body.item-130 .com-content-article .article-body,
body.item-129 .com-content-article .article-body * {
  font-size: 16px !important;
}

/* Найдено на EN-версии (2026-10-01): стоковое правило T4 ".item-page.
   layout-default.no-sidebar .top-article-info { text-align: center; }"
   наследуется всеми потомками, включая .article-body (теперь внутри
   .top-article-info после перестановки JS). На UK это было незаметно -
   в самом тексте материала на каждом <p> есть инлайн style="text-align:
   left", который перебивал наследование - но в EN-материале такого
   инлайн-стиля в контенте нет, поэтому центрирование "просвечивало" и
   ломало обтекание (центрированный текст против картинки слева выглядит
   криво). Заголовок/дату намеренно не трогаем - их центрирование не
   входило в задачу (только взаимное расположение текста и картинки) и
   уже устраивает на обоих языках. */
body.item-129 .com-content-article .desc-article,
body.item-130 .com-content-article .desc-article,
body.item-129 .com-content-article .article-body,
body.item-130 .com-content-article .article-body {
  text-align: left;
}

/* Подстраховка на случай отключённого JS (без него перестановка из
   template.js не сработает, картинка/текст останутся в исходном
   порядке Joomla) - пустая колонка-сайдбар под "повним текстом"
   скрыта, сам текст растянут на 100% ширины. */
body.item-129 .com-content-article .bottom-article-info .row > .col-md-3,
body.item-130 .com-content-article .bottom-article-info .row > .col-md-3 {
  display: none;
}
body.item-129 .com-content-article .bottom-article-info .row > .col-md-9,
body.item-130 .com-content-article .bottom-article-info .row > .col-md-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ============================================================
   ОБРІЙ DAYLIGHT — лёгкая доработка светлой темы (2026-10-01)
   ============================================================
   После доводки тёмной темы (Obriy Midnight v2, см. выше) пользователь
   заметила, что светлая тема на её фоне стала смотреться плоско и скучно -
   тонкие серые рамки у карточек без фона/тени, флаги и логотип вообще без
   реакции на наведение, активный язык - стоковая плоская серая плашка,
   подвал - ровная заливка без какой-либо глубины. Прямое сравнение
   скриншотов (light_home_1920/393.png, light_novyny_1920.png,
   2026-10-01) подтвердило это фактически, не только на словах.

   Задача явно сформулирована как "легкие тени и hover-эффекты, не
   перестараться, минимализм" - в отличие от тёмной темы, здесь
   СОЗНАТЕЛЬНО не повторяется язык "свечений" (цветной box-shadow/
   drop-shadow большого радиуса, который на тёмном фоне читается как
   неоновое сияние) - на белой странице тот же приём выглядел бы дёшево и
   кричаще. Вместо этого - мягкие нейтральные тени (имитация "приподнятой
   карточки", классический приём глубины на светлом фоне) в состоянии
   покоя, и усиление тени + лёгкий сдвиг вверх + чуть более заметный
   фирменный синий - на hover. Это даёт ощущение отклика и слоистости, не
   теряя минимализма.

   Архитектурно - та же идея "поверхность на ступень светлее страницы"
   через пару CSS-переменных, что и в Midnight v2 (--obriy-surface/
   --obriy-surface-hover) - только здесь они объявлены в своём блоке
   body.light-active, с светлыми, едва заметно голубоватыми значениями
   (не чистый #fff, как страница - иначе карточки сливались бы с фоном
   даже с тенью). Один и тот же паттерн имён переменных у обеих тем -
   позволяет менять палитру в одном месте, не трогая остальные правила
   (тот же вывод уже был закреплён в комментариях Midnight v2 выше).

   Везде, где это возможно, повторяется набор элементов, получивших
   проработку в тёмной теме - для смысловой парности между темами:
   карточки услуг и их иконки, логотип, флаги языка + индикатор активного
   языка, карточки новостей + дата-плашка, подвал, слайдер. Пункты меню
   шапки сознательно не тронуты - пользователь прямо отметила, что
   hover/меню уже проверила сама и всё устраивает, трогать не просили.

   Все правила ниже НЕ используют media-запросы - это не недосмотр, а
   прямое следствие того, что тени/hover/цвет сами по себе не зависят от
   ширины экрана (тот же принцип уже использовался для рамки карточек
   услуг, подвала и т.д. в предыдущих сессиях) - поэтому результат
   одинаков на десктопе, планшете и мобиле без дублирования кода; на
   мобиле :hover просто не срабатывает физически (нет курсора), это не
   баг, такое же поведение уже принято для всех прежних hover-правил
   сайта.

   Специфичность: везде используется префикс "body.light-active" (класс,
   которым JS помечает светлую тему, см. template.js) - за счёт этого
   каждое новое правило весомее одноимённого стокового/более раннего
   правила без этого префикса и побеждает по каскаду без единого
   !important (та же логика, что и "body.dark-active" выше). */

body.light-active {
  /* Едва голубоватый, не чисто-белый - иначе карточка сольётся со
     страницей даже с тенью. surface-hover - на полтона голубее, под
     hover/активное состояние - единая пара переменных используется у
     карточек услуг, новостей и шапки (sticky), чтобы они читались как
     одна "порода" поверхностей, не разные цвета сами по себе. */
  --obriy-surface: #fbfcfe;
  --obriy-surface-hover: #eef5fb;
}

/* --- Прилипшая шапка - тот же лёгкий оттенок поверхности вместо чистого
   #fff (который задаёт стоковое правило #t4-header.t4-sticky чуть выше
   по файлу) - побеждает по специфичности (доп. класс light-active). --- */
body.light-active #t4-header.t4-sticky {
  background-color: var(--obriy-surface);
}

/* --- Карточки Хостинг/Встановлення/Підтримка - мягкая тень в покое +
   подъём/усиленная тень/лёгкий синий фон на hover. border-color на hover
   уже задаётся более ранним стоковым блоком (rgba(24,112,181,1)) -
   здесь его не дублируем, только добавляем то, чего не было: фон, тень,
   плавное появление. --- */
body.light-active .section-1 .custom,
body.light-active .section-2 .custom,
body.light-active .section-3 .custom {
  background-color: var(--obriy-surface);
  box-shadow: 0 4px 16px rgba(16, 27, 40, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    background-color 0.25s ease, border-color 0.3s ease-in;
}
body.light-active .section-1 .custom:hover,
body.light-active .section-2 .custom:hover,
body.light-active .section-3 .custom:hover {
  background-color: var(--obriy-surface-hover);
  box-shadow: 0 18px 34px -16px rgba(24, 112, 181, 0.4);
  transform: translateY(-4px);
}

/* Иконки услуг - мягкая синяя тень снаружи картинки (тот же приём, что и
   в тёмной теме - сам PNG непрозрачен почти целиком, см. комментарий у
   Midnight v2 выше, заливка фона была бы не видна), только меньшего
   радиуса/прозрачности - на белой подложке и так хорошо заметно. */
body.light-active .hostimg,
body.light-active .instimg,
body.light-active .supimg {
  border-radius: 18%;
  box-shadow: 0 10px 22px -10px rgba(24, 112, 181, 0.4);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
body.light-active .section-1 .custom:hover .hostimg,
body.light-active .section-2 .custom:hover .instimg,
body.light-active .section-3 .custom:hover .supimg {
  box-shadow: 0 14px 28px -10px rgba(24, 112, 181, 0.55);
  transform: translateY(-2px);
}

/* --- Логотип - только на hover (не постоянно, в отличие от тёмной темы) -
   на белой шапке лёгкая тень под логотипом в состоянии покоя не нужна,
   а вот при наведении уместный маленький "отклик" показывает, что
   логотип интерактивен (ведёт на Головну). drop-shadow (не box-shadow) -
   та же причина, что и в Midnight v2: у images/obrijy.png настоящая
   альфа-прозрачность, box-shadow обвёл бы прямоугольник картинки целиком
   вместо контура букв. --- */
body.light-active header.header-block.header-block-2 .navbar-brand.logo-image .logo-img {
  transition: filter 0.25s ease;
}
body.light-active header.header-block.header-block-2 .navbar-brand.logo-image:hover .logo-img {
  filter: drop-shadow(0 6px 12px rgba(24, 112, 181, 0.35));
}

/* --- Флаги языка - лёгкая тень + подъём на hover (сейчас реакции нет
   вообще ни на одном флаге). Активный язык - вместо стоковой плоской
   серой плашки (media/mod_languages/css/template.min.css:
   "li.lang-active{background-color:#f0f0f0}", тот же баг нерасчитан на
   что-либо кроме нейтрального фона) - тонкое синее кольцо вокруг флага,
   фирменным цветом, тот же принцип "ореола", что и в тёмной теме, но
   здесь это аккуратное кольцо, а не сияние - на белом фоне смотрится
   как явный, но сдержанный индикатор выбора. */
body.light-active header.header-block.header-block-2 div.mod-languages img {
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(16, 27, 40, 0.2);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body.light-active header.header-block.header-block-2 div.mod-languages li:hover img {
  box-shadow: 0 5px 12px rgba(24, 112, 181, 0.4);
  transform: translateY(-1px);
}
body.light-active header.header-block.header-block-2 div.mod-languages ul li.lang-active {
  background-color: transparent;
}
body.light-active header.header-block.header-block-2 div.mod-languages li.lang-active img {
  box-shadow: 0 0 0 2px rgba(24, 112, 181, 0.55), 0 4px 10px rgba(24, 112, 181, 0.3);
}

/* --- Подвал - лёгкая тень сверху вместо ровной плоской заливки (парный
   приём к тёмной теме - там было цветное синее свечение сверху, здесь -
   нейтральная тень, т.к. подвал и так фирменного синего цвета, ему не
   нужен ещё и цветной ореол - достаточно отделить его от страницы
   глубиной). --- */
body.light-active #t4-footer {
  box-shadow: 0 -8px 22px rgba(16, 27, 40, 0.12);
}

/* --- Слайдер на главной - сейчас вообще без рамки/тени/скругления на
   светлой теме (в отличие от тёмной, где есть цветная рамка снизу/по
   бокам, см. выше). Здесь - нейтральная мягкая тень снизу + то же
   скругление только нижних углов (сверху слайдер примыкает к шапке без
   зазора, скруглять нечего - та же логика, что и в тёмной теме).
   overflow:hidden обязателен, иначе скруглённые углы не обрежут
   картинку/карусель под собой (уже проверено на тёмной теме). --- */
body.light-active .ja-acm.acm-hero.style-1 {
  border-radius: 0 0 7px 7px;
  box-shadow: 0 20px 44px -22px rgba(16, 27, 40, 0.4);
  overflow: hidden;
}

/* --- Карточки НОВИНИ (список) - та же схема, что и у карточек услуг
   выше: мягкая тень в покое, подъём + синяя рамка + усиленная тень на
   hover. border у карточки уже задан более ранним общим правилом (1px
   #cccccc) - здесь только цвет рамки на hover, фон и тень. --- */
body.light-active.item-129 .com-content-category-blog__items .item-inner,
body.light-active.item-130 .com-content-category-blog__items .item-inner {
  background-color: var(--obriy-surface);
  /* 2026-10-01: было 0.07 - на фоне списка новостей карточки почти не
     читались тенью (не хватало контраста, по итогам проверки на
     фронте). Усилено по прямому значению пользователя. */
  box-shadow: 0 4px 16px rgba(16, 27, 40, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease, background-color 0.25s ease;
}
body.light-active.item-129 .com-content-category-blog__items .item-inner:hover,
body.light-active.item-130 .com-content-category-blog__items .item-inner:hover {
  border-color: rgba(24, 112, 181, 0.55);
  background-color: var(--obriy-surface-hover);
  box-shadow: 0 18px 34px -16px rgba(24, 112, 181, 0.4);
  transform: translateY(-4px);
}

/* Дата - на тёмной теме получила тёплую янтарную плашку-акцент
   (подсмотрено у референса ec.udu.edu.ua, см. Midnight v2 выше) - для
   парности между темами повторяем тот же приём и здесь, но в бледном,
   пастельном варианте (не насыщенный #E8A33D - на белом фоне он выглядел
   бы слишком ярко/кричаще, "не перестараться"). Тёмно-янтарный текст на
   бледно-янтарной подложке - тот же приём контраста, что уже применялся
   для подвала (один и тот же оттенок, разная светлота под разные темы). */
body.light-active.item-129 .com-content-category-blog__items .article-info time,
body.light-active.item-130 .com-content-category-blog__items .article-info time {
  display: inline-block;
  background: #FDEEDA;
  color: #92590B;
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 600;
}

/* Дата на странице ОТДЕЛЬНОЙ новини/news (2026-10-11) — dd.published
   внутри .bottom-meta, до этого была обычным мелким серым текстом без
   выделения. Крупная пилюля (border-radius:999px, не 5px, как у карточек
   списка выше — тут дата единственный элемент метаданных на странице,
   можно акцентнее). Те же фирменные янтарные цвета, что и у карточек
   НОВИНИ — для единообразия между списком и самой статьёй. Селектор
   через .bottom-meta (не просто .article-info time), т.к. .article-info
   используется и в списке (другой скоуп .com-content-category-blog__items
   выше), и здесь — без .bottom-meta задело бы оба места одним правилом. */
body.item-129 .bottom-meta .article-info time,
body.item-130 .bottom-meta .article-info time {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 16px;
  border-radius: 999px;
  margin: 10px 0 18px;
}
body.dark-active.item-129 .bottom-meta .article-info time,
body.dark-active.item-130 .bottom-meta .article-info time {
  background: #E8A33D;
  color: #1A1203;
}
body.light-active.item-129 .bottom-meta .article-info time,
body.light-active.item-130 .bottom-meta .article-info time {
  background: #FDEEDA;
  color: #92590B;
}
@media (min-width: 768px) {
  body.item-129 .bottom-meta .article-info time,
  body.item-130 .bottom-meta .article-info time {
    font-size: 16px;
    padding: 7px 18px;
  }
}

/* --- Базовый фон страницы на светлой теме (2026-10-01/02) - .t4-content
   стоково белый (#ffffff) на обеих темах, пользователь заметила в
   devtools, что на светлой теме это смотрится слишком "плоско" рядом с
   уже проработанными поверхностями (карточки/шапка/подвал на
   --obriy-surface чуть светлее своего фона). Меняем ТОЛЬКО для светлой
   темы - тёмную тему (.t4-content там уже не белый, а часть общей схемы
   Midnight v2) не трогаем. Прямой class-селектор "body.light-active" с
   классом ".t4-content" (специфичность 20) весомее стокового одиночного
   класса ".t4-content" - !important не понадобился. */
body.light-active .t4-content {
  background-color: #f2f9ff;
}