/* ===== Reset & alapok ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Source Code Pro', monospace;
  font-weight: 500;
  line-height: 1.6;
  color: #333;
  background: #fff;
}
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; border-radius: 6px; }

/* ===== Header ===== */
:root { --headerH: 56px; }

.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9999;             /* mindig legfelül legyen */
  background: transparent;
}
.header-inner{
  max-width: 1200px; margin: 0 auto; padding: 10px 20px;
  min-height: var(--headerH);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo{
  font-family: "Courier New", monospace;
  font-weight: 500; font-size: 1.5rem; color: #000;
}
/* Logo pont: alapból ne animáljon */
.logo .dot{
  display: inline-block;
  animation: pulse 1.6s infinite;
  animation-play-state: paused;   /* << PAUSED by default */
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(2) translateY(-5px); opacity: .6; }    /* <-- ezt írd -2.5px-re */
  100% { transform: scale(1); opacity: 1; }
}

/* Amikor elindult a scroll, engedjük futni az animációt */
.logo.is-bouncing .dot{
  animation-play-state: running;
}

.nav{ display: flex; gap: 20px; }
.nav a{ text-decoration: none; color: #000; font-weight: 500; transition: color .3s; }
.nav a:hover{ color: #3b3b3b; }
.nav-toggle{ display: none; font-size: 1.5rem; background: none; border: none; color: #000; }
.lang-buttons{ display: flex; gap: 6px; position: relative; z-index: 1; }
.lang-buttons button{ padding: 5px 10px; background: none; border: none; color: #000; font-weight: 500; }

/* Desktop kényszerítés – a menü mindig látszódjon */
@media (min-width: 769px){
  .nav{ display: flex !important; position: static !important; }
  .nav-toggle{ display: none !important; }
}
/* === Custom cursor (pont) === */
#cursor, .custom-cursor{
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width .15s ease, height .15s ease, background-color .15s ease, opacity .15s ease;
  z-index: 10000; /* a headered 9999, így ez fölé kerül */
}
#cursor.hover, .custom-cursor.hover{
  width: 18px; height: 18px;
  background: rgba(0,0,0,.6);
}

/* Desktop: rejtsd el a natív kurzort; mobilon ne */
@media (hover: hover) and (pointer: fine){
  html, body, body * { cursor: none !important; }
}
@media (hover: none) and (pointer: coarse){
  #cursor, .custom-cursor { display: none !important; }
}

/* ===== Hero ===== */

/* teljes oldalas hero kep*/
/* .hero{
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.hero-text{
  position: absolute; top: 30%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; color: rgba(255,255,255,.9);
} */

/*kep meretu gero kep*/
 .hero{
    height: auto;         /* NE legyen 100vh */
    min-height: 0;
  }
  .hero img{
    width: 100%;
    height: auto;         /* arányos magasság */
    object-fit: contain;  /* ne vágja a képet */
    transform: none !important; /* ha volt parallax, mobilon ne skálázzon */
  }
.hero-text{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; color: rgba(255,255,255,.9);
}

/**/


.hero-text h1, .hero-title{ font-size: 3rem; margin-bottom: 10px; white-space: nowrap; }
.hero-text p{ font-size: 1.2rem; white-space: nowrap; }
.hero-title .dot{ display: inline-block; animation: pulseHero 2s infinite; }
@keyframes pulseHero{
  0%{ transform: scale(1); opacity: 1; }
  40%{ transform: scale(1.4) translateY(-10px); opacity: .6; }
  100%{ transform: scale(1); opacity: 1; }
}
#hero-after-wrapper{ display: inline-block; overflow: hidden; vertical-align: bottom; }
#hero-after{ display: inline-block; opacity: 0; transform: translateX(-10px); visibility: hidden; }
#hero-after-wrapper.animate #hero-after{ animation: buildFromDotHero 2s forwards; animation-delay: 1s; }
@keyframes buildFromDotHero{
  0%{ opacity: 0; transform: translateX(0); visibility: visible; }
  100%{ opacity: 1; transform: translateX(0); visibility: visible; }
}

/* ===== Projektek / #projects – váltott elrendezés + swipe galéria ===== */
#projects{
  --gap: clamp(28px, 5vw, 56px);
  --col-gap: clamp(16px, 3vw, 32px);
  --rail-gap: 12px;
  --rail-h: clamp(420px, 60svh, 680px);
  --arrow-offset: 56px;        /* desktopon a képen kívüli nyilak távolsága */

  max-width: 1200px; margin: 0 auto;
  padding: calc(var(--headerH) + 44px) 20px 50px;
  display: grid; grid-template-columns: 1fr; gap: var(--gap);
}

/* DESKTOP: alapban kép bal, szöveg jobb (grid-areas); párosnál fordítva */
#projects .project{
  display: grid; align-items: start; gap: var(--col-gap);
  grid-template-columns: 1.25fr 0.9fr;
  grid-template-areas: "media text";
}
#projects .project:nth-of-type(even){
  grid-template-columns: 0.9fr 1.25fr;
  grid-template-areas: "text media";
}
#projects .project .media{ grid-area: media; position: relative; height: var(--rail-h); overflow: visible; }
#projects .project .project-text{ grid-area: text; }

/* viewport / track / képek */
#projects .viewport{ position: relative; height: 100%; overflow: hidden; }
#projects .track{
  height: 100%;
  display: flex; gap: var(--rail-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none; scrollbar-width: none;
}
#projects .track::-webkit-scrollbar{ width: 0; height: 0; display: none; }

#projects .track > img{
  flex: 0 0 100%;
  width: 100%; height: 100%;
  object-fit: contain;                 /* ne vágjuk le */
  background: transparent;             /* desktopon nincs „paszpartu” */
  scroll-snap-align: start;
  user-select: none; -webkit-user-drag: none;
  display: block; border: 0; border-radius: 0;
}

/* Nyilak: nagy, minimalista betű-nyilak; desktopon KÍVÜL, mobilon BELÜL */
#projects .prev,
#projects .next{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #000;
  font-family: 'Source Code Pro', monospace; font-weight: 500;
  font-size: clamp(32px, 5vw, 64px); line-height: 1;
  padding: 8px 12px; opacity: .95;
  z-index: 3; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased;
  cursor: pointer;
}

@media (min-width: 769px){
  /* A szövegdoboz engedje maga alá a pötty-sort */
  #projects .project .project-text{
    display: flex;
    flex-direction: column;
  }

  /* A szöveg ALÁ kerülő pöttyök stílusa (felülírja az abszolút pozicionálást) */
  #projects .project .project-text .project-dots{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px;

    /* egy sornyi távolság a szöveg után */
    margin-top: 1em;
    padding: 0;

    /* a bekezdés kezdéséhez igazítva */
    align-self: flex-start;
  }
}

@media (min-width: 769px){
  #projects .prev{ left: calc(-1 * var(--arrow-offset)); }
  #projects .next{ right: calc(-1 * var(--arrow-offset)); }
}
@media (min-width: 769px){
  #projects{
    /* nagyobb rés a projektek között */
    --gap: clamp(120px, 8vw, 160px);
  }
}

@media (max-width: 768px){
  #projects .prev{ left: 8px; }
  #projects .next{ right: 8px; }
}
#projects .prev[disabled],
#projects .next[disabled]{ display: none !important; pointer-events: none; }

/* Pontok: egyszerű fekete pöttyök; aktív: fehér + kicsit nagyobb */
#projects .dots{
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 2;
}
#projects .dots .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #000; opacity: .75; border: 0;
  transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
}
#projects .dots .dot.is-active{
  background: #fff; opacity: 1; transform: scale(1.15);
  /*box-shadow: 0 0 0 0.75px rgba(0,0,0,.55) !important;*/
}

/* ===== About / Contact ===== */
.container{ max-width: 1200px; margin: 50px auto; padding: 0 20px; }
#about h2, #contact h2{ font-size: 2rem; margin-bottom: 15px; }
#about p, #contact p{ font-size: 1rem; line-height: 1.5; }
.team-list{ list-style: none; padding: 0; margin: 20px 0; }
.team-list li{ display: grid; grid-template-columns: 200px auto; gap: 20px; margin-bottom: 10px; align-items: center; }
.team-list .name{ font-weight: bold; }
.team-list .position{ text-align: left; color: #555; }

/* ===== Footer ===== */
.site-footer{
  background: #f5f5f5; text-align: center; padding: 20px;
  border-top: 1px solid #ddd; margin-top: 50px;
}

/* ===== Mobil (≤768px) ===== */
@media (max-width: 768px){
  /* Hamburger menü */
  .nav-toggle{ display: block; }
  .nav{
    position: fixed; top: var(--headerH); left: 0; right: 0;
    display: none; flex-direction: column;
    background: rgba(255,255,255,0.98);
    border-top: 1px solid #eaeaea;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 12px 16px;
    z-index: 9998;
  }
  .nav.open{ display: flex !important; }
  .nav a{ padding: 10px 0; margin: 0; }

  /* Hero kicsit kisebb tipó */
  .hero-text{ top: 20%; }
  .hero-text h1, .hero-title{ font-size: 2rem; }
  .hero-text p{ font-size: 1rem; }

  /* Galéria: 1 oszlop – SZÖVEG FELÜL, KÉP ALUL; nagyon kicsi hézagok */
  #projects{ padding: 24px 0 28px !important; }
  /* #projects .project{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "text"
      "media" !important;
    gap: 4px !important;   
    }
    #projects .project .media{
    grid-area: media !important;
    height: auto !important;
  } 
  */
  #projects .project{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "project-hero"
      "media"
      "text" !important;
    gap: 4px !important; /* kép–szöveg közti kis hézag */
  }
  #projects .project .media{ grid-area: media !important; }
  #projects .project .project-text{ grid-area: text !important; }
  .projects.is-gallery .project .project-hero{
  grid-area: project-hero !important;
  margin: 0 !important;        /* ne legyen rálógatás mobilon */
}

  /* 2) A media blokk rendezze a pontokat a kép alá */
  #projects .project .media{
    display: grid !important;
    grid-template-rows: auto auto;   /* viewport (kép), majd dots */
    row-gap: 6px;                    /* kép–pontok közt kicsi rés */
  }

  /* 3) Pontok: ne legyenek abszolút alul-középen, hanem normál flow-ban, balra */
  #projects .dots{
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px;
    margin: 0;           /* ha kell lejjebb: pl. margin: 4px 0 0; */
    padding-left: var(--side-frame) !important;;     /* bal szélhez (képekhez) igazítva */
    z-index: 1;          /* nyilak fölé ne menjen */
  }
  #projects .project .project-text{
    grid-area: text !important;
    padding: 0 12px !important;  /* ugyanott kezdődjön, mint a kép */
    text-align: left;
  }
  #projects .project .project-text h3{
    margin: 0 !important;
    font-size: .78rem !important;
    line-height: 1.15; font-weight: 500;
  }
  #projects .project .project-text p{
    margin: 0 !important;
    font-size: .62rem !important;
    line-height: 1.25; color: #444;
  }
  

  /* Képek: teljes szélesség, aránytartva; FÜGGŐLEGESEN KÖZÉPRE igazítva (álló vs fekvő) */
  #projects .viewport{ height: auto !important; overflow: hidden; position: relative; }
  #projects .track{
    height: auto !important;
    display: flex !important;
    align-items: center !important;    /* << kulcs: fekvő képek középen az állókhoz képest */
    gap: 8px !important;
    padding-right: 0 !important;
  }
  #projects .track > img{
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    background: transparent !important;
  }

  /* Csak oldalsó „paszpartu” (fehér keret a széleken), magasságot nem növel */
  #projects{ --side-frame: 12px; }          /* állítható: 8–16px */
  #projects .viewport::before,
  #projects .viewport::after{
    content: "";
    position: absolute; top: 0; bottom: 0;
    width: var(--side-frame);
    background: #fff;
    pointer-events: none;
    z-index: 2; /* képek fölött, nyilak alatt */
  }
  #projects .viewport::before{ left: 0; }
  #projects .viewport::after { right: 0; }

  /* Nyilak mobilon a képen belül maradnak */
  #projects .prev{ left: 8px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 3; }
  #projects .next{ right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 3; }

  /* Pontok kicsit közelebb */
  #projects .dots{ bottom: 6px !important; z-index: 4; }
  #projects .dots .dot.is-active{ background: #fff !important; opacity: 1; transform: scale(1.15); }
}
/* plusz kep a galeriahoz*/
/* Projekt-hero: teljes képernyőszélesség, korrekt középre húzással */

/* ── Projekt-hero ↔ Galéria átlapolás (pixelpontosan állítható) ───────────── */

/* 1) MENNYIT lógjon rá a hero a galériára:
      - fix px: pl. 160px
      - vagy fél galéria-magasság: calc(var(--rail-h) / 2) */


/* 2) Hero blokk: feszítse át a két oszlopot, és toljuk rá a galériára
      negatív bottom marginnal. */
.projects.is-gallery .project .project-hero{
  grid-column: 1 / -1;
  margin: 0 0 calc(-1 * var(--hero-overlap));
  position: relative;
  z-index: 0;                        /* hero alul maradjon (ne takarja a nyilakat) */
}

/* 3) Hero kép: teljes szélesség, aránytartás */
.projects.is-gallery .project .project-hero img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  object-fit: cover;                 /* ha nem akarsz vágást: 'contain' */
}

/* 4) Galéria legyen rétegben FELJEBB, hogy a vezérlők látszódjanak a hero felett */
.projects.is-gallery .project .media{
  position: relative;
  z-index: 2;
}

/* 5) Full-bleed (képernyőszélig kifutó) hero opció – add class="project-hero is-bleed" az elemre */
.projects.is-gallery .project .project-hero.is-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}
@supports (width: 100svw){
  .projects.is-gallery .project .project-hero.is-bleed{
    width: 100svw;
    margin-left: -50svw;
    margin-right: -50svw;
  }
}

/* 6) Biztos ami biztos: semmi se vágódjon le */
.projects.is-gallery .project{ overflow: visible; }
.projects.is-gallery .media{   overflow: visible; }

/* 7) Ha azt szeretnéd, hogy a HERO legyen felül (takarja a galériát),
      akkor cseréld fel a z-indexeket:
      .project-hero { z-index: 3; }  és  .media { z-index: 1; } */
/* ── PROJEKT-HERO: felfelé belógatás a fölötte lévő galériába ───────── */
.projects.is-gallery .project{
  /* Itt állítod a belógás mértékét pixelre pontosan */
  --hero-pull: 110px;          /* próbáld 100–220px között */
}

/* A hero lefelé helyezkedik el a markupban, innen húzzuk FELÉ */
.projects.is-gallery .project .project-hero{
  grid-column: 1 / -1;         /* két oszlopon át */
  margin-top: calc(-1 * var(--hero-pull));
  margin-bottom: 0;
  position: relative;
  z-index: 1;                   /* hero ALATTA marad a galériának, így a nyilak/pontok kattinthatók */
}

/* A galéria legyen fölötte a rétegsorrendben (kattintható nyilak/pontok) */
.projects.is-gallery .project .media{
  position: relative;
  z-index: 2;
}
/*!!!!!!!hero imege a galeriak mellett ne logjon oldalra ki*/
@media (max-width: 768px){
  /* A hero marad felül a gridben */
  .projects.is-gallery .project .project-hero{
    grid-area: project-hero !important;
    margin: 0 !important;
    padding-inline: var(--side-frame); /* igazítás a galéria oldalsó "paszpartuhoz" */
  }

  /* Kapcsold ki a full-bleed viselkedést mobilon */
  .projects.is-gallery .project .project-hero.is-bleed{
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
 /* ← EZ állítja, milyen közel legyen a hero a galériához */
  .projects.is-gallery .project .project-hero{
    margin-bottom: 4px !important;   /* állítsd 0–8px között ízlés szerint */
  }

  /* Ha teljesen nulláznád a sorok közti rácshézagot is: */
  .projects.is-gallery .project{
    gap: 0 !important;
  }
  /* Biztonság kedvéért az img-re is */
  .projects.is-gallery .project .project-hero img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}
/*hero imege a galeriak mellett ne logjon oldalra ki!!!!!!!*/


/* (opció) Mobilon kisebb belógás */
@media (max-width: 768px){
  .projects.is-gallery .project{ --hero-pull: 0px; }
}

/* === MOBIL: álló képek teljesen látszódjanak === */
@media (max-width: 768px){
  /* A galéria "sín" magassága mobilon: állítsd ízlés szerint */
  #projects{ --m-rail-h: clamp(320px, 80svh, 820px); } /* 75svh ≈ képernyő 75%-a */

  /* A media/viewport/track mind ezt a magasságot vegye fel */
  #projects .project .media{
    height: var(--m-rail-h) !important;
  }
  #projects .viewport{
    height: 100% !important;
    overflow: hidden; /* maradhat, nem fog vágni, mert illesztünk 100%-ra */
  }
  #projects .track{
    height: 100% !important;
    display: flex !important;
    align-items: center !important; /* fekvő is középen */
  }

  /* A képek a rendelkezésre álló dobozba "contain"-nel férjenek bele */
  #projects .track > img{
    width: 100% !important;
    height: 100% !important;   /* ← EZ a lényeg: a sín magasságához igazítunk */
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/*  pontok a kepek vitetesehez a szoveg alatt*/
/* === DESKTOP: pontok a SZÖVEG alatt, szöveg a kép mellett marad === */
@media (min-width: 769px){
  /* két oszlop marad, felül média+szöveg, alul a dots a SZÖVEG oszlopa alatt */
  #projects .project{
    display: grid !important;
    grid-template-columns: 1.25fr 0.9fr;
    grid-template-rows: auto auto; /* sor1: media + text, sor2: dots */
    column-gap: var(--col-gap, 32px);
    row-gap: 0;
    align-items: start;
    position: relative;
  }

  /* páratlan: kép bal, szöveg jobb */
  #projects .project:nth-of-type(odd)  .media{ grid-column: 1; grid-row: 1; }
  #projects .project:nth-of-type(odd)  .project-text{ grid-column: 2; grid-row: 1; }
  #projects .project:nth-of-type(odd)  .project-dots{ grid-column: 2; grid-row: 2; }

  /* páros: szöveg bal, kép jobb */
  #projects .project:nth-of-type(even) .media{ grid-column: 2; grid-row: 1; }
  #projects .project:nth-of-type(even) .project-text{ grid-column: 1; grid-row: 1; }
  #projects .project:nth-of-type(even) .project-dots{ grid-column: 1; grid-row: 2; }

  /* a pontok normál flow-ban, balra igazítva a szöveg alá */
  #projects .project .project-dots{
    display: flex !important;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0 0 0;   /* kis távolság a szöveg alatt */
    padding: 0;
  }

  /* ha véletlenül marad dots a media-ban, rejtsük el desktopon */
  #projects .project .media > .dots{ display: none !important; }
}

/* === Desktop: 0px rés a HERO után, a következő projekt előtt === */
@media (min-width: 769px){
  .projects.is-gallery .project .project-hero{
    margin-bottom: 0; /* a hero ne növelje a rést */
  }

  /* csak azoknál a projekteknél, ahol van hero */
  #projects .project:has(> .project-hero){
    --gap-after-hero: 0px; /* ← itt 0px a célrés */
    margin-bottom: calc(-1 * (var(--gap) - var(--gap-after-hero)));
  }
}

/* Fallback régebbi böngészőre (:has nélkül):
   add class="is-tight-after" arra a .project-re, ahol 0px-et akarsz */
@media (min-width: 769px){
  #projects .project.is-tight-after{
    --gap-after-hero: 0px;
    margin-bottom: calc(-1 * (var(--gap) - var(--gap-after-hero)));
  }
}