/* ==========================================================================
   MODIVIAM — JELENETEK
   --------------------------------------------------------------------------
   Egy meglévő Elementor szekcióból teljes képernyős filmjelenet lesz:
   görgetésre tekeredő videó háttér, fölötte egyetlen, középre zárt
   szövegoszlop.

   Ez szünteti meg a „kép, mellette random szöveg" elrendezést: a kép nem
   mellette van, hanem MÖGÖTTE, és a szöveg egyetlen gondolatként áll rajta.
   ========================================================================== */

.mv-scene {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  /* TELJES SZÉLESSÉG: a szekció kitör a tartalomkonténer max-szélességéből,
     így a videó a képernyő két széléig ér — nem marad üres sáv mellette. */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  min-height: 100vh;
  min-height: 100svh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: clamp(6rem, 14vh, 11rem) !important;
  padding-inline: var(--mv-gutter, 1.5rem) !important;
  background-color: var(--mv-black, #08090B) !important;
  background-image: none !important;
}

/* --- Videó háttér --------------------------------------------------------- */

/* A videó hordozója. Normál jelenetnél a szekciót fedi le. */
.mv-scene__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.mv-scene__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* ==========================================================================
   MAGAS JELENET — hosszabb görgetési út rövid felvételhez
   A háttér és a szöveg is kitűzött (sticky): a képernyőn maradnak, miközben
   a görgetés tovább fut. Így a 2,5 másodperces felvétel háromszor annyi
   görgetésen terül szét, és nem tűnik állóképnek — a videó viszont nem
   nyúlik meg, mert a hordozója pontosan egy képernyő magas.
   ========================================================================== */

.mv-scene--tall {
  display: block !important;
  /* OLDALPADDING NÉLKÜL: az alap `.mv-scene` 54px belső térközt ad kétoldalt,
     ami a kitűzött burkot 1428 képpontra szűkítette egy 1536-os ablakban —
     innen jött a két üres sáv a videó mellett. A térközt a burok adja belül. */
  padding: 0 !important;
  overflow: visible !important;
}

/* Egyetlen kitűzött burok: benne a videó és a szöveg is. A magasabb szekció
   görgetése tolja végig, így nincs üresen maradó terület. */
.mv-scene--tall .mv-scene__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
  padding-inline: var(--mv-gutter, 1.5rem);
}

.mv-scene--tall .mv-scene__bg {
  position: absolute;
  inset: 0;
  height: 100%;
}

.mv-scene--tall .e-con-inner {
  position: relative;
  z-index: 2;
}

/* --- Fátyol ---------------------------------------------------------------
   A felvételek középen világosak; enélkül a szöveg elveszne rajtuk.        */

.mv-scene__veil {
  position: absolute;
  inset: 0;
  /* A hordozón belül a videó FÖLÉ kerül, de a szöveg (z-index: 2) alá. */
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8, 9, 11, 0.88) 0%,
      rgba(8, 9, 11, 0.52) 30%,
      rgba(8, 9, 11, 0.62) 70%,
      rgba(8, 9, 11, 0.92) 100%),
    radial-gradient(ellipse 76% 58% at 50% 50%,
      transparent 0%,
      rgba(8, 9, 11, 0.5) 100%);
}

/* --- A szekció saját képei eltűnnek --------------------------------------- */

.mv-scene__hidden-media {
  display: none !important;
}

/* --- Belső elrendezés: egyetlen, középre zárt oszlop -----------------------
   Az Elementor kétoszlopos szerkezetét egy oszloppá fogjuk össze. A markup
   nem változik, csak a megjelenítés.                                       */

.mv-scene > .e-con-inner,
.mv-scene .e-con-inner {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: var(--mv-scene-maxw, 46rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* --- Igazítás ------------------------------------------------------------
   A középre zárt szöveg minden szekcióban ugyanúgy néz ki — ettől lesz
   sablonos. A jelenetek ezért oldalra zártak, és váltakoznak.              */

.mv-scene--left  { justify-content: flex-start !important; }
.mv-scene--right { justify-content: flex-end !important; }

.mv-scene--left  > .e-con-inner,
.mv-scene--left  .e-con-inner  { align-items: flex-start !important; margin-inline: 0 auto !important; }

.mv-scene--right > .e-con-inner,
.mv-scene--right .e-con-inner  { align-items: flex-end !important;   margin-inline: auto 0 !important; }

.mv-scene--center > .e-con-inner,
.mv-scene--center .e-con-inner { align-items: center !important;     margin-inline: auto !important; }

.mv-scene .e-con,
.mv-scene .e-child {
  width: 100% !important;
  max-width: none !important;
  flex: 0 1 auto !important;
  padding: 0 !important;
  background: transparent !important;
  align-items: center !important;
}

.mv-scene .elementor-widget { width: 100% !important; }

/* A SZÖVEG mindig balra zárt — akkor is, ha a blokk a jobb oldalon áll.
   A jobbra zárt szöveg mellett a felsorolás vonalkája a hasáb túlsó szélére
   került, messze a mondattól. A blokk helye és a szöveg zárása két külön
   dolog: a blokkot igazítjuk, a sorokat nem. */
.mv-scene--left  .elementor-widget,
.mv-scene--right .elementor-widget { text-align: left; }
.mv-scene--center .elementor-widget { text-align: center; }

/* --- Tipográfia a jeleneten belül ------------------------------------------
   Nagy, könnyű Forum cím; alatta szűk hasábban, tág sorközzel a szöveg.
   A méretkontraszt viszi a hierarchiát, nem a vastagság.                   */

.mv-scene .elementor-widget-heading .elementor-heading-title,
.mv-scene h1, .mv-scene h2, .mv-scene h3 {
  font-family: var(--mv-font-display, "Forum", serif) !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0.015em !important;
  color: var(--mv-text, #F0EBE2) !important;
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem) !important;
}

.mv-scene .elementor-widget-text-editor,
.mv-scene .elementor-widget-text-editor p,
.mv-scene .elementor-icon-list-text,
.mv-scene p,
.mv-scene li {
  font-family: var(--mv-font-ui, "Jost", sans-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(0.9375rem, 0.9rem + 0.28vw, 1.0625rem) !important;
  line-height: 2 !important;
  letter-spacing: 0.06em !important;
  color: var(--mv-text-soft, #C4BEB3) !important;
  max-width: 42ch !important;
}

.mv-scene--left  .elementor-widget-text-editor p,
.mv-scene--left  p, .mv-scene--left li  { margin-inline: 0 auto !important; text-align: left !important; }

.mv-scene--right .elementor-widget-text-editor p,
.mv-scene--right p, .mv-scene--right li { margin-inline: 0 !important; text-align: left !important; }

.mv-scene--center .elementor-widget-text-editor p,
.mv-scene--center p, .mv-scene--center li { margin-inline: auto !important; text-align: center !important; }

/* A felsorolás-jelölő ikonok zavarnának a jeleneten. */
.mv-scene .elementor-icon-list-icon { display: none !important; }

.mv-scene .elementor-icon-list-item {
  border: 0 !important;
  padding-block: clamp(0.5rem, 1.5vw, 1rem) !important;
}

.mv-scene--left  .elementor-icon-list-item,
.mv-scene--right .elementor-icon-list-item { justify-content: flex-start !important; }
.mv-scene--center .elementor-icon-list-item { justify-content: center !important; }

/* A címsor lockupja is a szöveggel egy vonalban kezdődik. */
.mv-scene--right .mv-has-brandmark { align-items: center; justify-content: flex-start; }

/* Gomb a jeleneten */
.mv-scene .elementor-button {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   LÉPCSŐZETES BEÚSZÁS
   A JS a .is-on osztályt teszi rá. A rejtést KIZÁRÓLAG a .mv-js kapcsolja be,
   amit szintén a JS tesz ki — így hibás JS esetén minden szöveg látszik.
   ========================================================================== */

.mv-js .mv-scene .mv-scene__step {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--mv-step-delay, 0ms);
  will-change: opacity, transform;
}

.mv-js .mv-scene .mv-scene__step.is-on {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   RESZPONZÍV
   ========================================================================== */

@media (max-width: 768px) {
  .mv-scene {
    min-height: 88vh;
    padding-block: clamp(4.5rem, 12vh, 7rem) !important;
  }
  .mv-scene .elementor-widget-text-editor p,
  .mv-scene p { max-width: 34ch !important; }
}

/* ==========================================================================
   MOZGÁS KIKAPCSOLVA
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mv-js .mv-scene .mv-scene__step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}