/* Сквозной блок «Подписывайтесь на наши социальные сети» (01.10.2026, макет Figma 10860:2846).
   Вставка в любое место сайта: <insert name="show_block" module="site" id="3"> («Блоки на сайте», ID 3).
   Размеры макета × 0,72 (контент 1620 → .container сайта 1170), как на посадке консультации.
   Слева карточка YouTube-канала, справа лента видео (ВК Видео по умолчанию, YouTube — кнопкой в углу): на десктопе уходит за правый край контейнера до края окна.
   Не зависит от owl и jQuery: лента — горизонтальный скролл со scroll-snap, стрелки и плеер — soc-block.js.
   Цвета — переменные темы сайта (--text_main, --text_sub, --btn) с запасными значениями. */
.socb{--socb-gap:14px;--socb-h:374px;margin:60px 0;overflow-x:clip;color:var(--text_main,#242A4F)}
.socb *{box-sizing:border-box}
.socb :where(ul){margin:0;padding:0;list-style:none}
.socb :where(li){margin:0;padding:0}
.socb li::before{display:none}
.socb :where(p){margin:0}

/* шапка: заголовок с лидом слева, стрелки справа по нижнему краю */
.socb__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.socb .socb__title{max-width:820px;margin:0 0 10px;font-size:36px;font-weight:600;line-height:1.2;color:var(--text_main,#242A4F)}
.socb__lead{max-width:640px;font-size:16px;font-weight:500;line-height:1.4;color:var(--text_sub,#505572)}
.socb__nav{display:flex;gap:22px;flex:none}
.socb__arrow{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--btn,#515776);border-radius:8px;background:var(--btn,#515776);color:#fff;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.socb__arrow::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url(/custom/my/image/soc-block/soc-arrow.svg) center/contain no-repeat;mask:url(/custom/my/image/soc-block/soc-arrow.svg) center/contain no-repeat}
.socb__arrow--prev::before{transform:scaleX(-1)}
.socb__arrow:hover{background:var(--btn_hover,#6E7493);border-color:var(--btn_hover,#6E7493)}
.socb__arrow:disabled{background:transparent;color:var(--btn,#515776);cursor:default}
.socb__arrow:focus-visible{outline:2px solid var(--btn,#515776);outline-offset:2px}

/* сетка: карточка фиксированной ширины + лента до правого края окна */
.socb__grid{display:grid;grid-template-columns:576px minmax(0,1fr);gap:var(--socb-gap);align-items:stretch}
.socb__viewport{min-width:0;margin-right:calc(-1 * max(15px, (100vw - 1170px) / 2))}

/* карточка канала */
.socb__card{position:relative;display:flex;flex-direction:column;min-height:var(--socb-h);padding:21px 22px 22px;border-radius:14px;overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(135% 125% at 41% 27%,#3C405D 39%,#505474 54%,#64698B 69%,#8D92B8 100%) #3B3F5C}
.socb__sun{position:absolute;z-index:-1;height:auto;max-width:none;pointer-events:none}
.socb__sun--s{left:90.19%;top:28.03%;width:15.87%;transform:rotate(-17.09deg)}
.socb__sun--b{left:65.69%;top:50%;width:48.71%;transform:rotate(19.59deg)}
.socb__sun--l{left:-3.56%;top:76.2%;width:23.84%;transform:rotate(27.57deg)}
.socb__banner{display:block;aspect-ratio:740/141;margin-bottom:18px;border-radius:8px;overflow:hidden}
.socb__banner img{display:block;width:100%;height:100%;object-fit:cover}
.socb__badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:7px}
.socb__badge{display:inline-flex;align-items:center;gap:5px;padding:3px 14px;border-radius:50px;background:rgba(255,255,255,.15);font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}
.socb__badge--yt{background:#FF1B26}
.socb__badge img{display:block;width:15px;height:auto}
.socb .socb__name{margin-bottom:7px;font-size:18px;font-weight:600;line-height:1.4;color:#fff}
.socb .socb__where{margin-bottom:7px;font-size:13px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.6)}
.socb__round{display:flex;gap:8px}
.socb__round a{display:flex;align-items:center;justify-content:center;width:37px;height:37px;border:.5px solid rgba(255,255,255,.4);border-radius:50%;transition:background-color .2s,border-color .2s}
.socb__round a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.8)}
.socb__round img{display:block;width:18px;height:auto}
.socb__round li:first-child img{width:16px}
.socb__pills{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:24px}
.socb__pills a{display:flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 20px;border-radius:50px;background:#fff;font-size:13px;font-weight:600;line-height:1;color:#3C405D;text-decoration:none;white-space:nowrap;transition:background-color .2s}
.socb__pills a:hover{background:#E9EAF0;color:#3C405D}
.socb__pills img{display:block;width:15px;height:auto}
.socb__pills li:nth-child(2) img,.socb__pills li:nth-child(3) img{width:17px}
.socb a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* лента видео */
.socb__track{display:flex;gap:var(--socb-gap);height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
.socb__track::-webkit-scrollbar{display:none}
.socb__track>li{flex:none;width:calc(var(--socb-h) * 934 / 519);height:var(--socb-h);scroll-snap-align:start}
.socb__video{position:relative;width:100%;height:100%;border-radius:14px;overflow:hidden;background:#242A4F}
.socb__cover{position:relative;display:block;width:100%;height:100%;color:#fff;text-decoration:none}
.socb__cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.socb__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,34,34,.24) 5%,rgba(0,0,0,.6) 100%);pointer-events:none}
.socb__play{position:absolute;z-index:1;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;background:url(/custom/my/image/soc-block/soc-play.svg) center/contain no-repeat;transition:transform .2s}
.socb__vtitle{position:absolute;z-index:1;left:22px;right:22px;bottom:20px;font-size:22px;font-weight:600;line-height:1.4;color:#fff;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.socb__cover:hover img{transform:scale(1.03)}
.socb__cover:hover .socb__play{transform:scale(1.08)}
.socb__cover:focus-visible{outline:2px solid #fff;outline-offset:-4px}
/* запасная кнопка: ролик по умолчанию играет во ВК Видео, отсюда — плеер YouTube */
.socb__alt{position:absolute;z-index:2;top:14px;right:14px;display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:50px;background:rgba(255,255,255,.92);font-size:13px;font-weight:600;line-height:1;color:#3C405D;text-decoration:none;white-space:nowrap;transition:background-color .2s}
.socb__alt:hover{background:#fff;color:#3C405D}
.socb__alt img{display:block;width:17px;height:auto}
.socb__video iframe{position:absolute;z-index:3;inset:0;width:100%;height:100%;border:0}
.socb__video.is-playing .socb__alt{display:none}

/* до 1100 px карточка и лента друг под другом, лента на всю ширину окна */
@media (max-width:1100px){
  .socb__grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .socb__card{max-width:640px}
  .socb__viewport{margin-right:-15px}
  .socb__track{padding-right:15px}
}
@media (max-width:767px){
  .socb{--socb-h:auto;margin:40px 0}
  .socb__head{margin-bottom:14px}
  .socb__nav{display:none}
  .socb .socb__title{max-width:none;margin-bottom:8px;font-size:24px}
  .socb__lead{max-width:none;font-size:14px}
  .socb__card{max-width:none;min-height:0;padding:15px 15px 15px}
  .socb__banner{aspect-ratio:321/89;margin-bottom:15px}
  .socb__badge{padding:4px 10px;font-size:11px}
  .socb .socb__name{font-size:16px}
  .socb .socb__where{font-size:13px}
  .socb__round a{width:32px;height:32px}
  .socb__round img{width:15px}
  .socb__round li:first-child img{width:14px}
  .socb__pills{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding-top:20px}
  .socb__pills a{height:45px;font-size:14px}
  .socb__sun--b{left:53%;top:47%;width:115%}
  .socb__sun--s{left:71%;top:39%;width:37%}
  .socb__sun--l{left:-8%;top:76%;width:68%}
  .socb__track>li{width:84%;height:auto;aspect-ratio:16/9}
  .socb__play{width:56px;height:56px;margin:-28px 0 0 -28px}
  .socb__alt{top:10px;right:10px;height:26px;padding:0 10px;font-size:12px}
  .socb__alt img{width:15px}
  .socb__vtitle{left:14px;right:14px;bottom:12px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .socb__track{scroll-behavior:auto}
  .socb__cover img,.socb__play{transition:none}
}