/* Новости: список, страница новости и блоки конструктора.
   Переменные цветов и шрифтов — из style.css. */

.nh__inner,
.nh__badge-wrap,
.article__body,
.news-more > .container,
.news-list > .container{max-width:1320px}

/* ------------------------------------------------------------------
   Хлебные крошки
   ------------------------------------------------------------------ */

.crumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:clamp(11.5px,.75vw,13px);
  color:var(--muted);
}
.crumbs__item{display:flex;align-items:center;gap:8px;min-width:0}
.crumbs__item + .crumbs__item::before{content:"/";color:#B5BCC8}
.crumbs__item a{transition:color .2s ease}
.crumbs__item a:hover{color:var(--red)}
.crumbs__item span{
  max-width:46ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
}

/* ------------------------------------------------------------------
   Шапка новости
   ------------------------------------------------------------------ */

.nh{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fff;
}

.nh__media{
  position:absolute;
  inset:0;
  z-index:-1;
  background:#1B1F26;
}
.nh__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
}
.nh--top .nh__media img{object-position:center 15%}
.nh--bottom .nh__media img{object-position:center 85%}

/* светлая дымка сверху и слева — под заголовок, тёмная снизу — под плашку */
.nh__media::before,
.nh__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.nh__media::before{
  background:
    linear-gradient(180deg,#fff 0%,rgba(255,255,255,.9) 20%,rgba(255,255,255,.45) 40%,rgba(255,255,255,0) 58%),
    linear-gradient(90deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 52%) top / 100% 55% no-repeat;
}
.nh__media::after{
  background:linear-gradient(0deg,rgba(8,10,14,.8) 0%,rgba(8,10,14,.4) 26%,rgba(8,10,14,0) 50%);
}

.nh__inner{
  position:relative;
  min-height:clamp(460px,40vw,720px);
  padding-top:clamp(16px,1.4vw,28px);
  padding-bottom:clamp(170px,15vw,280px);
}

.nh__date{
  display:block;
  margin-top:clamp(18px,1.8vw,34px);
  font-size:clamp(12px,.82vw,15px);
  font-weight:600;
  color:var(--ink);
}

.nh__title{
  max-width:min(820px,62%);
  margin:clamp(6px,.6vw,12px) 0 0;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(28px,3.05vw,56px);
  line-height:1.06;
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:balance;
}

.nh__badge-wrap{
  position:absolute;
  z-index:1;
  left:0;right:0;
  bottom:clamp(24px,3vw,60px);
  margin:0 auto;
}
.nh__badge{
  max-width:420px;
  padding-left:clamp(14px,1.2vw,24px);
  border-left:2px solid rgba(255,255,255,.75);
  color:#fff;
}
.nh__badge-title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(15px,1.3vw,24px);
  line-height:1.2;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.nh__badge-title .red{color:#FF4B52}
.nh__tagline{
  margin-top:clamp(10px,1vw,18px);
  font-size:clamp(13px,.95vw,17px);
  line-height:1.45;
  color:rgba(255,255,255,.88);
}

.nh--plain .nh__inner{min-height:0;padding-bottom:clamp(10px,1vw,20px)}
.nh--plain .nh__title{max-width:900px}

@media (max-width:768px){
  .nh{display:flex;flex-direction:column}
  .nh__inner{order:1;min-height:0;padding-bottom:20px}
  .nh__media{
    order:2;
    position:relative;
    inset:auto;
    z-index:0;
    aspect-ratio:4/3;
  }
  .nh__media::before{display:none}
  .nh__title{max-width:none}
  .nh__badge-wrap{bottom:18px}
  .crumbs__item span{max-width:24ch}
}

/* ------------------------------------------------------------------
   Тело новости и общие элементы блоков
   ------------------------------------------------------------------ */

.article__body{padding-bottom:clamp(44px,4.4vw,90px)}

.nb{margin-top:clamp(40px,4.4vw,84px)}
.nb:first-child{margin-top:clamp(26px,2.6vw,50px)}

.nb-title{
  position:relative;
  margin:0 0 clamp(16px,1.4vw,28px);
  padding-bottom:clamp(12px,1vw,20px);
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(24px,2.15vw,40px);
  line-height:1.1;
  color:var(--ink);
}
.nb-title::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:46px;height:3px;
  background:var(--red);
}

.news-rich > * + *{margin-top:.85em}
.news-rich p,
.news-rich li{
  font-size:clamp(14.5px,.98vw,17.5px);
  line-height:1.65;
  color:var(--body);
}
.news-rich b,
.news-rich strong{font-weight:600;color:var(--ink)}
.news-rich a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.news-rich h4{
  margin-top:1.4em;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(17px,1.25vw,23px);
  color:var(--ink);
}
.news-rich ul{display:grid;gap:.45em}
.news-rich ul li{position:relative;padding-left:18px}
.news-rich ul li::before{
  content:"";
  position:absolute;
  left:0;top:.68em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--red);
}
.news-rich ol{padding-left:1.3em}

/* ------------------------------------------------------------------
   Цифры (во вступлении и отдельным блоком)
   ------------------------------------------------------------------ */

.nb-stats{margin:0;padding:0;list-style:none}

.nb-stat{display:flex;gap:clamp(10px,.9vw,16px)}
.nb-stat__icon{flex:none;width:clamp(28px,2.2vw,40px);height:auto;color:var(--ink)}
.nb-stat__body{display:flex;flex-direction:column;min-width:0}
.nb-stat__value{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1;
  color:var(--red);
  white-space:nowrap;
}
.nb-stat__label{
  margin-top:6px;
  font-size:clamp(12px,.8vw,14px);
  line-height:1.3;
  color:var(--muted);
}

.nb-stats--lead{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
}
.nb-stats--lead .nb-stat{
  flex-direction:column;
  align-items:center;
  padding:6px clamp(10px,1vw,20px);
  text-align:center;
  border-left:1px solid var(--line);
}
.nb-stats--lead .nb-stat__body{align-items:center}
.nb-stats--lead .nb-stat__value{font-size:clamp(30px,2.5vw,48px)}

.nb-stats--row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(18px,1.6vw,30px) 0;
}
.nb-stats--row .nb-stat{
  align-items:flex-start;
  padding:4px clamp(14px,1.4vw,28px);
  border-left:1px solid var(--line);
}
.nb-stats--row .nb-stat:first-child{padding-left:0;border-left:0}
.nb-stats--row .nb-stat__value{font-size:clamp(24px,1.9vw,36px)}

/* ------------------------------------------------------------------
   Вступление
   ------------------------------------------------------------------ */

.nb-lead{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(24px,3vw,64px);
}
.nb-lead--solo{grid-template-columns:minmax(0,1fr);max-width:900px}

/* ------------------------------------------------------------------
   Текст и фото
   ------------------------------------------------------------------ */

.nb-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);
  align-items:center;
  gap:clamp(24px,3vw,64px);
}
.nb-split--left{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)}
.nb-split--left .nb-split__media{order:-1}
.nb-split--solo{grid-template-columns:minmax(0,1fr);max-width:900px}

.nb-split__media{margin:0}
.nb-split__media img{
  width:100%;
  height:auto;
  aspect-ratio:16/11;
  object-fit:cover;
  border-radius:4px;
}

.nb-text{max-width:960px}

/* ------------------------------------------------------------------
   Галерея и большое фото
   ------------------------------------------------------------------ */

.nb-gallery{display:grid;gap:clamp(10px,1.2vw,22px)}
.nb-gallery--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.nb-gallery--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nb-gallery--n4{grid-template-columns:repeat(4,minmax(0,1fr))}

.nb-gallery__item,
.nb-image > a{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:4px;
  background:#EEF1F5;
  cursor:zoom-in;
}
.nb-gallery__item img{
  width:100%;
  height:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.72,.24,1);
}
.nb-gallery--n1 .nb-gallery__item img{aspect-ratio:auto}
.nb-gallery__item:hover img,
.nb-image > a:hover img{transform:scale(1.04)}

.nb-image{margin-left:0;margin-right:0}
.nb-image img{width:100%;height:auto;transition:transform .6s cubic-bezier(.22,.72,.24,1)}
.nb-image__caption{
  margin-top:12px;
  font-size:clamp(12.5px,.82vw,14.5px);
  color:var(--muted);
  text-align:center;
}

/* ------------------------------------------------------------------
   Видео
   ------------------------------------------------------------------ */

.nb-video{display:grid;gap:clamp(12px,1.4vw,26px)}
.nb-video--n2{grid-template-columns:repeat(2,minmax(0,1fr))}

.nb-video__item{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:32/9;
  min-height:200px;
  border-radius:4px;
  background:#1B1F26;
  color:#fff;
}
.nb-video--n2 .nb-video__item{aspect-ratio:16/9}

.nb-video__poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.72,.24,1);
}
.nb-video__item:hover .nb-video__poster{transform:scale(1.04)}

.nb-video__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(8,10,14,.84) 0%,rgba(8,10,14,.5) 42%,rgba(8,10,14,.28) 100%);
}

.nb-video__play{
  position:absolute;
  left:50%;top:50%;
  display:grid;
  place-items:center;
  width:clamp(58px,5vw,88px);
  height:clamp(58px,5vw,88px);
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.nb-video__play svg{width:42%;margin-left:6%}
.nb-video__item:hover .nb-video__play{
  background:var(--red);
  border-color:var(--red);
  transform:translate(-50%,-50%) scale(1.06);
}

.nb-video__caption{
  position:absolute;
  left:clamp(18px,2.2vw,44px);
  right:clamp(18px,2.2vw,44px);
  bottom:clamp(16px,1.8vw,36px);
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:520px;
}
.nb-video__title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(19px,1.6vw,30px);
  line-height:1.1;
}
.nb-video__text{
  font-size:clamp(12.5px,.85vw,15px);
  line-height:1.45;
  color:rgba(255,255,255,.82);
}

/* ------------------------------------------------------------------
   Цифры, цитата, вывод, кнопка
   ------------------------------------------------------------------ */

.nb-quote{
  max-width:960px;
  margin-left:0;
  margin-right:0;
  padding-left:clamp(18px,1.8vw,34px);
  border-left:3px solid var(--red);
}
.nb-quote__text{margin:0}
.nb-quote__text p{
  font-family:var(--font-head);
  font-style:italic;
  font-weight:700;
  font-size:clamp(19px,1.55vw,29px);
  line-height:1.3;
  color:var(--ink);
}
.nb-quote__author{
  margin-top:12px;
  font-size:clamp(12.5px,.85vw,15px);
  font-weight:600;
  color:var(--muted);
}

.nb-note{
  padding:clamp(22px,2.4vw,44px) clamp(20px,4vw,90px);
  text-align:center;
  background:#F2F3F5;
  border-radius:4px;
}
.nb-note p{
  max-width:940px;
  margin:0 auto;
  font-size:clamp(14px,.95vw,17px);
  line-height:1.65;
  color:var(--body);
}
.nb-note p + p{margin-top:.8em}

.nb-button .btn .btn__arrow{color:currentColor}

/* ------------------------------------------------------------------
   Карточки новостей
   ------------------------------------------------------------------ */

.news-grid{display:grid;gap:clamp(14px,1.5vw,28px)}
.news-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.news-card{
  display:flex;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  transition:box-shadow .3s ease,border-color .3s ease,transform .3s ease;
}
.news-card:hover{
  border-color:transparent;
  box-shadow:0 18px 40px -22px rgba(17,20,24,.45);
  transform:translateY(-2px);
}

.news-card__link{display:flex;flex-direction:column;width:100%}

.news-card__media{
  display:block;
  overflow:hidden;
  aspect-ratio:16/10;
  background:#EEF1F5;
}
.news-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.72,.24,1);
}
.news-card:hover .news-card__media img{transform:scale(1.05)}

.news-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:8px;
  padding:clamp(14px,1.3vw,24px);
}
.news-card__date{font-size:clamp(11.5px,.74vw,13px);color:var(--muted)}
.news-card__title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(16px,1.18vw,21px);
  line-height:1.22;
  color:var(--ink);
}
.news-card__text{
  font-size:clamp(13.5px,.9vw,16px);
  line-height:1.6;
  color:var(--body);
}
.news-card__more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:8px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(11px,.75vw,13.5px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--red);
}
.news-card__more svg{width:1.8em;transition:transform .25s ease}
.news-card:hover .news-card__more svg{transform:translateX(5px)}

.news-card--wide{grid-column:1 / -1}
.news-card--wide .news-card__link{flex-direction:row}
.news-card--wide .news-card__media{flex:0 0 58%;aspect-ratio:16/9}
.news-card--wide .news-card__body{justify-content:center;gap:12px;padding:clamp(20px,2.6vw,52px)}
.news-card--wide .news-card__title{font-size:clamp(21px,2vw,36px);line-height:1.12}

/* «Другие новости» под статьёй */

.news-more{
  padding:clamp(40px,4vw,80px) 0 clamp(50px,5vw,100px);
  background:#F7F8FA;
}
.news-more__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:clamp(18px,1.8vw,34px);
}
.news-more__title{
  margin:0;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(24px,2.15vw,40px);
  line-height:1.1;
  color:var(--ink);
}
.news-more__all{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:none;
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(11.5px,.8vw,14px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--red);
}
.news-more__all svg{width:1.8em;transition:transform .25s ease}
.news-more__all:hover svg{transform:translateX(5px)}

/* ------------------------------------------------------------------
   Список новостей
   ------------------------------------------------------------------ */

.news-list{padding:clamp(18px,1.6vw,30px) 0 clamp(50px,5vw,110px)}

.news-list__head{margin-bottom:clamp(22px,2.4vw,46px)}
.news-list__title{
  margin:clamp(18px,1.8vw,34px) 0 0;
  font-family:var(--font-head);
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  font-size:clamp(30px,3.2vw,60px);
  line-height:1.04;
  letter-spacing:-.01em;
  color:var(--ink);
}
.news-list__page{color:var(--muted);font-size:.5em;vertical-align:middle}
.news-list__lead{
  max-width:640px;
  margin-top:clamp(10px,1vw,18px);
  font-size:clamp(14px,1vw,18px);
  line-height:1.55;
  color:var(--body);
}
.news-list__empty{
  padding:clamp(30px,3vw,60px);
  text-align:center;
  color:var(--muted);
  background:#F5F6F8;
  border-radius:4px;
}

.pager{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:clamp(28px,3vw,56px);
}
.pager__num,
.pager__step{
  display:grid;
  place-items:center;
  min-width:44px;
  height:44px;
  padding:0 14px;
  font-weight:600;
  font-size:14px;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:2px;
  transition:border-color .2s ease,color .2s ease;
}
.pager a:hover{border-color:var(--red);color:var(--red)}
.pager__num.is-active{color:#fff;background:var(--red);border-color:var(--red)}

/* ------------------------------------------------------------------
   Окно видео и фото
   ------------------------------------------------------------------ */

.media-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:clamp(56px,6vh,80px) clamp(12px,5vw,90px) 24px;
  opacity:0;
  transition:opacity .25s ease;
}
.media-modal.is-open{opacity:1}
.media-modal[hidden]{display:none}

.media-modal__backdrop{position:absolute;inset:0;background:rgba(8,10,14,.9)}

.media-modal__box{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
  max-height:100%;
}

.media-modal__stage{display:grid;place-items:center;width:100%}

.media-modal__player{
  display:block;
  width:min(1120px,100%);
  aspect-ratio:16/9;
  max-height:calc(100vh - 150px);
  border:0;
  background:#000;
  border-radius:4px;
}
.media-modal--vertical .media-modal__player{
  width:min(400px,100%,calc((100vh - 150px) * .46));
  aspect-ratio:46/100;
  background:#fff;
}

.media-modal__photo{
  max-width:100%;
  max-height:calc(100vh - 160px);
  object-fit:contain;
  border-radius:2px;
}

.media-modal__close{
  position:fixed;
  top:14px;right:14px;
  z-index:2;
  display:grid;
  place-items:center;
  width:46px;height:46px;
  padding:0;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:0;
  border-radius:50%;
  cursor:pointer;
  transition:background .2s ease;
}
.media-modal__close:hover{background:var(--red)}
.media-modal__close svg{width:22px;height:22px}

.media-modal__nav{
  position:fixed;
  top:50%;
  z-index:2;
  display:none;
  place-items:center;
  width:48px;height:48px;
  margin-top:-24px;
  padding:0;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:0;
  border-radius:50%;
  cursor:pointer;
  transition:background .2s ease;
}
.media-modal__nav:hover{background:var(--red)}
.media-modal__nav svg{width:22px;height:22px}
.media-modal__nav--prev{left:14px}
.media-modal__nav--next{right:14px}
.media-modal--many .media-modal__nav{display:grid}

.media-modal__foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 18px;
  font-size:13.5px;
  color:rgba(255,255,255,.8);
  text-align:center;
}
.media-modal__source{color:#fff;text-decoration:underline;text-underline-offset:3px}
.media-modal__source:hover{color:#FF6B70}
.media-modal__counter{color:rgba(255,255,255,.55)}

/* ------------------------------------------------------------------
   Превью в админке: блоки кликабельны и подсвечиваются
   ------------------------------------------------------------------ */

.is-preview [data-block]{cursor:pointer;outline:2px solid transparent;outline-offset:10px;transition:outline-color .2s ease}
.is-preview [data-block]:hover{outline-color:rgba(44,90,168,.35)}
.is-preview [data-block].is-focus{outline-color:#2C5AA8}

/* превью перерисовывается на каждую правку — анимация появления там мешает */
.is-preview [data-anim]{opacity:1 !important;transform:none !important;transition:none !important}

/* ------------------------------------------------------------------
   Адаптив
   ------------------------------------------------------------------ */

@media (max-width:1100px){
  .nb-stats--lead .nb-stat{padding-left:8px;padding-right:8px}
  .nb-gallery--n4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .nb-lead,
  .nb-split,
  .nb-split--left{grid-template-columns:minmax(0,1fr)}
  .nb-split--left .nb-split__media{order:0}
  .nb-stats--lead{max-width:560px}
  .nb-stats--lead .nb-stat:first-child{border-left:0}

  .news-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-card--wide .news-card__link{flex-direction:column}
  .news-card--wide .news-card__media{flex:none;aspect-ratio:16/10}

  .nb-video__item{aspect-ratio:16/8}
  .nb-video--n2{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  .nb-gallery--n3,
  .nb-gallery--n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb-gallery--n3 .nb-gallery__item:first-child{grid-column:1 / -1}

  .nb-stats--row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb-stats--row .nb-stat{padding-left:0;border-left:0}

  .nb-video__item{aspect-ratio:4/3}
  .nb-video__play{top:42%}

  .news-grid--3{grid-template-columns:minmax(0,1fr)}
  .news-more__head{align-items:flex-start;flex-direction:column;gap:10px}
}