/*! Vega theme — WP/Elementor bridge.
 *
 * Bridges the original BEM markup (styled in main.css/plugins.css) with the
 * Elementor wrappers and the vega-* container classes emitted by the companion
 * widgets. Keep vendor main.css untouched; all WP-specific glue lives here.
 *
 * Load order: plugins.css -> loader.css -> main.css -> THIS FILE -> style.css.
 *
 * SCOPING RULE: every selector is anchored on a Vega marker —
 * `.elementor-widget-vega-*` (the Elementor widget wrapper our widgets emit)
 * or a `.vega-*` block class. Nothing here matches a bare Elementor wrapper, so
 * other Elementor pages/sections on the site are never affected.
 */

/* ------------------------------------------------ */
/* 1. Neutralise Elementor wrapper chrome           */
/* ------------------------------------------------ */
/* The layout in main.css expects the original section/grid markup. Elementor
 * inserts .elementor-widget-container (and default widget margins) around each
 * widget; we make those wrappers layout-transparent so the BEM rhythm holds. */
.elementor-widget-vega-hero .elementor-widget-container,
.elementor-widget-vega-marquee .elementor-widget-container,
.elementor-widget-vega-portfolio .elementor-widget-container,
.elementor-widget-vega-services .elementor-widget-container,
.elementor-widget-vega-resume-timeline .elementor-widget-container,
.elementor-widget-vega-tools .elementor-widget-container,
.elementor-widget-vega-testimonials .elementor-widget-container,
.elementor-widget-vega-section-heading .elementor-widget-container,
.elementor-widget-vega-socials .elementor-widget-container,
.elementor-widget-vega-contact .elementor-widget-container {
  margin: 0;
  padding: 0;
}

/* Elementor gives widgets a default bottom margin via --widgets-spacing /
 * .elementor-widget:not(:last-child). Our widgets manage their own vertical
 * rhythm (section 5), so zero it out only on Vega widgets. */
.elementor-element [class*="elementor-widget-vega-"]:not(:last-child),
.elementor-element [class*="elementor-widget-vega-"] {
  margin-bottom: 0;
}

/* Vega widget root containers are pure pass-through wrappers — they must not
 * introduce their own box so children inherit the original section context. */
.vega-hero,
.vega-marquee,
.vega-portfolio,
.vega-services,
.vega-resume,
.vega-tools,
.vega-testimonials,
.vega-heading,
.vega-socials,
.vega-contact {
  display: block;
  width: 100%;
}

/* Elementor's editor adds an empty-state min-height that can offset pinned
 * GSAP sections; clear it on our full-bleed widgets in the live frontend. */
body:not(.elementor-editor-active) .elementor-widget-vega-hero,
body:not(.elementor-editor-active) .elementor-widget-vega-portfolio {
  min-height: 0;
}

/* ------------------------------------------------ */
/* 1b. Column / container width fixes                */
/* ------------------------------------------------ */
/* The widgets re-use the original Bootstrap grid (plugins.css: .row, .col-*,
 * gx-0). For that grid to compute the right percentage widths the host
 * Elementor column must offer the full content width and must not impose extra
 * flex sizing on the widget. We only relax the *column that holds a Vega
 * widget*, identified by the widget class on a descendant — never bare columns
 * on other pages. */
.elementor-column-wrap:has(> .elementor-widget-wrap > [class*="elementor-widget-vega-"]),
.elementor-widget-wrap:has(> [class*="elementor-widget-vega-"]) {
  width: 100%;
}

/* The widget element itself should fill the column (Elementor sometimes sets
 * width:auto on inline-ish widgets). Keeps percentage grids inside honest. */
[class*="elementor-widget-vega-"] {
  width: 100%;
}

/* ------------------------------------------------ */
/* 2. Vertical rhythm restoration                    */
/* ------------------------------------------------ */
/* In the original markup each block sat inside <section class="inner inner-*-
 * bottom">, and main.css attached the large section padding to the *combined*
 * selector `.inner.inner-stack-bottom` etc. Our widgets emit the modifier
 * class (e.g. `inner-stack-bottom`) WITHOUT the `.inner` base, and the section
 * JSON is set to padding:0 / stretched. So that padding no longer applies and
 * neighbouring sections would slam together. We restore the same rhythm here,
 * scoped to the Vega wrappers, mirroring the main.css scale.
 *
 * NOTE: values mirror main.css `.inner.inner-stack-bottom`. Kept here so the
 * vendor file stays untouched. [проверить на живом WP] */
.vega-portfolio.inner-stack-bottom,
.vega-portfolio.inner-grid-bottom,
.vega-services.inner-stack-bottom {
  padding: 11rem 0 0.5rem 0;
}

/* Generic top/bottom breathing room for content sections that lost their
 * `.inner` wrapper. Conservative defaults; the section JSON can still override
 * via Elementor section padding if a layout needs it. */
.elementor-widget-vega-services .vega-services,
.elementor-widget-vega-resume-timeline .vega-resume,
.elementor-widget-vega-tools .vega-tools,
.elementor-widget-vega-testimonials .vega-testimonials,
.elementor-widget-vega-socials .vega-socials,
.elementor-widget-vega-contact .vega-contact {
  padding-top: 5.5rem;
  padding-bottom: 2.5rem;
}

.elementor-widget-vega-section-heading .vega-heading {
  padding-top: 5.5rem;
  padding-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .vega-portfolio.inner-stack-bottom,
  .vega-portfolio.inner-grid-bottom,
  .vega-services.inner-stack-bottom {
    padding: 16rem 0 0.5rem 0;
  }
  .elementor-widget-vega-services .vega-services,
  .elementor-widget-vega-resume-timeline .vega-resume,
  .elementor-widget-vega-tools .vega-tools,
  .elementor-widget-vega-testimonials .vega-testimonials,
  .elementor-widget-vega-socials .vega-socials,
  .elementor-widget-vega-contact .vega-contact {
    padding-top: 8rem;
    padding-bottom: 3.5rem;
  }
  .elementor-widget-vega-section-heading .vega-heading {
    padding-top: 8rem;
  }
}

@media only screen and (min-width: 1400px) {
  .vega-portfolio.inner-stack-bottom,
  .vega-portfolio.inner-grid-bottom,
  .vega-services.inner-stack-bottom {
    padding: 18rem 0 1.5rem 0;
  }
  .elementor-widget-vega-services .vega-services,
  .elementor-widget-vega-resume-timeline .vega-resume,
  .elementor-widget-vega-tools .vega-tools,
  .elementor-widget-vega-testimonials .vega-testimonials,
  .elementor-widget-vega-socials .vega-socials,
  .elementor-widget-vega-contact .vega-contact {
    padding-top: 9.5rem;
    padding-bottom: 4.5rem;
  }
  .elementor-widget-vega-section-heading .vega-heading {
    padding-top: 9.5rem;
  }
}

/* ------------------------------------------------ */
/* 3. Full-bleed widgets (hero + marquee)            */
/* ------------------------------------------------ */
/* The hero intro and the GSAP marquee both rely on the original full-viewport
 * width. The marquee in particular uses translate: calc(-100% + 100vw) in
 * main.css; any side padding from the Elementor column/container would make the
 * track land short. Even with the section set to stretched + boxed-off in JSON,
 * Elementor's .elementor-container can keep a content max-width / gutter, so we
 * break the marquee track out to the full viewport. Hero already builds its own
 * full-height intro, so we just zero side gutters around it. */
.elementor-widget-vega-marquee .vega-marquee,
.elementor-widget-vega-marquee .items {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* The marquee section is meant to bleed edge-to-edge. If the host column keeps
 * inner gutters, pull the track to the viewport edges. Scoped to our widget so
 * no other Elementor section is widened. [проверить на живом WP] */
.elementor-widget-vega-marquee {
  margin-left: 0;
  margin-right: 0;
}

.elementor-widget-vega-hero .vega-hero,
.elementor-widget-vega-hero .main {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ------------------------------------------------ */
/* 4. Grid integrity (masonry / stack / cards)       */
/* ------------------------------------------------ */
/* Elementor columns are flex children (display:flex on .elementor-row /
 * .elementor-widget-wrap). Guard the percentage-based Vega grids against a
 * stray flex context squeezing them, and ensure the Bootstrap rows behave as
 * block grids regardless of the surrounding Elementor flexbox. */

/* Masonry portfolio — Bootstrap row + Masonry.js. Keep the row full width and
 * the figure columns at their intended col-md-6 share. */
.elementor-widget-vega-portfolio .vega-portfolio--masonry,
.elementor-widget-vega-portfolio .my-gallery {
  width: 100%;
  max-width: 100%;
}
.elementor-widget-vega-portfolio .my-gallery .gallery__item {
  /* respects col-12 / col-md-6 from plugins.css; just prevent flex-shrink
   * from a parent flex context collapsing the column. */
  flex: 0 0 auto;
}

/* Stack portfolio — flex column of cards (styled in section 6). Ensure it is a
 * proper block-level full-width container inside the Elementor column. */
.elementor-widget-vega-portfolio .vega-portfolio--stack {
  width: 100%;
}

/* Services stack — GSAP scroll-stack; main.css fixes its height and stacks
 * .stack-item absolutely. It must hold full width and not be flex-shrunk. */
.elementor-widget-vega-services .vega-services,
.elementor-widget-vega-services .services-stack {
  width: 100%;
}

/* Tools cards — percentage flex grid (50/33/25%). Keep the flex container full
 * width so the items wrap at the right breakpoints. */
.elementor-widget-vega-tools .vega-tools.tools-cards {
  width: 100%;
  max-width: 100%;
}

/* Resume lines — Bootstrap rows; keep the container full width. */
.elementor-widget-vega-resume-timeline .vega-resume,
.elementor-widget-vega-resume-timeline .resume-lines,
.elementor-widget-vega-resume-timeline .resume-lines-number {
  width: 100%;
  max-width: 100%;
}

/* Testimonials swiper — Swiper needs a defined-width parent or slides collapse.
 * Pin it to the column's full width; Swiper computes slide width from there. */
.elementor-widget-vega-testimonials .swiper-testimonials {
  width: 100%;
  max-width: 100%;
}

/* Contact form — Bootstrap row of form fields. Keep the row full width so the
 * col-* field widths resolve correctly. */
.elementor-widget-vega-contact .vega-contact,
.elementor-widget-vega-contact .contact-form {
  width: 100%;
  max-width: 100%;
}

/* ------------------------------------------------ */
/* 5. Portfolio "stack" cards (new widget markup)    */
/* ------------------------------------------------ */
/* The masonry style reuses the original .gallery__* / .my-gallery styles from
 * main.css. The stack style is a widget-specific card with no legacy CSS, so
 * it is styled here, matching the template's card language. */
.vega-portfolio--stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.vega-stack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.25rem;
  background-color: var(--t-bright);
  color: var(--t-opp-bright);
}

.vega-stack-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.vega-stack-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.no-touch .vega-stack-card:hover .vega-stack-card__image img {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}

.vega-stack-card__body {
  padding: 1.5rem 1.75rem 1.75rem;
}

.vega-stack-card__title {
  margin: 0 0 0.35em;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.15;
}

.vega-stack-card__tag {
  margin: 0;
  opacity: 0.7;
}

@media only screen and (min-width: 992px) {
  .vega-portfolio--stack {
    gap: 3rem;
  }
  .vega-stack-card__body {
    padding: 2rem 2.5rem 2.5rem;
  }
}

/* ------------------------------------------------ */
/* 6. Editor-preview safety                          */
/* ------------------------------------------------ */
/* GSAP pin/parallax + Swiper are initialised by app.js after load. Inside the
 * Elementor editor the page is not "loaded" the same way; reveal animated
 * elements by default so a freshly dropped widget is never invisible. */
.elementor-editor-active .animate-in-up,
.elementor-editor-active .loading__fade,
.elementor-editor-active .loading__item,
.elementor-editor-active .reveal-type .char {
  opacity: 1 !important;
  -webkit-transform: none !important;
          transform: none !important;
}

/* The loader overlay must never cover the Elementor editor canvas. */
.elementor-editor-active #loader {
  display: none !important;
}

/* ------------------------------------------------ */
/* 7. Contact-form honeypot                          */
/* ------------------------------------------------ */
/* Anti-spam field rendered by the contact widget — kept in the DOM for bots
 * but removed from layout/AT for real users. */
.vega-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
 * NebulaLab custom logo — size it down in the fixed header/footer.
 * (WP Custom Logo outputs a full-resolution <img class="custom-logo">; the
 * white brand mark is 512px, so constrain its display size.)
 * ------------------------------------------------------------------------ */
.logo .custom-logo-link { display: inline-flex; align-items: center; }
.logo .custom-logo {
  height: 42px;
  width: auto;
  max-width: 180px;
  display: block;
}

/* --------------------------------------------------------------------------
 * Preloader disabled in Customizer (body.vega-no-preloader) — show content
 * instantly, keep the loader hidden. JS also handles this; CSS is the safety net.
 * ------------------------------------------------------------------------ */
body.vega-no-preloader #loader,
body.vega-no-preloader .loader {
  display: none !important;
}
body.vega-no-preloader .loading__fade,
body.vega-no-preloader .loading__item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
 * Подгонка дисплейных заголовков под Manrope.
 * Размеры макета (h1 до 16rem, h2 до 14rem) рассчитаны под Urbanist (узкий).
 * Manrope шире и крупнее по метрикам + русский текст длиннее → заголовки
 * переразмерены и переносятся. Ужимаем через clamp (адаптивно) и плотним трекинг,
 * сохраняя «крупный дисплейный» характер макета.
 * ------------------------------------------------------------------------ */
h1,
.headline__title {
  font-size: clamp(3.6rem, 7vw, 9rem) !important;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
h2,
.reveal-type {
  font-size: clamp(3rem, 5.6vw, 7rem) !important;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
h3 {
  font-size: clamp(2.4rem, 3.6vw, 4rem) !important;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
 * Hero intro <em> (demo-2 / .title__line em.text-end) — фикс наезда на десктопе.
 * Дисплейный h1 выше ужат до ~90px (Manrope шире Urbanist), поэтому строка
 * крупного заголовка стала ~94px. Em-метрики макета были рассчитаны под
 * 126–160px-заголовок (Urbanist) и переросли строку → em выше line-box,
 * следующая строка наезжает. Перемасштабируем em под ужатую строку: высота em
 * (padding-top + 3 строки) <= высоты крупной строки, как в оригинале
 * (там em-height == big-line-height). Дизайн/положение сохраняем 1:1.
 * ------------------------------------------------------------------------ */
@media only screen and (min-width: 1200px) {
  .title__line em.text-end {
    max-width: 240px;
    padding-top: 2.8rem;
    margin-right: 4rem;
    font-size: 1.5rem;
    line-height: 1.28;
  }
}
@media only screen and (min-width: 1400px) {
  .title__line em.text-end {
    max-width: 260px;
    padding-top: 3.2rem;
    margin-right: 5rem;
    font-size: 1.6rem;
    line-height: 1.28;
  }
}
@media only screen and (min-width: 1600px) {
  .title__line em.text-end {
    max-width: 280px;
    padding-top: 3.4rem;
    font-size: 1.7rem;
    line-height: 1.28;
  }
}

/* Пер-картиночные трансформы карточек услуг (контролы репитера nl_vega_services:
   Сдвиг X/Y, Масштаб, Поворот). Elementor ставит CSS-переменные на конкретную карточку
   (.elementor-repeater-item-XXX .service-img); здесь собираем их в один transform.
   Дефолты = идентичность → пока не трогаешь ползунки, вид не меняется. Грузится и на
   фронте, и в превью редактора (живой апдейт при движении ползунка). */
.services-stack__image .service-img {
  transform: translate(var(--svc-img-x, 0px), var(--svc-img-y, 0px)) scale(var(--svc-img-scale, 1)) rotate(var(--svc-img-rot, 0deg));
}

/* Пер-картиночные трансформы изображений отзывов (контролы репитера nl_vega_testimonials:
   Сдвиг X/Y, Масштаб, Поворот). Var'ы ставит Elementor на .elementor-repeater-item-XXX
   .timage__inner img; родитель .timage__inner = overflow:hidden → картинка двигается/режется
   внутри рамки. Дефолты = идентичность. Только под виджетом Vega (нативные демо var'ов не ставят). */
.nl-vega-testimonials .timage__inner img {
  transform: translate(var(--tst-img-x, 0px), var(--tst-img-y, 0px)) scale(var(--tst-img-scale, 1)) rotate(var(--tst-img-rot, 0deg));
}

/* Мобайл-дефолт: картинка карточки услуг вписывается ЦЕЛИКОМ (не режется по краям,
   как было с object-fit:cover <768px). Перебивается контролом «Стиль → Картинка →
   Вписывание» на мобильном брейкпоинте (выше специфичность {{WRAPPER}}). */
@media only screen and (max-width: 767px) {
  .services-stack__image .service-img {
    object-fit: contain;
    object-position: center;
  }
  /* То же для картинки отзыва (была object-fit:cover → резалась на мобайле).
     Перебивается контролом «Стиль → Изображение → Вписывание» на брейкпоинте. */
  .nl-vega-testimonials .timage__inner img {
    object-fit: contain;
    object-position: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   ХРОМ САЙТА — два варианта хедера (на выбор пользователя)
   ───────────────────────────────────────────────────────────────────────── */

/* ВАРИАНТ 1 — Плавающий хром (nl_vega_header): его содержимое .header/.logo/.color
   = position:fixed (плавает по углам). Обёртка Elementor из vega_do_header()/footer()
   НЕ должна занимать место в потоке (иначе «отступ сверху»). Схлопываем в absolute
   нулевой высоты; внутренние секции/колонки — без отступов и мин-высоты. */
.vega-elementor-chrome {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.vega-elementor-chrome--header { top: 0; z-index: 20; }
.vega-elementor-chrome--footer { bottom: 0; }
.vega-elementor-chrome .elementor-section,
.vega-elementor-chrome .elementor-container,
.vega-elementor-chrome .elementor-column,
.vega-elementor-chrome .elementor-widget-wrap,
.vega-elementor-chrome .elementor-widget {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
/* Elementor при анимациях вешает transform/filter на обёртки → это ломает
   position:fixed детей (.header/.logo/.color позиционируются относительно обёртки,
   а не вьюпорта → логотип и меню слипаются). Гасим, чтобы fixed считался от вьюпорта. */
.vega-elementor-chrome,
.vega-elementor-chrome .elementor-element,
.vega-elementor-chrome .elementor-widget,
.vega-elementor-chrome .elementor-widget-container {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
  -webkit-backdrop-filter: none;
}

/* ВАРИАНТ 2 — Обычный top-bar хедер (nl_vega_topbar): полоса сверху, in-flow,
   свои классы (не тематические). Стилит этот блок; Style-контролы перебивают. */
.nl-vega-topbar {
  width: 100%;
  background-color: #161619;
  color: #f2f5fc;
}
.nl-vega-topbar.is-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}
.nl-vega-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1248px;
  margin: 0 auto;
  padding: 1.4rem 2.4rem;
}
.nl-vega-topbar__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}
.nl-vega-topbar__logo img { display: block; height: 3.2rem; width: auto; }
.nl-vega-topbar__logo-text { font-weight: 700; font-size: 2rem; color: inherit; }
.nl-vega-topbar__nav { flex: 1 1 auto; }
.nl-vega-topbar__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nl-vega-topbar__link {
  color: inherit;
  text-decoration: none;
  font-size: 1.6rem;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.nl-vega-topbar__link:hover { opacity: 1; }
.nl-vega-topbar__actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex: 0 0 auto;
}
.nl-vega-topbar__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.8rem;
  border-radius: 0.8rem;
  background-color: #f2f5fc;
  color: #141414;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.nl-vega-topbar__cta:hover { opacity: 0.85; }
/* CSS-бургер (без JS): чекбокс-хак. На десктопе скрыт. */
.nl-vega-topbar__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nl-vega-topbar__burger { display: none; }
@media only screen and (max-width: 767px) {
  .nl-vega-topbar__inner { flex-wrap: wrap; gap: 1rem; padding: 1rem 1.4rem; }
  .nl-vega-topbar__logo { order: 1; }
  .nl-vega-topbar__actions { order: 2; margin-left: auto; }
  .nl-vega-topbar__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    order: 3; width: 36px; height: 36px; padding: 7px; cursor: pointer; color: inherit;
  }
  .nl-vega-topbar__burger span {
    display: block; width: 100%; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .nl-vega-topbar__nav {
    order: 4; flex-basis: 100%;
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  }
  .nl-vega-topbar__toggle:checked ~ .nl-vega-topbar__nav { max-height: 70vh; }
  .nl-vega-topbar__toggle:checked ~ .nl-vega-topbar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nl-vega-topbar__toggle:checked ~ .nl-vega-topbar__burger span:nth-child(2) { opacity: 0; }
  .nl-vega-topbar__toggle:checked ~ .nl-vega-topbar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nl-vega-topbar__menu { flex-direction: column; align-items: flex-start; gap: 0; padding: 0.4rem 0; }
  .nl-vega-topbar__item { width: 100%; }
  .nl-vega-topbar__link { display: block; padding: 0.9rem 0; opacity: 1; }
}