/* =============================================================
   RELATED NEWS — SAFE PATCH (desktop titles + hover effects)
   Подключать ПОСЛЕДНИМ. Фон/адаптив НЕ трогаем.
   ============================================================= */

/* 1) Десктоп: заголовок в карточках — максимум 2 строки, как на мобиле */
@media (min-width: 1000px) {
  .rel-news h2,
  .related-news-section .rel-news h2,
  .rel-news-block .rel-news h2,
  .related-news-wrapper .rel-news h2 {
    height: auto !important;
  }

  .rel-news h2 a,
  .related-news-section .rel-news h2 a,
  .rel-news-block .rel-news h2 a,
  .related-news-wrapper .rel-news h2 a {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 1.3;
    max-height: calc(1.3em * 2);
  }
}

/* 2) Плавный hover-эффект карточки: лёгкое “всплытие” и подсветка в цвет кнопки */
.related-news-section .rel-news,
.rel-news-block .rel-news,
.related-news-wrapper .rel-news {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform, box-shadow;
}

.related-news-section .rel-news:hover,
.rel-news-block .rel-news:hover,
.related-news-wrapper .rel-news:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(255, 126, 0, 0.35); /* #ff7e00 с прозрачностью */
}

/* 3) Мягкое затемнение постера при наведении (не влияет на мобилки) */
.related-news-section .rel-news .rel-news-image,
.rel-news-block .rel-news .rel-news-image,
.related-news-wrapper .rel-news .rel-news-image {
  position: relative;
  overflow: hidden;
}

.related-news-section .rel-news .rel-news-image::after,
.rel-news-block .rel-news .rel-news-image::after,
.related-news-wrapper .rel-news .rel-news-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);             /* изначально прозрачный */
  transition: background .25s ease;
  pointer-events: none;
}

.related-news-section .rel-news:hover .rel-news-image::after,
.rel-news-block .rel-news:hover .rel-news-image::after,
.related-news-wrapper .rel-news:hover .rel-news-image::after {
  background: rgba(0,0,0,0.18);          /* лёгкое затемнение при hover */
}

/* 4) Небольшая анимация увеличения постера (очень аккуратно) */
.related-news-section .rel-news .rel-news-image img,
.rel-news-block .rel-news .rel-news-image img,
.related-news-wrapper .rel-news .rel-news-image img {
  transition: transform .35s ease;
  will-change: transform;
}

.related-news-section .rel-news:hover .rel-news-image img,
.rel-news-block .rel-news:hover .rel-news-image img,
.related-news-wrapper .rel-news:hover .rel-news-image img {
  transform: scale(1.03);
}