/* ==========================================================================
   Блок: 10 — Новости
   Figma: 43:455   — десктоп 1440 × 766
          270:3761 — мобильный 375 × 533
   ========================================================================== */

.news {
    padding: 96px 0;
}

.news__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* --------------------------------------------------------------------------
   Шапка: заголовок и ссылка «Все новости»
   -------------------------------------------------------------------------- */

.news__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.news__link {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Лента карточек (сама карточка — в news-card.css)
   Первая шире остальных: 536 / 368 / 368 при контейнере 1320.
   Коэффициенты роста повторяют это соотношение, поэтому на любой ширине
   пропорции остаются макетными
   -------------------------------------------------------------------------- */

.news__list {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 24px;
}

/* Ниже 1024px карточки в ряд уже не помещаются и превращаются
   в горизонтальную ленту, как в мобильном макете */
@media (max-width: 1023px) {
    .news__list {
        margin-left: calc(-1 * var(--container-pad));
        margin-right: calc(-1 * var(--container-pad));
        padding: 0 var(--container-pad);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .news__list::-webkit-scrollbar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Мобильная версия — 375 × 533
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .news {
        padding: 80px 0;
    }

    /* В мобильном макете у ссылки остаётся только «Все»,
       но для скринридеров текст сохраняется целиком */
    .news__link-rest {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .news__list {
        gap: 12px;
    }
}