/* Стили раздела «home» — только его страницы (подключает шаблон в блоке page_css, после css/core.css). */
.vsh-nav{display:flex;gap:4px;margin-left:auto}
.vsh-b{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-2);transition:background .14s,color .14s,opacity .14s;
}
.vsh-b:hover:not(:disabled){background:var(--blue);color:var(--on-blue)}

.vsh-track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:2px 16px 16px;scrollbar-width:none;scroll-padding-left:16px;
}
.vsh-track::-webkit-scrollbar{display:none}
.vsh-i{
  flex:0 0 238px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;
  color:inherit;text-decoration:none;cursor:pointer;
}
.vsh-th{
  display:block;width:100%;aspect-ratio:16/9;border-radius:11px;position:relative;
  background:var(--surface-2) center/cover no-repeat;overflow:hidden;
}
.vsh-th::after{content:"";position:absolute;inset:0;background:rgba(10,9,10,.06);opacity:0;transition:opacity .16s}
.vsh-i:hover .vsh-th::after{opacity:1}
.vsh-i:hover .vsh-th .yt{transform:translate(-50%,-50%) scale(1.08)}
.vsh-t{
  font-size:14px;font-weight:400;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .14s;
}
.vsh-i:hover .vsh-t{color:var(--blue)}
.vsh-m{font-size:12px;color:var(--ink-3)}
@media (max-width:700px){
  .vsh-nav{display:none}
  .vsh-track{gap:12px;padding:2px 12px 14px;scroll-padding-left:12px}
  .vsh-i{flex-basis:230px}
}

/* Переключатели раскладки: что показываем только на телефоне,
   а что только на широком экране. */
.only-m{display:none}
@media (max-width:900px){
  .only-m{display:block}
  .only-d{display:none}
}
.sr-ring{width:66px;height:66px;border-radius:50%;padding:3px;
  background:conic-gradient(from 210deg,#e80024,#ff7a45,#ffc24b,#e80024)}
.sr-ring--self{background:var(--line-2)}
.sr-n{font-size:11.5px;font-weight:400;color:var(--ink-2);max-width:74px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Главная: витрина новостей ───────────────────────────────────────── */
.hx-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;
  background:var(--surface);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}
.hx{display:flex;flex-direction:column;gap:11px;min-width:0}
.hx-img{display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--surface-2)}
.hx-cat{font-size:12.5px;font-weight:500;color:var(--red)}
.hx-t{font-size:24px;line-height:1.18;font-weight:500;color:var(--ink);margin:0}
.hx-x{font-size:15px;color:var(--ink-2);line-height:1.5;margin:0}
.hx-meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--ink-3);
  padding-top:2px;flex-wrap:wrap}
.hx-rx{display:inline-flex;align-items:center;margin-left:auto}
.hx-rx .rx-bar{gap:0}
.hx-side{display:flex;flex-direction:column;min-width:0}
.hs-b{display:flex;flex-direction:column;gap:5px;min-width:0}
.hs-t{font-size:16px;line-height:1.28;font-weight:500;color:var(--ink);margin:0}
.hs-img{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--surface-2)}

/* ── Главная: лента горизонтальными карточками ──────────────────────── */
.nrow-list{display:flex;flex-direction:column;gap:14px}
.nrow-img{display:block;aspect-ratio:5/3;background:var(--surface-2)}
.nrow-b{display:flex;flex-direction:column;gap:5px;padding:14px 18px 10px 0;min-width:0}
.nrow-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:17.5px;font-weight:500;line-height:1.3;color:var(--ink)}

/* ── Главная: рестайл полки выпусков под витрину ────────────────────── */
.vsh-i{background:var(--card-soft);border-radius:12px;overflow:hidden;padding-bottom:12px}
.vsh-th{border-radius:0;position:relative}
.vsh-th::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.42))}
.vsh-t{padding:10px 13px 0}
.vsh-m{padding:4px 13px 0}

@media (max-width:820px){
  .hx-grid{grid-template-columns:1fr;padding:14px;gap:18px}
  .hx-t{font-size:21px}
  .nrow-img{aspect-ratio:1}
  .nrow-t{font-size:15px}
  .nrow-b{padding:10px 12px 8px 0}
}
.sr-ring{position:relative}
.sr-fb{font-style:normal;position:absolute;left:-2px;bottom:-2px;z-index:2;width:24px;height:24px;border-radius:50%;background:var(--btn);border:2.5px solid var(--bg);display:grid;place-items:center}
@media (max-width:820px){.sr-fb{width:22px;height:22px}}

/* Реплики резидентов над кружками сторис — пузырёк «мысли» с кружочками к аватару */
.sr-wrap{position:relative;padding-top:58px}
.sr-say{position:absolute;top:0;z-index:5;max-width:min(340px,calc(100% - 8px));display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:18px;
  background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:500;line-height:1.3;
  box-shadow:var(--sh-2);border:1px solid var(--line);opacity:0;transform:translateY(8px) scale(.9);transform-origin:var(--tail,50%) 100%;
  transition:opacity .28s,transform .34s cubic-bezier(.2,.8,.2,1)}
.sr-say.on{opacity:1;transform:none}
.sr-say-av{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
/* два кружочка «мысли», спускаются к кольцу говорящего */
.sr-say::after,.sr-say::before{content:"";position:absolute;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh)}
.sr-say::after{width:10px;height:10px;bottom:-10px;left:calc(var(--tail,50%) - 5px)}
.sr-say::before{width:6px;height:6px;bottom:-19px;left:calc(var(--tail,50%) + 4px)}
.sr-say--off::after,.sr-say--off::before{display:none}
.sr-i--say .sr-ring{animation:srPulse 1.2s ease-out 1}
@media (prefers-reduced-motion:reduce){.sr-say{transition:none}.sr-i--say .sr-ring{animation:none}}
.hx-img{overflow:hidden}