/* ==========================================================================
   news.css — секция «Новости / Последние новости» (БАЗА 1920, БЕЗ @media).
   Figma: Section 9 / 79:2297. get_design_context 79:2297.
   py 120, gap 32. Заголовок (400) Cochin 48/56 + пилюля «Все новости». 4 карточки
   (gap 16): фото 100%×299.5 r10.96 + дата 16/24 op .6 + заголовок Inter Tight 18/28
   + «Читать далее» Inter Tight Medium 16/24 accent.
   ========================================================================== */

.s-news {
  background: var(--c-bg);
  color: var(--c-text);
}

.s-news__inner {
  padding-block: 120px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---------- Заголовок + ссылка (79:2298) ---------- */
.s-news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.s-news__title {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.s-news__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text);
}

/* ---------- Карточки (79:2307): 4 в ряд, gap 16 ---------- */
.s-news__cards {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-news__card {
  flex: 1 0 0;
  min-width: 0;
}

.s-news__card-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: inherit;
}

.s-news__image {
  width: 100%;
  height: 299.543px;
  border-radius: 10.959px;
  object-fit: cover;
}

.s-news__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.s-news__date {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-text);
  opacity: var(--o-readmore);
}

.s-news__card-title {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  text-transform: none;
  color: var(--c-text);
}

.s-news__more {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-accent);
}
.s-news__more .icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}
.s-news__card-link:hover .s-news__more {
  text-decoration: underline;
}

/* Полноширинная кнопка «Все новости» — только для ≤360 (см. @media ниже) */
.s-news__all-mobile {
  display: none;
}

/* ==========================================================================
   Адаптив news
   ========================================================================== */
@media (max-width: 1919px) {
  /* Figma 1440/768/360 (ноды 105:990/991/993): карточка мельче базовой 1920 —
     дата 14/20, заголовок 16/24, «Читать далее» 14/20. Без этого текст плыл
     (lh 24/28 вместо 20/24 → карточка 361 вместо 347, «Читать далее» уезжал на 10px). */
  .s-news__date {
    font-size: 14px;
    line-height: 20px;
  }
  .s-news__card-title {
    font-size: 16px;
    line-height: 24px;
  }
  .s-news__more {
    font-size: 14px;
    line-height: 20px;
  }
  /* Заголовок карточки в Figma на y32 от верха текст-блока: при дате h20 зазор = 12
     (база 8 верна для 1920, где дата h24). Иначе заголовок уезжал на 4px вверх. */
  .s-news__text {
    gap: 12px;
  }
  .s-news__heading {
    font-size: 32px;
    line-height: 40px;
  }
  /* фото становится резиновым по пропорции (на 1440 → 328×219) */
  .s-news__image {
    height: auto;
    aspect-ratio: 448 / 299.543;
  }
}

/* ≤768: 2 карточки в ряд (2×2) */
@media (max-width: 1023px) {
  .s-news__cards {
    flex-wrap: wrap;
  }
  .s-news__card {
    flex: 0 0 calc((100% - 16px) / 2);
  }
  /* Figma Section13 @768: только 2 карточки в один ряд */
  .s-news__card:nth-child(n + 3) {
    display: none;
  }
}

/* ≤360: горизонтальная строка-скролл, карточки 280 */
@media (max-width: 767px) {
  /* Figma Section13: вертикальные паддинги 40 (база 120 → переопределяем) */
  .s-news__inner {
    padding-block: 40px;
    /* Figma: заголовок(низ 100)→карточки(124) и карточки→кнопка зазор 24, не 32. */
    gap: 24px;
  }
  .s-news__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .s-news__title {
    width: 100%;
  }
  .s-news__heading {
    font-size: 20px;
    line-height: 28px;
    white-space: normal;
  }
  .s-news__cards {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .s-news__card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
  /* Figma Section13 @360: радиус фото 6.829px (база 1440 = 10.959) */
  .s-news__image {
    border-radius: 6.829px;
  }
  /* CASCADE GUARD: @360 — горизонтальный скролл, возвращаем все 4 карточки */
  .s-news__card:nth-child(n + 3) {
    display: block;
  }
  .s-news__date {
    font-size: 14px;
    line-height: 20px;
  }
  .s-news__card-title {
    font-size: 16px;
    line-height: 24px;
  }
  /* «Читать далее» в Figma lh20/fs14 (Frame 43 h20, база 16/24) */
  .s-news__more {
    font-size: 14px;
    line-height: 20px;
  }
  /* пилюля «Все новости» в шапке скрыта, кнопка переезжает вниз на всю ширину */
  .s-news__head .btn--sm {
    display: none;
  }
  .s-news__all-mobile {
    display: flex;
    width: 100%;
    /* Figma Section13 @360 (105:2902): px 24 (база .btn@360 = 16 → переопределяем) */
    padding-inline: 24px;
  }
}