/* ===================================================
   Стили страницы "Новости" (news.html)
   Адаптивная сетка без горизонтальной прокрутки
   =================================================== */

/* ===========================
   НАВИГАЦИЯ ДЛЯ ДИАПАЗОНА 768-1023px
   =========================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .header .header__nav-wrapper {
    justify-content: center !important;
    grid-column: span 7 !important;
  }
}

/* ===========================
   АДАПТИВНАЯ СЕТКА НОВОСТЕЙ
   Разное количество карточек в зависимости от ширины экрана
   =========================== */

/* ============================================================================
   ДИАПАЗОН 1440px И БОЛЬШЕ: 4 КАРТОЧКИ В РЯД
   ============================================================================ */

@media (min-width: 1440px) {
  /* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ для больших экранов - переопределяет все другие диапазоны */
  html body .content-placeholder .news-grid,
  html body .content-placeholder .news-grid[style],
  html body .content-placeholder .news-grid[style*="flex"],
  html body .content-placeholder .news-grid[style*="overflow"],
  body .content-placeholder .news-grid,
  body .content-placeholder .news-grid[style],
  body .content-placeholder .news-grid[style*="flex"],
  body .content-placeholder .news-grid[style*="overflow"],
  .content-placeholder .news-grid,
  .content-placeholder .news-grid[style],
  .content-placeholder .news-grid[style*="flex"],
  .content-placeholder .news-grid[style*="overflow"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(2rem, 2.5vw, 3rem) !important; /* Увеличены отступы сверху и снизу */
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
    flex-wrap: wrap !important;
    flex-direction: initial !important;
    justify-content: initial !important;
    align-items: initial !important;
    min-width: auto !important;
    grid-auto-flow: initial !important;
  }

  /* СБРОС ОГРАНИЧЕНИЯ ВЫСОТЫ ДЛЯ БОЛЬШИХ ЭКРАНОВ */
  .content-placeholder .news-grid-container {
    max-height: none !important;
    overflow: visible !important;
  }

  .content-placeholder .news-grid .news-card:nth-child(n+5) {
    display: block !important;
  }

  /* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ для карточек на больших экранах */
  html body .content-placeholder .news-grid .news-card,
  html body .content-placeholder .news-grid .news-card[style],
  html body .content-placeholder .news-grid .news-card.child-animate,
  html body .content-placeholder .news-grid .news-card.news-card,
  html body .content-placeholder .news-grid .news-card[style*="flex"],
  html body .content-placeholder .news-grid .news-card[style*="width"],
  body .content-placeholder .news-grid .news-card,
  body .content-placeholder .news-grid .news-card[style],
  body .content-placeholder .news-grid .news-card.child-animate,
  body .content-placeholder .news-grid .news-card.news-card,
  body .content-placeholder .news-grid .news-card[style*="flex"],
  body .content-placeholder .news-grid .news-card[style*="width"],
  .content-placeholder .news-grid .news-card,
  .content-placeholder .news-grid .news-card[style],
  .content-placeholder .news-grid .news-card.child-animate,
  .content-placeholder .news-grid .news-card.news-card,
  .content-placeholder .news-grid .news-card[style*="flex"],
  .content-placeholder .news-grid .news-card[style*="width"] {
    width: 100% !important;
    min-width: auto !important;
    max-width: none !important;
    flex: none !important;
    grid-column: auto !important;
    scroll-snap-align: none !important;
    display: block !important;
    position: static !important;
    transform: none !important;
  }

  /* Размеры текста для больших экранов */
  .news-card__title,
  .news-card-title {
    font-size: clamp(1.1rem, 1.3vw, 1.4rem) !important;
    line-height: 1.3 !important;
  }

  .news-card__meta time,
  .news-date {
    font-size: clamp(0.8rem, 0.9vw, 1rem) !important;
  }

  .news-card__excerpt {
    font-size: clamp(0.8rem, 0.9vw, 1rem) !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================================
   ДИАПАЗОН 1024px-1439px: 3 КАРТОЧКИ В РЯД
   ============================================================================ */

@media (min-width: 1024px) and (max-width: 1439px) {
  /* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ для средних экранов - переопределяет диапазон 576-1023px */
  html body .content-placeholder .news-grid,
  html body .content-placeholder .news-grid[style],
  html body .content-placeholder .news-grid[style*="flex"],
  html body .content-placeholder .news-grid[style*="overflow"],
  body .content-placeholder .news-grid,
  body .content-placeholder .news-grid[style],
  body .content-placeholder .news-grid[style*="flex"],
  body .content-placeholder .news-grid[style*="overflow"],
  .content-placeholder .news-grid,
  .content-placeholder .news-grid[style],
  .content-placeholder .news-grid[style*="flex"],
  .content-placeholder .news-grid[style*="overflow"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(1.8rem, 2.2vw, 2.5rem) !important; /* Увеличены отступы */
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
    flex-wrap: wrap !important;
    flex-direction: initial !important;
    justify-content: initial !important;
    align-items: initial !important;
    min-width: auto !important;
    grid-auto-flow: initial !important;
  }

  /* СБРОС ОГРАНИЧЕНИЯ ВЫСОТЫ ДЛЯ СРЕДНИХ ЭКРАНОВ */
  .content-placeholder .news-grid-container {
    max-height: none !important;
    overflow: visible !important;
  }

  .content-placeholder .news-grid .news-card:nth-child(n+5) {
    display: block !important;
  }

  /* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ для карточек на средних экранах */
  html body .content-placeholder .news-grid .news-card,
  html body .content-placeholder .news-grid .news-card[style],
  html body .content-placeholder .news-grid .news-card.child-animate,
  html body .content-placeholder .news-grid .news-card.news-card,
  html body .content-placeholder .news-grid .news-card[style*="flex"],
  html body .content-placeholder .news-grid .news-card[style*="width"],
  body .content-placeholder .news-grid .news-card,
  body .content-placeholder .news-grid .news-card[style],
  body .content-placeholder .news-grid .news-card.child-animate,
  body .content-placeholder .news-grid .news-card.news-card,
  body .content-placeholder .news-grid .news-card[style*="flex"],
  body .content-placeholder .news-grid .news-card[style*="width"],
  .content-placeholder .news-grid .news-card,
  .content-placeholder .news-grid .news-card[style],
  .content-placeholder .news-grid .news-card.child-animate,
  .content-placeholder .news-grid .news-card.news-card,
  .content-placeholder .news-grid .news-card[style*="flex"],
  .content-placeholder .news-grid .news-card[style*="width"] {
    width: 100% !important;
    min-width: auto !important;
    max-width: none !important;
    flex: none !important;
    grid-column: auto !important;
    scroll-snap-align: none !important;
    display: block !important;
    position: static !important;
    transform: none !important;
  }

  /* Размеры текста для средних экранов */
  .news-card__title,
  .news-card-title {
    font-size: clamp(1rem, 1.4vw, 1.3rem) !important;
    line-height: 1.3 !important;
  }

  .news-card__meta time,
  .news-date {
    font-size: clamp(0.75rem, 1vw, 0.9rem) !important;
  }

  .news-card__excerpt {
    font-size: clamp(0.75rem, 1vw, 0.9rem) !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================================
   ДИАПАЗОН 576px-1023px: 2 КАРТОЧКИ В РЯД
   ============================================================================ */

@media (min-width: 576px) and (max-width: 1023px) {
  body .content-placeholder .news-grid,
  body .content-placeholder .news-grid[style] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(1.5rem, 2vw, 2.2rem) !important; /* Увеличены отступы */
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    overflow-x: visible !important; /* КРИТИЧНО: убираем любую прокрутку */
    scroll-snap-type: none !important;
    flex-wrap: wrap !important;
    /* Дополнительная защита от flex стилей */
    flex-direction: initial !important;
    justify-content: initial !important;
  }

  body .content-placeholder .news-grid .news-card,
  body .content-placeholder .news-grid .news-card[style] {
    width: 100% !important;
    min-width: auto !important;
    max-width: none !important;
    flex: none !important;
    grid-column: auto !important;
    scroll-snap-align: none !important;
  }

  /* ДОПОЛНИТЕЛЬНАЯ ЗАЩИТА ОТ ПРОКРУТКИ ДЛЯ ДИАПАЗОНА 576-767px */
  .content-placeholder .news-grid-container,
  .content-placeholder .news-grid-container[style] {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Размеры текста для планшетов */
  .news-card__title,
  .news-card-title {
    font-size: clamp(0.9rem, 1.6vw, 1.2rem) !important;
    line-height: 1.3 !important;
  }

  .news-card__meta time,
  .news-date {
    font-size: clamp(0.7rem, 1.2vw, 0.85rem) !important;
  }

  .news-card__excerpt {
    font-size: clamp(0.7rem, 1.2vw, 0.85rem) !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================================
   КРИТИЧЕСКОЕ ПЕРЕОПРЕДЕЛЕНИЕ ДЛЯ ДИАПАЗОНА 768-1023px
   Максимальная специфичность для переопределения main.css
   ============================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  /* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ для переопределения main.css и других медиа-запросов */
  html body .content-placeholder .news-grid,
  html body .content-placeholder .news-grid[style],
  html body .content-placeholder .news-grid[style*="flex"],
  html body .content-placeholder .news-grid[style*="overflow"],
  body .content-placeholder .news-grid,
  body .content-placeholder .news-grid[style],
  body .content-placeholder .news-grid[style*="flex"],
  body .content-placeholder .news-grid[style*="overflow"],
  .content-placeholder .news-grid,
  .content-placeholder .news-grid[style],
  .content-placeholder .news-grid[style*="flex"],
  .content-placeholder .news-grid[style*="overflow"] {
    /* ПОЛНОЕ ПЕРЕОПРЕДЕЛЕНИЕ flex стилей из main.css и других медиа-запросов */
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(1.5rem, 2vw, 2.2rem) !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
    /* КРИТИЧНО: сброс всех flex свойств */
    flex-wrap: wrap !important;
    flex-direction: initial !important;
    justify-content: initial !important;
    align-items: initial !important;
    /* Сброс принудительной ширины из main.css */
    min-width: auto !important;
    /* Сброс grid свойств */
    grid-auto-flow: initial !important;
  }

  /* ПОКАЗЫВАЕМ ТОЛЬКО 4 КАРТОЧКИ (2 РЯДА) ДЛЯ ДИАПАЗОНА 768-1023px */
  /* Скрываем карточки после 4-й (начиная с 5-й) по умолчанию */
  .content-placeholder .news-grid .news-card:nth-child(n+5) {
    display: none !important;
  }

  /* Убираем ограничение высоты контейнера */
  .content-placeholder .news-grid-container {
    max-height: none !important;
    overflow: visible !important;
  }

  /* ДОПОЛНИТЕЛЬНАЯ ЗАЩИТА ОТ ПРОКРУТКИ */
  .content-placeholder .news-grid-container,
  .content-placeholder .news-grid-container[style] {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Показываем дополнительные карточки когда кнопка "Загрузить ещё" нажата */
  .content-placeholder.news-expanded .news-grid-container {
    max-height: none !important;
    overflow: visible !important;
  }

  .content-placeholder.news-expanded .news-grid .news-card:nth-child(n+5) {
    display: block !important;
  }

  /* МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ для карточек */
  html body .content-placeholder .news-grid .news-card,
  html body .content-placeholder .news-grid .news-card[style],
  html body .content-placeholder .news-grid .news-card.child-animate,
  html body .content-placeholder .news-grid .news-card.news-card,
  html body .content-placeholder .news-grid .news-card[style*="flex"],
  html body .content-placeholder .news-grid .news-card[style*="width"],
  body .content-placeholder .news-grid .news-card,
  body .content-placeholder .news-grid .news-card[style],
  body .content-placeholder .news-grid .news-card.child-animate,
  body .content-placeholder .news-grid .news-card.news-card,
  body .content-placeholder .news-grid .news-card[style*="flex"],
  body .content-placeholder .news-grid .news-card[style*="width"],
  .content-placeholder .news-grid .news-card,
  .content-placeholder .news-grid .news-card[style],
  .content-placeholder .news-grid .news-card.child-animate,
  .content-placeholder .news-grid .news-card.news-card,
  .content-placeholder .news-grid .news-card[style*="flex"],
  .content-placeholder .news-grid .news-card[style*="width"] {
    /* ПОЛНОЕ ПЕРЕОПРЕДЕЛЕНИЕ flex стилей карточек из main.css */
    flex: none !important;
    width: 100% !important;
    min-width: auto !important;
    max-width: none !important;
    grid-column: auto !important;
    scroll-snap-align: none !important;
    /* Дополнительная защита */
    display: block !important;
    position: static !important;
    transform: none !important;
  }

  /* Размеры текста для диапазона 768-1023px */
  .news-card__title,
  .news-card-title {
    font-size: clamp(0.9rem, 1.6vw, 1.2rem) !important;
    line-height: 1.3 !important;
  }

  .news-card__meta time,
  .news-date {
    font-size: clamp(0.7rem, 1.2vw, 0.85rem) !important;
  }

  .news-card__excerpt {
    font-size: clamp(0.7rem, 1.2vw, 0.85rem) !important;
    line-height: 1.5 !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .featured-news__excerpt {
    display: none;
  }
  .featured-news__date {
    color: #fff;
  }
  .featured-news__title {
    font-size: clamp(1.2rem, 2.6vw, 3rem) !important;
  }
  .featured-news__cta {
    padding: 10px 15px;
    font-size: clamp(0.8rem, 1vw, 1.2rem);
  }
  .filter-btn {
    padding: 8px 12px;
    font-size: 0.7rem;
  }
  .filter-btn {
    border-radius: 5px;
  }
  .newsletter-card {
    padding: clamp(3rem, 7vw, 13rem);
    max-width: 500px;
    margin: 2em auto;

  }
  .newsletter-section {
    max-width: 100%;
    padding: 0;
  }
  .search-box input {
    width: 90%;
    font-size: clamp(0.8rem, 1vw, 1.3rem);
    border-radius: 5px;
  }
  .news-filter {
    margin: 0 auto 2em;
  }
  .header__cta-wrapper.span-2, .header__cta-wrapper.span-3 {
    grid-column: span 10 !important;
  }
  
}

@media (min-width: 320px) and (max-width: 575px) {
  .featured-news__excerpt {
    display: none;
  }
  .featured-news__date {
    color: #fff;
  }
  .featured-news__title {
    font-size: clamp(1.1rem, 1.3vw, 1.5rem) !important;
  }
  .featured-news__cta {
    padding: 10px 15px;
    font-size: clamp(0.8rem, 1vw, 1.2rem);
  }
  .filter-btn {
    padding: 8px 5px;
    font-size: 0.7rem;
  }
  .filter-btn {
    border-radius: 5px;
  }

  .newsletter-card {
    padding: 20px;
    max-width: 300px;
    margin: 2em auto;

  }
  .newsletter-section {
    max-width: 100%;
    padding: 0;
  }
  .search-box input {
    width: 90%;
    font-size: clamp(0.8rem, 1vw, 1.3rem);
    border-radius: 5px;
  }
  .news-filter {
    margin: 0 auto 2em;
  }
}
/* ============================================================================
   ДИАПАЗОН МЕНЕЕ 576px: 1 КАРТОЧКА В РЯД
   ============================================================================ */

@media (max-width: 575px) {
  body .content-placeholder .news-grid,
  body .content-placeholder .news-grid[style] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important; /* Увеличены отступы */
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    flex-wrap: wrap !important;
  }

  body .content-placeholder .news-grid .news-card,
  body .content-placeholder .news-grid .news-card[style] {
    width: 100% !important;
    min-width: auto !important;
    max-width: none !important;
    flex: none !important;
    grid-column: auto !important;
    scroll-snap-align: none !important;
  }

  /* ДОПОЛНИТЕЛЬНАЯ ЗАЩИТА ОТ ПРОКРУТКИ ДЛЯ ДИАПАЗОНА ДО 575px */
  .content-placeholder .news-grid-container,
  .content-placeholder .news-grid-container[style] {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Размеры текста для мобильных */
  .news-card__title,
  .news-card-title {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }

  .news-card__meta time,
  .news-date {
    font-size: 0.8rem !important;
  }

  .news-card__excerpt {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================================
   ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ ДИАПАЗОНОВ
   ============================================================================ */

/* КРИТИЧЕСКАЯ ИЗОЛЯЦИЯ: Убираем все flex-стили от JavaScript и main.css */
/* Высокая специфичность для переопределения inline стилей */
body .content-placeholder .news-grid .news-card,
body .content-placeholder .news-grid .news-card.child-animate,
body .content-placeholder .news-grid .news-card.news-card,
body .content-placeholder .news-grid .news-card[style] {
  display: block !important;
  flex: none !important;
  flex-wrap: none !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  scroll-snap-align: none !important;
  /* Дополнительная защита от залипания стилей */
  position: static !important;
  transform: none !important;
}

/* ДОПОЛНИТЕЛЬНАЯ ЗАЩИТА ОТ JAVASCRIPT INLINE СТИЛЕЙ */
/* Принудительное переопределение любых inline стилей */
.content-placeholder .news-grid[style*="flex"],
.content-placeholder .news-grid[style*="overflow"],
.content-placeholder .news-card[style*="flex"],
.content-placeholder .news-card[style*="width"] {
  display: grid !important;
  flex: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
}

/* КЛАССЫ ДЛЯ ПРИНУДИТЕЛЬНОГО СБРОСА INLINE СТИЛЕЙ */
.news-grid-reset {
  display: grid !important;
  flex: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  flex-wrap: wrap !important;
  flex-direction: initial !important;
  justify-content: initial !important;
  align-items: initial !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: auto !important;
  grid-auto-flow: initial !important;
}

.news-card-reset {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  min-width: auto !important;
  max-width: none !important;
  grid-column: auto !important;
  scroll-snap-align: none !important;
  position: static !important;
  transform: none !important;
}

/* Контейнер новостей */
.news-grid-container {
  overflow: visible !important;
  width: 100% !important;
  /* Принудительное обновление при resize */
  contain: layout style !important;
}

/* Принудительный сброс всех flex/scroll стилей при любом viewport */
/* Универсальный селектор для news.html (без data-page) */
body:not([data-page]) .content-placeholder .news-grid,
.content-placeholder .news-grid {
  display: grid !important;
  flex-direction: initial !important;
  justify-content: initial !important;
  align-items: initial !important;
  overflow: visible !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
  /* Сброс возможных inline стилей */
  width: auto !important;
  max-width: none !important;
  min-width: auto !important;
}

/* Базовые стили карточек остаются из main.css */
.news-card {
  height: auto !important;
  min-height: auto !important;
}

/* Адаптивная высота изображений */
.news-card__image {
  height: clamp(10rem, 12vw, 14rem) !important;
}

/* ============================================================================
   КНОПКА ЗАГРУЗКИ НОВОСТЕЙ
   ============================================================================ */

/* Универсальный селектор для news.html (без data-page) */
body:not([data-page]) .load-more-section,
.load-more-section {
  width: 100%;
  max-width: 100%;
  margin: 60px auto 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* Адаптивные отступы для кнопки загрузки */
@media (min-width: 1024px) and (max-width: 1599px) {
  body:not([data-page]) .load-more-section,
  .load-more-section {
    margin: clamp(2rem, 2.7vw, 3.75rem) auto 0 auto;
    padding: 0 40px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body:not([data-page]) .load-more-section,
  .load-more-section {
    margin: 30px auto 0 auto;
    padding: 0 20px;
  }
}

/* ============================================================================
   ПОРЯДОК НОВОСТЕЙ: ПЕРВАЯ (НОВАЯ) НОВОСТЬ ВНАЧАЛЕ
   JavaScript сортирует по дате DESC: dateB - dateA
   ============================================================================ */

/* Порядок: Карточка №1 (самая новая), потом №2 (старше), потом №3...
   Новости идут от новой к старой (ПЕРВАЯ = самая свежая)
   БЕЗ ПРОКРУТКИ - стандартный grid layout с переносом строк */