/* Виджет «Новости и объявления». Чтобы отключить - уберите <link> на этот файл и <script> js/news.js. */
.nws{--dc:96px}
.nws-title{font-size:clamp(20px,3vw,26px);color:var(--c1);margin-bottom:22px}
.nws-empty{padding:28px;border:1px dashed rgba(var(--c1r),.35);border-radius:14px;color:var(--mut);text-align:center}

.nws-list{list-style:none;padding:0;margin:0;position:relative}
/* линия времени прорисовывается сверху вниз */
.nws-list::before{content:"";position:absolute;left:calc(var(--dc) + 13px);top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(to bottom,var(--c1),rgba(var(--c1r),.22) 72%,transparent);
  transform:scaleY(0);transform-origin:top;transition:transform 1.9s var(--e) .1s}
.nws-list.in::before{transform:scaleY(1)}

.nws-item{--ac:var(--c1);--acr:var(--c1r);--on:var(--on1);display:grid;grid-template-rows:1fr}
.nws-item.ac-2{--ac:var(--c2);--acr:var(--c2r);--on:var(--on2)}
.nws-item.ac-3{--ac:#4da3ff;--acr:77,163,255;--on:#000}
.nws-item.ac-4{--ac:#ff5fa2;--acr:255,95,162;--on:#000}
.nws-item.ac-5{--ac:#a78bfa;--acr:167,139,250;--on:#000}
.nws-row{min-height:0;overflow:hidden}
.nws-cell{display:grid;grid-template-columns:var(--dc) 28px minmax(0,1fr);padding-bottom:22px}

/* дата */
.nws-date{padding-right:14px;text-align:right;line-height:1}
.nws-date b{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--tx)}
.nws-date span{display:block;margin-top:5px;font-size:14px;font-weight:700;color:var(--ac)}
.nws-date small{display:block;margin-top:3px;font-size:12px;color:var(--mut)}

/* точка на линии */
.nws-dot{justify-self:center;width:12px;height:12px;margin-top:11px;border-radius:50%;background:var(--bk);border:2px solid var(--ac);scale:0}
.nws-list.in .nws-dot{scale:1;transition:scale .6s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0ms) + .3s),background-color .35s var(--e),box-shadow .35s var(--e)}

/* запись */
.nws-body{min-width:0;margin:-10px 0 0 4px;padding:10px 16px;border-radius:14px;transition:background-color .4s var(--e),translate .5s var(--e)}
.nws-item:hover .nws-body{background:rgba(var(--acr),.07);translate:4px 0}
.nws-item:hover .nws-dot{background:var(--ac);box-shadow:0 0 0 6px rgba(var(--acr),.18)}
.nws-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.nws-tag{padding:4px 11px;border-radius:999px;border:1px solid rgba(var(--acr),.5);color:var(--ac);font-size:12.5px;font-weight:600;line-height:1.2}
.nws-flag{padding:4px 11px;border-radius:999px;font-style:normal;font-size:12.5px;font-weight:700;line-height:1.2}
.nws-flag.new{background:var(--ac);color:var(--on);animation:nwsPing 1.8s var(--e) 1.4s 3}
.nws-flag.soon{border:1px dashed var(--ac);color:var(--ac)}
@keyframes nwsPing{0%{box-shadow:0 0 0 0 rgba(var(--acr),.6)}100%{box-shadow:0 0 0 12px rgba(var(--acr),0)}}
.nws-body h4{font-size:19px;line-height:1.3;margin:0 0 6px;color:var(--tx)}
.nws-body p{color:var(--tx2);max-width:62ch;white-space:pre-line}
.nws-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:600;color:var(--ac)}
.nws-link i,.nws-more i{position:relative;display:block;width:16px;height:2px;background:currentColor;border-radius:2px;transition:width .4s var(--e)}
.nws-link i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border:solid currentColor;border-width:2px 2px 0 0;rotate:45deg}
.nws-link:hover i{width:28px}
.nws-link:focus-visible,.nws-more:focus-visible{outline:2px solid var(--c2);outline-offset:3px;border-radius:6px}

/* первое появление: даты и записи выезжают по очереди */
.nws-list.in .nws-item:not(.nws-extra) .nws-date,.nws-list.in .nws-item:not(.nws-extra) .nws-body{animation:nwsIn .9s var(--e) var(--d,0ms) backwards}
@keyframes nwsIn{from{opacity:0;translate:-16px 0}}

/* свёрнутые записи */
.nws-extra{grid-template-rows:0fr;opacity:0;transition:grid-template-rows .65s var(--e),opacity .4s var(--e)}
.nws-list.open .nws-extra{grid-template-rows:1fr;opacity:1;transition-delay:var(--ed,0ms)}

/* кнопка «Показать ещё» */
.nws-more{display:inline-flex;align-items:center;gap:10px;margin:6px 0 0 calc(var(--dc) + 32px);padding:10px 18px;border-radius:999px;
  border:1px solid rgba(var(--c1r),.45);background:transparent;color:var(--c1);font-family:inherit;font-weight:600;font-size:15px;line-height:1;cursor:pointer;
  transition:background-color .4s var(--e),border-color .4s var(--e),transform .4s var(--e)}
.nws-more:hover{background:rgba(var(--c1r),.12);border-color:var(--c1);transform:translateY(-2px)}
.nws-more:active{transform:scale(.97)}
.nws-more b{min-width:22px;padding:3px 7px;border-radius:999px;background:var(--c1);color:var(--on1);font-size:12px;line-height:1.1;text-align:center}
.nws-more[aria-expanded="true"] b{display:none}
.nws-more i{width:10px;height:10px;background:none;border:solid currentColor;border-width:0 2px 2px 0;rotate:45deg;translate:0 -2px;transition:rotate .5s var(--e)}
.nws-more[aria-expanded="true"] i{rotate:225deg;translate:0 2px}

/* правки в редакторе не проигрывают анимацию заново */
.b-news.nt *,.b-news.nt *::before{transition:none!important;animation:none!important}

@media(max-width:640px){
  .nws{--dc:62px}
  .nws-date{padding-right:10px}
  .nws-date b{font-size:26px}
  .nws-date span{font-size:13px}
  .nws-body{padding:8px 10px;margin-top:-8px}
  .nws-body h4{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .nws-list::before{transform:none;transition:none}
  .nws-dot{scale:1!important;transition:none!important}
  .nws-list.in .nws-item .nws-date,.nws-list.in .nws-item .nws-body{animation:none!important}
  .nws-flag.new{animation:none}
  .nws-extra,.nws-body,.nws-more,.nws-link i{transition:none!important}
}