/* ============================================================
   Hello Biztonság — GLOBÁLIS FELÜLETI ELEMEK
   Minden oldalon betöltődik (functions.php), és ezeket adja:

   1) az ALOLDALAK nav-jának jobb oldali gombjai: „Rólunk”,
      „Kríziskezelés”, és jobbszélen a „Vissza a főoldalra”.
      Mobilon (≤600px) a szekció-hivatkozások eltűnnek (ezt a
      lapok saját CSS-e intézi), és — a főoldalhoz hasonlóan —
      csak a „Rólunk” + „Kríziskezelés” marad;
   2) az egységes lábléc (főoldal + minden aloldal);
   3) a szekció-címek mobil méretezése;
   4) a több-kártyás blokkok mobil „sticky stack” viselkedése —
      görgetéskor a lapok egymásra csúsznak, vissza felé kinyílnak
      (a sorszámozást a hb-ui.js teszi rá, ld. ott a DECKS listát);
   5) a jobb alsó sarokban lebegő „ugrás az oldal tetejére” gomb
      (a markupot a hb-ui.js teszi be, ide semmit nem kell írni).

   A szabályok NINCSENEK .hb / .kb / … wrapper alá skópozva, mert
   minden aloldal navjában ugyanezek az osztályok szerepelnek.
   ============================================================ */

/* ---- 1 · Nav jobb oldal ---- */
.hb-nav-right{display:flex;align-items:center;gap:26px}
.hb-nav-actions{display:flex;align-items:center;gap:14px;flex:none}

/* A „Rólunk” a főoldali nav-linkekkel egyező szedés — a főoldalon a
   .hb-nav-links adja, aloldalon nincs ilyen szülő, ezért itt is leírjuk. */
.hb-nav-actions .hb-nav-rolunk{
  font:600 14px 'Space Grotesk',sans-serif;color:rgba(247,245,240,.8);
  text-decoration:none;white-space:nowrap;
}

/* Piros pirula — ugyanaz, mint a főoldalon (.hb-btn-pill), de itt
   nagyobb fajsúllyal írjuk le, hogy aloldalon is biztosan érvényes
   legyen, a főoldali szabályba viszont ne szóljon bele. */
.hb-nav-actions .hb-btn-pill{
  font:700 14px 'Space Grotesk',sans-serif!important;color:#F7F5F0!important;
  background:#E23A3A;padding:11px 20px;border-radius:999px;
  text-decoration:none;white-space:nowrap;
}

/* Jobbszélső lime gomb: vissza a főoldalra. Mobilon elrejtjük — ott a
   logó viszi haza, és a helyet a Rólunk + Kríziskezelés kapja. */
.hb-nav-home{
  font:700 14px 'Space Grotesk',sans-serif;color:#003153;
  background:#C9EA3D;padding:11px 20px;border-radius:999px;
  text-decoration:none;white-space:nowrap;
}

/* Tábla-szélességen a szekció-hivatkozások + a három gomb már nem fér ki egy
   sorba (a nav vízszintesen túlcsordult). A lapok saját CSS-e csak 600px alatt
   rejti el a hivatkozásokat, ezért itt 900px-ig kiterjesztjük — a kivétel a
   főoldal (.hb-nav-links) és a Rólunk oldal (.ro-nav-links), mert azokban
   maguk a gombok is ebben a dobozban ülnek. */
@media(max-width:900px){
  .hb-nav-right > [class$="-nav-links"]:not(.hb-nav-links):not(.ro-nav-links){display:none!important}
}

@media(max-width:600px){
  .hb-nav-right{gap:0}
  .hb-nav-actions{gap:12px}
  .hb-nav-home{display:none}
}

/* ---- 2 · Egységes lábléc ----
   Ugyanaz a footer ül a főoldal és MINDEN aloldal alján, ezért a stílusa ide
   került a hb-style.css-ből (az aloldalak előnézetei azt nem töltik be).
   A színek szándékosan konkrét értékek, nem .hb-változók: így a lábléc akkor
   is helyes, ha a wrapper változói épp nincsenek betöltve.
   Markup: <div class="hb"><footer class="hb-foot">… (ld. a főoldali szekciót). */
.hb-foot{background:#00263f;padding:22px 0;border-top:1px solid rgba(247,245,240,.08)}
/* 1fr auto 1fr rács: a középső szöveg az OLDAL közepére esik (egyenlő szélű
   szélső oszlopok), nem a logók közé. A logók a saját oldalukra igazodnak. */
.hb-foot-inner{max-width:1280px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px}
.hb-foot-left{justify-self:start}
.hb-foot-right{justify-self:end}
/* A .hb prefix KELL: az Elementor frontend.min.css-ében van egy `.elementor img{height:auto}`
   reset, aminek ugyanaz a specificitása (0,1,1), mint a `.hb-foot-* img`-nek — és mivel az
   Elementor CSS-e később töltődik, döntetlennél ő nyerne. A wrapper class (0,2,1) leveri. */
.hb .hb-foot-left img{height:70px;width:auto;display:block}
.hb .hb-foot-right img{height:70px;width:auto;display:block;opacity:.92}
/* A Preaktivitás-logó a Rólunk oldalra visz — kattintható márkajel. */
.hb-foot-brand{display:block;cursor:pointer;transition:opacity .15s}
.hb-foot-center{text-align:center;display:flex;flex-direction:column;gap:8px}
.hb-foot-tagline{margin:0 auto;font:500 14px 'DM Sans',system-ui,sans-serif;color:rgba(247,245,240,.6);max-width:520px}
.hb-foot-br{display:inline}
.hb-foot-copy{margin:0;font:500 13px 'DM Sans',system-ui,sans-serif;color:rgba(247,245,240,.4)}

@media(max-width:560px){
  .hb-foot-inner{grid-template-columns:1fr;justify-items:center;gap:22px;padding-left:20px;padding-right:20px}
  .hb-foot-left,.hb-foot-right{justify-self:center}
  .hb-foot-br{display:none}
}

/* ---- 3 · Szekció-címek mobilon ----
   Az aloldalak szekció-címei inline stílussal 40/42/44px-esek (a markup az
   Elementor-widgetekben él), ami telefonon 4–5 sorra tört, és elnyomta a
   blokk többi részét. Itt egységesen EGY fokozattal kisebbre vesszük.

   A markuphoz nem kell hozzányúlni: az inline stílust attribútum-szelektorral
   találjuk meg, a `!important` pedig felülírja (a fontos külső szabály erősebb
   az inline stílusnál). Ha valahol új cím kerül be, csak ugyanezt a szedést
   kell használni — ez a szabály magától elkapja.
   Kivételek: a főoldal (.hb-h2) és a Rólunk oldal (.ro-h2) osztály-alapú
   címeinek saját mobil méretük van, azokat nem bántjuk. */
@media(max-width:600px){
  h2[style*="40px 'Space Grotesk'"],
  h2[style*="42px 'Space Grotesk'"],
  h2[style*="44px 'Space Grotesk'"]{font-size:34px!important;line-height:1.14!important}
  /* a vagyonvédelem-3 Anton-os címe (52px) is arányosan lejjebb */
  h2[style*="font-size:52px"]{font-size:38px!important;line-height:1.02!important}
}

/* ---- 4 · Kártya-paklik mobilon — „sticky stack” ----
   Telefonon a több-kártyás blokkok (mítosz-, csapda-, reveal-kártyák) egyetlen
   oszlopba rendeződnek, és a lista könnyen 5–6 képernyő hosszú lesz: a látogató
   csak görget, és nem érzi, hol tart. Ezért mobilon a pakli ÖSSZECSÚSZIK:
   lefelé görgetve a fenti lap megáll a képernyő tetején, a következő pedig
   ráúszik — visszafelé görgetve a pakli magától „kinyílik”. (Ugyanaz a séma,
   mint a fiatalok-eroszak-2 „Mit tehetsz?” blokkjában, csak globálisan.)

   A --hb-i sorszámot és a .hb-stack / .hb-stack-on osztályt a hb-ui.js teszi
   rá a rácsokra; ÚJ BLOKKNÁL nem kell ide írni semmit: elég a rács konténerére
   kézzel a .hb-stack osztály (a JS onnantól kezeli). A rögzülési vonal a
   --hb-stack-top (alap 16px), a lapok közt kilátszó sáv a --hb-stack-step
   (alap 9px) — konténerenként felülírható.
   Legalább 3 lapnál kapcsol be (.hb-stack-on), különben nincs mit egymásra
   csúsztatni. Az UTOLSÓ lap sosem ragad meg (a szülő aljánál elfogy a hely),
   így a blokk vége normálisan kigörgethető. */
@media(max-width:600px){
  .hb-stack.hb-stack-on > *{
    position:sticky;
    top:calc(var(--hb-stack-top,16px) + var(--hb-i,0) * var(--hb-stack-step,9px));
    /* a legtöbb kártyánk 18px-es; a lebegő árnyék ehhez az ívhez igazodik.
       Ha egy pakli másképp kerekít, a konténerén írd felül a változót. */
    border-radius:var(--hb-stack-radius,18px);
    /* felfelé vetett árnyék: ettől látszik, hogy a lapok EGYMÁSON fekszenek */
    box-shadow:0 -10px 26px -8px rgba(0,0,0,.55);
  }
}
/* Csökkentett mozgás: marad a sima, egymás alatti lista. */
@media (prefers-reduced-motion: reduce){
  .hb-stack.hb-stack-on > *{position:static!important;box-shadow:none}
}

/* ---- 5 · „Ugrás a tetejére” gomb ---- */
.hb-totop{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));
  width:48px;height:48px;border:none;border-radius:50%;
  background:#C9EA3D;color:#003153;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.55);
  z-index:9990;padding:0;
  /* alapból nincs ott: csak görgetés után úszik be */
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,background .16s;
}
.hb-totop.hb-totop-on{opacity:1;visibility:visible;transform:none}
.hb-totop:active{transform:scale(.94)}
.hb-totop:focus-visible{outline:3px solid #11B7A3;outline-offset:3px}
.hb-totop svg{width:24px;height:24px;display:block}

@media(max-width:600px){
  .hb-totop{width:44px;height:44px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .hb-totop svg{width:22px;height:22px}
}
@media (prefers-reduced-motion: reduce){
  .hb-totop{transition:opacity .01s}
}

/* ---- 5b · Piros KRÍZIS-gomb a zöld fölött (2026-09-15) ----
   Minden oldalon kint van (a hb-ui.js teszi be, #hb-sos), a
   /kriziskezeles/ gyűjtőoldalra visz. A szív ugyanúgy dobog, mint a
   főoldali krízis-doboz logója. Amíg a zöld gomb nincs kint (az oldal
   tetején), a piros a zöld helyén ül; görgetés után (.hb-sos-up)
   feljebb csúszik, hogy a zöld beférjen alá. A kríziskezelés oldalon
   (.kr) nem jelenik meg — önmagára mutatna. */
.hb-sos{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(150deg,#ff5a5a,#d02b2b);color:#F7F5F0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.55);
  z-index:9990;text-decoration:none;
  animation:hb-sos-ring 2.4s ease-out infinite;
  transition:bottom .22s ease,transform .16s;
}
.hb-sos.hb-sos-up{bottom:calc(20px + 48px + 12px + env(safe-area-inset-bottom))}
.hb-sos:active{transform:scale(.94)}
.hb-sos:focus-visible{outline:3px solid #F7F5F0;outline-offset:3px}
.hb-sos svg{width:26px;height:26px;display:block;transform-origin:center;animation:hb-sos-beat 1.4s ease-in-out infinite}
@keyframes hb-sos-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.13)}28%{transform:scale(1)}42%{transform:scale(1.1)}56%{transform:scale(1)}}
@keyframes hb-sos-ring{0%{box-shadow:0 10px 26px -8px rgba(0,0,0,.55),0 0 0 0 rgba(255,90,90,.55)}70%{box-shadow:0 10px 26px -8px rgba(0,0,0,.55),0 0 0 16px rgba(255,90,90,0)}100%{box-shadow:0 10px 26px -8px rgba(0,0,0,.55),0 0 0 0 rgba(255,90,90,0)}}
@media (hover:hover) and (pointer:fine){
  .hb-sos:hover{transform:translateY(-2px)}
}
@media(max-width:600px){
  .hb-sos{width:44px;height:44px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .hb-sos.hb-sos-up{bottom:calc(14px + 44px + 10px + env(safe-area-inset-bottom))}
  .hb-sos svg{width:24px;height:24px}
}
@media (prefers-reduced-motion: reduce){
  .hb-sos,.hb-sos svg{animation:none}
  .hb-sos{transition:none}
}

/* ============================================================
   6 · GÉPELŐDŐ BLOKKCÍM — minden aloldal 02-es blokkjának a címe
   ------------------------------------------------------------
   A szerkezetet a hb-ui.js építi fel, markupot NEM kell írni:

     <h2 class="hb-type">
       <span class="hb-type-ghost">Eredeti cím</span>   ← helyet foglal
       <span class="hb-type-live">gépelt szöveg|</span> ← ez látszik
     </h2>

   A „ghost” a cím eredeti tartalma láthatatlanul: ettől a doboz
   magassága gépelés közben sem ugrik meg, akárhány sorba tördel a
   böngésző. A látható szöveg fölé abszolút pozícióval kerül, így a
   sortörés és a középre igazítás is pontosan ugyanolyan marad.
   ============================================================ */
.hb-type{position:relative}
.hb-type-ghost{visibility:hidden}
.hb-type-live{position:absolute;left:0;top:0;right:0}
.hb-type-caret{
  display:inline-block;margin-left:2px;font-weight:400;color:#C9EA3D;
  animation:hbcaret 1s step-end infinite;
}
@keyframes hbcaret{0%,100%{opacity:1}50%{opacity:0}}

/* Csökkentett mozgás: a szkript hozzá sem nyúl a címhez (a teljes
   szöveg azonnal ott van), ez csak biztonsági háló. */
@media (prefers-reduced-motion: reduce){
  .hb-type-ghost{visibility:visible}
  .hb-type-live{display:none}
  .hb-type-caret{animation:none}
}

/* ============================================================
   ALOLDAL-HERO — EGYSÉGESÍTÉS (csak mobil/tablet)
   ------------------------------------------------------------
   Minden aloldal hero-ja ugyanaz a szerkezet:
     <div class="<téma>"> <header> …
        ├─ 1. gyerek: a fény-kör (abszolút, radial-gradient)
        └─ 2. gyerek: a rács (szöveg + jobb oldali kártya)
   A méretek viszont oldalanként, INLINE stílusban voltak kézzel
   beállítva (H1 70–76px, a fény left:24–38% között), ezért mobilon
   minden aloldal máshogy nézett ki: volt, ahol a cím kilógott, és
   volt, ahol a fény teljesen kicsúszott a képernyőről.

   Itt egy helyen húzzuk egyformára. A hb-ui.css a LEGUTOLSÓ betöltött
   stíluslap (ld. functions.php), de az inline stílust csak az
   !important tudja felülírni — ezért van rajta mindenhol.

   ASZTALI NÉZETBEN SZÁNDÉKOSAN NEM NYÚLUNK HOZZÁ: ott az oldalankénti
   hangolás jól áll, a kérés a mobil nézetre szólt.
   ============================================================ */
@media(max-width:900px){
  /* --- egységes hero-címméret --- */
  .kb  header h1,.kb2 header h1,.kb3 header h1,.kb4 header h1,
  .pb  header h1,.pb2 header h1,.pb3 header h1,
  .bsz header h1,.bsz2 header h1,.bsz3 header h1,.bsz4 header h1,
  .vv  header h1,.vv2 header h1,.vv3 header h1,
  .fe  header h1,.fe2 header h1,
  .kr  header h1,.ro  header h1,.hm header h1,.sz header h1,.sz2 header h1{
    font-size:56px!important;line-height:.94!important;
  }
  /* --- a fény egységesen a hero JOBB FELSŐ sarkába ---
     A színt SZÁNDÉKOSAN nem bántjuk: az oldal saját akcentusa
     (piros / türkiz / lime) marad, csak a helye és a mérete lesz
     mindenhol ugyanaz. */
  .kb  header>div:first-child,.kb2 header>div:first-child,
  .kb3 header>div:first-child,.kb4 header>div:first-child,
  .pb  header>div:first-child,.pb2 header>div:first-child,
  .pb3 header>div:first-child,
  .bsz header>div:first-child,.bsz2 header>div:first-child,
  .bsz3 header>div:first-child,.bsz4 header>div:first-child,
  .vv  header>div:first-child,.vv2 header>div:first-child,
  .vv3 header>div:first-child,
  .fe  header>div:first-child,.fe2 header>div:first-child,
  .kr  header>div:first-child,.ro  header>div:first-child,
  .hm header>div:first-child,.sz header>div:first-child,.sz2 header>div:first-child{
    top:-90px!important;left:auto!important;right:-110px!important;
    width:340px!important;height:340px!important;
  }
}
@media(max-width:600px){
  .kb  header h1,.kb2 header h1,.kb3 header h1,.kb4 header h1,
  .pb  header h1,.pb2 header h1,.pb3 header h1,
  .bsz header h1,.bsz2 header h1,.bsz3 header h1,.bsz4 header h1,
  .vv  header h1,.vv2 header h1,.vv3 header h1,
  .fe  header h1,.fe2 header h1,
  .kr  header h1,.ro  header h1,.hm header h1,.sz header h1,.sz2 header h1{
    font-size:44px!important;
  }
  .kb  header>div:first-child,.kb2 header>div:first-child,
  .kb3 header>div:first-child,.kb4 header>div:first-child,
  .pb  header>div:first-child,.pb2 header>div:first-child,
  .pb3 header>div:first-child,
  .bsz header>div:first-child,.bsz2 header>div:first-child,
  .bsz3 header>div:first-child,.bsz4 header>div:first-child,
  .vv  header>div:first-child,.vv2 header>div:first-child,
  .vv3 header>div:first-child,
  .fe  header>div:first-child,.fe2 header>div:first-child,
  .kr  header>div:first-child,.ro  header>div:first-child,
  .hm header>div:first-child,.sz header>div:first-child,.sz2 header>div:first-child{
    top:-70px!important;right:-100px!important;
    width:300px!important;height:300px!important;
  }
}

/* ============================================================
   BLOKK-SORSZÁM — EGYSZERI FORDULAT
   ------------------------------------------------------------
   Ahogy egy blokk fejléce a képernyőre görög, az Anton betűs
   sorszáma (01, 02, …) EGYSZER megfordul a függőleges tengelye
   körül. Markupot nem kell módosítani: a hb-ui.js ugyanazzal a
   felismeréssel keresi meg a sorszámokat, mint a gépelődő cím
   (Anton betű, kétjegyű szám, fejléc-méret) — a kártyákon lévő
   kisebb sorszámok szándékosan kimaradnak.
   ============================================================ */
@keyframes hbnumspin{
  from{transform:perspective(700px) rotateY(0deg)}
  to  {transform:perspective(700px) rotateY(360deg)}
}
.hb-num-spin{
  display:inline-block;transform-origin:50% 50%;backface-visibility:visible;
  /* 1,5s — a korábbi 0,9s-nél a fordulat túl gyors volt, alig lehetett
     követni. A görbe indulásból lágyan gyorsít, a végén lassan áll meg. */
  animation:hbnumspin 1.5s cubic-bezier(.45,.05,.25,1) both;
}
@media (prefers-reduced-motion: reduce){
  .hb-num-spin{animation:none}
}

/* ============================================================
   HOVER-EFFEKTEK — CSAK EGÉRREL
   ------------------------------------------------------------
   iOS Safarin a koppintás először a :hover állapotot kapcsolja be,
   és csak a MÁSODIK koppintás aktiválja a linket. Ezért minden
   hover-szabály `@media (hover:hover) and (pointer:fine)` mögé
   kerül: érintőképernyőn hover állapot már nem jön létre, az első
   koppintás azonnal navigál. Egérrel minden marad a régiben.
   Ugyanez a kapu van a hb-style.css végén és a hb-quiz.js
   injektált stílusában — új :hover szabály IDE kerüljön.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .hb-nav-actions .hb-nav-rolunk:hover{color:#C9EA3D}
  .hb-nav-actions .hb-btn-pill:hover{background:#c62f2f}
  .hb-nav-home:hover{background:#d8f556;color:#003153}
  .hb-foot-brand:hover img{opacity:1}
  .hb-totop:hover{background:#d8f556}
}

/* ---- Mobil koppintási felület az aloldali nav-gombokon ----
   Ugyanaz, mint a főoldalon (hb-style.css vége): a 44px alatti célpontot
   könnyű elvéteni, és az elvétett koppintás „dupla koppintásnak" tűnik.

   FIGYELEM: a .hb-nav-home-ot KI KELL HAGYNI. Azt fentebb a
   `.hb-nav-home{display:none}` rejti el mobilon, de az csak (0,1,0) fajsúlyú —
   egy sima `.hb-nav-actions a` (0,1,1) felülírná, és a „Vissza a főoldalra"
   gomb visszajönne. Attól a nav szélesebb lesz a képernyőnél, és az egész
   oldal oldalra csúszik. */
@media(max-width:600px){
  .hb-nav-actions a:not(.hb-nav-home){display:inline-flex;align-items:center;min-height:44px}
  .hb-nav-actions .hb-nav-rolunk{padding:0 6px}
}

/* ============================================================
   RÖGZÍTETT KÉP-ABLAK (MOBIL) — globális változat
   ------------------------------------------------------------
   Egy „ablak" (.hb-pin), ami együtt görög a lappal, de a benne
   lévő kép (.hb-pin-img) a KÉPERNYŐ függőleges közepéhez van
   rögzítve (a hb-ui.js initPins()-e tolja translate3d-vel).
   Ettől az ablak széle végighúz a képen, és úgy látszik, mintha
   a fölötte/alatta lévő blokk rácsúszna a képre.

   Asztali nézetben nem látszik (display:none) — mobilra való.

   FIGYELEM: a `background-attachment:fixed` iOS Safariban nem
   működik, a `position:fixed` pedig transform/clip-path ős alatt
   elveszti a viewport-kötést; a `position:sticky` meg a szülő
   dobozán belül marad, így a tartalom nem tud RÁúszni. Ezért
   megy JS-ből a translate3d.

   Ugyanez az effekt külön másolatban él a kb-style.css
   (.kb-nyul) és a kb4-style.css (.kb4-nyul) fájlban is — azok
   régebbiek, ez a globális változat az, amit új helyre kell
   használni. Használat: <div class="hb-pin"><img class="hb-pin-img" …></div>
   A teljes szélesség miatt a szülőnek NEM lehet overflow:hidden-je
   a képernyőnél keskenyebb dobozon.

   Ahol az ablak magasabb, mint amennyit a kép épp takar (görgetés
   közben mindig van ilyen sáv), a háttere látszik ki — ezért adj az
   ablaknak inline `background`-ot a KÉP hátterének színével, akkor a
   sáv nem látszik. (bsz2: #033A59)

   A hb-pin magassága ne legyen nagyobb a kép megjelenített
   magasságánál (kép magasság = 100vw × képarány) — így a csúcson a
   teljes kép látszik. Négyzetes képnél ez 100vw — innen a min(…) alsó ága.
   ============================================================ */
.hb-pin{display:none}

@media(max-width:600px){
  .hb-pin{
    display:block;position:relative;overflow:hidden;
    /* teljes szélesség, akármekkora oldalpaddingja van a szekciónak */
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    /* alapértelmezés négyzetes képhez: 100vw = a kép megjelenített magassága,
       így a csúcson a TELJES kép látszik. Más képaránynál felülírható inline. */
    height:min(100vw,62vh);
  }
  .hb-pin-img{
    position:absolute;left:0;top:0;display:block;
    width:100%;height:auto;
    will-change:transform;
  }

  /* NINCS CSS görgetés-animáció — a mozgatást KIZÁRÓLAG a hb-ui.js végzi.
     ------------------------------------------------------------------
     Volt itt egy `@supports (animation-timeline: view())` ág, ami a
     kompozitorra bízta a mozgást. EZT KI KELLETT VENNI, és ne is tedd
     vissza: a `view()` idővonal mindig a LEGKÖZELEBBI GÖRGETÉSI
     KONTÉNERHEZ kötődik, a hero <header>-én pedig `overflow:hidden` van
     (az inline stílusban, az Elementor-widgetben). Az a header sosem
     görög, tehát az idővonal beragad — 2026-08-28-án a kb2/kb3 heróján
     pont ez történt: az animáció 27,8%-on állt meg, miközben a valós
     haladás 67% lett volna, így a kép félig kilógva ragadt be.
     Amíg a böngésző nem ismerte a szabályt, a JS-ág vitte és tökéletes
     volt; ahogy a Safari megtanulta, átvette és elromlott.
     Ha egyszer mégis vissza akarod hozni: előbb MINDEN .hb-pin ősén
     `overflow:hidden` helyett `overflow:clip` kell (az nem csinál
     görgetési konténert), és utána is ellenőrizd le mind a négy heróval. */
}

/* Csökkentett mozgás: nincs rögzítés, egyszerű álló kép. */
@media (prefers-reduced-motion:reduce){
  .hb-pin{height:auto!important;overflow:visible}
  .hb-pin-img{position:static!important;transform:none!important}
}

/* ============================================================
   VIDEÓ-PAKLI (.hb-reels) — globális változat
   ------------------------------------------------------------
   Portré (9:16) videó-borítók egymásra dobva; oldalra húzható,
   nyilakkal és pontokkal is léptethető, az elöl álló kártyára
   KOPPINTVA indul a videó. A pozíciót/forgatást a hb-ui.js
   initReels()-e számolja és inline transformként teszi ki — itt
   csak a kártya kinézete és a pakli doboza van.

   Ugyanez az effekt külön másolatban él a kb4-style.css-ben
   (.kb4-reel*, az e-roller oldal) — az a régebbi, ez a globális
   változat az, amit új helyre kell használni. Használat:

     <div class="hb-reels" data-img-base="/wp-content/uploads/"
          style="--hb-reel-accent:#C9EA3D">
       <a href="https://www.facebook.com/reel/…" data-img="x.png">Felirat</a>
     </div>

   --hb-reel-accent: a blokk kiemelő színe (aktív pont, nyíl-hover,
   „Megnyitás” link hover). A lejátszás-gomb mindenhol lime.
   A vízszintes „kilógást" a konténer maga fogja meg (overflow-x:clip),
   nem kell a lap wrapperére bízni.
   ============================================================ */
.hb-reels{--hb-rw:288px;--hb-reel-accent:#11B7A3;margin-top:38px;overflow-x:clip}
@supports not (overflow-x:clip){ .hb-reels{overflow-x:hidden;padding-bottom:30px} }
.hb-reels .hb-reel-deck{
  position:relative;
  height:calc(var(--hb-rw) * 16 / 9 + 34px);
  touch-action:pan-y;            /* a függőleges görgetés a böngészőé marad */
  user-select:none;-webkit-user-select:none;
  cursor:grab;
}
.hb-reels .hb-reel-deck:active{cursor:grabbing}
.hb-reels .hb-reel{
  position:absolute;left:50%;top:50%;
  width:var(--hb-rw);
  transform:translate(-50%,-50%);
  transform-origin:center;
  border-radius:20px;
  background:#062338;
  box-shadow:0 26px 54px -18px rgba(0,0,0,.75),0 0 0 1.5px rgba(247,245,240,.1);
  transition:transform .42s cubic-bezier(.2,.9,.3,1.15),opacity .32s ease;
  will-change:transform;
}
/* húzás közben nincs átmenet — a lap az ujjat kövesse */
.hb-reels .hb-reel-deck.hb-reel-dragging .hb-reel{transition:none}
.hb-reels .hb-reel:focus-visible{outline:3px solid #C9EA3D;outline-offset:4px}

.hb-reels .hb-reel-media{
  position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#00121f;
}
.hb-reels .hb-reel-poster{
  display:block;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
}
/* sötétítés a felirat mögé — az FB-borítók alján lévő poszt-sáv is
   ide esik, így nem zavar bele a kártyába */
.hb-reels .hb-reel-media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(transparent,rgba(0,18,31,.9));pointer-events:none;
}
.hb-reels .hb-reel-on .hb-reel-media::after{display:none}

.hb-reels .hb-reel-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;
  background:#C9EA3D;color:#003153;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px -6px rgba(0,0,0,.6);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4);
}
.hb-reels .hb-reel-play svg{display:block;margin-left:3px}   /* a play-háromszög optikai közepe */
@media (hover:hover) and (pointer:fine){
  .hb-reels .hb-reel:hover .hb-reel-play{transform:translate(-50%,-50%) scale(1.09)}
}

/* felirat-pirula, félig kilóg a kártya aljáról */
.hb-reels .hb-reel-cap{
  position:relative;z-index:2;margin:-20px 14px 0;
  display:flex;justify-content:center;
}
.hb-reels .hb-reel-cap span{
  background:#F7F5F0;color:#003153;
  font:700 13px 'Space Grotesk',system-ui,sans-serif;line-height:1.25;
  padding:9px 15px;border-radius:12px;text-align:center;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* platform-címke a borító sarkában — a poszter cseréjekor magától
   eltűnik, mert a teljes .hb-reel-media tartalma kicserélődik */
.hb-reels .hb-reel-tag{
  position:absolute;left:10px;top:10px;z-index:2;
  font:700 10px/1 'Space Grotesk',system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
  padding:6px 9px;border-radius:8px;color:#F7F5F0;
  background:rgba(0,18,31,.68);
}
.hb-reels .hb-reel-tag-yt{background:rgba(214,25,25,.86)}
.hb-reels .hb-reel-tag-fb{background:rgba(24,119,242,.86)}
.hb-reels .hb-reel-tag-tt{background:rgba(0,18,31,.82)}

.hb-reels .hb-reel-frame{display:block;width:100%;height:100%;border:0}
/* a fekvő YouTube-videó a portré kártyában magától fekete sávot kap */
.hb-reels .hb-reel-frame-yt{background:#000}

/* --- vezérlők a pakli alatt (egy videónál nincs nyíl és pont) --- */
.hb-reels .hb-reel-ui{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.hb-reels .hb-reel-arrow{
  width:40px;height:40px;border-radius:12px;flex:none;padding:0;
  background:rgba(247,245,240,.06);border:1.5px solid rgba(247,245,240,.16);
  color:#F7F5F0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.hb-reels .hb-reel-arrow svg{display:block}
@media (hover:hover) and (pointer:fine){
  .hb-reels .hb-reel-arrow:hover{background:rgba(247,245,240,.12);border-color:var(--hb-reel-accent)}
}
.hb-reels .hb-reel-dots{display:flex;align-items:center;gap:8px}
.hb-reels .hb-reel-dot{
  width:9px;height:9px;padding:0;border-radius:50%;border:none;cursor:pointer;
  background:rgba(247,245,240,.25);transition:all .25s ease;
}
.hb-reels .hb-reel-dot-on{background:var(--hb-reel-accent);width:24px;border-radius:5px}
.hb-reels .hb-reel-out{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  font:700 13px 'Space Grotesk',system-ui,sans-serif;color:rgba(247,245,240,.6);
  text-decoration:none;
}
.hb-reels .hb-reel-out svg{display:block}
@media (hover:hover) and (pointer:fine){
  .hb-reels .hb-reel-out:hover{color:var(--hb-reel-accent)}
}

@media(max-width:600px){
  .hb-reels{--hb-rw:min(70vw,264px)}
}
@media (prefers-reduced-motion: reduce){
  .hb-reels .hb-reel{transition:none}
  .hb-reels .hb-reel-play{transition:none}
}