/* ==========================================================================
   content-body.css — универсальный контейнер содержимого
   ==========================================================================
   Один компонент для тела контента в любом окружении: внутри карточки,
   внутри block-content, на верхнем уровне холста. Стилизует все типовые
   теги (заголовки, абзацы, списки, таблицы, код, цитаты, ссылки, картинки)
   одинаково — независимо от родителя.

   ПОДКЛЮЧЕНИЕ
   -----------
   В index.html подключён сразу после base.css и перед menu.css.

   МОДИФИКАТОРЫ
   ------------
   Отступы:
     (базовый)                — без padding. Тело от края до края.
     .content-body--padded    — padding: 20px 30px 30px. Для карточек
                                и блоков с рамкой/плашкой.

   Фон:
     (базовый)                — прозрачный (наследует фон родителя).
     .content-body--surface   — фон #fff9e6 (кремовый).

   Комбинируются: class="content-body content-body--padded content-body--surface".
   ========================================================================== */

.content-body {
  /* Базовый: без padding, фон прозрачный. */
}

.content-body--padded {
  padding: 20px 30px 30px;
  box-sizing: border-box;
}

.content-body--surface {
  background-color: #fff9e6;
}

/* ==========================================================================
   ТИПОВЫЕ ЭЛЕМЕНТЫ
   ========================================================================== */

.content-body > *:first-child { margin-top: 0; }
.content-body > *:last-child  { margin-bottom: 0; }

/* --- Абзацы и строчные --- */
.content-body p {
  font-size: 15px;
  color: #1a1a1a;
  line-height: 1.5;
  margin: 0 0 15px 0;
}

.content-body span {
  /* как в родительском контексте */
}

/* Ссылки — без подчёркивания, цвет акцентный */
.content-body a {
  color: #3b0a60;
  text-decoration: none;
  transition: color 0.15s;
}
.content-body a:hover {
  color: #6a1b9a;
}

.content-body strong,
.content-body b {
  font-weight: bold;
}

.content-body em,
.content-body i {
  font-style: italic;
}

/* --- Заголовки --- */
.content-body h1 { font-size: 24px; font-weight: bold; color: #3b0a60; margin: 25px 0 15px; line-height: 1.3; }
.content-body h2 { font-size: 22px; font-weight: bold; color: #3b0a60; margin: 25px 0 15px; line-height: 1.3; }
.content-body h3 { font-size: 18px; font-weight: bold; color: #3b0a60; margin: 20px 0 12px; line-height: 1.3; }
.content-body h4 { font-size: 16px; font-weight: bold; color: #3b0a60; margin: 18px 0 10px; line-height: 1.3; }

/* --- Списки --- */
.content-body ul,
.content-body ol {
  margin: 0 0 15px 0;
  padding-left: 20px;
}
.content-body li {
  font-size: 15px;
  line-height: 1.5;
  color: #1a1a1a;
  margin-bottom: 5px;
}

/* --- Код --- */
.content-body code {
  font-family: Consolas, Monaco, monospace;
  font-size: 0.9em;
  background-color: #ebdcb2;
  color: #3b0a60;
  padding: 1px 5px;
  border-radius: 3px;
}

.content-body pre {
  background-color: #ebdcb2;
  color: #1a1a1a;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0 0 15px 0;
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
  line-height: 1.4;
}

/* --- Цитата --- */
.content-body blockquote {
  border-left: 3px solid #3b0a60;
  padding: 5px 15px;
  margin: 0 0 15px 0;
  color: #444;
  font-style: italic;
}

/* --- Таблицы --- */
.content-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 15px 0;
  background-color: #fff9e6;
  font-size: 14px;
}
.content-body th {
  background-color: #3b0a60;
  color: #fff9e6;
  font-weight: bold;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid #c9bca2;
}
.content-body td {
  padding: 10px 12px;
  border: 1px solid #c9bca2;
}
.content-body tr:nth-child(even) { background-color: #ebdcb2; }
.content-body tr:hover { background-color: #dfcd9d; }

/* --- Картинки --- */
.content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin: 0 0 15px 0;
}

/* --- Разделитель --- */
.content-body hr {
  border: none;
  border-top: 1px solid #c9bca2;
  margin: 20px 0;
}

/* ==========================================================================
   ВЫРАВНИВАНИЕ ТЕКСТА ПО ШИРИНЕ
   ==========================================================================
   Весь текстовый контент (кроме заголовков) внутри .content-body
   выравнивается по обоим краям.
   ========================================================================== */

.content-body p,
.content-body li,
.content-body blockquote,
.content-body td {
  text-align: justify;
}

/* Заголовки — по левому краю. */
.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4,
.content-body h5,
.content-body h6 {
  text-align: left;
}

/* Заголовки столбцов таблицы — по левому краю. */
.content-body th {
  text-align: left;
}

/* Утилитарные модификаторы выравнивания.
   !important нужен, чтобы перебить базовый justify у p/li/td/blockquote. */
.content-body .text-center {
  text-align: center !important;
}
.content-body .text-left {
  text-align: left !important;
}
.content-body .text-right {
  text-align: right !important;
}

/* ==========================================================================
   ОСОБЫЕ ЭЛЕМЕНТЫ КОНТЕНТА
   ========================================================================== */

/* Ссылка с особым оформлением — красная, жирная. */
.content-body .link-strong-red {
  color: #c62828;
  font-weight: bold;
  text-decoration: none;
}
.content-body .link-strong-red:hover {
  color: #8e0000;
}

/* Текст с особым оформлением — красный, жирный. */
.content-body .text-strong-red {
  color: #c62828;
  font-weight: bold;
}

/* --- Обтекание картинки текстом --- */
.content-body .content-image-float-left {
  float: left;
  width: 300px;
  max-width: 45%;
  height: auto;
  margin: 0 25px 15px 0;
  border-radius: 6px;
}
.content-body .content-image-float-right {
  float: right;
  width: 300px;
  max-width: 45%;
  height: auto;
  margin: 0 0 15px 25px;
  border-radius: 6px;
}
.content-body .content-clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* --- Картинка без обтекания --- */
.content-body .content-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0 0 15px 0;
}

/* ==========================================================================
   МОДИФИКАТОРЫ КАРТИНОК — отсечение по высоте / ширине
   ==========================================================================
   Работают как в слайдере:

   .content-image--contain   — картинка вписывается ЦЕЛИКОМ. По одной
                               из сторон остаются полосы фона.
   .content-image--cover     — картинка ЗАПОЛНЯЕТ контейнер. Лишнее
                               обрезается.
   ========================================================================== */

.content-body .content-image--contain {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  display: block;
  margin: 0 0 15px 0;
}

.content-body .content-image--cover {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  display: block;
  margin: 0 0 15px 0;
}

/* ==========================================================================
   НАВИГАЦИЯ СТРАНИЦ ПОД ТАБЛИЦЕЙ
   ========================================================================== */

.content-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
  margin-bottom: 15px;
  align-items: center;
}
.content-pagination a,
.content-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #c9bca2;
  border-radius: 4px;
  background-color: #fff9e6;
  color: #3b0a60;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}
.content-pagination a:hover {
  background-color: #dfcd9d;
}
.content-pagination .is-active {
  background-color: #3b0a60;
  color: #fff9e6;
  border-color: #3b0a60;
  font-weight: bold;
  cursor: default;
}
.content-pagination .is-disabled {
  opacity: 0.5;
  cursor: default;
}

/* ==========================================================================
   НОВОСТИ — единый компонент
   ==========================================================================
   Один и тот же .news-item используется и для новости с картинкой,
   и для новости только с текстом. Разница — только в наличии
   элемента .news-item__image. Если его нет — текст занимает всю ширину.
   ========================================================================== */

.news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid #e6dcbe;
}

.news-item:first-child {
  padding-top: 0;
}

.news-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Картинка — только если есть */
.news-item__image {
  flex: 0 0 180px;
  width: 180px;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}

.news-item__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Тело новости — занимает всё оставшееся место,
   или всю ширину, если картинки нет. */
.news-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.news-item__date {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.news-item__title {
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 8px 0;
  line-height: 1.3;
  text-align: left;
}

.news-item__title a {
  color: #3b0a60;
  text-decoration: none;
}
.news-item__title a:hover {
  color: #6a1b9a;
}

.news-item__text {
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0;
  text-align: justify;
}

/* Адаптация: на узких экранах картинка уходит наверх, текст под ней. */
@media (max-width: 640px) {
  .news-item {
    flex-direction: column;
    gap: 12px;
  }
  .news-item__image {
    flex: 0 0 auto;
    width: 100%;
    height: 180px;
  }
}