body {
  background-color: #f8f9fa;
  background-image: url('/static/images/logo_pattern.png');
  background-repeat: repeat;
  background-attachment: fixed;
}

/*
 * Финальные стили для слайдера инфографики (v3)
 * --------------------------------------------------
 */

#infographicCarousel .carousel-item {
    height: 750px;
}

#infographicCarousel .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#infographicCarousel .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    padding: 1rem;
    /* Возвращаем фон, но в виде градиента */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 50%, transparent);
}


/*
 * Брендирование навигационной панели
 * --------------------------------------------------
 */

/* Основной синий цвет, близкий к цвету логотипа */
:root {
    --caricc-blue: #004a99;
}

.navbar.bg-caricc {
    background-color: var(--caricc-blue) !important;
}

/* Меняем цвет ссылок в меню на белый для контраста */
.navbar.bg-caricc .navbar-nav .nav-link {
    color: #ffffff;
}

/* Делаем ссылки чуть ярче при наведении */
.navbar.bg-caricc .navbar-nav .nav-link:hover {
    color: #e9ecef;
}

/* Цвет для выпадающих списков */
.navbar.bg-caricc .dropdown-menu {
    background-color: var(--caricc-blue);
    border: 1px solid #0056b3; /* Чуть более светлая рамка */
}

.navbar.bg-caricc .dropdown-item {
    color: #ffffff;
}

.navbar.bg-caricc .dropdown-item:hover {
    background-color: #0056b3; /* Более светлый синий при наведении */
    color: #ffffff;
}



/* --- Стили для полоски с флагами в шапке --- */

/* 1. Контейнер для центрирования и отступов */
.header-flags-strip {
  text-align: center; /* Центрируем картинку внутри блока */
  padding: 15px 0;    /* Даем немного воздуха сверху и снизу */
}

/* 2. Стили для самой картинки */
.header-flags-strip img {
  max-width: 800px; /* Максимальная ширина на больших экранах */
  width: 100%;      /* Заставляем её сжиматься вместе с экраном */
  height: auto;     /* Высота подстраивается автоматически */
  border-radius: 8px; /* Небольшое скругление углов для красоты */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Легкая тень для объема */
}

/* 3. Медиа-запрос для мобильных устройств (самое важное!) */
/* Все, что внутри этого блока, сработает только на экранах ширИной 767px и меньше */
@media (max-width: 767px) {
  .header-flags-strip {
    display: none; /* Полностью прячем блок с флагами */
  }
}






/*
 * Стили для футера
 * --------------------------------------------------
 */

footer {
    background-color: #6c757d; /* Темно-серый фон */
    color: #f8f9fa; /* Более светлый серый цвет текста */
    padding-top: 3rem;
    padding-bottom: 1rem;
}






footer h5 {
    color: #ffffff; /* Белый цвет для заголовков */
}

footer .text-muted {
    color: #adb5bd !important; /* Устанавливаем тот же светло-серый цвет, что и у основного текста */
}


.footer-link {
    color: #adb5bd;
    text-decoration: none;
    transition: color .15s ease-in-out;
}

.footer-link:hover {
    color: #e9ecef;
}


/*
 * Стили для баннеров партнеров в футере (ОБНОВЛЕННАЯ ВЕРСИЯ)
 * --------------------------------------------------
 */
.partner-banners {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.partner-logo-container {
    padding: 1rem;
}

.partner-logo {
    height: 60px; /* Фиксированная высота для всех логотипов */
    width: auto;
    max-width: 150px; /* Ограничение по ширине */
    /* Свойство filter: grayscale(100%); было удалено, чтобы логотипы стали цветными по умолчанию */

    /* Добавляем плавный переход для свойства transform (увеличение) */
    transition: transform.3s ease-in-out;
}

.partner-logo:hover {
    /* Вместо изменения цвета, теперь увеличиваем логотип на 15% */
    transform: scale(1.45);
    cursor: pointer; /* Также меняем курсор, чтобы показать, что элемент интерактивен */
}


/*
 * Стили для нового Top Bar
 * --------------------------------------------------
 */
.top-bar {
    padding: 10px 0;
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
}

#top-bar-logo {
    height: 60px; /* Увеличим логотип */
    width: auto;
}

.top-bar-right {
    font-size: 0.9rem;
}

.social-icons a {
    color: #6c757d;
    margin: 0 8px;
    font-size: 1.2rem;
    transition: color .2s;
}

.social-icons a:hover {
    color: var(--caricc-blue);
}

.date-time {
    color: #6c757d;
    line-height: 1.2;
}

.date-time .time {
    font-weight: bold;
}

.controls a {
    display: inline-block;
    margin-left: 15px;
    color: #212529;
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}

.controls a:hover {
    color: var(--caricc-blue);
}

.search-link i {
    margin-right: 5px;
}

/*
 * Корректировка внешнего вида навигации
 * --------------------------------------------------
 */

/* Добавляем отступ снизу для верхнего бара, чтобы "отлепить" меню */
.top-bar {
    margin-bottom: 1rem; /* 1rem - это примерно 16px */
}

/* Уменьшаем размер шрифта в основной навигационной панели */
.navbar.bg-caricc .navbar-nav .nav-link {
    font-size: 0.9rem; /* Немного уменьшаем шрифт */
    padding: 0.5rem 0.75rem; /* Корректируем внутренние отступы */
}


/*
 * Стили для блока "В цифрах"
 * --------------------------------------------------
 */
.stat-item {
    padding: 1rem;
}

.stat-icon {
    font-size: 3rem; /* Размер иконки */
    color: var(--caricc-blue); /* Используем наш фирменный синий цвет */
    margin-bottom: 1rem;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #343a40; /* Темно-серый цвет для цифр */
}

.stat-text {
    font-size: 1rem;
    color: #6c757d; /* Приглушенный серый для текста */
}

/*
 * Стили для Hero карусели
 * --------------------------------------------------
 */
#heroCarousel .carousel-item {
    height: 500px; /* Высота слайдера */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#heroCarousel .carousel-caption-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачное затемнение */
}

#heroCarousel .carousel-caption-content {
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Тень для текста */
}

/* --- Стили для ИМИДЖЕВОГО слайдера (на внутренних страницах) --- */

#heroCarousel {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

#heroCarousel .carousel-item {
  /* === ЗАДАЕМ НОВУЮ ВЫСОТУ === */
  height: 700px; /* Было ~60vh, можешь поставить 450px или 500px */

  /* Убеждаемся, что фон-картинка (если она задана) покрывает всё */
  background-size: cover;
  background-position: center center;
}

#heroCarousel .carousel-item img {
  /* Если внутри есть тег <img>, он тоже должен заполнять блок */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Обрезаем, не искажая */
}

/* Стили для текста поверх слайда (если они нужны) */
#heroCarousel .carousel-caption-container {
  /* ... (твои старые стили для этого блока, если они были) ... */
  /* Например: */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: white;
}

/*
 * Стили для баннеров страниц
 * --------------------------------------------------
 */
.page-banner {
    width: 100%;
    height: 500px; /* Высота баннера, можно изменить */
    border-radius: .5rem;
    overflow: hidden;
}

.page-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Чтобы изображение заполняло контейнер */
}

/*
 * Стили для карусели новостей партнеров
 * --------------------------------------------------
 */
#partnersNewsCarousel .carousel-control-prev-icon,
#partnersNewsCarousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 1.2rem;
}

#partnersNewsCarousel .carousel-control-prev {
    left: -50px; /* Выносим стрелки немного за пределы карусели */
}

#partnersNewsCarousel .carousel-control-next {
    right: -50px;
}

/* --- Выравнивание высоты в "Новостях партнеров" --- */

.partner-news-title {
  line-height: 1.4;       /* Высота одной строки */
  height: 2.8em;          /* ВЫСОТА РОВНО В 2 СТРОКИ (1.4 * 2) */

  /* Магия для обрезки текста по 2-м строкам */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Ограничиваем 2 строками */
  -webkit-box-orient: vertical;
}

/* --- Оптимизация картинок в "Новостях партнеров" --- */

/* Стили для МОБИЛЬНЫХ (горизонтальная карточка, col-4 + col-8) */
.partner-news-img {
  height: 100%; /* Растягиваем на 100% высоты родителя (.row) */
  object-fit: cover;
  width: 100%;
}

/* Стили для ПЛАНШЕТОВ И ДЕСКТОПОВ (вертикальная карточка, col-md-12) */
/* 768px - это точка, когда col-4 становится col-md-12 */
@media (min-width: 768px) {
  .partner-news-img {
    height: 180px; /* Задаем ФИКСИРОВАННУЮ высоту */
    width: 100%;
    object-fit: cover;
  }
}


/* --- Стили для блока "Избранные новости" --- */

/* 1. Делаем все КАРТИНКИ одинаковыми */
.featured-news-container .card-img-fixed-height {
  width: 100%;    /* Заставляем занимать всю ширину карточки */
  height: 200px;  /* Задаем ЕДИНУЮ высоту (можешь поменять на 220px) */
  object-fit: cover; /* Магия, которая обрезает, а не искажает */
}

/* 2. Делаем все ЗАГОЛОВКИ одинаковой высоты (в 3 строки) */
.featured-news-container .card-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Ограничиваем 3 строками */
  -webkit-box-orient: vertical;

  /* Задаем фиксированную высоту для 3 строк */
  line-height: 1.4em;
  max-height: 4.2em; /* 1.4em * 3 строки */
}





/* --- Цветные иконки социальных сетей в шапке --- */

/* Общий стиль для иконок, чтобы они плавно меняли цвет */
.social-icons a i {
  transition: opacity 0.2s ease-in-out;
}

/* При наведении делаем иконку чуть бледнее */
.social-icons a:hover i {
  opacity: 0.8;
}

/* * Задаем каждой иконке её фирменный цвет.
 * Убедись, что классы (fa-facebook, fa-youtube)
 * совпадают с теми, что у нас в base.html
*/

.fa-facebook-f {
  color: #1877F2; /* Фирменный синий Facebook */
}

.fa-youtube {
  color: #FF0000; /* Фирменный красный YouTube */
}

.fa-instagram {
  color: #E4405F; /* Фирменный градиент Instagram (берем один цвет) */
}

.fa-telegram-plane {
  color: #24A1DE; /* Фирменный голубой Telegram */
}

.fa-twitter {
  color: #1DA1F2; /* Фирменный синий Twitter */
}

/* Если у нас "X" вместо Twitter */
.fa-x-twitter {
  color: #000000; /* Черный цвет X */
}



.fa-linkedin {
  color: #0A66C2; /* Фирменный синий LinkedIn */
}

.fa-vk {
  color: #0077FF; /* Фирменный синий VK */
}


/* --- Стили для миниатюр в блоке "Последние публикации" --- */

.publication-thumb-sm {
  width: 65px;
  height: 65px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 6px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
}

.publication-thumb-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.publication-thumb-sm .default-thumb-icon {
  font-size: 28px;
  color: #ccc;
}

/* --- Выравнивание высоты строк в "Последних публикациях" --- */

.publication-title-clamped {
  line-height: 1.4;       /* Высота одной строки */
  height: 2.8em;          /* ВЫСОТА РОВНО В 2 СТРОКИ (1.4 * 2) */

  /* Магия для обрезки текста по 2-м строкам */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Ограничиваем 2 строками */
  -webkit-box-orient: vertical;
}

/* --- Стили для контента из админки (CKEditor) --- */
/*
 * Весь этот блок должен быть в style.css
 */

/* * 1. ФИКС РАЗМЕРА КАРТИНОК
 * (Побеждает width="3000" и заставляет картинку
 * занимать 100% от своего контейнера <figure>)
*/
.content-from-admin img {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

/* * 2. ФИКС ЦЕНТРИРОВАНИЯ
 * (Правильно центрирует контейнер <figure>)
*/
.content-from-admin .image {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* * 3. ФИКС ВЫРАВНИВАНИЯ (СЛЕВА/СПРАВА)
 * (Правильно обрабатывает обтекание)
*/
.content-from-admin .image-style-align-left {
  float: left;
  margin-right: 1.5rem;
  margin-left: 0;
  margin-bottom: 1rem;
}
.content-from-admin .image-style-align-right {
  float: right;
  margin-left: 1.5rem;
  margin-right: 0;
  margin-bottom: 1rem;
}

/* --- Стили для блока "Государства-участники" --- */

.partners-section {
  text-align: center;
  padding: 40px 20px;
  background-color: #f8f9fa; /* Легкий фон для выделения блока */
  border-radius: .5rem;
}

.flags-grid {
  display: flex;
  flex-wrap: wrap; /* Позволяет флагам переноситься на мобильных */
  justify-content: center;
  align-items: flex-start;
  gap: 30px; /* Расстояние между флагами */
  margin-top: 20px;
}

.flag-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  width: 150px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.flag-item:hover {
  transform: translateY(-5px);
}

.flag-item:hover img {
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.flag-item img {
  width: 120px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-bottom: 10px;
}

.flag-item p {
  margin: 0;
  font-weight: 500;
  font-size: 0.95rem;
}

/* Стили для заглушки, если нет флага */
.flag-item .flag-placeholder {
  width: 120px;
  height: 80px; /* Примерная высота флага */
  background-color: #e9ecef;
  border: 1px dashed #ced4da;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 0.8rem;
}