/* ============================================================
   Hello Biztonság — PÁRKAPCSOLATI ÉS CSALÁDON BELÜLI ERŐSZAK
   (fiatalok-eroszak-1) aloldal stílus
   Minden szabály .fe alá skópozva, hogy ne ütközzön a témával.
   A blokkjaidra tedd rá a .fe wrappert (ld. szekció-fájl).
   A dinamikus tartalmat (zóna-játék, lájk/diszlájk, Mit tehetek?,
   beszabadulószoba, elérhetőségek) az fe-page.js építi fel — a
   kártyák belső stílusa ott, inline van.
   ============================================================ */

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

/* ---- Interaktív blokkok közös hover-jei ---- */
.fe-zone{cursor:pointer;transition:transform .15s,background .18s,border-color .18s}
@media (hover:hover) and (pointer:fine){.fe-zone:hover{transform:translateY(-2px)}}
.fe-zonecol{cursor:pointer;transition:background .15s,border-color .15s}
.fe-chip{cursor:pointer;transition:transform .12s,border-color .15s}
@media (hover:hover) and (pointer:fine){.fe-chip:hover{transform:translateY(-1px)}}
.fe-tf-btn{transition:transform .12s,background .18s,border-color .18s}
@media (hover:hover) and (pointer:fine){.fe-tf-btn:not([disabled]):hover{transform:translateY(-2px)}}
.fe-tf-btn[disabled]{cursor:default}
.fe-card{cursor:grab;touch-action:none;user-select:none}
.fe-hidden{display:none!important}
.fe-do-card{transition:border-color .2s,background .2s}
@media (hover:hover) and (pointer:fine){.fe-do-head:hover{background:rgba(247,245,240,.03)!important}}
.fe-key{cursor:pointer;transition:transform .1s,background .15s}
.fe-key:active{transform:scale(.94)}
.fe-contact{transition:transform .15s,border-color .18s}
@media (hover:hover) and (pointer:fine){.fe-contact:hover{transform:translateY(-3px)}}

/* ---- Belépő animációk ---- */
.fe-pop{animation:fepop .5s cubic-bezier(.2,.9,.3,1.2) backwards}
.fe-rise{animation:ferise .45s ease backwards}

/* ---- Animációk ---- */
@keyframes fefloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes fepulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,.5)}70%{box-shadow:0 0 0 16px rgba(255,90,90,0)}}
@keyframes fepulseL{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 femarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes fepop{from{opacity:0;transform:translateY(22px) scale(.94)}60%{transform:translateY(-4px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ferise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes feunlock{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes fecodepulse{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,.4);transform:scale(1)}50%{box-shadow:0 0 22px 3px rgba(201,234,61,.28);transform:scale(1.04)}}
@keyframes fenumpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* Segélyszám előtti telefon-ikon: időnként finoman megbillen (mint egy
   csengő telefon). Ugyanaz a séma, mint az fe2 és a kr lapján
   (.fe2-phwobble / .kr-phwobble). */
.fe-phwobble{display:inline-flex;transform-origin:center bottom;animation:fewobble 2s ease-in-out infinite}
@keyframes fewobble{0%,55%,100%{transform:rotate(0)}62%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}78%{transform:rotate(-6deg)}86%{transform:rotate(4deg)}94%{transform:rotate(-2deg)}}
@media (prefers-reduced-motion: reduce){
  .fe-phwobble{animation:none}
}

.fe-type-caret{animation:feblink 1s step-end infinite}
@keyframes feblink{0%,100%{opacity:1}50%{opacity:0}}

/* ---- Felnyíló segélyszám-doboz (scroll-nagyítás) ---- */
.fe-unlock-box{transform-origin:center;will-change:transform}
.fe-unlock-num{font-family:'Anton',sans-serif;font-size:56px;line-height:1;letter-spacing:.02em}
@media(max-width:600px){
  .fe-unlock-box{padding:18px 26px!important}
  .fe-unlock-num{font-size:40px}
}
@keyframes feflash{0%,100%{background:var(--lime)}50%{background:#eaffb0}}

/* ---- Reszponzív ---- */
@media(max-width:900px){
  .fe-hero-grid{grid-template-columns:1fr!important}
  .fe-two{grid-template-columns:1fr!important}
  .fe-zone-btns{grid-template-columns:1fr!important}
  .fe-legend{grid-template-columns:1fr!important}
  .fe-contacts{grid-template-columns:1fr 1fr!important}
}
@media(max-width:600px){
  .fe-nav-links{display:none!important}
  .fe-contacts{grid-template-columns:1fr!important}
  .fe-adult-btns{grid-template-columns:1fr!important}

  /* ---- A visszajelző panel fejléce MOBILON IS egy sor ----
     A felirat és a „Helyes: IGAZ/HAMIS" pirula korábban két sorba tört.
     Nem tördelünk (nowrap), helyette a panel oldalpaddingja és a fejléc
     elemei szűkülnek — így 320px-en is elfér. */
  .fe .fe-fb-box{padding-left:16px!important;padding-right:16px!important}
  .fe .fe-fb-head{flex-wrap:nowrap!important;gap:7px!important}
  .fe .fe-fb-head > .i{flex:none}
  /* A felirat itt hosszabb („Nézzük meg együtt”), ezért egy fokkal kisebb,
     hogy 320px-en is elférjen a pirula mellett. Végső szelepnek marad az
     ellipszis: inkább a felirat rövidüljön, mint hogy kitolja a pirulát. */
  .fe .fe-fb-title{font-size:12px!important;letter-spacing:0!important;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .fe .fe-fb-pill{flex:none;margin-left:auto!important;font-size:10.5px!important;padding:4px 9px!important}

  /* kisebb oldalsó margó, hogy több hely legyen */
  .fe header,
  .fe #hatar,
  .fe #mit{padding-left:16px!important;padding-right:16px!important}
  .fe #felnott > div,
  .fe #szoba > div,
  .fe #segitseg > div{padding-left:16px!important;padding-right:16px!important}

  /* 01 · zóna-oszlopok: ne lógjanak ki, a chip-szöveg törjön */
  .fe-zone-cols{gap:8px!important}
  .fe-zonecol{min-width:0;padding:12px 8px!important}
  .fe-chip{word-break:break-word;overflow-wrap:anywhere}

  /* 03 · Mit tehetek? — a lépések ne legyenek beljebb húzva */
  .fe-do-card > div{padding-left:20px!important}
}

/* ---- 03b · Videó-galéria (#fe-videos) ----
   Nagy lejátszó (16:9) + nyilak + a borítók sora. A tartalmat az
   fe-page.js építi (VIDEOS); a beágyazás YouTube-nocookie iframe. */
.fe-vid{background:#0a3a5c;border:1.5px solid rgba(247,245,240,.1);border-radius:22px;padding:14px;overflow:hidden}
.fe-vid-stage{position:relative;aspect-ratio:16/9;background:#00263f;border-radius:14px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
@supports not (aspect-ratio:1){.fe-vid-stage{height:0;padding-top:56.25%}}
.fe-vid-stage:focus-visible{box-shadow:0 0 0 3px #C9EA3D}
.fe-vid-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:grab;transition:transform .2s ease}
.fe-vid-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.fe-vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;border:none;background:#C9EA3D;color:#003153;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;animation:fevidpulse 2.2s infinite;transition:transform .15s}
.fe-vid-play .i{margin-left:4px}
@keyframes fevidpulse{0%,100%{box-shadow:0 14px 34px -10px rgba(0,0,0,.7),0 0 0 0 rgba(201,234,61,.55)}70%{box-shadow:0 14px 34px -10px rgba(0,0,0,.7),0 0 0 18px rgba(201,234,61,0)}}
@media (hover:hover) and (pointer:fine){.fe-vid-play:hover{transform:translate(-50%,-50%) scale(1.08)}}
.fe-vid-cap{position:absolute;left:0;right:0;bottom:0;padding:36px 18px 14px;background:linear-gradient(180deg,transparent,rgba(0,20,35,.88));color:#F7F5F0;font:700 15px 'Space Grotesk';display:flex;align-items:center;gap:10px;pointer-events:none;line-height:1.3}
.fe-vid-cap-n{font-family:'Anton';font-size:18px;color:#C9EA3D;flex:none}
.fe-vid-bar{display:flex;align-items:center;gap:12px;padding:14px 4px 12px}
.fe-vid-arr{flex:none;width:42px;height:42px;border-radius:12px;border:1.5px solid rgba(247,245,240,.16);background:rgba(247,245,240,.05);color:#F7F5F0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background .18s,transform .12s,opacity .18s}
.fe-vid-arr .i{width:22px;height:22px}
.fe-vid-arr:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){.fe-vid-arr:not(:disabled):hover{background:rgba(247,245,240,.14);transform:translateY(-1px)}}
.fe-vid-meta{flex:1;min-width:0;text-align:center}
.fe-vid-count{font:700 11px 'Space Mono';letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,240,.5)}
.fe-vid-title{font:800 17px 'Space Grotesk';color:#F7F5F0;line-height:1.25;margin-top:3px}
.fe-vid-by{font-size:13px;color:rgba(247,245,240,.6);margin-top:2px}
.fe-vid-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.fe-vid-thumb{position:relative;border:none;padding:0;background:#00263f;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:16/9;box-shadow:0 0 0 2px transparent;transition:box-shadow .18s,transform .15s,opacity .18s;opacity:.65}
@supports not (aspect-ratio:1){.fe-vid-thumb{height:0;padding-top:56.25%}}
.fe-vid-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fe-vid-thumb-n{position:absolute;left:7px;top:6px;font:700 11px 'Space Mono';background:rgba(0,20,35,.75);color:#F7F5F0;padding:2px 7px;border-radius:999px}
.fe-vid-thumb.fe-vid-on{opacity:1;box-shadow:0 0 0 2px #C9EA3D}
.fe-vid-thumb:focus-visible{outline:2px solid #C9EA3D;outline-offset:2px}
@media (hover:hover) and (pointer:fine){.fe-vid-thumb:hover{opacity:1;transform:translateY(-2px)}}
.fe-vid-ext{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:600 13px 'Space Grotesk';color:rgba(247,245,240,.6);text-decoration:none}
.fe-vid-ext .i{width:14px;height:14px}
@media (prefers-reduced-motion: reduce){.fe-vid-play{animation:none}.fe-vid-poster{transition:none}}
@media(max-width:600px){
  .fe #videok{padding-left:16px!important;padding-right:16px!important}
  .fe-vid{padding:10px;border-radius:18px}
  .fe-vid-play{width:64px;height:64px}
  .fe-vid-cap{font-size:13.5px;padding:28px 14px 12px}
  .fe-vid-title{font-size:15px}
  /* a borítósor vízszintesen görgethető, a kiválasztott középre úszik */
  .fe-vid-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;touch-action:pan-x pan-y pinch-zoom}
  .fe-vid-strip::-webkit-scrollbar{display:none}
  .fe-vid-thumb{flex:0 0 38%;scroll-snap-align:center}
}