.news-page { background: var(--light); }

.news-page .desktop-nav__group {
  border-left: 0;
}

.news-cover {
  position: relative;
  display: flex;
  min-height: 605px;
  padding: 375px 3.125vw 0;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  color: var(--light);
  background: var(--dark);
}

.news-cover__title {
  margin: 0;
  font-family: "LT Superior", Arial, sans-serif;
  font-size: 6.7708vw;
  font-weight: 450;
  line-height: 1;
}

.news-page__content {
  display: grid;
  grid-template-columns: 343px minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--dark);
  background: var(--light);
}

/* Колонка тянется во всю высоту ленты (grid align-items: stretch), жёсткой
   высоты нет — фиксация держится сколько длится лента. Прижатую часть держит
   вложенный .news-page__categories-sticky: отступ сверху 100px, снизу 100px —
   единообразно со страницами услуг и проектов. */
.news-page__categories {
  padding: 80px 20px 0 60px;
}

.news-page__categories-sticky {
  display: flex;
  position: sticky;
  top: 100px;
  flex-direction: column;
  gap: 10px;
  height: max-content;
  margin-bottom: 100px;
}

.news-page__category {
  width: 263px;
  min-height: 33px;
  padding: 0;
  color: var(--dark);
  background: transparent;
  font-family: "LT Superior", Arial, sans-serif;
  font-size: 30px;
  font-weight: 450;
  line-height: 1.1;
  text-align: left;
  transition: color 180ms ease;
}

.news-page__category:hover,
.news-page__category:focus-visible,
.news-page__category.is-active { color: var(--muted); }

.news-page__list {
  display: grid;
  align-content: start;
  gap: 30px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 80px 60px 160px 20px;
}

.news-page-card {
  position: relative;
  /* Стрелка карточки уезжает за пределы блока (translate 100% -100%) и имеет
     z-index 5. Без своего контекста наложения этот z-index утекал в корень и
     перекрывал кнопку «Меню» в шапке (z-index 4) у карточек верхнего ряда. */
  isolation: isolate;
  display: grid;
  width: 100%;
  min-height: 329px;
  min-width: 0;
  grid-template-columns: 284px minmax(0, 1fr);
  gap: 40px;
  padding: 30px;
  overflow: hidden;
  color: var(--dark);
  background: var(--white);
  font-family: "LT Superior", Arial, sans-serif;
  font-size: 24px;
  font-weight: 450;
  line-height: 1.1;
}

/* На нижнем краю планшетного диапазона (600px) под текст остаётся около
   250px, и «Орджоникидзевском» вылезает за карточку. Перенос включается
   только когда слово иначе не поместится, на остальные ширины не влияет. */
.news-page-card__headline,
.news-page-card time { overflow-wrap: break-word; }

.news-page-card[hidden] { display: none; }

.news-page-card__image {
  position: relative;
  width: 284px;
  height: 269px;
  overflow: hidden;
  background: var(--blue);
}

.news-page-card__image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.news-page-card:hover .news-page-card__image > img,
.news-page-card:focus-visible .news-page-card__image > img {
  transform: scale(1.025);
}

.news-page-card__image::before {
  transition: opacity 500ms cubic-bezier(.165, .84, .44, 1);
}

.news-page-card:hover .news-page-card__image::before,
.news-page-card:focus-visible .news-page-card__image::before {
  opacity: 0;
}

.news-page-card__image--default::before {
  z-index: 3;
  background:
    linear-gradient(rgba(8, 37, 84, .7), rgba(8, 37, 84, .7)),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 46.57%, rgba(0, 0, 0, .3) 100%);
}

.news-page-card__image--default .dither-photo__canvas {
  opacity: .8;
}

.news-page-card.is-active .news-page-card__image--default .dither-photo__canvas {
  opacity: 0;
}

.news-page-card__info {
  display: flex;
  min-width: 0;
  min-height: 269px;
  flex-direction: column;
}

.news-page-card time {
  color: var(--muted);
  font-size: 24px;
  line-height: 1.1;
}

.news-page-card.is-active time { color: var(--dark); }

/* Три строки с многоточием на любой ширине: без box-orient/line-clamp
   заголовок тянул карточку и разбивал сетку, у длинных новостей высота
   гуляла на каждой карточке по-своему. */
.news-page-card__headline {
  display: -webkit-box;
  margin-top: auto;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.news-page-card__arrow {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  display: block;
  width: 90px;
  height: 90px;
  border: 1px solid var(--dark);
  background: var(--dark);
  transform: scale(0);
  transform-origin: top right;
  transition: transform 500ms cubic-bezier(.165, .84, .44, 1);
  will-change: transform;
}

.news-page-card__arrow::after {
  position: absolute;
  inset: 32%;
  background: var(--white);
  content: "";
  -webkit-mask: url("assets/icons/arrow-back.svg") center / contain no-repeat;
  mask: url("assets/icons/arrow-back.svg") center / contain no-repeat;
  transform: scale(0);
  transform-origin: center;
  transition: transform 400ms cubic-bezier(.165, .84, .44, 1);
  will-change: transform;
}

.news-page-card.is-arrow-active .news-page-card__arrow {
  transform: scale(1);
}

.news-page-card.is-arrow-active .news-page-card__arrow::after {
  transform: scale(1);
  transition-delay: 100ms;
}

.news-page-card:focus-visible { outline-offset: -4px; }

@media (min-width: 1200px) {
  .news-page .desktop-nav__group,
  .news-page .desktop-nav__group:last-child { height: 10.4167vw; }
  .news-page .desktop-nav__group::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: var(--light);
    content: "";
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .news-page.is-scrolled .desktop-nav__group::before {
    transform: translateY(-100%);
  }

  /* Размер стрелки — как у .service-accordion__toggle на странице услуг
     (и как у стрелок карточек на главной). */
  .news-page-card__arrow {
    width: 4.6875vw;
    height: 4.6875vw;
  }
}

/* Макет 1920 px уменьшается пропорционально: фиксированные размеры фото
   оставляли тексту слишком узкую колонку и прижимали дату к стрелке. */
@media (min-width: 1200px) and (max-width: 1919px) {
  .news-cover { min-height: 31.5104vw; padding-top: 19.5313vw; }

  .news-page__content {
    grid-template-columns: 17.8646vw minmax(0, 1fr);
  }

  .news-page__categories {
    padding: 4.1667vw 1.0417vw 0 3.125vw;
  }

  .news-page__categories-sticky {
    top: 5.2083vw;
    gap: .5208vw;
    margin-bottom: 5.2083vw;
  }

  .news-page__category {
    width: 13.6979vw;
    min-height: 1.7188vw;
    font-size: 1.5625vw;
  }

  .news-page__list {
    gap: 1.5625vw 1.0417vw;
    padding: 4.1667vw 3.125vw 8.3333vw 1.0417vw;
  }

  .news-page-card {
    min-height: 17.1354vw;
    grid-template-columns: 14.7917vw minmax(0, 1fr);
    gap: 2.0833vw;
    padding: 1.5625vw;
    font-size: 1.25vw;
  }

  .news-page-card__image {
    width: 14.7917vw;
    height: 14.0104vw;
  }

  .news-page-card__info {
    min-height: 14.0104vw;
  }

  .news-page-card time {
    font-size: 1.25vw;
  }

  .news-page-card__arrow {
    width: clamp(40px,calc(6.9444vw - 43.333px),90px);
    height: clamp(40px,calc(6.9444vw - 43.333px),90px);
  }
}

@media (min-width: 600px) and (max-width: 1199px) {
  .news-cover { min-height: 430px; padding: 280px 4.1667vw 0; }
  .news-cover__title { font-size: 7.7865vw; }

  /* Высоты нет: лента набирает её карточками, и добавление новости в админке
     не ломает секцию. Прежние 3012px были ровно суммой восьми карточек. */
  .news-page__content {
    display: block;
  }

  .news-page__categories {
    position: static;
    display: grid;
    width: 100%;
    min-height: 160px;
    align-content: start;
    gap: 10px 20px;
    padding: 40px 4.1667vw 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-page__categories-sticky { display: contents; }

  .news-page__category { width: 100%; }

  .news-page__list {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    padding: 0 4.1667vw 80px;
  }

  .news-page-card {
    min-height: 329px;
    grid-template-columns: 284px minmax(0, 1fr);
    gap: 6px;
    padding: 30px;
  }

  .news-page-card__info { padding-left: 42px; }
}

@media (max-width: 599px) {
  .news-cover { min-height: 300px; padding: 215px 15px 0; }
  .news-cover__title { font-size: 60px; }

  .news-page__content {
    display: block;
    padding: 40px 15px 97px;
  }

  /* Фильтры по макету телефона: строка 22, зазор 12, снизу отбивка 40 и
     линия во всю ширину. Высота блока считается от содержимого — категорий
     из админки может стать больше или меньше. */
  .news-page__categories {
    position: static;
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding: 0 0 40px;
    border: 0;
    border-bottom: 1px solid var(--dark);
  }

  .news-page__categories-sticky { display: contents; }

  .news-page__category {
    width: 100%;
    min-height: 22px;
    font-size: 22px;
    line-height: 1;
  }

  .news-page__list {
    display: flex;
    width: 100%;
    margin-top: 40px;
    padding: 0;
    flex-direction: column;
    gap: 15px;
  }

  /* Высоту задаёт содержимое, а не жёсткие 420px: после уменьшения подписи
     до 18px под текстом оставалось от 49 до 69px пустоты. Картинка сверху
     фиксированная, дальше карточка тянется под заголовок. */
  .news-page-card {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 15px;
    flex: 0 0 auto;
    font-size: 24px;
  }

  .news-page-card__image,
  .news-page-card__image--default {
    width: 100%;
    height: 210px;
  }

  /* Стояла абсолютом ровно под картинкой (225 = 15 паддинга + 210 картинки),
     поэтому в потоке встаёт туда же. Отрицательные поля возвращают блоку
     ширину карточки: собственный паддинг 15 повторяет её отступ. Высота 180
     вместо 195 — прежние 195 доходили до нижнего края карточки, минуя её
     нижний паддинг. */
  .news-page-card__info {
    min-height: 0;
    margin: 0 -15px;
    padding: 20px 15px 0;
  }

  /* Строка с датой по высоте равна стрелке: в макете заголовок отбит на 30
     именно от неё, а не от короткой строки даты. Стрелка лежит абсолютом и
     сама место в потоке не занимает. */
  .news-page-card time {
    display: block;
    min-height: 36px;
    font-size: 18px;
  }

  /* Заголовок обрезается тремя строками, как в макете. Одного line-clamp
     мало: он требует ещё box-orient и overflow, без них текст вылезал за
     карточку и его срезал её собственный overflow — посреди строки.
     Ширина на 36 меньше колонки: справа стоит стрелка. */
  .news-page-card__headline {
    display: -webkit-box;
    width: calc(100% - 36px);
    margin-top: 30px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 18px;
    line-height: 20px;
  }

  /* Стрелка показывалась только по наведению, а на телефоне наведения нет:
     класс is-arrow-active туда никогда не приходил, и стрелки не было видно.
     Здесь она просто стоит на месте. */
  .news-page-card__arrow {
    top: 245px;
    right: 15px;
    width: 36px;
    height: 36px;
    transform: scale(1);
  }

  .news-page-card__arrow::after { transform: scale(1); }
}