@font-face{
  font-family: "geos";
  src: url("data:font/woff2;base64,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") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ---- C128 --
@font-face{
  font-family:"PetMe1282Y";
  src:url("PetMe1282Y.woff2") format("woff2"),
      url("PetMe1282Y.woff") format("woff"),
      url("PetMe1282Y.otf") format("opentype"),
      url("PetMe1282Y.ttf") format("truetype");
  font-weight:normal; font-style:normal; font-display:swap;
}*/
/* ---- Berkelium64 beágyazás ---- 
@font-face{
  font-family:'Berkelium64';
  src:
    url('Berkelium64-fixed2.woff2') format('woff2'),
    url('Berkelium64-fixed2.woff')  format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'geos';
  src:
    url('geos.woff2') format('woff2'),
    url('geos.woff')  format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}*/

/* ===== Alap ===== */
::selection {
  background: var(--brand-yellow);
  color: black;
  text-shadow: none;
}

::-moz-selection {
  background: var(--brand-yellow);
  color: black;
  text-shadow: none;
}

:root{
  --bg:#000314;

  --brand-yellow:#ffc233;   /* CursorPunk felirat + hero cím */
  --link-cyan:#16f2ff;      /* menü + meta + lede */
  --accent-magenta:#ff2da8; /* fejléc aláhúzás + badge */

  --maxw:1366px;

  /* Opcionális: alapértelmezett hero-kép.
     Ha NEM használsz CSS-változót, a hero-media alul közvetlen URL-t is kap. */
  --hero-image: url('images/hero2.png');
}

/* Szigorúan minimál reset */
*{box-sizing:border-box}
html,
body{
  height:100%;
}
body{
  margin:0; 
  background:var(--bg); 
  color:#e8ecff;
  font:500 22px/1.2 'geos', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing: 0.026em;
}
a{color:inherit; text-decoration:none}

/* ===== Fejléc ===== */
.site-header{ 
  background:transparent; 
  padding-top: 18px;
}

/* Belső sor: 1200 px hasznos, középre zárva */
.nav .inner{

  max-width:var(--maxw);
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
  position:relative;        /* a belső magenta vonalhoz */
  padding-bottom:0px;      /* hely a vonalnak */
}

/* Brand – élénk sárga, karakteres */
.brand{
  color:var(--brand-yellow);
  font-weight:800;
  letter-spacing:.2px;
  font-size:38px;
}

/* Menü – jobbra rendezve (EN mellé) */
.menu{
  display:flex; gap:32px;
  list-style:none; padding:0; margin:0;
  justify-self:end;          /* a középső grid-sáv jobb szélére ül */
  text-align:right;
}
.menu a{
  color:var(--link-cyan);
}
.menu a:hover,
.menu a:focus{
  text-decoration:underline; text-underline-offset:3px;
}

/* EN – gomb: keret nélkül, magenta szöveg */
.lang {
  color:var(--accent-magenta);
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:2px 0px 2px 0px;          /* vizuális „gombérzet” border nélkül */
  justify-self:end;         /* jobb szélen marad */
}

/* ===== HERO – két működési mód ===== */
.hero{ margin-top:0px; }

.hero > .inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0px;             /* ha teljesen „csupasz” kell, állítsd 0-ra */
  display:grid;
  grid-template-columns:1.15fr .85fr;  /* bal nagy cím, jobb kép */
  gap:18px;
  background:none;
  align-items:stretch;      /* ALAP: a szöveg magassága diktál, a kép nyúlik hozzá */
}

/* Bal oldali szövegblokk */
.hero-text{ 
  display:flex; 
  flex-direction:column; 
  gap:12px; 
}

.badge{
  align-self:flex-start;
  font-size:20px;
  
  color:#000;                          /* kontrasztos badge szöveg */
  background:var(--accent-magenta);    /* magenta kitöltés */
  padding: 1px 7px;
  border:none; border-radius:0;
}

.hero-title{
  margin:0;
  color:var(--brand-yellow);
  line-height:1.05;
  /*font-size:clamp(20px, 4.0vw, 64px);*/
  font-size: 2.9rem;
  text-transform:uppercase;
}

.hero-meta{
  margin:2px 0 0;
  color:var(--link-cyan);
  /*font-size:clamp(16px, 2.1vw, 22px);*/
  font-size:24px;
}

.hero-lede{
  margin:8px 0 0;
  color:var(--link-cyan);
  font-size:clamp(18px, 1.8vw, 24px);
  /*max-width:46ch;*/
}

/* Jobb oldali kép – ALAP: a szöveg magasságát követi */
.hero-media{
  /* Kép forrás: változóval vagy közvetlen URL-lel */
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;*/

  height: 100%;     /* a hero .inner teljes sor-magasságát felveszi */
  /* NINCS aspect-ratio itt — a szöveg diktálja a magasságot */
  border: none; box-shadow: none;
}

/* --- VÁLTÓ: RÖGZÍTETT KÉPARÁNYOS MÓD (3:4) ---
   Használd: <section class="hero hero--ratio"> */
.hero.hero--ratio > .inner{
  align-items: start;      /* ilyenkor ne nyújtsa rá a magasságot a kép */
}
.hero.hero--ratio .hero-media{
  /*aspect-ratio: 4 / 3;*/     /* rögzített arány */
  /*height: auto;*/            /* magasságot az arány és a szélesség adja */
}
.container{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 18px;  /* azonos a header/hero belső peremével */
}

.rule--small{
  height: 3px;
  border: 0;
  background: var(--accent-magenta);
  width: 100%;           /* a konténer szélességét veszi fel */
    margin-top: 0px;
  margin-bottom: 0px;
}

.rule{
  height: 3px;
  border: 0;
  background: var(--accent-magenta);
  width: 100%;           /* a konténer szélességét veszi fel */
    margin-top: 18px;
  margin-bottom: 18px;
}
.cards .hero-text .hero-title {
  font-size: 24px;
}

/* Kártyarács a HERO-khoz — a .hero-hoz nem nyúlunk */
.cards .card--separator{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: start; /* ⬅️ ne nyújtsa a gyermekeket a sor magasságára */
}

/* Csak a kártyarácsban lévő HERO-kra érvényesítsük */
.cards .card--separator > .hero{
  inline-size: 100%;        /* a cella szélességét vegye fel */
  max-width: 100%;
  overflow: hidden;          /* háttér/pseudo ne tudjon kilógni */
}

.cards .card--separator > .hero > .inner{
  max-width: 100%;           /* NE legyen 1200px-es belső sapka */
  margin-inline: 0;          /* ne középre igazítsa magát külön konténerként */
  min-width: 0;              /* rácsban a túlcsordulás ellen */
}

/* (ha kell) a rács gyerekeinek adjunk általános min-width védelmet */
.cards .card--separator > *{
  min-width: 0;
}

/* V2 módban a kártya maga kap háttérképet (cover), a media blokk eltűnik */
.hero[data-mode="v2"]{
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ne jelenjen meg duplán a kép */
.hero[data-mode="v2"] .hero-media{
  display: none !important;
}

/* (opcionális) olvashatóság: finom sötét overlay v2 módban */
.hero[data-mode="v2"]::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: inherit;
}

/* v2-ben a háttér a .hero-n marad teljes kifutással */
.hero[data-mode="v2"]{
  /* ha overlayt használsz, érdemes háttérré rétegezni: */
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.0)), /* vagy töröld */
    var(--hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* csak a tartalom kap „guttert” – a háttér változatlanul kifut */
.hero[data-mode="v2"] > .inner{
  padding-inline: clamp(14px, 2.5vw, 24px);
  padding-block:  clamp(12px, 2vw, 20px);
  /* ha szükséges, hogy a padding végig érjen a kártya magasságán: */
  min-height: 100%;
}

/* ha korábban a .inner-nek volt max-width/auto margója,
   a kártyarácsban ezt már lenyomtuk – maradjon így: */
.cards .card--separator > .hero > .inner{
  max-width: 100%;
  margin-inline: 0;
}


.cards .stack{
  flex: 1 1 0;
  display: grid;
  grid-auto-rows: auto;  /* egymás alá pakol */
  gap: 18px;
}


@media (max-width: 768px){

    .hero > .inner{ grid-template-columns: 1fr; }
  .hero .hero-media{ order: 1; aspect-ratio: 4 / 3; height: auto; }
  .hero .hero-text { order: 2; }



 
    .cards .card--separator{
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto; /* mobilon nincs értelme a “sorkockának” */
  }
}


.mobile {
  display: inherit;
}


@media (min-width: 769px){
  .cards .card--separator{
  display: flex;
  gap: 18px;
}

   .hero > .inner{
    grid-template-columns: .85fr 1.15fr;
    align-items: stretch;
  }
  .hero-media{ order: 1; }  /* bal oldal */
  .hero-text { order: 2; }  /* jobb oldal */

   /* v3: kép felül, szöveg alul (egyoszlopos rács) */
  .hero[data-mode="v3"] > .inner{
    grid-template-columns: 1fr;      /* 1 oszlop */
    grid-auto-flow: row;             /* biztosan egymás alatt jöjjenek */
    align-items: start;
  }
  .hero[data-mode="v3"] .hero-media{ order: 1; } /* kép felül */
  .hero[data-mode="v3"] .hero-text { order: 2; } /* szöveg alul */

  /* opcionális: adj arányt/min magasságot a képdoboznak, hogy szépen „tartsa” magát */
  .hero[data-mode="v3"] .hero-media{
    aspect-ratio: 16 / 9;  /* vagy 4/3 – ízlés szerint */
    height: auto;
    background-size: cover;
    background-position: center;
  }

  /* ha v2-ben korábban 1 oszlopra váltottunk: ez csak v3-ra vonatkozzon */
  /* (v2-t már kezeled külön; ez a blokk nem üti azt) */
   .hero .hero-media{
    
    min-height: auto;
    background-size: cover;               /* nálad már megvan */
    background-position: center;
  }
    /* v2: a kártya maga a háttér, a belső rács 1 oszlop legyen */
  .hero[data-mode="v2"]{
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    aspect-ratio:auto;
    min-height: clamp(360px, 36vw, 640px);
    position: relative;
  }
  .hero[data-mode="v2"] > .inner{
    grid-template-columns: 1fr;     /* ⬅️ ez hiányzott */
    align-items: start;             /* ne nyújtson feleslegesen */
  }
  .hero[data-mode="v2"] .hero-media{
    display: none !important;
  }
    .nav .inner{
    grid-template-columns: auto 1fr; /* brand | menu */
  }
 .hero[data-mode="v2t"]{
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* KÜLÖNBSÉG a v2-höz képest: nincs kényszerített magasság/arány */
    min-height: auto;     /* vagy: unset */
    aspect-ratio: auto;

    position: relative;   /* ha később overlay-t használsz */
  }

  .hero[data-mode="v2t"] > .inner{
    /* ugyanaz a belső margó, mint v2-ben */
    padding-inline: 18px;
    padding-block: 18px;

    /* biztos ami biztos: ne tartson meg régi min-height-et */
    min-height: auto;

    /* ha a desktop layoutod v2-ben 1 oszlopra vált, itt is legyen egységes */
    grid-template-columns: 1fr;
  }

  /* v2-hez hasonlóan a belső képdoboz ne jelenjen meg */
  .hero[data-mode="v2t"] .hero-media{
    display: none !important;
  }
}

/* Ha a kártyarácsban korábban lenyomtad a „mini-konténer” sapkát, maradjon ez is: */
.cards .card--separator > .hero[data-mode="v2t"],
.cards .card--separator > .hero[data-mode="v2t"] > .inner{
  max-width: 100%;
  margin-inline: 0;
  .menu{
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
    width: 100%;                /* töltse ki a 2. oszlopot */
    justify-content: flex-end;  /* <<< minden li teljesen jobbra */
    justify-self: auto;         /* ne korlátozza a grid saját igazítása */
    text-align: right;
  }
  .hero > .inner{
    /* maradhat a kétoszlopos rács, csak sorrendet cserélünk */
    grid-template-columns: .85fr 1.15fr; /* bal: kép, jobb: szöveg */
    align-items: stretch;
  }
  .hero-media{ order: 1; }  /* bal oldal */
  .hero-text { order: 2; }  /* jobb oldal */
}
@media (max-width:768px){

    /* ===== FEJLÉC – mobil ===== */
  .nav .inner{
    display:block;
    text-align:center;
    padding-bottom:0px;
    position:relative;
  }

  .brand{
    display:block;
    margin:0 auto;
  }

  /* Menü: több sor, középre, vízszintes és függőleges hézaggal */
  .menu{
    display:inline-flex;
    flex-wrap:wrap;                 /* <-- TÖBBSOROS! */
    justify-content:center;         /* sorok középre igazítása */
    align-content:center;           /* több sor függőleges igazítása */
    gap:8px 20px;                   /* sor-köz (8px) × elem-köz (20px) */
    margin:2px 0 0 0;
    padding:0;
    vertical-align:middle;
    max-width:100%;
  }
  .menu li, .menu a{
    white-space:nowrap;             /* egy elem ne törjön ketté */
  }

  /* EN: a menü után, ugyanabban a sorfolyamban;
     ha nem fér el, új sorra ugrik */
  li.lang{
    display:inline-block;
    margin-left:5px;
    padding:2px 6px;
    vertical-align:middle;
  }
  .hero > .inner{
    grid-template-columns: 1fr;   /* egy oszlop */
  }

  .hero-text{
    order: 1;                      /* biztosan első */
  }

  .hero-media{
    order: 2;                      /* biztosan második (a kép) */
    aspect-ratio: 4 / 3;          /* mobilon vízszintesebb */
    height: auto;                  /* az arányból jön a magasság */
    margin-top: 0px;              /* kis légrés a szöveg után */
  }

  /* Ha használod a rögzített arányú módot is (hero--ratio), az is ezt kövesse */
  .hero.hero--ratio > .inner{ align-items: start; }
  .hero.hero--ratio .hero-media{
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* Masonry column helper — csak a JS által létrehozott markuphoz */
.masonry-columns { width: 100%; box-sizing: border-box; }
.masonry-col { box-sizing: border-box; }
.masonry-col .hero { /* ha kell, felülről igazítás, margin kezelés marad */ }