/* Start:/local/templates/preora/css/pages/news.css?17925877569843*/
/* === NEWS: блок «Новости и статьи» на главной и страница /news/ === */
/* Подключается на обеих страницах: index.php и news/index.php */

.news__top {
  display: flex;
  align-items: end;
  gap: 60px;
}

/* Размер задан явно: на главной заголовок — h2, на странице новостей — h1,
   выглядеть они должны одинаково */
.news__title {
  font-size: 64px;
  line-height: 74%;
}

.news__btnList {
  display: flex;
  gap: 30px;
}

.news__btnList-item {
  width: max-content;
  cursor: pointer;
  text-transform: uppercase;
  font-family: var(--Bounded);
  color: var(--linkAccentDark);
  font-size: 16px;
  line-height: 140%;
}

.news__btnList-item.active {
  font-weight: 700;
  text-decoration: underline var(--linkAccentLight);
}

.news__list {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  justify-content: space-between;
  align-items: start;
}

.news__item {
  display: none;
  flex-direction: column;
  gap: 32px;
}

.news__item.active {
  display: flex;
}

.news__item-banner {
  width: 100%;
  aspect-ratio: 5/3;
  border-radius: 20px;
  overflow: hidden;
}

.news__item-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news__item-date {
  text-transform: uppercase;
  color: var(--textDark);
  opacity: 0.3;
}

.news__item-title {
  padding: 8px 0 10px;
  text-transform: uppercase;
  font-family: var(--Bounded);
  font-weight: 700;
  font-size: 20px;
  line-height: 155%;
}

.news__item-desc {
  font-weight: 500;
  color: var(--textDark);
  opacity: 0.5;
  font-size: 20px;
  line-height: 155%;
}

.news__btnMore {
  margin-top: 60px;
}

.news__btnMore.loading {
  opacity: 0.6;
  pointer-events: none;
}

.news__empty {
  margin-top: 80px;
  opacity: 0.5;
}

@media (hover: hover) {
  .news__item:hover .news__item-banner > img {
    transform: scale(1.1);
  }

  .news__btnList-item:hover {
    color: var(--linkAccentLight);
  }
}

/* ---- Страница /news/ ---- */

/* Два класса — чтобы перебить .section из base.css: стили шаблона Битрикс
   выводит после стилей страницы */
.news.newsPage {
  padding: 100px 0 160px;
}

.newsPage .news__list {
  margin-top: 100px;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px 30px;
}

/* Первая карточка каждой семёрки — крупная: картинка слева, текст справа.
   Под этот ритм подобран размер страницы (NEWS_COUNT = 7 в news/index.php),
   поэтому догруженные кнопкой «показать еще» карточки продолжают его сами. */
.newsPage .news__item:nth-child(7n + 1) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 32px 30px;
}

.newsPage .news__item:nth-child(7n + 1) .news__item-banner {
  grid-row: 1 / 3;
}

.newsPage .news__item:nth-child(7n + 1) .news__item-title {
  font-size: 24px;
}

.newsPage .news__item:nth-child(7n + 1) .news__item-more {
  align-self: start;
}

.newsPage .news__btnMore {
  margin-top: 100px;
}

/* ---- Детальная страница /news/<код>/ ---- */

.news-detail {
  padding: 100px 0 160px;
}

/* Как .news__title: размер задан явно, чтобы совпадать с заголовком списка */
.news-detail__title {
  font-size: 64px;
  line-height: 105%;
}

.news-detail__meta {
  margin-top: 32px;
  text-transform: uppercase;
  color: var(--textDark);
  opacity: 0.3;
}

.news-detail__img {
  margin-top: 40px;
  aspect-ratio: 12/5;
  border-radius: 20px;
  overflow: hidden;
}

.news-detail__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Текст и колонка «популярные публикации» */
.news-detail__body {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Текст приходит из визуального редактора — оформляем теги, а не классы */
.news-detail__text p,
.news-detail__text li {
  font-size: 18px;
  line-height: 150%;
  color: var(--textDark);
}

.news-detail__text p + p,
.news-detail__text ul,
.news-detail__text ol,
.news-detail__text img,
.news-detail__text h2,
.news-detail__text h3 {
  margin-top: 24px;
}

.news-detail__text ul + p,
.news-detail__text ol + p {
  margin-top: 32px;
}

/* Список сразу после абзаца-подводки идёт без отступа */
.news-detail__text p + ul,
.news-detail__text p + ol {
  margin-top: 0;
}

/* Доп. отступ перед h2 — только после абзаца или списка, перед h3 — всегда */
.news-detail__text p + h2,
.news-detail__text ul + h2,
.news-detail__text ol + h2 {
  margin-top: 48px;
}

.news-detail__text h3 {
  margin-top: 32px;
}

.news-detail__text > :first-child {
  margin-top: 0;
}

.news-detail__text h2 + p,
.news-detail__text h3 + p {
  margin-top: 16px;
}

.news-detail__text h2 {
  font-size: 28px;
  line-height: 130%;
}

.news-detail__text h3 {
  font-size: 22px;
  line-height: 130%;
}

.news-detail__text ul,
.news-detail__text ol {
  padding-left: 24px;
}

.news-detail__text ul li {
  list-style: disc;
}

.news-detail__text ol li {
  list-style: decimal;
}

.news-detail__text a {
  color: var(--linkAccentLight);
  text-decoration: underline;
}

.news-detail__text img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Популярные публикации (news.list/preora-news-popular) */
.news-popular {
  padding: 32px;
  border-radius: 24px;
  background: var(--bgDark);
}

.news-popular__title {
  text-transform: uppercase;
  font-family: var(--Bounded);
  font-size: 18px;
  line-height: 140%;
  color: var(--linkAccentLight);
}

.news-popular__list {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.news-popular__item {
  display: block;
}

.news-popular__item-date {
  text-transform: uppercase;
  font-size: 16px;
  color: var(--textDark);
  opacity: 0.3;
}

.news-popular__item-title {
  margin-top: 8px;
  text-transform: uppercase;
  font-family: var(--Bounded);
  font-weight: 700;
  font-size: 18px;
  line-height: 140%;
}

@media (hover: hover) {
  .news-popular__item:hover .news-popular__item-title {
    color: var(--linkAccentLight);
  }
}

@media screen and (max-width: 1390px) {
  .news__title {
    line-height: 110%;
  }
}

@media screen and (max-width: 1200px) {
  .news__title,
  .news-detail__title {
    font-size: 48px;
  }
}

@media screen and (max-width: 1100px) {
  .news-detail__body {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

@media screen and (max-width: 1100px) {
  .news__item {
    gap: 16px;
  }

  .news__item-title {
    font-size: 18px;
  }

  .news__item-desc {
    font-size: 18px;
  }

  .newsPage .news__list {
    margin-top: 60px;
    grid-template-columns: 1fr 1fr;
    gap: 60px 30px;
  }

  .newsPage .news__item:nth-child(7n + 1) {
    gap: 16px 30px;
  }

  .newsPage .news__item:nth-child(7n + 1) .news__item-title {
    font-size: 20px;
  }

  .newsPage .news__btnMore {
    margin-top: 60px;
  }
}

@media screen and (max-width: 900px) {
  .news__top {
    flex-direction: column;
    align-items: start;
    gap: 24px;
  }

  .news__btnList {
    gap: 16px;
  }

  .news__list {
    margin-top: 40px;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .news__empty {
    margin-top: 40px;
  }

  .newsPage .news__list {
    margin-top: 40px;
    gap: 48px 20px;
  }

  /* Крупная карточка складывается в обычную: картинка сверху */
  .newsPage .news__item:nth-child(7n + 1) {
    display: flex;
  }

  .newsPage .news__item:nth-child(7n + 1) .news__item-title {
    font-size: 18px;
  }
}

@media screen and (max-width: 800px) {
  .news.newsPage {
    padding: 50px 0 70px;
  }

  .news-detail {
    padding: 50px 0 70px;
  }

  .news-detail__img {
    margin-top: 24px;
    aspect-ratio: 5/3;
    border-radius: 16px;
  }

  .news-detail__body {
    margin-top: 40px;
    gap: 40px;
  }

  .news-popular {
    padding: 24px;
    border-radius: 20px;
  }

  .news-popular__list {
    margin-top: 24px;
    gap: 24px;
  }
}

@media screen and (max-width: 660px) {
  .news__title,
  .news-detail__title {
    font-size: 32px;
  }

  .news-detail__meta {
    margin-top: 16px;
  }

  .news-detail__text p,
  .news-detail__text li {
    font-size: 16px;
    line-height: 145%;
  }

  .news-detail__text h2 {
    font-size: 22px;
  }

  .news-detail__text p + h2,
  .news-detail__text ul + h2,
  .news-detail__text ol + h2 {
    margin-top: 36px;
  }

  .news-detail__text h3 {
    font-size: 18px;
    margin-top: 28px;
  }

  .news-popular__title,
  .news-popular__item-title {
    font-size: 16px;
  }

  .news-popular__item-date {
    font-size: 12px;
  }
}

@media screen and (max-width: 600px) {
  .news__btnList-item {
    font-size: 12px;
  }

  .news__item-banner {
    border-radius: 16px;
  }

  .news__item-title {
    padding: 6px 0;
  }

  .newsPage .news__list {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media screen and (max-width: 500px) {
  .news__item-date {
    font-size: 10px;
  }

  .news__item-desc {
    font-size: 14px;
  }

  .news__item-more {
    font-size: 14px;
  }
}

@media screen and (max-width: 380px) {
  .news__title,
  .news-detail__title {
    font-size: 24px;
  }

  .news__item-title,
  .newsPage .news__item:nth-child(7n + 1) .news__item-title {
    font-size: 14px;
  }

  .news__item-desc {
    font-size: 12px;
  }

  .news__item-more {
    font-size: 12px;
  }
}

/* End */
/* /local/templates/preora/css/pages/news.css?17925877569843 */