/* =========================================================
   OZEON — КАРТОЧКА НОВОСТИ
   ========================================================= */


/* ===== ОСНОВНЫЕ НАСТРОЙКИ КАРТОЧКИ ===== */

.news-item {
  position: relative;                               /* Основа карточки */

  width: 100%;                                      /* Ширина карточки */
  height: 600px;                                    /* Минимальная высота */

  margin-top: 0;                                    /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 50px;                              /* Отступ снизу */
  margin-left: 0;                                   /* Отступ слева */

  padding: 40px;                                    /* Внутренний отступ */
  box-sizing: border-box;                           /* Учитываем padding */

  display: flex;                                    /* Располагаем блоки */
  flex-direction: column;                           /* Верхняя часть и content сверху вниз */
  gap: 0;                                           /* Расстояние между блоками */

  background-image: linear-gradient(to top, #00000099, #00000000); /* Картинка с градиентом */
  background-size: cover;                           /* Размер картинки */
  background-position: center;                      /* Положение картинки */
  background-repeat: no-repeat;                     /* Без повторения */

  border: 1px solid rgba(0, 255, 255, 0.10);       /* Рамка */
  border-radius: 10px;                              /* Скругление */

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);       /* Тень */

  opacity: 1;                                       /* Прозрачность */
  overflow: hidden;                                 /* Скрываем выходящие элементы */

  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    border-color 250ms ease,
    filter 250ms ease;
}


/* ===== ВЕРХНЯЯ ЧАСТЬ НОВОСТИ ===== */

.news-item__top {
  width: 100%;                                      /* Вся ширина */

  display: flex;                                    /* Картинка + информация */
  align-items: flex-start;                          /* Выравнивание сверху */
  gap: 0;                                           /* Расстояние между элементами */
}


/* ===== ИЗОБРАЖЕНИЕ НОВОСТИ ===== */

.news-item__image {
  width: 360px;                                     /* Ширина изображения */
  height: 270px;                                    /* Высота изображения */

  object-fit: cover;                                /* Заполнение области */
  object-position: center;                          /* Положение изображения */

  margin-top: 0;                                    /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 0;                                 /* Отступ снизу */
  margin-left: 0;                                   /* Отступ слева */

  border-radius: 5px;                               /* Скругление */
  border: 1px solid #ffffff;                        /* Рамка */

  opacity: 1;                                       /* Прозрачность */
  box-shadow: none;                                 /* Тень */

  flex-shrink: 0;                                   /* Не сжимаем изображение */

  visibility: visible;                              /* Видимость */
}


/* ===== ЗАТЕМНЕНИЕ ФОНА КАРТОЧКИ ===== */

.news-item::before {
  content: '';                                      /* Создаём слой */

  position: absolute;                               /* Положение слоя */
  inset: 0;                                         /* На всю карточку */

  background: rgba(0, 0, 0, 0.25);                  /* Затемнение */

  pointer-events: none;                             /* Не мешает содержимому */
  z-index: 1;                                       /* Над фоном */
}


/* ===== СОДЕРЖИМОЕ КАРТОЧКИ ===== */

.news-item__top,
.news-item__content-text {
  position: relative;                               /* Позиционирование */
  z-index: 2;                                       /* Над затемнением */
}


/* ===== ПРАВАЯ ЧАСТЬ КАРТОЧКИ ===== */

.news-item__content {
  flex: 1;                                          /* Занимает оставшееся место */
  min-width: 0;                                     /* Разрешаем сжатие */

  margin-top: 0;                                    /* Общий отступ сверху */
  margin-right: 0;                                  /* Общий отступ справа */
  margin-bottom: 0;                                 /* Общий отступ снизу */
  margin-left: 0;                                   /* Общий отступ слева */

  display: flex;                                    /* Располагаем элементы */
  flex-direction: column;                           /* Сверху вниз */
  align-items: flex-start;                          /* По левому краю */
}


/* ===== КАТЕГОРИЯ НОВОСТИ ===== */

.news-item__category {
  margin-top: 0;                                    /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 5px;                               /* Отступ снизу */
  margin-left: 40px;                                /* Отступ слева */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 18px;                                  /* Размер текста */
  font-weight: 700;                                 /* Толщина текста */
  font-style: normal;                               /* Стиль текста */

  color: #fa023c;                                   /* Основной цвет */
  opacity: 1;                                       /* Прозрачность */

  text-align: left;                                 /* Выравнивание */
  line-height: 1.2;                                 /* Высота строки */
  letter-spacing: 0;                                /* Расстояние между буквами */
  word-spacing: 0;                                  /* Расстояние между словами */

  text-transform: none;                             /* Регистр */
  text-decoration: none;                            /* Оформление */
  text-shadow: none;                                /* Тень */

  visibility: visible;                              /* Видимость */
}


/* ===== ЦВЕТА КАТЕГОРИЙ ===== */

.news-item__category[data-category="news"] {
  color: #03fc41;
}

.news-item__category[data-category="events"] {
  color: #3b82f6;
}

.news-item__category[data-category="updates"] {
  color: #fa023c;
}

.news-item__category[data-category="promotions"] {
  color: #22c55e;
}

.news-item__category[data-category="promo"] {
  color: #a855f7;
}


/* ===== ЗАГОЛОВОК НОВОСТИ ===== */

.news-item__title {
  margin-top: 0;                                    /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 5px;                               /* Отступ снизу */
  margin-left: 40px;                                /* Отступ слева */

  width: auto;                                      /* Ширина */
  max-width: none;                                  /* Максимальная ширина */
  min-width: 0;                                     /* Минимальная ширина */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 30px;                                  /* Размер текста */
  font-weight: 700;                                 /* Толщина текста */
  font-style: normal;                               /* Стиль текста */

  color: #ffffff;                                   /* Цвет текста */
  opacity: 1;                                       /* Прозрачность */

  text-align: left;                                 /* Выравнивание */
  line-height: 1.2;                                 /* Высота строки */
  letter-spacing: 0;                                /* Расстояние между буквами */
  word-spacing: 0;                                  /* Расстояние между словами */

  text-transform: none;                             /* Регистр */
  text-decoration: none;                            /* Оформление */
  text-shadow: none;                                /* Тень */

  display: -webkit-box;                             /* Ограничение строк */
  -webkit-box-orient: vertical;                     /* Вертикальное направление */
  -webkit-line-clamp: 3;                            /* Максимум 3 строки */
  overflow: hidden;                                 /* Скрываем лишний текст */

  visibility: visible;                              /* Видимость */
}


/* ===== ДАТА НОВОСТИ ===== */

.news-item__date {
  margin-top: 0;                                    /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 5;                                 /* Отступ снизу */
  margin-left: 40px;                                /* Отступ слева */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 16px;                                  /* Размер текста */
  font-weight: 400;                                 /* Толщина текста */
  font-style: normal;                               /* Стиль текста */

  color: rgba(255, 255, 255, 0.50);                 /* Цвет текста */
  opacity: 1;                                       /* Прозрачность */

  text-align: left;                                 /* Выравнивание */
  line-height: 1.2;                                 /* Высота строки */
  letter-spacing: 0;                                /* Расстояние между буквами */
  word-spacing: 0;                                  /* Расстояние между словами */

  text-transform: none;                             /* Регистр */
  text-decoration: none;                            /* Оформление */
  text-shadow: none;                                /* Тень текста */

  visibility: visible;                              /* Видимость */
}


/* ===== ОСНОВНОЕ СОДЕРЖИМОЕ НОВОСТИ ===== */

.news-item__content-text {
  width: 100%;                                      /* Ширина содержимого */
  box-sizing: border-box;                           /* Учитываем размеры */

  flex: 1;                                          /* Занимаем всё свободное место */
  min-height: 0;                                    /* Разрешаем уменьшение блока */
  overflow: hidden;                                 /* Скрываем лишнее содержимое */

  margin-top: 30px;                                 /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 0;                              /* Отступ снизу */
  margin-left: 0;                                   /* Отступ слева */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 17px;                                  /* Размер текста */
  font-weight: 400;                                 /* Толщина текста */
  font-style: normal;                               /* Стиль текста */

  color: rgba(255, 255, 255, 0.80);                 /* Цвет текста */
  opacity: 1;                                       /* Прозрачность */

  text-align: justify;                                /* Выравнивание по двум краям */
  line-height: 1.55;                                 /* Высота строки */
  letter-spacing: 0;                                /* Расстояние между буквами */
  word-spacing: 0;                                  /* Расстояние между словами */

  text-transform: none;                             /* Регистр */
  text-decoration: none;                            /* Оформление */
  text-shadow: none;                                /* Тень */

  visibility: visible;                              /* Видимость */
}


/* ===== АБЗАЦЫ ===== */

.news-item__content-text p {
  margin-top: 0;                                    /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 15px;                              /* Отступ снизу */
  margin-left: 0;                                   /* Отступ слева */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 17px;                                  /* Размер текста */
  font-weight: 400;                                 /* Толщина текста */
  font-style: normal;                               /* Стиль текста */

  color: rgba(255, 255, 255, 0.80);                 /* Цвет текста */
  opacity: 1;                                       /* Прозрачность */

  text-align: left;                                 /* Выравнивание */
  line-height: 1.55;                                /* Высота строки */
  letter-spacing: 0;                                /* Расстояние между буквами */
  word-spacing: 0;                                  /* Расстояние между словами */

  text-transform: none;                             /* Регистр */
  text-decoration: none;                            /* Оформление */
  text-shadow: none;                                /* Тень */
}


/* ===== ЗАГОЛОВОК H2 ===== */

.news-item__content-text h2 {
  margin-top: 30px;                                 /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 12px;                              /* Отступ снизу */
  margin-left: 0;                                   /* Отступ слева */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 26px;                                  /* Размер текста */
  font-weight: 700;                                 /* Толщина текста */
  font-style: normal;                               /* Стиль текста */

  color: #ffffff;                                   /* Цвет текста */
  opacity: 1;                                       /* Прозрачность */

  text-align: left;                                 /* Выравнивание */
  line-height: 1.2;                                 /* Высота строки */
  letter-spacing: 0;                                /* Расстояние между буквами */
  word-spacing: 0;                                  /* Расстояние между словами */

  text-transform: none;                             /* Регистр */
  text-decoration: none;                            /* Оформление */
  text-shadow: none;                                /* Тень */

  visibility: visible;                              /* Видимость */
}


/* ===== ЗАГОЛОВОК H3 ===== */

.news-item__content-text h3 {
  margin-top: 25px;                                 /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 10px;                              /* Отступ снизу */
  margin-left: 0;                                   /* Отступ слева */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 21px;                                  /* Размер текста */
  font-weight: 700;                                 /* Толщина текста */
  font-style: normal;                               /* Стиль текста */

  color: #ffffff;                                   /* Цвет текста */
  opacity: 1;                                       /* Прозрачность */

  text-align: left;                                 /* Выравнивание */
  line-height: 1.25;                                /* Высота строки */
  letter-spacing: 0;                                /* Расстояние между буквами */
  word-spacing: 0;                                  /* Расстояние между словами */

  text-transform: none;                             /* Регистр */
  text-decoration: none;                            /* Оформление */
  text-shadow: none;                                /* Тень */

  visibility: visible;                              /* Видимость */
}


/* ===== НЕУПОРЯДОЧЕННЫЙ СПИСОК ===== */

.news-item__content-text ul {
  margin-top: 10px;                                 /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 15px;                              /* Отступ снизу */
  margin-left: 0;                                   /* Отступ слева */

  padding-left: 25px;                               /* Отступ списка */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 17px;                                  /* Размер текста */
  font-weight: 400;                                 /* Толщина текста */

  color: rgba(255, 255, 255, 0.80);                 /* Цвет текста */
  line-height: 1.55;                                /* Высота строки */
}


/* ===== УПОРЯДОЧЕННЫЙ СПИСОК ===== */

.news-item__content-text ol {
  margin-top: 10px;                                 /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 15px;                              /* Отступ снизу */
  margin-left: 0;                                   /* Отступ слева */

  padding-left: 25px;                               /* Отступ списка */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 17px;                                  /* Размер текста */
  font-weight: 400;                                 /* Толщина текста */

  color: rgba(255, 255, 255, 0.80);                 /* Цвет текста */
  line-height: 1.55;                                /* Высота строки */
}


/* ===== ЭЛЕМЕНТ СПИСКА ===== */

.news-item__content-text li {
  margin-top: 0;                                    /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 6px;                               /* Отступ снизу */
  margin-left: 0;                                   /* Отступ слева */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 17px;                                  /* Размер текста */
  font-weight: 400;                                 /* Толщина текста */
  font-style: normal;                               /* Стиль текста */

  color: rgba(255, 255, 255, 0.80);                 /* Цвет текста */
  line-height: 1.55;                                /* Высота строки */
}


/* ===== ВЫДЕЛЕННЫЙ ТЕКСТ ===== */

.news-item__content-text strong {
  font-weight: 700;                                 /* Толщина текста */
  color: #ffffff;                                   /* Цвет текста */
}


/* ===== КУРСИВ ===== */

.news-item__content-text em {
  font-style: italic;                               /* Курсив */
}


/* ===== ССЫЛКИ ===== */

.news-item__content-text a {
  color: #03e3fc;                                   /* Цвет ссылки */
  text-decoration: none;                            /* Без подчёркивания */
  transition: color 200ms ease;                     /* Плавное изменение цвета */
}


.news-item__content-text a:hover {
  color: #ffffff;                                   /* Цвет при наведении */
  text-decoration: underline;                       /* Подчёркивание */
}


/* ===== ЦИТАТА ===== */

.news-item__content-text blockquote {
  margin-top: 20px;                                 /* Отступ сверху */
  margin-right: 0;                                  /* Отступ справа */
  margin-bottom: 20px;                              /* Отступ снизу */
  margin-left: 0;                                   /* Отступ слева */

  padding-top: 15px;                                /* Внутренний отступ сверху */
  padding-right: 20px;                              /* Внутренний отступ справа */
  padding-bottom: 15px;                             /* Внутренний отступ снизу */
  padding-left: 20px;                               /* Внутренний отступ слева */

  border-left: 3px solid #03e3fc;                   /* Левая рамка */

  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 17px;                                  /* Размер текста */
  font-weight: 400;                                 /* Толщина текста */
  font-style: italic;                               /* Курсив */

  color: rgba(255, 255, 255, 0.70);                 /* Цвет текста */
  line-height: 1.55;                                /* Высота строки */

  background: rgba(255, 255, 255, 0.03);            /* Фон цитаты */
}


/* ===== ИЗОБРАЖЕНИЯ ВНУТРИ НОВОСТИ ===== */

.news-item__content-text img {
  display: block;                                   /* Отдельный блок */

  width: auto;                                      /* Автоматическая ширина */
  max-width: 100%;                                  /* Не выходит за пределы */
  height: auto;                                     /* Автоматическая высота */

  margin-top: 20px;                                 /* Отступ сверху */
  margin-right: auto;                               /* Выравнивание */
  margin-bottom: 20px;                              /* Отступ снизу */
  margin-left: auto;                                /* Выравнивание */

  border-radius: 5px;                               /* Скругление */
}


/* ===== ЭФФЕКТ ПРИ НАВЕДЕНИИ ===== */

.news-item:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45);
  border-color: rgba(3, 227, 252, 0.35);
  filter: brightness(1.05);
}


/* ===== РАССТОЯНИЕ ДО НОВОСТЕЙ ===== */

.news-list {
  margin-top: 30px;                                 /* Расстояние от фильтров */
}

/* ===== РАСКРЫТАЯ НОВОСТЬ ===== */

.news-item.is-expanded {
  height: auto;                                     /* Показываем всю высоту новости */
}


.news-item.is-expanded .news-item__content-text {
  overflow: visible;                                /* Показываем всё содержимое */
}


/* =========================================================
   АДАПТАЦИЯ КАРТОЧКИ
   ========================================================= */


/* ===== НОУТБУКИ ===== */

@media (max-width: 1200px) {

  .news-item {
    width: 100%;
  }


  .news-item__image {
    width: 230px;
    height: 150px;
  }

}