/* ------------------------------------------------------------------
   Hero caption styling.

   The static site renders this copy with template classes (.nk-banner,
   .banner-fs, .title-xl-2, .lead, .tc-light) whose rules live in
   style-jasmine.css. Importing that 297KB bundle would redefine .btn,
   .bg-image and other generic classes that Bootstrap 4.1.3 and the
   Umetric theme already own, so instead these rules reproduce the same
   computed values under our own namespace.

   Values taken from style-jasmine.css:
     h1-h6            font-weight 500, Poppins, line-height 1.45
     .tc-light h1-h6  color #fff
     .title           margin-bottom 1.25rem
     .title-xl-2      1.8rem / 2.2rem >=768 / 2.8rem >=1600 (lh 1.3)
     .lead            font-size 1.2rem, font-weight 300
     .banner-fs       min-height 100vh (header is .is-transparent)
     .banner-wrap     padding 40px 0, 70px 0 on large screens
   ------------------------------------------------------------------ */

/* #home already gets position:relative and overflow:hidden from hero.css. */
.vex-hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
}

/* hero.css pins .vam-hero to z-index 2; the copy has to sit above it.
   Matches the static site's `#home .nk-banner { z-index: 3 }`. */
.vex-hero .vex-hero-banner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 992px) {
  .vex-hero .vex-hero-banner { padding-top: 70px; padding-bottom: 70px; }
}

/* Phone: copy first, visual underneath it.
   hero.css carries this for the original markup (`#home .nk-banner .banner-wrap`),
   which our rebuilt caption does not match, so the copy would otherwise centre
   vertically and land on the animation.

   The vertical start of the animation itself is NOT set here — it is the
   widget's "Visual starts from top" control, so it stays adjustable per
   breakpoint in Elementor rather than being pinned in a stylesheet. */
@media (max-width: 991.98px) {
  .vex-hero { align-items: flex-start; }
  .vex-hero .vex-hero-banner {
    padding-top: 8vh;
    padding-bottom: 0;
  }
  /* The animation is absolutely positioned; keep it from spilling past the
     section once it has been pushed down. */
  .vex-hero .vam-hero { bottom: 0; }
}

.vex-hero-caption {
  text-align: center;
}

@media (min-width: 992px) {
  .vex-hero-caption { text-align: left; }
}

.vex-hero-title {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  line-height: 1.45;
  font-size: 1.8rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px)  { .vex-hero-title { font-size: 2.2rem; } }
@media (min-width: 1600px) { .vex-hero-title { font-size: 2.8rem; line-height: 1.3; } }

.vex-hero-lead {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 1rem;
}

.vex-hero-lead:last-child { margin-bottom: 0; }