/* ============================================================================
   Карточка «соцсети + лента клипов ВКонтакте» — ОБЩИЙ компонент сайта.
   Разметка: template-parts/social-clips.php (карточка) + template-parts/vk-clips.php (лента).
   Данные: includes/vk-clips.php. JS: assets/js/vk-clips.js.

   ⚠ ГЛАВНОЕ ОБ АРХИТЕКТУРЕ. Компонент НЕ привязан ни к одному scope-классу: он живёт на
   семи страницах, у каждой из которых своя дизайн-система (свои шрифты, палитра и формы).
   Поэтому все правила написаны на СОБСТВЕННЫХ токенах `--vkc-*`, а «родным» на конкретной
   странице компонент делает короткий блок оверрайдов в конце файла — там для каждого scope
   переопределены только цвета/радиусы/тени. Ни одного цвета хардкодом в теле компонента.

   Шрифт компонент НЕ задаёт — наследует шрифт страницы-хозяина. Это осознанно: так лента
   везде выглядит частью своей страницы, а не вставкой.

   Где выведен (решения владельца 2026-08-05):
     .ohlash-base   /lash-base/, /lash-base-online/ — в секциях «Я не просто мастер» / «Автор курса»
     .ohm-home      главная — после «Мои работы»
     .olm           /lashes/ — после «Мои работы», перед «Прайс»
     .tkr           /trener-master-kurs/ — после «Привет, я Мария»
     .scepka-pro    /prochaya-szhepka-pro/ — после блока автора «OHLASH.MARI»
     .scepka-light  /lash-povyshenie-kvalifikacii/ — после «Что пишут после курса», перед «Цена»

   Папка landings/ авто-игнорится дизайн-линтером (DESIGN.md §7, landings/README.md).
   ============================================================================ */

/* ---------------------------------------------------------------- токены ---- */
/* Дефолты нейтральные (светлая тема). Каждый scope переопределяет своё — см. конец файла. */
.ohlash-social{
  --vkc-card-bg:#F3EFE4;
  --vkc-card-line:#E8E2D2;
  --vkc-card-radius:26px;
  --vkc-card-pad:26px 30px;
  --vkc-card-shadow:none;
  --vkc-border-w:1px;

  --vkc-text:#131610;          /* заголовки/жирный текст */
  --vkc-body:#3d3d37;          /* подводки */
  --vkc-muted:#6E6E66;         /* подписи, «3 дня назад» */
  --vkc-label:#6E6E66;         /* лейблы-капс */
  --vkc-dot:#C69FD5;           /* точка-маркер лейбла */

  --vkc-surface:#FFFFFF;       /* кружки стрелок, подложка иконок */
  --vkc-accent:#C69FD5;        /* hover play, фокус */
  --vkc-accent-text:#FFFFFF;
  --vkc-invert-bg:#131610;     /* hover плитки */
  --vkc-invert-text:#FAF7EF;

  --vkc-tile-tg:#EFE4F5;
  --vkc-tile-vk:#F7E3EB;
  --vkc-tile-tg-ic:#C69FD5;
  --vkc-tile-vk-ic:#CF98AE;
  --vkc-tile-radius:999px;

  --vkc-clip-radius:18px;
  --vkc-more-bg:#F7E3EB;

  --vkc-gap:16px;
  --vkc-cols:4;                /* сколько карточек клипов видно на ПК */
}

/* ------------------------------------------------------------- карточка ---- */
.ohlash-social{
  background:var(--vkc-card-bg);
  border:var(--vkc-border-w) solid var(--vkc-card-line);
  border-radius:var(--vkc-card-radius);
  box-shadow:var(--vkc-card-shadow);
  padding:var(--vkc-card-pad);
  color:var(--vkc-text);
}
.ohlash-social *{box-sizing:border-box}

/* Карточка встаёт последним блоком внутри чужой секции (5 страниц из 7) - там ей нужен
   свой отступ сверху. На страницах обучения её положение задаёт сама страница. */
.ohlash-social--gap{margin-top:clamp(40px,5vw,64px)}

/* Верхний ярус: слева подводка, справа плитки. */
.ohlash-social__head{
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
}

/* Лейбл компонента свой, а не `.label` страницы: на семи страницах `.label` выглядит
   по-разному (или его нет вовсе), и лента разъезжалась бы от страницы к странице. */
.ohlash-social__label{
  display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vkc-label);
}
.ohlash-social__label::before{
  content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--vkc-dot);
}
.ohlash-social__copy p{
  margin:0;font-weight:400;font-size:15px;line-height:1.5;color:var(--vkc-body);max-width:460px;
}

.ohlash-social__links{display:flex;gap:12px;flex-wrap:wrap}
.ohlash-social__tile{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 22px 10px 12px;
  border:var(--vkc-border-w) solid transparent;border-radius:var(--vkc-tile-radius);
  color:var(--vkc-text);text-decoration:none;transition:.2s;
}
.ohlash-social__tile--tg{background:var(--vkc-tile-tg)}
.ohlash-social__tile--vk{background:var(--vkc-tile-vk)}
.ohlash-social__tile-ic{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  border-radius:50%;background:var(--vkc-surface);transition:.2s;
}
.ohlash-social__tile-ic svg{width:20px;height:20px}
.ohlash-social__tile--tg .ohlash-social__tile-ic{color:var(--vkc-tile-tg-ic)}
.ohlash-social__tile--vk .ohlash-social__tile-ic{color:var(--vkc-tile-vk-ic)}
.ohlash-social__tile-txt{display:flex;flex-direction:column;line-height:1.25}
.ohlash-social__tile-txt b{font-weight:600;font-size:15px}
.ohlash-social__tile-txt span{font-size:12.5px;color:var(--vkc-muted);transition:.2s}
.ohlash-social__tile:hover{
  background:var(--vkc-invert-bg);color:var(--vkc-invert-text);border-color:var(--vkc-invert-bg);
}
.ohlash-social__tile:hover .ohlash-social__tile-txt span{color:var(--vkc-invert-text);opacity:.72}
.ohlash-social__tile:hover .ohlash-social__tile-ic{background:rgba(255,255,255,.14)}
.ohlash-social__tile:hover .ohlash-social__tile-ic{color:var(--vkc-invert-text)}
.ohlash-social__tile:focus-visible{outline:2px solid var(--vkc-accent);outline-offset:3px}

/* ----------------------------------------------------------------- лента ---- */
/* Второй ярус карточки. 30px, а не 44: оба яруса в одной рамке, а не две секции. */
.ohlash-vkc{margin-top:30px}

/* Своего заголовка у ленты нет (владелец убрал 2026-08-05) - блок вводят лейбл и подводка. */
.ohlash-vkc__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;
}
.ohlash-vkc__copy p{
  margin:12px 0 0;font-weight:400;font-size:15px;line-height:1.5;
  color:var(--vkc-body);max-width:620px;
}

.ohlash-vkc__nav{display:flex;gap:10px;flex:0 0 auto}
.ohlash-vkc__arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;
  background:var(--vkc-surface);
  border:var(--vkc-border-w) solid var(--vkc-card-line);border-radius:50%;
  color:var(--vkc-text);font-size:22px;line-height:1;cursor:pointer;transition:.2s;
}
.ohlash-vkc__arrow:hover{
  background:var(--vkc-invert-bg);border-color:var(--vkc-invert-bg);color:var(--vkc-invert-text);
}
.ohlash-vkc__arrow:focus-visible{outline:2px solid var(--vkc-accent);outline-offset:3px}
.ohlash-vkc__arrow[disabled]{opacity:.32;cursor:default}
.ohlash-vkc__arrow[disabled]:hover{
  background:var(--vkc-surface);border-color:var(--vkc-card-line);color:var(--vkc-text);
}

.ohlash-vkc__rail{
  display:flex;gap:var(--vkc-gap);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ohlash-vkc__rail::-webkit-scrollbar{display:none}

/* Ровно --vkc-cols карточек в видимой части на любой ширине: считаем от контейнера, не от vw. */
.ohlash-vkc__item,
.ohlash-vkc__more{
  flex:0 0 calc((100% - (var(--vkc-cols) - 1) * var(--vkc-gap)) / var(--vkc-cols));
  min-width:0;scroll-snap-align:start;
}

/* Тонкий контур внутрь, а не border: часть клипов сняты не в 9:16, и VK вшивает в обложку
   белые поля - без контура такая карточка теряет края на светлом фоне. */
.ohlash-vkc__facade{
  position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;
  overflow:hidden;background:var(--vkc-tile-tg);   /* пастельная заглушка, пока грузится обложка */
  border:0;border-radius:var(--vkc-clip-radius);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(19,22,16,.08);
}
.ohlash-vkc__facade:focus-visible{outline:2px solid var(--vkc-accent);outline-offset:3px}
.ohlash-vkc__cover{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.ohlash-vkc__facade:hover .ohlash-vkc__cover{transform:scale(1.05)}

/* Play - светлый кружок с тёмным треугольником: на пастельных обложках читается лучше
   тёмной плашки. Треугольник - классический CSS-приём на нулевом псевдоэлементе. */
.ohlash-vkc__play{
  position:absolute;top:50%;left:50%;
  display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  background:rgba(255,255,255,.92);border-radius:50%;
  transform:translate(-50%,-50%);transition:.2s;
  /* Обводка нужна ровно там, где у обложки светлый кадр: без неё белый кружок пропадал. */
  box-shadow:0 4px 14px rgba(19,22,16,.18),0 0 0 1px rgba(19,22,16,.08);
}
.ohlash-vkc__play::after{
  content:"";margin-left:3px;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  border-left:13px solid var(--vkc-text);
}
.ohlash-vkc__facade:hover .ohlash-vkc__play{
  background:var(--vkc-accent);transform:translate(-50%,-50%) scale(1.08);
}
.ohlash-vkc__facade:hover .ohlash-vkc__play::after{border-left-color:var(--vkc-accent-text)}

.ohlash-vkc__dur{
  position:absolute;right:9px;bottom:9px;padding:3px 7px;
  background:rgba(19,22,16,.68);border-radius:6px;
  color:#fff;font-size:12px;line-height:1.25;
}

.ohlash-vkc__body{padding-top:10px}
.ohlash-vkc__title{margin:0;font-weight:400;font-size:14px;line-height:1.3;color:var(--vkc-text)}
.ohlash-vkc__meta{margin:4px 0 0;font-weight:400;font-size:12.5px;color:var(--vkc-muted)}

/* Последняя карточка ленты - ссылка в сообщество (та же пропорция, что у клипов). */
.ohlash-vkc__more{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  aspect-ratio:9/16;padding:18px;
  background:var(--vkc-more-bg);
  border:var(--vkc-border-w) solid var(--vkc-more-bg);border-radius:var(--vkc-clip-radius);
  color:var(--vkc-text);text-align:center;text-decoration:none;transition:.2s;
}
.ohlash-vkc__more:hover{
  background:var(--vkc-invert-bg);border-color:var(--vkc-invert-bg);color:var(--vkc-invert-text);
}
.ohlash-vkc__more:focus-visible{outline:2px solid var(--vkc-accent);outline-offset:3px}
.ohlash-vkc__more-ic{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  background:var(--vkc-surface);border-radius:50%;color:var(--vkc-tile-vk-ic);transition:.2s;
}
.ohlash-vkc__more-ic svg{width:22px;height:22px}
.ohlash-vkc__more:hover .ohlash-vkc__more-ic{
  background:rgba(255,255,255,.14);color:var(--vkc-invert-text);
}
.ohlash-vkc__more-title{font-weight:600;font-size:14px;line-height:1.25}
.ohlash-vkc__more-hint{font-size:12.5px;color:var(--vkc-muted);transition:.2s}
.ohlash-vkc__more:hover .ohlash-vkc__more-hint{color:var(--vkc-invert-text);opacity:.72}

/* ------------------------------------------------------------- адаптив ---- */
/* 920 - общий брейкпоинт большинства лендингов сайта. */
@media(max-width:920px){
  .ohlash-social{padding:24px}
  .ohlash-social__head{grid-template-columns:1fr;gap:22px}
  .ohlash-social__copy p{max-width:none}
  .ohlash-social__links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ohlash-social__tile{justify-content:flex-start}
  .ohlash-vkc{--vkc-cols:2.4;--vkc-gap:12px;margin-top:26px}
  /* Стрелки на мобайле не нужны - лента листается пальцем. */
  .ohlash-vkc__nav{display:none}
  .ohlash-vkc__head{display:block}
  .ohlash-vkc__copy p{max-width:none}
}

@media(max-width:480px){
  .ohlash-social__links{grid-template-columns:1fr}
  .ohlash-vkc{--vkc-cols:1.6}
}

/* ============================================================================
   Лайтбокс: единственное место, где создаётся iframe VK (assets/js/vk-clips.js).
   Живёт в <body>, вне любых scope, поэтому токены страниц тут недоступны -
   значения проставлены явно и одинаковы для всех семи страниц.
   ============================================================================ */
.ohlash-clip-lightbox{
  position:fixed;inset:0;z-index:100000;   /* выше плавающей шапки и off-canvas темы */
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(19,22,16,.92);
}
.ohlash-clip-lightbox[hidden]{display:none}
.ohlash-clip-lightbox-open{overflow:hidden}

/* Плавающая шапка сайта (z-index 8000) остаётся ПОД оверлеем, но её пилюля «МЕНЮ» стоит
   ровно там же, где крестик закрытия, и они наезжают друг на друга. Пока лайтбокс открыт,
   шапка не нужна - убираем её на это время. Класс висит на <html>, снаружи ничего не ломает. */
.ohlash-clip-lightbox-open .qp-site-header{display:none}

.ohlash-clip-lightbox__frame{
  position:relative;width:min(420px,100%);max-height:86vh;aspect-ratio:9/16;
  overflow:hidden;background:#000;border-radius:18px;
}
.ohlash-clip-lightbox__frame iframe{display:block;width:100%;height:100%;border:0}

.ohlash-clip-lightbox__close,
.ohlash-clip-lightbox__nav{
  position:absolute;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;
  background:rgba(19,22,16,.6);border:1px solid rgba(255,255,255,.3);border-radius:50%;
  color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:.2s;
}
.ohlash-clip-lightbox__close:hover,
.ohlash-clip-lightbox__nav:hover{background:#C69FD5;border-color:#C69FD5}
.ohlash-clip-lightbox__close:focus-visible,
.ohlash-clip-lightbox__nav:focus-visible{outline:2px solid #C69FD5;outline-offset:3px}
.ohlash-clip-lightbox__close{top:20px;right:20px;font-size:30px}
.ohlash-clip-lightbox__nav--prev{top:50%;left:20px;transform:translateY(-50%)}
.ohlash-clip-lightbox__nav--next{top:50%;right:20px;transform:translateY(-50%)}

.ohlash-clip-lightbox__caption{
  position:absolute;right:24px;bottom:24px;left:24px;
  color:#fff;font-size:14px;line-height:1.4;text-align:center;
}

@media(max-width:920px){
  .ohlash-clip-lightbox{padding:12px}
  /* Стрелки по бокам плеера на узком экране прижимались к краям и терялись на светлых
     кадрах - уводим их ПОД плеер, в один ряд с крестиком (грабли quantum-pc). */
  .ohlash-clip-lightbox__frame{max-height:72vh;margin-bottom:100px}
  .ohlash-clip-lightbox__close,
  .ohlash-clip-lightbox__nav{
    top:auto;bottom:24px;background:rgba(19,22,16,.82);border-color:rgba(255,255,255,.55);
  }
  .ohlash-clip-lightbox__close{
    right:auto;left:50%;width:54px;height:54px;transform:translateX(-50%);
  }
  .ohlash-clip-lightbox__nav--prev{left:calc(50% - 96px);transform:none}
  .ohlash-clip-lightbox__nav--next{right:calc(50% - 96px);transform:none}
  .ohlash-clip-lightbox__caption{bottom:88px}
}

/* ============================================================================
   ОВЕРРАЙДЫ ПОД СТРАНИЦЫ-ХОЗЯЕВА.
   Только токены - ни одного нового правила раскладки. Значения взяты из палитр самих
   страниц (см. их CSS), чтобы компонент читался как родной блок, а не как вставка.
   ============================================================================ */

/* --- /lash-base/ и /lash-base-online/ (светлый editorial, Inter + Playfair) ---------- */
/* Дефолты компонента и есть палитра lash-base, поэтому тут переопределять нечего.
   Оставлено явным блоком, чтобы при смене дефолтов страницы обучения не «поехали». */
.ohlash-base .ohlash-social{
  --vkc-card-bg:var(--sand);
  --vkc-card-line:var(--sand-line);
  --vkc-card-radius:var(--r);
  --vkc-text:var(--dark);
  --vkc-muted:var(--gray);
  --vkc-label:var(--gray);
  --vkc-dot:var(--lav);
  --vkc-surface:var(--white);
  --vkc-accent:var(--lav);
  --vkc-invert-bg:var(--dark);
  --vkc-invert-text:var(--cream);
  --vkc-tile-tg:var(--lav-soft);
  --vkc-tile-vk:var(--pink-soft);
  --vkc-tile-tg-ic:var(--lav);
  --vkc-tile-vk-ic:var(--pink);
  --vkc-more-bg:var(--pink-soft);
}

/* --- Главная (.ohm-home): светлая «канва» внутри тёмного корпуса, Onest --------------- */
/* Карточка ставится на канве --canvas #EFECE5, поэтому фон карточки - белый: на канве это
   читается как поднятая плашка (тот же приём, что у остальных карточек главной). */
.ohm-home .ohlash-social{
  --vkc-card-bg:var(--white);
  --vkc-card-line:rgba(29,27,26,.10);
  --vkc-card-radius:var(--r-lg);
  --vkc-text:var(--ink);
  --vkc-body:var(--grey-t);
  --vkc-muted:var(--grey-t);
  --vkc-label:var(--grey-t);
  --vkc-dot:var(--pink-deep);
  --vkc-surface:var(--canvas);
  --vkc-accent:var(--pink-deep);
  --vkc-accent-text:var(--ink);
  --vkc-invert-bg:var(--dark);
  --vkc-invert-text:#FFFFFF;
  --vkc-tile-tg:var(--lilac);
  --vkc-tile-vk:var(--pink);
  --vkc-tile-tg-ic:var(--dark);
  --vkc-tile-vk-ic:var(--dark);
  --vkc-more-bg:var(--yellow);
  --vkc-clip-radius:var(--r-md);
}

/* --- /lashes/ (.olm): яркий поп, Unbounded + Manrope ---------------------------------- */
.olm .ohlash-social{
  --vkc-card-bg:#FFFFFF;
  --vkc-card-line:rgba(24,17,20,.10);
  --vkc-card-radius:var(--olm-radius);
  --vkc-text:var(--olm-ink);
  --vkc-body:#4a4046;
  --vkc-muted:#6d6169;
  --vkc-label:#6d6169;
  --vkc-dot:var(--olm-hot);
  --vkc-surface:var(--olm-off);
  --vkc-accent:var(--olm-hot);
  --vkc-invert-bg:var(--olm-purple);
  --vkc-invert-text:#FFFFFF;
  --vkc-tile-tg:var(--olm-lilac);
  --vkc-tile-vk:var(--olm-blush-soft);
  --vkc-tile-tg-ic:var(--olm-purple);
  --vkc-tile-vk-ic:var(--olm-hot);
  --vkc-more-bg:var(--olm-lime);
  --vkc-clip-radius:18px;
}

/* --- /trener-master-kurs/ (.tkr): розовый, Manrope + Cormorant ------------------------ */
.tkr .ohlash-social{
  --vkc-card-bg:var(--cream);
  --vkc-card-line:var(--pink-pale);
  --vkc-card-radius:24px;
  --vkc-text:var(--ink);
  --vkc-body:var(--graphite);
  --vkc-muted:var(--gray-ink);
  --vkc-label:var(--gray-ink);
  --vkc-dot:var(--pink-hot);
  --vkc-surface:#FFFFFF;
  --vkc-accent:var(--pink-hot);
  --vkc-invert-bg:var(--ink);
  --vkc-invert-text:var(--cream);
  --vkc-tile-tg:var(--pink-warm);
  --vkc-tile-vk:var(--pink-bg);
  --vkc-tile-tg-ic:var(--pink-hot);
  --vkc-tile-vk-ic:var(--pink-hot-d);
  --vkc-more-bg:var(--pink-warm);
}

/* --- «Прочная сцепка» PRO и ЛАЙТ: общая система (какао-обводки 2px + brutal-тень) ----- */
/* Здесь единственные две страницы с ЖИРНОЙ обводкой и смещённой тенью - фирменный приём
   этих лендингов. Компонент повторяет его через --vkc-border-w и --vkc-card-shadow. */
.scepka-pro .ohlash-social,
.scepka-light .ohlash-social{
  --vkc-card-bg:var(--silk);
  --vkc-card-line:var(--cacao);
  --vkc-card-radius:20px;
  --vkc-card-shadow:6px 6px 0 var(--cacao);
  --vkc-border-w:2px;
  --vkc-text:var(--cacao);
  --vkc-body:var(--cacao);
  --vkc-muted:rgba(58,43,32,.66);
  --vkc-label:rgba(58,43,32,.66);
  --vkc-dot:var(--pink-deep);
  --vkc-surface:#FFFFFF;
  --vkc-accent:var(--cloud);
  --vkc-accent-text:var(--cacao);
  --vkc-invert-bg:var(--cacao);
  --vkc-invert-text:var(--silk);
  --vkc-tile-tg:var(--cloud);
  --vkc-tile-vk:var(--cherry);
  --vkc-tile-tg-ic:var(--cacao);
  --vkc-tile-vk-ic:var(--cacao);
  --vkc-tile-radius:14px;
  --vkc-clip-radius:14px;
  --vkc-more-bg:var(--dew);
}
/* Обводка у плиток и стрелок в этой системе не декоративная, а несущая - делаем её видимой. */
.scepka-pro .ohlash-social__tile,
.scepka-light .ohlash-social__tile,
.scepka-pro .ohlash-vkc__arrow,
.scepka-light .ohlash-vkc__arrow{border-color:var(--cacao)}
.scepka-pro .ohlash-vkc__facade,
.scepka-light .ohlash-vkc__facade{box-shadow:inset 0 0 0 2px var(--cacao)}