/* ============================================================
   Hello Biztonság — VAGYONVÉDELEM aloldal stílus
   Minden szabály .vv alá skópozva, hogy ne ütközzön a témával.
   A blokkjaidra tedd rá a .vv wrappert (ld. szekció-fájl).
   A dinamikus listákat (csalás-kártyák, checklista, szituációk)
   a vv-page.js építi fel — a belső stílus ott, inline van.
   ============================================================ */

.vv{
  --navy:#003153; --navy-d:#00263f; --teal:#11B7A3; --lime:#C9EA3D;
  --cream:#F7F5F0; --danger:#FF5A5A;
  --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);
}
.vv *{box-sizing:border-box}
.vv img{display:block}
.vv a{text-decoration:none}
.vv button{font-family:inherit}
.vv .i{display:inline-flex;align-items:center;justify-content:center}
.vv .i svg{width:100%;height:100%;display:block}

/* ---- Csalás flip-kártyák ---- */
/* A kártya NEM fix magasságú: a két lapja ugyanabba a rács-cellába kerül
   (grid-area:1/1), így a doboz a tartalmához igazodik. Asztalin a rács egy
   soron belül egyformára húzza őket, mobilon a vv-page.js `fitCard()`-ja az
   ÉPPEN LÁTHATÓ laphoz zsugorítja. (Ugyanaz a séma, mint a kb3/kb4 lapjain.) */
.vv-scam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vv-scam{perspective:1200px;display:grid;animation:vvpop .55s cubic-bezier(.2,.9,.3,1.2) backwards}
.vv-scam:nth-child(1){animation-delay:.02s}
.vv-scam:nth-child(2){animation-delay:.09s}
.vv-scam:nth-child(3){animation-delay:.16s}
.vv-scam:nth-child(4){animation-delay:.23s}
.vv-scam:nth-child(5){animation-delay:.30s}
.vv-scam:nth-child(6){animation-delay:.37s}
/* 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. */
.vv-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)}
.vv-scam.vv-flip .vv-inner{transform:rotateY(180deg)}
/* position:relative KELL: a hátlap dekorációs köre ehhez igazodik (korábban
   ezt a `position:absolute` adta, ami a rács-cellás elrendezéssel kiesett). */
.vv-face{grid-area:1/1;position:relative;min-width:0;backface-visibility:hidden;border-radius:18px;padding:22px;display:flex;flex-direction:column;overflow:hidden}
.vv-face-b{transform:rotateY(180deg)}
.vv-tf{cursor:pointer;transition:background .15s}
@media (hover:hover) and (pointer:fine){.vv-tf-t:hover{background:rgba(17,183,163,.22)!important}}
@media (hover:hover) and (pointer:fine){.vv-tf-f:hover{background:rgba(255,90,90,.22)!important}}

/* ---- Checklista sorok ---- */
.vv-step{cursor:pointer;transition:background .2s,border-color .2s}

/* ---- Szituációs opció-gombok ---- */
.vv-opt{cursor:pointer;transition:all .18s}

/* ---- Animációk ---- */
@keyframes vvfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes vvpulse{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 vvpulseL{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 vvmarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes vvpop{from{opacity:0;transform:translateY(24px) scale(.94)}60%{transform:translateY(-4px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ---- Reszponzív ---- */
@media(max-width:900px){
  .vv-scam-grid{grid-template-columns:1fr 1fr}
  .vv-hero-grid{grid-template-columns:1fr!important}
  .vv-two{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  .vv-scam-grid{grid-template-columns:1fr}
  /* egy oszlopban a kártya az éppen látható laphoz zsugorodik (ld. fitCard) */
  .vv-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. */
  .vv-scam:not(.vv-flip) .vv-face-b,
  .vv-scam.vv-flip .vv-face:not(.vv-face-b){align-self:stretch}
  .vv-nav-links{display:none!important}
}