/*
 * Полноэкранный просмотр скриншотов (guru-landing-gallery.js + PhotoSwipe):
 * кнопка «развернуть» в углу кадра и подпись в галерее. Общие для лендингов
 * модулей (.blp) и карточек «Возможности» главной (.feature-card__image).
 * Подключают виджеты через get_style_depends (handle guru-gallery).
 */

.guru-zoomable img{ cursor:zoom-in; }
/* одиночный кадр блока лендинга: кнопка позиционируется от тела окна */
.blp .blp-shot__body.guru-zoomable{ position:relative; }
.guru-zoom{
  position:absolute; top:10px; right:10px; z-index:11;
  width:36px; height:36px; padding:0; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.45); background:rgba(20,32,46,.58); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(20,32,46,.22);
  cursor:pointer; opacity:0; transform:scale(.92);
  transition:opacity .18s ease, transform .18s ease, background .18s ease;
}
.guru-zoomable:hover .guru-zoom, .guru-zoomable--button:hover .guru-zoom, .guru-zoom:focus-visible{ opacity:1; transform:none; }
.guru-zoom:hover{ background:rgba(20,32,46,.78); }
.guru-zoom:focus-visible{ outline:2px solid var(--primary-color, #2EA043); outline-offset:2px; }
/* карточки главной: кадр лежит в рамке слайда 10px — кнопка в углу самого кадра */
.feature-card__image .guru-zoom{ top:18px; right:18px; }
/* тач-экраны: наведения нет — кнопка видна всегда и крупнее под палец */
@media (hover:none){
  .guru-zoom{ opacity:.94; transform:none; width:40px; height:40px; top:8px; right:8px; }
  .feature-card__image .guru-zoom{ top:16px; right:16px; }
}

/* подпись кадра в галерее: заголовок блока + описание кадра */
.pswp .guru-pswp-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding:22px 20px calc(18px + env(safe-area-inset-bottom));
  text-align:center; color:rgba(255,255,255,.92);
  font-size:14px; line-height:1.45;
  background:linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  pointer-events:none;
}
.pswp .guru-pswp-cap b{ display:block; font-size:15.5px; font-weight:600; color:#fff; letter-spacing:-.01em; }
.pswp .guru-pswp-cap span{ display:block; margin-top:3px; font-size:13.5px; color:rgba(255,255,255,.78); }
.pswp .guru-pswp-cap__rotate{ display:none; }
@media (orientation:portrait) and (max-width:600px){
  .pswp .guru-pswp-cap__rotate{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    padding:5px 11px; border-radius:99px; background:rgba(255,255,255,.12);
    font-style:normal; font-size:12.5px; color:rgba(255,255,255,.85);
  }
  .pswp .guru-pswp-cap__rotate::before{ content:"\21BB"; font-size:14px; }
}
/* телефон в ландшафте: кадр занимает весь экран, подпись не перекрывает его */
@media (max-height:500px){
  .pswp .guru-pswp-cap{ display:none; }
}

/*
 * Загрузка кадров (guru-gallery-loading.js) — скелетон DS (стандарт «Скелетон», утвержден владельцем
 * 04.11.2026; пункт миграции «галерея .guru-ld → --fluid по aspect-ratio»; до него — спиннер-кольцо).
 * Пока видимый кадр окна грузится, на его месте — сцена .sg-sk с одним примитивом
 * .sg-sk__block--fluid в пропорции кадра. Классы, цвета, полоса и keyframes — только из копии DS
 * (shell/sg-skeleton.css, стиль guru-sg-skeleton), своих здесь нет (страж —
 * tools/tests/skeleton-guard-test.php). Сроки ведет скрипт по токенам копии: скелетон появляется
 * после --sg-skeleton-reveal-delay (кадр из кэша откроется раньше, и скелетон не мелькнет), живет не
 * меньше --sg-skeleton-min-visible и гаснет за --sg-skeleton-fade-out над уже открытым кадром.
 * Незагруженные кадры прячем только под html.guru-ld-on — его ставит скрипт: без скрипта кадры видны
 * как раньше. Первый кадр hero (без loading="lazy") не трогаем.
 */
html.guru-ld-on :is(.feature-card__image .feature-slider__slide, .blp .feature-slider__slide, .blp-shot__body,
  .blp-why__pic, .blp-why__page, .blp-ui__pic, .blp-ui__cmp, .blp-ex__pic) img[loading="lazy"]{
  opacity:0; transition:opacity .45s ease;
}
html.guru-ld-on :is(.feature-card__image .feature-slider__slide, .blp .feature-slider__slide, .blp-shot__body,
  .blp-why__pic, .blp-why__page, .blp-ui__pic, .blp-ui__cmp, .blp-ex__pic) img[loading="lazy"].is-ld{ opacity:1; }
/* скелетон был виден: кадр открывается под ним сразу, гаснет только слой скелетона (стандарт §6 —
   гасить оба слоя разом нельзя, в середине просвечивал бы фон) */
html.guru-ld-on :is(.feature-card__image .feature-slider__slide, .blp .feature-slider__slide, .blp-shot__body,
  .blp-why__pic, .blp-why__page, .blp-ui__pic, .blp-ui__cmp, .blp-ex__pic).guru-ld-out img[loading="lazy"]{ transition:none; }
/* окно плитки интерфейса подгоняется под кадр (width:auto) и до загрузки схлопнулось бы —
   ширину даем заранее по --nat-w, высоту — по width/height кадра; после загрузки — прежние правила */
html.guru-ld-on .blp-ui__pic img[loading="lazy"]:not(.is-ld){ width:var(--nat-w, 100%); }
.blp .blp-shot__body{ position:relative; }
/*
 * Сцена скелетона — над кадром, по его месту: left, top, width, радиус кадра и --ar примитива ставит
 * скрипт по самому кадру (высота — из пропорции). Сцена — единственный containing block полосы (своя
 * position: absolute вместо relative копии); поверхность непрозрачная — поверхность страницы: полосы DS
 * рассчитаны на нее, а не на рамку слайда главной (#474c4d), и под слоем на гашении не просвечивает
 * пустое окно.
 */
.guru-ld{
  position:absolute; z-index:3; display:none;
  background:var(--surface-primary, #fafafa);
  pointer-events:none;
}
/* сцена есть, только пока окно на экране: за краем слайдера и ниже по странице ее нет — нет и
   анимации; при показе фазу волны выравнивает sg-skeleton.js (animationstart) */
.guru-ld-show.guru-ld-vis > .guru-ld{ display:block; }
.guru-ld-out > .guru-ld{ opacity:0; transition:opacity var(--sg-skeleton-fade-out) ease-out; }
/* слайдер сравнения: ручка стоит по центру кадра, — без кадров она не нужна */
.blp-ui__cmp .blp-ui__cmp-handle{ transition:opacity .3s ease; }
.blp-ui__cmp.guru-ld-wait .blp-ui__cmp-handle{ opacity:0; }
/* без движения — без проявления кадра; полосу копия DS гасит сама (блок остается статичным) */
@media (prefers-reduced-motion:reduce){
  html.guru-ld-on :is(.feature-card__image .feature-slider__slide, .blp .feature-slider__slide, .blp-shot__body,
    .blp-why__pic, .blp-why__page, .blp-ui__pic, .blp-ui__cmp, .blp-ex__pic) img[loading="lazy"]{ transition:none; }
}