/**
 * Шаблон сайта СРОО ЦВП «Саратовский источник».
 *
 * Стили — прямое продолжение утверждённого дизайн-макета (../../../../../
 * ../design/*.dc.html в корне репозитория): те же переменные цвета,
 * та же типографическая пара (Literata + Golos Text), тот же принцип
 * шапки в три полосы вместо шести на старом сайте.
 */

/* --- Шрифты ------------------------------------------------------------------
   Свои файлы (../fonts), а не Google Fonts. PageSpeed Insights на боевом
   сайте: «Запросы, блокирующие отрисовку страницы» — таблица стилей с
   fonts.googleapis.com (~750 мс на мобильном) и ещё два чужих домена
   (googleapis → gstatic) до первой отрисовки. Теперь @font-face прямо
   здесь, в и так загружаемом style.css, файлы — с того же сервера.
   Файлы — те же, что отдавал Google: шрифты переменные, один файл на
   набор символов покрывает все веса 400–700 (отсюда диапазон в
   font-weight). Наборы — кириллица и латиница с расширениями; греческий
   и вьетнамский у Literata не взяты (на сайте их нет). unicode-range —
   из CSS Google: файл набора браузер качает, только если на странице есть
   символы из него. Лицензия — SIL OFL 1.1, см. ../fonts/OFL.txt */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-text-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-text-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-text-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/literata-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/literata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/literata-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Палитра — из утверждённого макета, взята прямо из инлайн-стилей .dc.html */
  --color-bg: #ffffff;
  --color-surface: #f5f8fc;
  --color-border: #e2e8f2;
  --color-text: #14181d;
  --color-text-muted: #5a6472;
  --color-accent: #0b3b7a;
  --color-accent-contrast: #ffffff;
  --color-gold: #a58304;
  --color-gold-bg: #fff9e8;
  --color-gold-border: #f0e2b8;
  /* Тот же оттенок, но темнее — специально для мелкого текста на белом.
     --color-gold на белом фоне даёт контраст ~3.6:1 (мелкий текст 12.5px
     требует минимум 4.5:1 по WCAG) — PageSpeed Insights пометил .kicker
     и .card-credit после переноса на бой. Бордюры/акценты золотого цвета
     в других местах (обводки, левая полоса) не трогаем — там требования
     мягче (3:1 для не-текстовых элементов), и они не были отмечены */
  --color-gold-text: #8a6a03;

  --font-sans: 'Golos Text', system-ui, sans-serif;
  --font-serif: 'Literata', Georgia, serif;

  --content-width: 1200px;
  --text-width: 780px; /* было 680px — по правке пользователя увеличено на 100px */
  --media-width: 1000px; /* заголовок статьи и фото в тексте — на эту ширину */
  --radius: 10px;
}

/* --- Базовые сбросы -------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* height: auto — обязательно рядом с max-width: 100%. Изображения в
   тексте статей несут исходные HTML-атрибуты width/height (см.
   cli/import-content.php — оставлены как есть, это реальные пропорции
   фото). Без height: auto браузер сжимает по max-width ШИРИНУ, а
   ВЫСОТУ держит равной атрибуту height в пикселях — картинка выходит
   вытянутой по вертикали. Карточкам/обложкам, которым нужна именно
   фиксированная высота (обрезка object-fit: cover), она задаётся уже
   своим классом ниже (.card-image, .article-cover img и т.д.) —
   селектор по классу перебивает этот сброс по тегу */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-gold);
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  margin: 0;
  color: var(--color-text);
}

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Скрыто визуально, доступно скринридеру и поисковику — тот же приём,
   что и на Angular-версии для заголовков разделов, дублирующих меню */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Шапка: служебная строка ------------------------------------------------ */

.topbar {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 13.5px;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* min-height, не height: с появлением формы поиска (плюс контакты, плюс
     об-организации-ссылки) на широких, но не бесконечных экранах строка
     иногда переносится на вторую (flex-wrap: wrap ниже) — с фиксированной
     height вторая строка проваливалась ЗА пределы фона .topbar (визуально
     пропадала, хотя оставалась в разметке) */
  min-height: 42px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.topbar-address {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0.9;
  white-space: nowrap;
}
.topbar-address svg {
  flex: none;
}
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* saristochRenderLinks() пишет пустой class="" на неактивных пунктах (не
   "u-link") — без явного правила ссылки наследуют от <a> дефолтный синий
   цвет UA-стиля браузера (а не белый topbar), из-за чего на тёмно-синем
   фоне становятся почти нечитаемыми и выглядят как «меню отсутствует» */
.topbar-nav a {
  color: var(--color-accent-contrast);
  opacity: 0.82;
  text-decoration: none;
}
.topbar-nav a:hover,
.topbar-nav a.active {
  opacity: 1;
}
.u-link {
  color: var(--color-accent-contrast);
  opacity: 0.82;
}
.u-link:hover {
  color: var(--color-accent-contrast);
  opacity: 1;
}
.topbar-search {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Joomla печатает разметку формы поиска (mod_finder) в новом семантическом
   теге <search> — современные браузеры уже считают его блочным по
   UA-стилю, но подстрахуемся явно на случай более старого движка */
search {
  display: block;
}

/* Форма поиска в шапке (десктоп) — компактная «таблетка» на тёмном фоне
   топбара, расширяется при фокусе. Второй экземпляр той же формы —
   в мобильном меню, см. .nav-search ниже (мобильная медиа-выборка):
   на узком экране вся эта строка шапки скрыта целиком */
.topbar-search .mod-finder {
  display: flex;
  align-items: center;
}
.topbar-search .mod-finder input.js-finder-search-query {
  width: 128px;
  padding: 5px 12px;
  font: 400 12.5px/1.3 var(--font-sans);
  color: var(--color-accent-contrast);
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  transition: width 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.topbar-search .mod-finder input.js-finder-search-query::placeholder {
  color: rgb(255 255 255 / 68%);
}
.topbar-search .mod-finder input.js-finder-search-query:focus {
  outline: none;
  width: 180px;
  color: var(--color-text);
  background: #fff;
  border-color: #fff;
}

/* Мобильный экземпляр (внутри бургер-меню) — по умолчанию скрыт, показан
   только в мобильной медиа-выборке ниже вместе с остальным .nav-panel */
.nav-search {
  display: none;
}

/* Значки соцсетей — те же файлы и та же логика подложки, что на
   Angular-версии сайта (site-header.scss): фирменные цвета (тёмный
   квадрат Rutube, синий круг ВКонтакте) не перекрашиваем — тёмные
   иконки на тёмно-синем топбаре без подложки просто не видны. Белое
   кольцо (box-shadow, не border — не меняет размер) отделяет знак от
   фона, форма подложки повторяет форму знака */
.social-icon {
  display: block;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
  opacity: 0.9;
}
.social-icon.round {
  border-radius: 50%;
}
.social-icon.square {
  border-radius: 22%;
}
.topbar-search a:hover .social-icon {
  opacity: 1;
}

/* --- Шапка: опознание + горячая линия --------------------------------------- */

.brand-bar {
  position: relative;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.brand-bar-bg {
  position: absolute;
  inset: 0 0 0 45%;
  background-image: var(--brand-bg-image, none);
  background-size: cover;
  background-position: center 62%;
  opacity: 0.17;
}
.brand-bar-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 42%, rgb(255 255 255 / 55%) 68%, rgb(255 255 255 / 85%) 100%);
}
.brand-bar-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 22px 24px;
  flex-wrap: wrap;
}
.brand-ident {
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand-logo {
  flex: none;
  width: 60px;
  height: auto;
}
.brand-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  margin: 0;
}
.brand-subtitle {
  margin: 5px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--color-text-muted);
  max-width: 430px;
}
.brand-extra {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.hotline {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius);
  padding: 12px 18px;
  box-shadow: 0 2px 10px rgb(11 59 122 / 8%);
}
.hotline-icon {
  flex: none;
  color: var(--color-gold);
}
.hotline-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
.hotline-phone {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-text);
}
.hotline-phone a {
  color: inherit;
}
.gerb {
  flex: none;
  width: 52px;
  height: auto;
  opacity: 0.95;
}

/* --- Шапка: основное меню --------------------------------------------------- */

.main-nav-bar {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgb(11 59 122 / 4%);
}
.main-nav {
  display: flex;
  align-items: stretch;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
.main-nav li {
  display: flex;
}
.main-nav a {
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 58px;
  font-size: 15.5px;
  font-weight: 500;
  color: #3c4654;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover {
  color: var(--color-accent);
}
.main-nav a.active {
  font-weight: 600;
  color: var(--color-text);
  border-bottom-color: var(--color-gold);
}

/* Кнопка мобильного меню — видна только на узких экранах */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  flex: none;
}

/* --- Грантовая отметка ------------------------------------------------------- */

.grant-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.grant-bar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 24px;
}
.grant-logo {
  flex: none;
  width: 104px;
  height: auto;
}
.grant-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- Категория-тег и дата у карточек/статей --------------------------------- */

.kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold-text);
}
.kicker .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c3ccda;
  flex: none;
}
.kicker .date {
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Карточки материалов ----------------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: 26px;
}
.section-head h2 {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.section-head a {
  font-size: 15px;
  font-weight: 600;
  flex: none;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-image {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-surface);
}
.card h3 {
  font-weight: 600;
  font-size: 19.5px;
  line-height: 1.32;
  /* Заголовки статей набирались вручную кто во что горазд (капсом, обычным
     текстом, только первая заглавная — тянется ещё со старого сайта) —
     принудительный uppercase на отображении выравнивает вид, не трогая
     сами данные в базе. Именно uppercase, а не lowercase: аббревиатуры
     («МЧС» и т.п.) при переводе в нижний регистр потеряли бы читаемость,
     при верхнем — не портятся, они и так уже заглавные */
  text-transform: uppercase;
}
.card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}
/* Обязательная по условиям гранта подпись («При поддержке Фонда
   президентских грантов» / «...Правительства Саратовской области»),
   которую редакторы вставляют первым абзацем текста статьи — не часть
   содержания, поэтому в превью показываем не как первую фразу лида,
   а отдельной акцентной строкой (см. saristochExtractCredit() в
   blog_item.php, которая вырезает её из HTML до построения лида) */
.card-credit {
  margin-top: 4px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gold-text);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* Первая карточка ленты — крупнее и с текстовым лидом, задаёт тему раздела */
.card-lead {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px;
  align-items: center;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--color-border);
}
.card-lead .card-image {
  height: 300px;
}
.card-lead h2 {
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin-top: 12px;
  text-transform: uppercase; /* см. комментарий у .card h3 */
}
.card-lead .lead-text {
  font-family: var(--font-serif);
  font-size: 17.5px;
  line-height: 1.65;
  color: #3c4654;
  margin: 14px 0 0;
}

/* --- Статья ------------------------------------------------------------------ */

.article-head {
  max-width: var(--media-width);
  margin: 0 auto;
  padding: 22px 24px 0;
}
.article-head h1 {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin-top: 14px;
  text-transform: uppercase; /* см. комментарий у .card h3 */
}
.article-lead {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20.5px;
  line-height: 1.55;
  color: #3c4654;
  margin: 18px 0 0;
}
.article-cover {
  max-width: var(--media-width);
  margin: 26px auto 0;
  padding: 0 24px;
}
.article-cover img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
/* Контейнер — на ширину картинок (как .article-cover/.article-head,
   --media-width), а не текста: раньше был на ширину текста
   (var(--text-width)), из-за чего и текст, и импортированные фото
   1000×N внутри $item->text были ужаты в одну узкую колонку. Сам
   текст сужается обратно ниже, через :not(:has(...)) — картинки нет */
.article-body {
  max-width: var(--media-width);
  margin: 30px auto 0;
  padding: 0 24px 56px;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.75;
  color: #1c2229;
}
.article-body p {
  margin: 0 0 20px;
}
.article-body img {
  border-radius: var(--radius);
  margin: 8px 0;
}
.article-body h2 {
  font-weight: 700;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 32px 0 14px;
}
.article-body blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--color-gold);
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-text);
}
.article-body iframe {
  max-width: 100%;
  border-radius: var(--radius);
}
/* Текстовые абзацы и заголовки — узкой читаемой колонкой по центру
   широкого контейнера (тот же приём, что в утверждённом макете
   design/Article.dc.html: там текст и картинки лежат в разных <div>
   разной ширины; здесь всё приходит одним $item->text, поэтому текст
   от картинок отделяет :has() — абзац с ОДНОЙ картинкой и больше
   ничем, т.е. импортированное фото само по себе, из сужения исключён).
   Правило — ПОСЛЕ остальных .article-body-правил выше: margin-left/
   right: auto здесь не должны быть перезаписаны их margin-шортхэндами */
.article-body p:not(:has(> img:only-child)),
.article-body h2,
.article-body blockquote {
  max-width: var(--text-width);
  margin-left: auto;
  margin-right: auto;
}
/* Видео от плагина saristochvideo — во всю ширину колонки текста */
.saristoch-video {
  margin: 8px 0 24px;
}
.saristoch-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.breadcrumbs {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 26px 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}
.breadcrumbs a {
  color: var(--color-text-muted);
}
.breadcrumbs span {
  color: #c3ccda;
}

/* --- Переход между статьями ---------------------------------------------------- */
/* Один и тот же блок сверху (компактно, под крошками) и снизу (после
   текста) статьи — см. saristochAdjacentNav() в article/default.php */
.adjacent-nav {
  max-width: var(--media-width);
  /* низ — отступ от подвала (нижний блок идёт прямо перед </article>,
     сразу за ним синий .site-footer): 20px, вписывается в общий ритм
     остальных отступов на странице статьи (.article-body margin-top:
     30px и т.п.), заведомо больше просимых 16px */
  margin: 14px auto 20px;
  padding: 0 24px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.adjacent-link {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* без этого длинный заголовок распирает flex-элемент за пределы контейнера */
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
}
.adjacent-link:hover {
  border-color: var(--color-accent);
}
.adjacent-link svg {
  flex: none;
  color: var(--color-gold);
}
.adjacent-next {
  justify-content: flex-end;
}
.adjacent-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.adjacent-next .adjacent-text {
  align-items: flex-end;
  text-align: right;
}
.adjacent-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.adjacent-title {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15.5px;
  text-transform: uppercase; /* см. комментарий у .card h3 */
}

/* --- Пагинация ---------------------------------------------------------------- */

.pagination-bar {
  display: flex;
  justify-content: center;
  padding: 40px 24px 56px;
}
/* $this->pagination->getPagesLinks() отдаёт стоковую Bootstrap-разметку
   Joomla (<ul class="pagination"><li class="page-item"><a class="page-link">)
   — без сброса UA-стилей <ul>/<li> список рендерится как обычный маркированный
   и вертикальный, а не горизонтальным рядом пилюль */
.pagination-bar .pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination-bar .page-item {
  display: flex;
}
.pagination-bar .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 16px;
  font-weight: 500;
  color: #3c4654;
  text-decoration: none;
}
/* Первая/пред./след./последняя страница — Joomla рендерит их как
   <span class="icon-angle-left" aria-hidden="true"></span> без текста
   внутри: расчёт на шрифт FontAwesome (media/system/css/joomla-fontawesome.css),
   который наш шаблон сознательно не грузит (везде свои лёгкие инлайн-SVG,
   без тяжёлых иконочных шрифтов) — без него span пустой, и остаётся только
   пустой квадрат от .page-link. Подставляем стрелки текстом через ::before */
.pagination-bar .icon-angle-double-left::before {
  content: '\ab'; /* « */
}
.pagination-bar .icon-angle-left::before {
  content: '\2039'; /* ‹ */
}
.pagination-bar .icon-angle-right::before {
  content: '\203a'; /* › */
}
.pagination-bar .icon-angle-double-right::before {
  content: '\bb'; /* » */
}
.pagination-bar .page-item.disabled .page-link {
  opacity: 0.4;
  pointer-events: none;
}
.pagination-bar .page-item.active .page-link {
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  border-color: var(--color-accent);
}

/* --- Главная (category/home.php) --------------------------------------------- */

/* Двухколоночный блок «Деятельность» + правая колонка — по design/Main.dc.html */
.home-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
}
.activity-list {
  display: flex;
  flex-direction: column;
}
.activity-list a {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}
.activity-list a:last-child {
  border-bottom: none;
}
.activity-list img {
  display: block;
  width: 116px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
  background: var(--color-surface);
}
.activity-list .activity-date {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
}
.activity-list .activity-title {
  display: block;
  margin-top: 5px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18.5px;
  line-height: 1.35;
  color: var(--color-text);
  text-transform: uppercase; /* см. комментарий у .card h3 */
}
.home-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.aside-card {
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px;
}
.aside-card.accent {
  background: var(--color-surface);
  border-left: 3px solid var(--color-gold);
}
.aside-card.plain {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.aside-card-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--color-text);
}
.aside-card p {
  margin: 8px 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}
/* Единственная ссылка на заголовок статьи в этом блоке («Аналитика» на
   Главной) — без собственного класса в разметке (home.php), других
   ссылок с текстом статьи внутри .aside-card.plain нет */
.aside-card.plain p a {
  text-transform: uppercase; /* см. комментарий у .card h3 */
}
.aside-card a {
  font-size: 15px;
  font-weight: 600;
}

/* --- Подвал -------------------------------------------------------------------- */

.site-footer {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
  padding: 40px 24px 30px;
}
.footer-col-title {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 14.5px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14.5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Тот же дефект, что у .topbar-nav (см. комментарий там): saristochRenderLinks()
   не проставляет цвет на <a>, поэтому вместо унаследованного белого текста
   подвала ссылки красятся дефолтным синим цветом браузера и сливаются
   с тёмно-синим фоном подвала */
.footer-links a {
  color: var(--color-accent-contrast);
  opacity: 0.82;
  text-decoration: none;
}
.footer-links a:hover,
.footer-links a.active {
  opacity: 1;
  text-decoration: underline;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
}
.footer-contacts {
  font-size: 14.5px;
  line-height: 1.75;
}
.footer-grant {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 22px 24px;
  border-top: 1px solid rgb(255 255 255 / 16%);
}
.footer-grant img {
  flex: none;
  width: 110px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.footer-grant p {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.72;
  max-width: 760px;
  margin: 0;
}

/* --- Поиск: страница результатов (com_finder) -------------------------------
   Разметка формы/результатов — штатная (см. templates/saristoch/html/
   com_finder/search/default.php — override меняет только .container-обёртку),
   поверх media/com_finder/css/finder.css (сам по себе приличный, без
   зависимости от Bootstrap). Здесь — только шрифты/цвета/отступы в тон
   остального сайта плюс стилизация формы: её классы (btn, form-control,
   input-group) — bootstrap-родные, а Bootstrap CSS в шаблоне не подключён
   нигде специально (см. index.php) */

.finder-page {
  padding: 32px 24px 56px;
}
.finder-page-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 30px;
  color: var(--color-text);
  margin: 0 0 20px;
}
.com-finder .form-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.com-finder .form-inline label {
  font-size: 14px;
  color: var(--color-text-muted);
}
.com-finder .input-group {
  display: flex;
  gap: 10px;
  flex: 1 1 320px;
}
.com-finder input.js-finder-search-query {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  font: 400 15px/1.3 var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.com-finder input.js-finder-search-query:focus {
  outline: none;
  border-color: var(--color-accent);
}
.com-finder .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font: 500 14px/1.2 var(--font-sans);
  color: var(--color-accent-contrast);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.com-finder .btn:hover {
  opacity: 0.92;
}
/* Иконки — из icomoon-шрифта админки, на сайте не подключён: пустой квадрат
   без него хуже, чем ничего */
.com-finder .btn .icon-search {
  display: none;
}
.com-finder__explained {
  color: var(--color-text-muted);
  font-size: 14.5px;
}
.result__title-text {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text);
}
.result__title-link {
  text-decoration: none;
}
.result__title-url {
  font-size: 12.5px;
}
.result__description {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.55;
}
.result__taxonomy {
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.result__item + .result__item {
  border-top-color: var(--color-border);
}

/* --- Пустые/системные состояния ------------------------------------------------ */

.empty-state {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 24px;
  color: var(--color-text-muted);
}

/* --- Мобильная раскладка -------------------------------------------------------- */

@media (max-width: 47.9375em) {
  .topbar-nav,
  .topbar-search {
    display: none; /* дублируются в подвале */
  }
  .topbar-address {
    font-size: 12.5px;
  }

  .brand-bar-bg {
    display: none;
  }
  .brand-name {
    font-size: 19px;
  }
  .brand-subtitle {
    display: none; /* повторяется в подвале */
  }
  .hotline-phone {
    font-size: 18px;
  }
  .gerb {
    display: none;
  }

  .burger {
    display: flex;
  }
  /* Раньше бургер скрывал/показывал напрямую .main-nav; теперь общая
     обёртка .nav-panel (см. index.php) — чтобы форма поиска сворачивалась
     и разворачивалась вместе со списком пунктов одним и тем же классом */
  .nav-panel {
    display: none;
    width: 100%;
  }
  .nav-panel.is-open {
    display: block;
  }
  .nav-search {
    display: block;
    padding: 12px 4px 16px;
    border-bottom: 1px solid var(--color-border);
  }
  .nav-search .mod-finder input.js-finder-search-query {
    width: 100%;
    padding: 10px 14px;
    font: 400 15px/1.3 var(--font-sans);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }
  .main-nav {
    flex-direction: column;
    width: 100%;
  }
  .main-nav a {
    height: auto;
    padding: 14px 4px;
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
  }
  .main-nav a.active {
    border-bottom-color: var(--color-border);
    border-left-color: var(--color-gold);
  }

  .card-grid {
    grid-template-columns: 1fr;
  }
  .card-lead {
    grid-template-columns: 1fr;
  }
  .card-lead .card-image {
    height: 200px;
  }

  .home-columns {
    grid-template-columns: 1fr;
  }

  /* На мобильном логотип фонда рядом с мелким текстом читался плохо —
     по правке пользователя увеличен (на десктопе рядом достаточно места,
     там 104px и так хорошо видно) */
  .grant-logo {
    width: 130px;
  }

  /* На узком экране подпись "Предыдущий/Следующий материал" + заголовок
     в две строки съедали неоправданно много высоты — оставляем только
     заголовок (обрезка многоточием уже есть у .adjacent-title), меньше
     внутренних отступов */
  .adjacent-label {
    display: none;
  }
  .adjacent-link {
    padding: 10px 12px;
  }
  .adjacent-title {
    font-size: 14px;
  }

  .article-head h1 {
    font-size: 28px;
  }
  .article-body {
    font-size: 17px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (min-width: 48em) and (max-width: 64em) {
  .main-nav a {
    padding: 0 10px;
    font-size: 14px;
  }
}

/* --- Лёгкая перекраска модулей сторонних расширений --------------------------- */

/* Phoca Gallery: убираем фирменную рамку/тени по умолчанию, чтобы плитки
   альбомов не спорили по стилю с остальным сайтом */
.pg-categories-view .pg-category-box-title a,
.pg-category-view .pg-image-title a {
  color: var(--color-text);
  font-family: var(--font-serif);
}

/* --- Кнопка «наверх» ------------------------------------------------------------ */

/* Скрыта не через display:none — она должна иметь размеры, чтобы плавно
   появляться/исчезать (transition), а не выпрыгивать. pointer-events:none
   в скрытом состоянии — без него невидимая кнопка всё равно перехватывала
   бы клики поверх футера, пока JS не переключил класс */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(11, 59, 122, 0.32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.back-to-top.is-visible {
  opacity: 0.92;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  opacity: 1;
}
@media (max-width: 47.9375em) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}