/* =========================================================
   OZEON — ЗАГОЛОВОК НОВОСТЕЙ
   ========================================================= */


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


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

.news-item {
  position: relative;                               /* Положение элемента */

  left: 0;                                          /* Смещение по горизонтали */
  top: 0;                                           /* Смещение по вертикали */
  right: auto;                                      /* Отступ справа */

  width: 100%;                                      /* Ширина карточки */
  max-width: none;                                  /* Максимальная ширина */
  min-width: auto;                                  /* Минимальная ширина */

  min-height: 600px;                                /* Минимальная высота карточки */
  height: auto;                                     /* Высота по содержимому */

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

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

  display: flex;                                    /* Располагаем содержимое */
  gap: 0;                                           /* Расстояние между элементами */

  background: rgba(0, 0, 0, 0.20);                  /* Цвет фона */

  background-image: none;                           /* Фоновая картинка */
  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;                                 /* Скрываем выходящие элементы */
}


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

.news-item__image {
  position: relative;                               /* Положение элемента */

  left: 0;                                          /* Смещение по горизонтали */
  top: 0;                                           /* Смещение по вертикали */
  right: auto;                                      /* Отступ справа */

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

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

  border-radius: 5px;                               /* Скругление изображения */
  opacity: 1;                                       /* Прозрачность изображения */

  border: 0 solid transparent;                      /* Рамка изображения */
  box-shadow: none;                                 /* Тень изображения */

  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 > * {
  position: relative;                               /* Положение содержимого */
  z-index: 2;                                       /* Поверх затемнения */
}


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

.news-item__category {
  position: relative;                               /* Положение элемента */

  left: 0;                                          /* Смещение по горизонтали */
  top: 0;                                           /* Смещение по вертикали */
  right: auto;                                      /* Отступ справа */

  margin-top: 0;                                    /* Отступ сверху */
  margin-bottom: 6px;                               /* Отступ снизу */

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

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

  text-align: left;                                 /* Горизонтальное выравнивание */
  vertical-align: top;                              /* Вертикальное выравнивание */

  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 {
  position: relative;                               /* Положение элемента */

  left: 0;                                          /* Смещение по горизонтали */
  top: 0;                                           /* Смещение по вертикали */
  right: auto;                                      /* Отступ справа */

  margin-top: 0;                                    /* Отступ сверху */
  margin-bottom: 8px;                               /* Отступ снизу */

  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;                                 /* Горизонтальное выравнивание */
  vertical-align: top;                              /* Вертикальное выравнивание */

  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 {
  position: relative;                               /* Положение элемента */

  left: 0;                                          /* Смещение по горизонтали */
  top: 0;                                           /* Смещение по вертикали */
  right: auto;                                      /* Отступ справа */

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

  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;                                 /* Горизонтальное выравнивание */
  vertical-align: top;                              /* Вертикальное выравнивание */

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

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

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


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

.news-item__content {
  position: relative;                               /* Положение элемента */

  left: 0;                                          /* Смещение по горизонтали */
  top: 0;                                           /* Смещение по вертикали */
  right: auto;                                      /* Отступ справа */

  flex: 1;                                          /* Занимает оставшееся место */
  min-width: 0;                                     /* Разрешаем содержимому сжиматься */

  margin-left: 30px;                                /* Расстояние от изображения */

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


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

.news-item {
  transition:
    transform 250ms ease,                           /* Скорость подъёма и увеличения */
    box-shadow 250ms ease,                           /* Скорость изменения тени */
    border-color 250ms ease,                        /* Скорость изменения рамки */
    filter 250ms ease;                               /* Скорость осветления */
}

.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;                                 /* Расстояние от фильтров до новостей */
}


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


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

@media (max-width: 1200px) {

  .news-item {
    width: 100%;                                    /* Вся доступная ширина */
  }

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

}