/*! 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;
}