/* Start:/local/templates/.default/components/bitrix/news.detail/news/style.css?17870820134330*/
/* Детальная страница новости. Переписан 12.08.2026.

   Было: баннер во весь экран (картинка с затемнением, поверх — заголовок, дата
   и анонс). Ради него страница ломала общую раскладку: контейнер растягивался
   на всю ширину, общие хлебные крошки прятались, а вместо них печатались свои
   внутри блока .read — там они набирались прописными в 18 px, не как везде.

   Стало: обычная страница сайта. Заголовок, дата и время чтения — текстом,
   детальная картинка — справа с обтеканием, анонс — первым абзацем.

   Что убрано и почему:
     main.main>div.grid-container{width:100%}  — растягивало колонку под баннер;
     .banner, .banner img, .h1_and_text, .dis_flex, .banner__date_detail — баннера нет;
     .cell.large-auto.read h1{display:none}    — прятало заголовок в тексте;
     .grid-container[role="navigation"]{display:none} — прятало общие крошки;
     .grid-container .breadcrumbs li{...uppercase} — делало крошки прописными. */

.news-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6666666667rem; /* 20px при 1rem = 12px */
  margin-bottom: 1.6666666667rem;
  color: #5b6b7a;
}

.news-detail__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Обтекание: картинка справа, текст слева. Ширина в процентах, чтобы на
   промежуточных ширинах колонке оставалось место под нормальную строку. */
.news-detail__pic {
  float: right;
  width: 38%;
  max-width: 420px;
  height: auto;
  margin: 0 0 1.6666666667rem 2.5rem;
  border-radius: 8px;
}

/* Текст под картинкой не должен «залезать» под неё хвостом соседнего блока. */
.news-detail__body::after {
  content: "";
  display: block;
  clear: both;
}

/* Типографика текста — как на обычных страницах сайта (эталон /readers/payment/):
   там текст набран тегом <p>, которому тема даёт 1.1666rem, вес 500 и интерлиньяж 1.7.
   В DETAIL_TEXT редакция набирает абзацы по-разному — то <div>, то голым текстом
   с <br>, — и они наследовали от body 12px с интерлиньяжем 12px: мельче и теснее,
   чем везде на сайте. Задаём те же значения контейнеру: наследование доносит их
   до голого текста и до <div>, а у <p> они и так свои, ровно такие же. */
.news-detail__body {
  font-size: 1.1666666667rem; /* 14px при базовом 1rem = 12px */
  font-weight: 500;
  line-height: 1.7;
}

/* Вложенные обёртки и строчные теги не должны выпадать из кегля. */
.news-detail__body div,
.news-detail__body span,
.news-detail__body li,
.news-detail__body a {
  font-size: inherit;
  line-height: inherit;
}

/* Отступ между блоками-абзацами — как у абзаца темы, 2.5rem = 30px.
   У <p> он свой, здесь добираем те абзацы, что набраны <div>. */
.news-detail__body > div:not(.news-detail__lead):not(:last-child) {
  margin-bottom: 2.5rem;
}

.news-detail__lead {
  font-weight: 500;
}

/* На узком экране обтекание нечитаемо: картинка встаёт над текстом во всю ширину. */
@media screen and (max-width: 39.9375em) {
  .news-detail__pic {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.6666666667rem;
  }

  .news-detail__meta {
    gap: 0.8333333333rem 1.6666666667rem;
  }
}

/* End */
/* /local/templates/.default/components/bitrix/news.detail/news/style.css?17870820134330 */