/* ============================================================
   Hello Biztonság — KÖZLEKEDÉSBIZTONSÁG · 3. aloldal stílus
   „Gyalogos közlekedés". Minden szabály .kb3 alá skópozva, hogy ne
   ütközzön a témával / Elementorral. A blokkjaidra tedd rá a .kb3
   wrappert.
   FONTOS: az áthozott láthatóság-szimulátor (01), a fülhallgató (03)
   és a telefon (04) blokk NEM .kb3, hanem a megszokott .kb wrapperben
   fut (kb-style.css + kb-page.js hajtja, kb-night-* / kb-audio-* /
   kb-phone-* id-kkel) — azokat ne csomagold .kb3-ba.
   A 02 blokk kb4-stílusú reveal kártyáit a kb3-page.js építi fel; a
   kártyák belső stílusa ott, inline van.
   ============================================================ */

.kb3{
  --navy:#003153; --navy-d:#00263f; --teal:#11B7A3; --lime:#C9EA3D;
  --cream:#F7F5F0; --danger:#FF5A5A; --amber:#F5B324; --neon:#FF2A4D;
  --f-display:'Anton',sans-serif;
  --f-head:'Space Grotesk',sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --f-mono:'Space Mono',monospace;
  background:var(--navy); color:var(--cream); font-family:var(--f-body);
}
/* Ha bármi egy-két pixellel kilóg jobbra, a telefon oldalra húzhatóvá válik, és
   a szélén megjelenik a fehér háttér. A `clip` — a `hidden`-nel ellentétben —
   csak vág, NEM csinál görgetődobozt, így a sticky kártya-paklik megmaradnak. */
.kb3{overflow-x:clip}
@supports not (overflow-x:clip){ .kb3{overflow-x:hidden} }
.kb3 *{box-sizing:border-box}
.kb3 img{display:block}
.kb3 a{text-decoration:none}
.kb3 button{font-family:inherit}
.kb3 .i{display:inline-flex;align-items:center;justify-content:center}
.kb3 .i svg{width:100%;height:100%;display:block}

/* ---- 02 · Reveal kártyák (kattintásra forduló) ---- */
/* A két lap NEM abszolút pozicionált, hanem ugyanabba a rács-cellába kerül.
   Így nem kell fix kártyamagasság: a kártya a tartalmához igazodik, asztalin
   pedig a rács továbbra is egyforma magasra húzza a soron belüli kártyákat. */
.kb3-trap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kb3-flip{perspective:1300px;display:grid;animation:kb3pop .55s cubic-bezier(.2,.9,.3,1.2) backwards;cursor:pointer}
.kb3-flip:nth-child(1){animation-delay:.02s}
.kb3-flip:nth-child(2){animation-delay:.10s}
.kb3-flip:nth-child(3){animation-delay:.18s}
.kb3-flip:nth-child(4){animation-delay:.26s}
/* grid-template-rows:minmax(0,1fr) — a sor NEM nőhet a kártya dobozánál nagyobbra:
   enélkül a mobilon rövidebbre húzott kártyából a másik (hosszabb) lap alul
   kilógna, és iOS-en tükrözve átüt a kártya alatt. */
.kb3-inner{position:relative;display:grid;grid-template-rows:minmax(0,1fr);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.15,.2,1),height .4s cubic-bezier(.4,.15,.2,1)}
.kb3-flip.kb3-flipped .kb3-inner{transform:rotateY(180deg)}
.kb3-face{grid-area:1/1;min-width:0;backface-visibility:hidden;border-radius:18px;padding:22px;display:flex;flex-direction:column;overflow:hidden}
.kb3-face-b{transform:rotateY(180deg)}

/* ---- 05 · Sorompó-próba (vasúti-átjáró mini-játék) ---- */
.kb3-hidden{display:none!important}
.kb3-cross-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kb3-cross-opt{cursor:pointer;transition:transform .12s,background .16s,border-color .16s}
@media (hover:hover) and (pointer:fine){.kb3-cross-opt:hover{transform:translateY(-2px);border-color:rgba(201,234,61,.55)!important;background:rgba(201,234,61,.06)!important}}
.kb3-arm{transition:transform .55s cubic-bezier(.5,.05,.3,1)}
.kb3-light{transition:opacity .2s}
.kb3-light.on{animation:kb3flash 1s steps(1,end) infinite}
.kb3-light.on.kb3-light-b{animation-delay:.5s}
.kb3-train.go{animation:kb3train 1.1s cubic-bezier(.4,0,.25,1) forwards}
.kb3-shake{animation:kb3shake .5s ease}
@keyframes kb3flash{0%,50%{opacity:1}50.01%,100%{opacity:.16}}
@keyframes kb3train{from{transform:translateX(-120%)}to{transform:translateX(260%)}}
@keyframes kb3shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

/* ---- Villogó lámpa a tipp-dobozban ----
   A .kb3-lamp az ikon burkolóján ül: halkan fel-le jár a fénye, mintha
   világítana. Csak ezen az oldalon van (az osztályt a szekció adja). */
.kb3-lamp{animation:kb3lamp 2.4s ease-in-out infinite;will-change:opacity,filter}
@keyframes kb3lamp{
  0%,100%{opacity:.5;filter:drop-shadow(0 0 0 rgba(201,234,61,0))}
  50%    {opacity:1; filter:drop-shadow(0 0 9px rgba(201,234,61,.9))}
}

/* ---- Animációk ---- */
@keyframes kb3float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes kb3pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,.55)}70%{box-shadow:0 0 0 18px rgba(255,90,90,0)}}
@keyframes kb3pulseL{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,.5)}70%{box-shadow:0 0 0 16px rgba(201,234,61,0)}}
@keyframes kb3marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes kb3pop{from{opacity:0;transform:translateY(24px) scale(.94)}60%{transform:translateY(-4px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes kb3rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .kb3-flip,.kb3-inner{animation:none!important;transition:none!important}
  .kb3-lamp{animation:none!important;opacity:1}
}

/* ---- Reszponzív ---- */
@media(max-width:900px){
  .kb3-trap-grid{grid-template-columns:1fr 1fr}
  .kb3-hero-grid{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  /* A hero lebegő videó-kártyája: mobilon helyette a header alján lévő
     .hb-pin ablak mutatja ugyanezt a videót (hb-ui.css). */
  .kb3 .kb3-hero-card{display:none!important}
  .kb3-trap-grid{grid-template-columns:1fr}
  .kb3-nav-links{display:none!important}
  /* Oldalpadding: a szekciók 40px-e telefonon a kijelző több mint ötödét
     elvitte — mobilon 18px. (A .kb wrapperes 01/03/04 blokkokra ugyanez a
     szabály a kb-style.css-ben van.) A szelektor az INLINE stílusra
     illeszkedik, hogy az Elementor-markuphoz ne kelljen hozzányúlni. */
  .kb3 > nav,
  .kb3 > header,
  .kb3 > section[style*="padding:70px 40px"],
  .kb3 > section[style*="padding:60px 40px"]{padding-left:18px!important;padding-right:18px!important}
  .kb3 > section > div[style*="padding:0 40px"]{padding-left:18px!important;padding-right:18px!important}
  .kb3-cross-opts{grid-template-columns:1fr}
  /* A szekció-címek egy fokozattal kisebbek: a 42px-es szedés telefonon
     4–5 sorra tört, és elnyomta a blokk többi részét. Az inline stílust
     csak !important-tal lehet levinni (a markup a szekció-fájlban él). */
  .kb3-h2{font-size:34px!important;line-height:1.14}
  /* Egy oszlopban nincs mihez igazodni, ezért a kártya az ÉPPEN LÁTHATÓ
     laphoz zsugorodik — a magasságot a kb3-page.js fitCards() állítja.
     Az align-self:start kell ahhoz, hogy a lapok saját magassága mérhető
     legyen (különben a rács mindkettőt a cellára feszítené). */
  .kb3-face{align-self:start;padding:18px}
  /* Az ÉPPEN NEM LÁTSZÓ lap feszüljön pontosan a kártya magasságára, hogy a
     saját overflow:hidden-je levágja — különben kilóg a doboz alól. */
  .kb3-flip:not(.kb3-flipped) .kb3-face-b,
  .kb3-flip.kb3-flipped .kb3-face:not(.kb3-face-b){align-self:stretch}
}