/* =========================================================
   Новости
   Макет: Figma → Final → «Новости / Статья» — только фрейм 1920 (список). Фрейм 1200 у соседних страниц —
   уменьшенный 1920 (× 0.625), поэтому размеры идут через --s (пиксель фрейма 1920, style.css).
   Планшет и телефон — по логике плиток «Проекты» 640 / 320, как у «Каталога»: две колонки и одна.
   Заголовки, подписи, тексты и отступы между секциями — общие классы и токены из style.css.
   ========================================================= */

/* ---------- Заголовок: крошки и текст с сайта. В макете вместо крошек подпись «Новости и события»
   и фильтры «Тип / Дата» — на сайте их нет ---------- */

.news-head { padding-top: var(--head-pt); }

.news-head__intro { grid-column: 1 / span 9; }

.news-head__title { max-width: calc(1160 * var(--s)); } /* две строки, как во фрейме и на сайте */

/* =========================================================
   Лента: журнальная раскладка макета.
   Четыре колонки по 435 с центральным зазором в два гаттера — та же ось, что у плиток «Каталога» и «Проектов»;
   ось — нулевая третья колонка сетки. Карточки встают по образцу макета циклом из десяти:
   две большие / три малые / две малые / широкая и малая / одна малая. Линии рядов — на всю ширину.
   Новая новость добавляется первым <li> — остальные сдвигаются по образцу сами.
   ========================================================= */

.news { margin-top: var(--gap-title); }

.news__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 0 minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gutter);
  margin: 0;
  padding: 0 var(--margin);
  list-style: none;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden; /* линии рядов выходят за карточку на всю ширину, обрезаем по странице */
  overflow: clip;
}

.news-card {
  position: relative;
  padding: calc(30 * var(--s)) 0;
}

/* Линия под рядом — на всю ширину страницы, даже если в ряду есть пустые ячейки */
.news-card::after {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  bottom: -1px;
  height: 1px;
  background: var(--c-line);
}

.news-card__img {
  display: block;
  aspect-ratio: 435 / 299; /* кадр малой и широкой карточки макета; фото с сайта обрезаются по центру */
  overflow: hidden;
  background: var(--c-soft);
}
.news-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.news-card:hover .news-card__img img { transform: scale(1.04); }

/* Заголовок, описание с сайта и дата; стрелка — в правом верхнем углу, в поток не входит */
.news-card__body {
  position: relative;
  margin-top: calc(15 * var(--s));
}

.news-card__title { padding-right: calc(var(--btn-h) + 20px); }
.news-card__title a { transition: color 0.2s; }
.news-card__title a:hover { color: var(--c-text); }

.news-card__go {
  position: absolute;
  top: 0;
  right: 0;
}

.news-card__text { margin-top: calc(15 * var(--s)); }

.news-card__date {
  display: block;
  margin-top: calc(10 * var(--s));
  font-size: var(--fs-xs);
  line-height: 1.33;
  color: var(--c-text);
}

/* Десктоп: места карточек по фрейму 1920 (цикл из десяти) */
@media (min-width: 1025px) {
  .news-card:nth-child(10n + 1) { grid-column: 1 / 3; }  /* большая слева */
  .news-card:nth-child(10n + 2) { grid-column: 4 / 6; }  /* большая справа */
  .news-card:nth-child(10n + 3) { grid-column: 1; }
  .news-card:nth-child(10n + 4) { grid-column: 2; }
  .news-card:nth-child(10n + 5) { grid-column: 5; }
  .news-card:nth-child(10n + 6) { grid-column: 2; }
  .news-card:nth-child(10n + 7) { grid-column: 4; }
  .news-card:nth-child(10n + 8) { grid-column: 1 / 3; }  /* широкая слева */
  .news-card:nth-child(10n + 9) { grid-column: 5; }
  .news-card:nth-child(10n + 10) { grid-column: 4; }

  .news-card:nth-child(10n + 1) .news-card__img,
  .news-card:nth-child(10n + 2) .news-card__img { aspect-ratio: 900 / 558; } /* кадр больших карточек макета */
}

/* =========================================================
   Планшет 640–1024: две колонки, почти квадратное фото, стрелка под датой (как плитки «Проектов»)
   ========================================================= */
@media (max-width: 1024px) {
  .news-head__intro { grid-column: 1 / -1; }

  .news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(2 * var(--margin));
  }

  .news-card { padding: 15px 0; }
  .news-card__img { aspect-ratio: 290 / 300; }
  .news-card__body {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
  }
  .news-card__title { padding-right: 0; }
  .news-card__text { margin-top: 15px; }
  .news-card__date { margin-top: 10px; }
  .news-card__go {
    position: static;
    order: 4;
    align-self: flex-start;
    margin-top: 15px;
  }
}

/* =========================================================
   Мобильный ≤639: одна колонка, квадратное фото
   ========================================================= */
@media (max-width: 639px) {
  .news__grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .news-card__img { aspect-ratio: 1 / 1; }
}