/* Общие стили контейнера карусели */
.carousel-news-container {
  max-width: 1400px;
  margin: 10px auto;
  position: relative;
  /* Убираем padding, чтобы не мешать расчетам на мобильных */
  padding: 0;
  box-sizing: border-box;
}

/* Видимая область карусели */
.carousel-viewport {
  width: 100%;
  overflow: hidden;
  /* Обязательно скрываем все, что не помещается */
  box-sizing: border-box;
}

/* "Лента" со всеми элементами карусели */
.carousel-track {
  display: flex;
  will-change: transform;
  /* Подсказка браузеру для плавной анимации */
  background-color: transparent;
}

/* Стили для одного элемента карусели (ПК версия) */
.carousel-item {
  /* 5 блоков в ряд с 4 отступами по 16px */
  flex: 0 0 calc((100% - 64px) / 5);
  margin-right: 16px;
  background-color: white;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  /* Важно для правильных расчетов ширины */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.carousel-item:hover {
  background-color: rgba(105, 187, 241, 0.5);
}

.carousel-item:last-child {
  margin-right: 0;
}

.carousel-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

.carousel-item h3 {
  margin-top: 5px;
  margin-bottom: 4px;
  font-size: 15px;
}

.carousel-item p {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 13px;
}


/* Кнопки управления (ПК версия) */
.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
}

.carousel-btn {
  background-color: #fcfbf7;
  color: #b95425;
  border: none;
  padding: 2px 18px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.3s;
  backface-visibility: hidden;
}

.carousel-btn:hover {
  background-color: #4631ad;
}


/* --- АДАПТИВНАЯ ЧАСТЬ --- */

/* Планшеты (4 элемента в ряд) */
@media (max-width: 1200px) {
  .carousel-item {
    flex: 0 0 calc((100% - 48px) / 4);
  }
}

/* Планшеты (3 элемента в ряд) */
@media (max-width: 900px) {
  .carousel-item {
    flex: 0 0 calc((100% - 32px) / 3);
  }
}


/*
 * ======================================================
 * === МОБИЛЬНЫЕ УСТРОЙСТВА (ключевые исправления) ===
 * ======================================================
 */
@media (max-width: 600px) {

  /*
   * Задача: показывать ОДИН элемент, отцентрированный,
   * без видимых частей соседних элементов.
  */

  .carousel-item {
    /* 1. Заставляем элемент занять 100% ширины видимой области */
    flex: 0 0 100%;

    /* 2. Обнуляем внешний отступ, т.к. элементы больше не стоят вплотную в видимой области */
    margin-right: 0;

    /* 3. Чтобы контент не прилипал к краям экрана, добавляем
       внутренние отступы (padding) по бокам.
       Например, по 16px с каждой стороны.
    */
    padding-left: 16px;
    padding-right: 16px;

    /* Сохраняем вертикальные отступы, если они нужны */
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Скрываем кнопки навигации, так как используется свайп */
  .carousel-controls {
    display: none;
  }
}