/* ================================
   ALAP BEÁLLÍTÁSOK – Görgetés engedélyezve + Scrollbar elrejtve
=================================== */
  html.fonts-loading body { visibility: hidden; }

html, body {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */


}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Edge */
}

/* ================================
   SAFIRO betűtípus
=================================== */
@font-face {
  font-family: 'Quablo';
  src: url('fonts/Quablo-Medium.woff2') format('woff2'),
       url('fonts/Quablo-Medium.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ================================
ALAP STÍLUSOK
=================================== */
body {
font-family: "Quablo", sans-serif;
background-color: rgb(255, 255, 255);
}

/* Háttérkép fixen a képernyőn */
#image-slider {
  position: fixed;
  inset: 0; /* top:0; left:0; right:0; bottom:0 */
  background-size: cover;
  background-position: center;
  transition: opacity 1s ease-in-out;
  opacity: 1;
  z-index: -1;

  pointer-events: none;
  touch-action: pan-y;
}

/* Rejtett (áttűnéshez) */
#image-slider.hidden {
  opacity: 0;
}

/* Fejléc alatti 80%-os áttűnés (ha használod) */
.body-with-fade #image-slider {
  opacity: 0.2;
}

/* =========================================
   ÁLLÍTHATÓ POZÍCIÓVÁLTOZÓK (menü + title shift)
============================================ */
:root {
  --menu-right: 50px;             /* jobb oldali távolság */
  --menu-toggle-top-shift: 3px;   /* + jel függőleges finomhangolása */
  --nav-links-top-shift: 0px;     /* menüsor függőleges finomhangolása */

  /* Projektek – csukott állapot overlay magassága */
  --preview-height: 50px;

  /* Projektek – tipográfia (alapértelmezett) */
  --proj-title-size: 12px;
  --proj-title-weight: 600;
  --proj-title-color: #000;

  --proj-type-size: 11px;
  --proj-type-weight: 400;
  --proj-type-color: #000;

  --proj-details-size: 12px;
  --proj-details-weight: 300;
  --proj-details-color: #000;
  --proj-details-lineheight: 1.4;

    /* Header / UI alap színek */
  --ui-black: rgb(21, 21, 21);      /* “világosabb fekete” */
  --ui-black-strong: rgb(15, 15, 15);
  --ui-white: rgba(213, 213, 213, 0.875); /* “halványszürke fehér” érzet */
  --ui-white-strong: rgb(255, 255, 255);

    --lb-title-font: "Quablo", sans-serif;
  --lb-title-size: 18px;
  --lb-title-weight: 400;
  --lb-title-color: rgba(0,0,0,0.75);
}

/* ================================
   FEJLÉC + CÍM + MENÜ JOBBRA (+ jel)
=================================== */
.header {
  height: 70px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  display: flex;
  justify-content: space-between; /* bal: cím, jobb: menü */
  align-items: center;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
  box-shadow: none;

}

/* Címsor – viewport a csúsztatáshoz */
.title-viewport {
  overflow: hidden;
  display: inline-block;
}

/* Cím: csúsztatható balra */
.header-title {
  display: inline-block;
  white-space: nowrap;
  font-weight: 900;
  font-size: 50px;
  font-family: "Quablo", sans-serif;
  margin: 0px;
  transition: transform 1s ease; /* 1s, ahogy kérted */
  color: var(--ui-black);
}

body.subpage .header-title {
  color: var(--ui-black-strong);
}

/* A két szó külön */
.title-left,
.title-right {
  display: inline-block;
}

/* Menü nyitásakor a bal oldali (STUDIO) rész „tűnjön el” balra */
body.menu-open .header-title {
  transform: none !important;
}

/* Jobb oldali wrapper: + jel és a menü */
.menu-wrapper {
  position: fixed;
  top: 15px;      /* finomhangold */
  right: 0px;    /* finomhangold */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 15px; /* menü és + jel közötti távolság */
}

/* + gomb – 45°-os forgatás */
.menu-toggle {
  font-family: "Quablo", sans-serif;
  font-weight: 300;
  font-size: 75px;
  background: none;
  border: none;
  cursor: pointer;
  color: black;

  display: inline-block;
  line-height: 1;
  padding: 0;

  /* stabil, középpont körüli forgatás */
  transform: translateY(var(--menu-toggle-top-shift)) rotate(0deg);
  transform-origin: center center;
  transition: transform 0.5s ease;
}

/* Nyitott állapot – 45°-os elforgatás */
.menu-toggle.open {
  transform: translateY(var(--menu-toggle-top-shift)) rotate(45deg);
}

/* Menü – alapból rejtve; balra jelenjen meg a + jel mellett */
.nav-links {
  display: none;
  flex-direction: row;
  gap: 20px;
  transform: translateY(var(--nav-links-top-shift));
}

/* Látható állapot – amikor megnyitod */
.nav-links.active {
  display: flex;
}

/* Menüpontok tipográfia */
.nav-links a {
  text-decoration: none;
  font-weight: 300;
  font-size: 50px;
  line-height: 1;
  transition: color 0.3s ease;
}

/* Színek oldaltól függően */
body.index .nav-links a {
  color: var(--ui-white);
}
body.index .nav-links a:hover {
  color: var(--ui-black-strong);
}
body.subpage .nav-links a {
  color: var(--ui-white);
}
body.subpage .nav-links a:hover {
  color: var(--ui-black-strong);
}

/* Link a fejléc címén */
.home-link {
  text-decoration: none;
  color: black;
  transition: color 0.3s ease;
}
.home-link:hover {
  color: black;
}

/* ================================
   INFO OLDAL
=================================== */
.info-container {
  display: flex;
  align-items: stretch;              /* a bal és jobb oszlop azonos magasságú lesz */
  justify-content: space-between;
  margin: 50px 50px 0 50px;
}

.info-box {
  width: 500px;
  display: flex;
  flex-direction: column;            /* felső (about-text) + alsó (about-contact) */
  justify-content: space-between;    /* felső rész felül, contact rész alul */
  font-size: 12px;
  color: black;
  font-family: 'Quablo', sans-serif;
  font-weight: 300;
}
/* Felső “About” szövegrész */
.about-text p {
  line-height: 1.5;
  margin: 0 0 12px 0;
  text-align: justify;   /* sorkizárt */
}
/* Alsó Contact blokk */
.about-contact {
  margin-top: 16px;
}
.about-subtitle {
  margin: 6px 0 10px 0;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  font-family: "Quablo", sans-serif;
}
/* A contact-list és contact-item a korábbi Contact oldalról újrahasznosítva */
.contact-list {
  display: grid;
  gap: 10px;
}
.contact-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.contact-label {
  font-weight: 600;
  color: #444;
  min-width: 100px;
}
.contact-value {
  color: #000;
  text-decoration: none;
  font-weight: 400;
}
.contact-value:hover {
  text-decoration: underline;
}
.info-box p {
  line-height: 1.5;
}

/* Profilkép */
.profile-picture {
  width: 350px;
  height: 533px;
  object-fit: cover;
  margin-right: 170px;
}

/* ================================
   PROJECTS GRID
=================================== */
.projects-container {
  margin: 150px 50px 50px 50px;
  overflow-y: auto;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 oszlop */
  gap: 20px;
}

.project-item {
  position: relative;
  overflow: hidden;
}

.project-image {
  width: 100%;
  aspect-ratio: 350 / 500;
  object-fit: cover;
  display: block;
  cursor: pointer;
  }
/* ================================
   PROJECT OVERLAY – PREVIEW + HEADER/META/DETAILS
=================================== */

/* Csukott állapotban: csak a preview látszik (fix magasság: --preview-height) */
.project-info-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;

  height: var(--preview-height);
  background-color: rgb(255, 255, 255);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: height 0.5s ease;
  overflow: hidden;
  z-index: 5;

  display: flex;
  flex-direction: column;
}

/* Preview sáv: két sor – title + type */
.project-info-overlay .preview {
  height: var(--preview-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 8px;
  gap: 2px;
  overflow: hidden;
  cursor: pointer;
}

/* Projekt neve (preview) */
.project-info-overlay .preview .proj-title {
  font-family: 'Quablo', sans-serif;
  font-size: var(--proj-title-size);
  font-weight: var(--proj-title-weight);
  color: var(--proj-title-color);
  line-height: 1.1;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Projekt típusa (preview) */
.project-info-overlay .preview .proj-type {
  font-family: 'Quablo', sans-serif;
  font-size: var(--proj-type-size);
  font-weight: var(--proj-type-weight);
  color: var(--proj-type-color);
  opacity: 0.95;
  line-height: 1.1;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Nyitott állapot: teljes magasság, preview eltűnik, jön a full blokk */
.project-info-overlay.expanded {
  height: 100%;
  overflow: hidden; /* a belső scroll a details-en lesz */
}

/* Expanded esetben a preview eltűnik (ne legyen a tetején) */
.project-info-overlay.expanded .preview {
  display: none;
}

/* Full blokk – a JS tölti fel (full-header, full-meta, full-details) */
.project-info-overlay .full {
  display: none; /* csukott állapotban rejtett */
}

/* Expanded esetben megjelenítjük a full blokkot, és oszlopos elrendezésben állítjuk be */
.project-info-overlay.expanded .full {
  display: flex;
  flex-direction: column;
  height: 100%;         /* a teljes overlay terület kitöltése */
  overflow: hidden;     /* görgetés csak a details-en legyen */
  padding: 8px;
  box-sizing: border-box;
}

/* Alapértelmezett halványszürke szín csukott állapotban */
.project-info-overlay .preview .proj-title,
.project-info-overlay .preview .proj-type {
  color: rgba(0, 0, 0, 0.4); /* halvány szürke */
  transition: color 0.25s ease; /* finom átmenet */
}

/* Ha az egér a csukott előnézeti sáv fölé kerül → legyen fekete */
.project-info-overlay:not(.expanded) .preview:hover .proj-title,
.project-info-overlay:not(.expanded) .preview:hover .proj-type {
  color: rgb(0, 0, 0); /* fekete */
}

/* Full – felső fejléc: cím + típus (mindig látszik) */
.full-header {
  padding: 8px 4px 6px 4px;
  border-bottom: 1px solid rgb(0, 0, 0);
}
.full-header .full-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}
.full-header .full-type {
  font-weight: 400;
  font-size: 12px;
  opacity: 0.9;
}

/* Full – meta adatok: (helyszín, dátum, méret, megrendelő) – mindig látszik */
.full-meta {
  padding: 6px 4px 8px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
:root{
  --meta-label-col: 120px; /* címke oszlop szélessége desktopon */
}

.full-meta .meta-row{
  display: grid;
  grid-template-columns: var(--meta-label-col) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;

  font-size: 12px;
  margin: 2px 0;
  line-height: 1.3;
}

.full-meta .meta-label{
  font-weight: 600;
  color: #333;

  /* Preferált törés szóközöknél, csak végszükség esetén törjön szót */
  white-space: normal;
  overflow-wrap: break-word;  /* csak ha muszáj (hosszú egybefüggő string) */
  word-break: normal;         /* ne törjön agresszíven */
  hyphens: auto;              /* ha a böngésző támogatja és a nyelv be van állítva */
}

.full-meta .meta-value{
  color: #000;

  /* Fontos grid esetén, hogy tudjon zsugorodni és törni */
  min-width: 0;

  /* Preferált törés szóközöknél, csak végszükség esetén törjön szót */
  white-space: normal;
  overflow-wrap: break-word;  /* nem "anywhere", csak ha tényleg muszáj */
  word-break: normal;
  hyphens: auto;
}



/* Full – szöveges részletek: CSAK EZ legyen görgethető */
.full-details {
  flex: 1 1 auto;        /* foglalja a maradék helyet */
  overflow-y: auto;      /* görgetés itt történik */
  padding-top: 8px;
  font-family: 'Quablo', sans-serif;
  font-size: var(--proj-details-size);
  font-weight: var(--proj-details-weight);
  line-height: var(--proj-details-lineheight);
  color: var(--proj-details-color);
  text-align: justify;   /* sorkizárt */
scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
}
.full-details::-webkit-scrollbar {
  display: none;                /* WebKit: Chrome, Safari, Edge */
}

/* opcionális: a részletek hosszabb tagolása miatt kis térközök */
.full-details .detail1,
.full-details .detail2 {
  margin-bottom: 12px;
}

/* Reszponzív törések */
@media (max-width: 1200px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .project-grid {
    grid-template-columns: 1fr;
  }
}

/* Felúszó fehér sáv – bal: Architecture Studio, közép: Instagram, jobb: email */
.bottom-reveal-bar {
  position: fixed;
  bottom: -50px;              /* alapból rejtve */
  left: 0;
  height: 50px;
  width: 100%;
  background-color: white;

  display: flex;
  align-items: center;
  justify-content: flex-start;  /* ← Nem befolyásolja a középet */
  font-family: "Quablo", sans-serif;
  font-size: 13px;
  color: #000;
  transition: bottom 0.3s ease;
  z-index: 1100;

}

/* Alap: desktopon az e-mail látszik, a mobilos Instagram link rejtve */
.footer-right--desktop { display: block; }
.footer-right--mobile  { display: none; }

/* Bal oldali szöveg – kis belső margóval */
.footer-left {
  margin-left: 20px;
  color: #000;
}
/* Jobb oldali email – a fejléc + jel logikájához igazítva */
.footer-right {
  position: absolute;
  right: var(--menu-right);    /* ← ugyanazt a változót használjuk mint a + jelhez */
  color: #000;
  text-decoration: none;
}
.footer-right:hover {
  text-decoration: underline;
}

.footer-right--desktop {
  display: inline;           /* desktopon látszik az e-mail */
  position: absolute;
  right: var(--menu-right);
}
.footer-right--mobile {
  display: none;             /* mobilos verzió rejtve desktopon */
}

/* KÖZÉP – Instagram ikon pont középre */
.footer-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* ← Tökéletes vízszintes középre igazítás */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Instagram ikon mérete */
.instagram-icon {
  width: 35px;
  height: 35px;
}

/* Láthatatlan, 50px magas zóna az ablak alján — ha később is akarod használni */
.bottom-hover-zone {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 1090;
  background: transparent;
}

/* Szűrősáv */
.filters {
  position: static;            /* ← NINCS fixed */
  left: auto;
  top: auto;
  z-index: 1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  font-family: "Quablo", sans-serif !important;
}

.filter-btn {
  font-family: "Quablo", sans-serif;  /* vagy: inherit */
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.3px;
  appearance: none;        /* eltávolítja az OS-alapú gombstílust */
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: #000;             /* szín beállítás */
  transition: color 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}

.filter-btn:hover {
  color: #000;
  font-weight: 900;        /* félkövér hover állapotban */
  transform: translateY(-1px);
}

.filter-btn.active {
  color: #000;
  font-weight: 600;
  text-decoration: underline;
}

/* Rejtett projekt elemek */
.project-item.hidden {
  display: none;
}

/* A projektgrid tetején legyen annyi hely, hogy a szűrősávnak legyen helye */
.projects-container {
  margin-top: 190px; /* ha eddig 150px volt, hogy aláférjen a szűrősáv */
}

/* ================================
   Contact oldal
=================================== */
.contact-container {
  max-width: 800px;
  margin: 150px auto 80px auto;
  padding: 0 24px;
  font-family: "Quablo", sans-serif;
}

.contact-container h2 {
  font-weight: 700;
  font-size: 32px;
  margin: 0 0 24px 0;
  color: #000;
}

.contact-list {
  display: grid;
  gap: 16px;
}

.contact-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.contact-label {
  font-weight: 600;
  color: #444;
  min-width: 100px;
}

.contact-value {
  color: #000;
  text-decoration: none;
  font-weight: 400;
}

.contact-value:hover {
  text-decoration: underline;
}

/* ====== Lightbox (képnézegető) – 50px margóval, fehér dobozban, háttér-blur ====== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
    /* iOS Safari kompozit réteg trükk */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.lightbox.open {
  display: flex;
  
}
/* Nyitott lightboxnál a háttér ne görögjön */
html.lightbox-open, body.lightbox-open {
  overflow: hidden !important;
 }

.lightbox-open .header,
.lightbox-open .filters,
.lightbox-open .bottom-reveal-bar,
.lightbox-open .menu-wrapper {
  z-index: 0 !important;
}
.lightbox-inner {
  position: relative;
  width: calc(100% - 0px);   /* 50px margó mindkét oldalon */
  height: calc(100% - 0px);
  background: #fff;
  border-radius: 0px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  
  touch-action: pan-y pinch-zoom;   /* a vízszintes húzást mi kezeljük */
  overscroll-behavior: contain;     /* ne bökje át a görgetést a szülőre */
  user-select: none;                /* ne jelölje ki a képet húzás közben */
}
.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  
  pointer-events: none;
}

/* Vezérlőgombok – csak ikonok */
/* ================================
   LIGHTBOX – SZÖVEGES VEZÉRLŐK
=================================== */

.lb-btn {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  color: #000;
  font-family: "Quablo", sans-serif;
  font-weight: 400;
  letter-spacing: 0.4px;
  padding: 0;
  font-size: 14px;
  z-index: 10;
  pointer-events: auto;

  /* 🔴 hover, active, scale teljes tiltása */
  transition: none !important;
  transform: none !important;
}

/* Bezárás – jobb felső */
.lb-close {
  top: 26px;
  right: 26px;
}

/* Előző – bal alsó */
.lb-prev {
  bottom: 26px;
  left: 26px;
}

/* Következő – jobb alsó */
.lb-next {
  bottom: 26px;
  right: 26px;
}


/* Info gomb – bal felső */
.lb-info{
  top: 26px;
  left: 26px;
}

/* Info panel (alapból rejtve) */
.lightbox-info{
  display: none;
  width: min(780px, calc(100% - 100px));
  height: calc(100% - 120px);
  overflow-y: auto;
  padding: 40px 34px;
  box-sizing: border-box;
  font-family: "Quablo", sans-serif;
  color: #000;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lightbox-info::-webkit-scrollbar{ display:none; }

/* Ha Info mód aktív: kép eltűnik, panel megjelenik */
.lightbox-inner.info-mode .lightbox-image{
  display: none;
}
.lightbox-inner.info-mode .lightbox-info{
  display: block;
}

/* Mobil finomhangolás */
@media (max-width: 600px){
  .lb-info{
    top: 10px;
    left: 10px;
  }
  .lightbox-info{
    width: calc(100% - 24px);
    height: calc(100% - 90px);
    padding: 22px 16px;
  }
}

/* Lightbox: projektcím / placeholder pontosan középen */
.lightbox .lb-placeholder{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;

  text-align: center;
  pointer-events: none;

  font-family: var(--lb-title-font);
  font-size: var(--lb-title-size);
  font-weight: var(--lb-title-weight);
  color: var(--lb-title-color);

  line-height: 1.2;
  z-index: 6; /* kép fölött, gombok alatt (gombok z-index:10) */
}

@media (max-width: 600px){
  :root{
    --lb-title-size: 16px;
  }
}


.lb-btn:hover,
.lb-btn:active,
.lb-btn:focus {
  color: #000;
  background: none;
  outline: none;
  transform: none;
}

/* Lightbox "intro" mód: cím látszik, kép + gombok rejtve */
.lightbox-inner.intro-mode .lightbox-image{
  opacity: 0 !important;
}

.lightbox-inner.intro-mode .lb-prev,
.lightbox-inner.intro-mode .lb-next,
.lightbox-inner.intro-mode .lb-close,
.lightbox-inner.intro-mode .lb-info{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* A placeholder (projekt cím) finoman kezelhető */
.lightbox .lb-placeholder{
  opacity: 1;
  transition: opacity 250ms ease;
}

/* Amikor kész a megjelenítés, a cím elhalványulhat */
.lightbox-inner.reveal-ready .lb-placeholder{
  opacity: 0;
  pointer-events: none;
}

/* A kép is fel tud finoman jönni (ha szeretnéd) */
.lightbox-image{
  transition: opacity 250ms ease;
}


.cv-link {
  margin-top: 60px;   /* nagyobb távolság a szövegtől */
  margin: 20px 0;
}

.cv-link a {
  font-family: "Quablo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  padding: 6px 12px;
  transition: all 0.3s ease;
}

/* Hover állapot – fekete háttér + fehér szöveg */
.cv-link a:hover {
  background-color: #000;
  color: #fff;
}

/* ------------------------------
     LANGUAGE SWITCH – beside burger
------------------------------ */

.lang-switch {
    display: flex;
    flex-direction: column;   /* HU fölötte, EN alatta */
    justify-content: center;
    align-items: flex-start;
    gap: 1px;
    margin-left: 10px;        /* burger gombtól egy kis távolság */
    font-size: 14px;
    font-family: 'Quablo', sans-serif;
    line-height: 1;
}

.lang-switch .lang-btn {
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s ease;
    letter-spacing: 0.5px;
}

.lang-switch .lang-btn.active {
    opacity: 1;
    font-weight: 600;
}

body.index .lang-switch .lang-btn { color: var(--ui-black); }
body.subpage .lang-switch .lang-btn { color: var(--ui-black-strong); }

/* Fontos: a header magassága NEM változik,
   csak függőlegesen középre igazítjuk az elemeket */
.menu-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ================================
   MOBIL FEJLÉC – Szép igazítás iPhone és hasonló méretekhez
=================================== */
@media (max-width: 600px) {
  .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
    padding-left: var(--page-pad-x-m);
    padding-right: var(--page-pad-x-m);
  height: 60px;
  position: fixed;
  top: 0;                     /* ← EZ HIÁNYZOTT vagy felül lett írva */
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

  .header-title {
    font-size: clamp(30px, 6vw, 34px);
    white-space: nowrap;
    line-height: 1;
    margin: 0;
    transition: transform 0.5s ease;
  }

  .title-viewport {
    overflow: hidden;
    transition: transform 0.5s ease;
  }

  .menu-wrapper {
    position: absolute;
    right: 30px; /* <-- Ez a margó a képernyő szélétől (mobilon) */
    top: 50%;
    transform: translateY(-60%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1001;
  }

  .menu-toggle {
    font-size: 45px;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform 0.5s ease;
    color: black;
  }

  .menu-toggle.open {
    transform: rotate(45deg);
  }

  .nav-links {
    position: absolute;
    right: calc(80px + 5px); /* a hamburger szélessége (36px) + 5px távolság */
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: row;
    gap: 15px;
    z-index: 1000;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    font-size: 30px;   
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
  }

  .nav-links a:hover {
    color: black;
  }


    .bottom-reveal-bar .footer-center {
    display: none; /* középső Instagram ikon eltűnik mobilon */
  }
 .footer-right--desktop {
    display: none; /* e-mail rejtve mobilon */
  }
   .footer-right--mobile  { 
    display: inline-block;                           /* Instagram felirat látszik */
    right: 10px;                                     /* kisebb oldalmargó */
    font-size: 13px;
    color: #000;
    font-weight: 400;
    font-family: 'Quablo', sans-serif;
  }

  .bottom-reveal-bar .footer-left {
    margin-left: 10px;
  }
    :root{
    --meta-label-col: 105px; /* mobilon kisebb, hogy több hely maradjon az értéknek */
  }

  /* Mobilon a footer-right tartalmát igazítsuk bal szélhez ha kell */
  .bottom-reveal-bar .footer-left {
    margin-left: 10px;
  }
}
.header {
  contain: layout;
}
/* ===== About oldal – reszponzív törések ===== */

/* Közepes kijelzők: kicsit szellősebb elrendezés */
@media (max-width: 600px) {
  .info-container {
    margin: 130px 24px 40px 24px;  /* kicsit kisebb margó */
    gap: 24px;
  }
  .info-box {
    width: 100%;                  /* ne legyen fix 500px, mert szűkíti a szöveget */
  }
  .profile-picture {
    margin-right: 0;
    max-width: 480px;
    width: 100%;
    height: auto;                 /* arányos méret mobilon */
    object-fit: cover;
  }
}

/* Mobil: oszlopos elrendezés – először a szöveg, majd a profilkép */
@media (max-width: 600px) {
  .info-container {
    display: flex;
    flex-direction: column;         /* egymás alá rendezés */
    align-items: flex-start;
    margin: 130px 16px 40px 16px;
    gap: 20px;
  }

  .info-box {
    order: 1;                       /* első elem: szöveges blokk */
    width: 100%;
  }

  .profile-picture {
    order: 2;                       /* második elem: kép */
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 12px 0 0 0;
    object-fit: cover;
  }

  /* Olvashatóbb tipográfia mobilra */
  .info-box p {
    font-size: 14px;
    line-height: 1.6;
  }
  .about-subtitle {
    font-size: 15px;
    margin-top: 10px;
  }
  .contact-list {
    gap: 8px;
  }
  .contact-item {
    gap: 8px;
  }
  .contact-label {
    min-width: 90px;
    font-size: 13px;
  }
  .contact-value {
    font-size: 13px;
  }
}
/* Projektszűrők – egy sor, görgetés nélkül */
@media (max-width: 600px) {
  .filters {
    flex-wrap: nowrap !important;   /* KIZÁRT a törés */
    gap: 8px;                        /* kisebb hézag */
    overflow: hidden !important;     /* ne legyen vízszintes görgetés */
    white-space: nowrap;             /* extra biztosítás */
  }
  .filter-btn {
    white-space: nowrap;             /* címkék se törjenek */
    padding: 4px 8px;                /* ez lesz az alap, JS arányosan zsugorítja */
    font-size: 13px;                 /* ez lesz az alap, JS innen indul */
    letter-spacing: 0.2px;
    flex: 0 0 auto;                  /* ne nyújtson/rántson */
  }
}
/* Fejléc viselkedés oldalanként */
body.index .header { 
  position: fixed !important; 
  top: 0; left: 0; right: 0;
}

body.subpage .header { 
  position: relative !important;   /* a többi oldalon gördül a tartalommal */
  top: auto; left: auto; right: auto;
  z-index: auto;
}


/* Projects oldal: a wrapper legyen normál konténer */
.projects-page {
  position: relative;
  overflow: visible;
}

/* A sticky CSAK a subpage-eken éljen (indexen nincs szűrősáv) */
body.subpage .projects-page .filters {
  position: -webkit-sticky;    /* Safari */
  position: sticky;
  top: 10px;                   /* állítsd, ha közelebb/távolabb akarod */
  left: var(--page-pad-x);
  z-index: 1000;
}
@media (max-width: 600px){
  body.subpage .projects-page .filters{
    left: var(--page-pad-x-m);
  }
}

/* A projektlista ne legyen külön scroller */
.projects-container {
  overflow: visible;            /* ← ne „zárja be” a sticky-t */
}

/* Ha korábban nagy volt a hely a tetején a fixed miatt, elég ennyi */
body.subpage .projects-container {
  margin-top: 20px;
}

/* ===== HAMBURGER – vastagabb vonalak, "összecsúszik egy vonallá" ===== */
.menu-toggle {
  --line-h: 5px;   /* ← vastagság (3–5px között jól néz ki) */
  --gap: 7px;      /* vonalak közötti távolság */
  width: 44px;
  height: calc(var(--line-h) * 3 + var(--gap) * 2);
  padding: 0;
  background: transparent;
  border: 0;
  position: relative;          /* abszolút pozíció a vonalaknak */
  display: inline-block;
  cursor: pointer;
}

.menu-toggle:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* 3 vonal – vastagabb, kerekített vég */
.menu-toggle .burger-line {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--line-h);
  transition: top .25s ease, opacity .2s ease;
  background: var(--ui-black);
}



body.subpage .menu-toggle .burger-line {
  background: var(--ui-black-strong);
}

/* Zárt pozíciók */
.menu-toggle .burger-line:nth-child(1) { top: 0; }
.menu-toggle .burger-line:nth-child(2) { top: calc(var(--line-h) + var(--gap)); }
.menu-toggle .burger-line:nth-child(3) { top: calc(var(--line-h) * 2 + var(--gap) * 2); }

/* Nyitott állapot: felső és alsó középre csúszik, középső eltűnik */
.menu-toggle.open .burger-line:nth-child(1),
.menu-toggle.open .burger-line:nth-child(3) {
  top: calc(50% - var(--line-h) / 2);
}
.menu-toggle.open .burger-line:nth-child(2) {
  opacity: 0;
}

/* (opcionális) mobil finomhangolás */
@media (max-width: 600px) {
  .menu-toggle {
    --line-h: 3.5px;
    --gap: 6px;
    width: 36px;
  }
}
/* Hamburger vertikális finomhangolása (pozíció relatív eltolással) */
.menu-toggle {
  position: relative;
  top: -5px;   /* negatív: feljebb, pozitív: lejjebb tol */
}
@media (max-width: 600px) {
  .menu-toggle { top: 0px; }  /* pl. mobilon középre igazítva */
}

@media (max-width: 600px) {

  .lb-prev,
  .lb-next,
  .lb-close {
    font-size: 13px;
    letter-spacing: 0.3px;
  }

  .lb-close {
    top: 10px;
    right: 10px;
    left: auto;
    bottom: auto;
  }

  .lb-prev {
    top: auto;
    bottom: 14px;
    left: 14px;
    transform: none;
  }

  .lb-next {
    top: auto;
    bottom: 14px;
    right: 14px;
    transform: none;
  }
}

@media (hover: none) and (pointer: coarse) {

  .lb-prev:active,
  .lb-next:active,
  .lb-close:active {
    transform: none !important;
  }

}

/* Projects: kezdeti "flicker" ellen – legyen teljesen rejtve első paintnél */
.project-grid.is-loading {
  visibility: hidden;
  opacity:0
}


.project-grid.is-ready {
  visibility: visible;
}

.project-grid.is-ready .project-item {
  opacity: 1;
  transition: opacity 200ms ease;
}
/* =========================
   V2 FULLSCREEN OVERLAY MENU
========================= */

/* a cím NE mozduljon */
body.menu-open .header-title {
  transform: none !important;
}

/* nyitott menünél ne scrollozzunk */
body.menu-open {
  overflow: hidden;
}

/* overlay: teljes képernyő */
.nav-links {
  position: fixed !important;
  inset: 0 !important;
  z-index: 900 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;

  background: rgba(255, 255, 255, 0.9);

  /* zárt állapot */
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: transform 420ms ease, opacity 280ms ease, visibility 0s linear 420ms;
}

/* nyitott állapot */
.nav-links.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: transform 420ms ease, opacity 280ms ease, visibility 0s linear 0s;
}

/* menü linkek középen */
.nav-links a {
  color: #000 !important;
  text-decoration: none;
  font-weight: 300;
  font-size: clamp(28px, 6vw, 60px);
  line-height: 1.05;
}

.nav-links a:hover {
  font-weight: 600;
}

/* header és hamburger mindig az overlay felett legyen kattintható */
.header {
  z-index: 1000 !important;
}

.menu-wrapper {
  z-index: 1100 !important;
  position: relative; /* biztosítja a z-index működését */
}

:root { --menu-wrapper-y: -17px; } /* negatív = feljebb, pozitív = lejjebb */

.menu-wrapper {
  transform: translateY(calc(-50% + var(--menu-wrapper-y))) !important;
}
/* Cím (header) legyen az overlay alatt */
.header {
  z-index: 1000; /* overlay ennél nagyobb lesz */
}

/* A projects filter se lógjon az overlay fölé */
.filters {
  z-index: 900; /* overlay ennél is nagyobb lesz */
}

/* Fullscreen overlay legyen a header + filters fölött */
.nav-links {
  z-index: 2000 !important;
}

/* Hamburger + nyelv legyen a legfelső rétegben */
.menu-wrapper {
  z-index: 3000 !important;
}

/* ===== MENU WRAPPER: "mintha a headerben lenne" ===== */
:root{
  --header-h: 70px;
  --header-h-mobile: 60px;
  --menu-right: 30px;   /* ezt állítsd: távolság a jobb széltől */
}

:root{
  --z-filters: 800;
  --z-header: 900;
  --z-overlay: 2000;
  --z-menu-ui: 3000; /* hamburger + nyelv */
}

/* A cím + header legyen az overlay alatt */
.header{
  z-index: var(--z-header) !important;
}

body.subpage .projects-page .filters{
  z-index: var(--z-filters) !important;
}

/* Overlay menü a cím + filter fölött */
.nav-links{
  z-index: var(--z-overlay) !important;
}

/* Hamburger + nyelv az overlay fölött */
.menu-wrapper{
  position: fixed !important;
  top: 0 !important;
  right: var(--menu-right) !important;

  height: var(--header-h) !important;   /* ettől lesz "header-szintű" */
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  transform: none !important;           /* KRITIKUS: ne tolja el */
  z-index: var(--z-menu-ui) !important;
}

/* Projects filter legyen az overlay alatt (nyitott menünél is) */
.filters{
  position: relative;
  z-index: 800;
}
/* Opcionális: nyitott menünél a szűrő ne legyen kattintható */
body.menu-open .filters{
  pointer-events: none;
}

/* Mobil finomhangolás */
@media (max-width: 600px){

  /* finomhangoló változók mobilra */
  :root{
    --menu-right-mobile: 10px;  /* jobb oldali távolság */
    --menu-pad-top: 15px;        /* menü UI feljebb/lejjebb */
    --burger-y: -3px;           /* hamburger külön finomhangolás */
    --lang-y: -6px;            /* <-- NYELV finomhangolás (negatív = feljebb) */
  }

  .menu-wrapper{
    top: 0 !important;
    right: var(--menu-right-mobile) !important;
    height: var(--header-h-mobile) !important;

    /* optikai igazítás a title-hoz */
    align-items: flex-start !important;
    padding-top: var(--menu-pad-top) !important;
  }

  /* csak a hamburger “mikro-igazítása” */
  .menu-toggle{
    top: var(--burger-y) !important;
  }

    .lang-switch{
    position: relative;
    top: var(--lang-y) !important; /* <-- ez húzza fel a HU/EN-t */
  }
}

/* ================================
   SUBPAGE: hamburger + nyelv gomb görgetéssel tűnjön el (mint a header)
=================================== */

/* Alapállapot subpage-en: NEM fixed → elgördül */
body.subpage .menu-wrapper{
  position: absolute !important;
  top: 0 !important;
  right: var(--menu-right) !important;
  height: var(--header-h) !important;
  transform: none !important;
  z-index: var(--z-menu-ui) !important;
}

/* Menü nyitásakor legyen FIX, hogy lásd a close gombot az overlay felett */
body.subpage.menu-open .menu-wrapper{
  position: fixed !important;
  top: 0 !important;
  right: var(--menu-right) !important;
}

/* Mobil finomhangolás subpage-en */
@media (max-width: 600px){
  body.subpage .menu-wrapper{
    right: var(--menu-right-mobile, 10px) !important;
    height: var(--header-h-mobile) !important;
    padding-top: var(--menu-pad-top, 20px) !important;
    align-items: flex-start !important;
  }

  body.subpage.menu-open .menu-wrapper{
    right: var(--menu-right-mobile, 10px) !important;
    padding-top: var(--menu-pad-top, 20px) !important;
  }
}
/* MENU overlay ne nyelje el a kattintásokat zárt állapotban */
.nav-links{
  pointer-events: none !important;
}

.nav-links.active{
  pointer-events: auto !important;
}



/* =========================
   PROJECTS – HORIZONTAL MODE (A)
   4 elem látszik egyszerre, vízszintes scroll + snap, alul slider
========================= */

body.projects-horizontal,
body.projects-horizontal html {
  overflow: hidden; /* nincs függőleges scroll */
}

/* a projects oldal teljes viewport */
body.projects-horizontal .projects-page {
  height: 100vh;
  overflow: hidden;
}

/* ha a header subpage-en relative, akkor is legyen fix helyünk számolni */
:root{
  --projects-pad-x: 50px;
  --projects-gap: 20px;

  --filters-h: 44px;
  --slider-h: 34px;
}

/* mobilon kisebb oldalpaddolás */
@media (max-width: 600px){
  :root{
    --projects-pad-x: 16px;
    --projects-gap: 14px;

    --filters-h: 40px;
    --slider-h: 32px;
  }
}

/* az eredeti nagy margókat nullázzuk horizontal módban */
body.projects-horizontal .projects-container{
  margin: 0 !important;
  padding: 0 var(--projects-pad-x) !important;
  height: calc(100vh - var(--header-h-mobile, 60px) - var(--filters-h) - var(--slider-h));
  display: flex;
  flex-direction: column;
  justify-content: center; /* optikai közép */
  gap: 0;
  overflow: hidden;
}

/* a scroller fogja kezelni a mozgást */
body.projects-horizontal .projects-scroller{
  flex: 1 1 auto;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
body.projects-horizontal .projects-scroller::-webkit-scrollbar{ display:none; }

/* A grid 1 sor, oszlopok automatikusan nőnek */
body.projects-horizontal .project-grid{
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr;
  gap: var(--projects-gap);

  /* 4 elem / viewport: item szélesség számolva paddolással+gapekkel */
  grid-auto-columns: calc(
    (100vw - (var(--projects-pad-x) * 2) - (var(--projects-gap) * 3)) / 4
  );

  align-items: center;
  height: 100%;
  padding: 0;
}

/* a kártyák középen */
body.projects-horizontal .project-item{
  align-self: center;
  scroll-snap-align: none; /* alapból ne snap-eljen minden elem */
}

/* Snap csak minden 4. elem elejére (1,5,9,...) => „oldalanként” ugrik */
body.projects-horizontal .project-item:nth-child(4n + 1){
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* kép: maradjon arányos */
body.projects-horizontal .project-image{
  width: 100%;
  height: auto;
  display: block;
}

/* alul középen minimal slider */
body.projects-horizontal .projects-slider{
  height: var(--slider-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6px;
  pointer-events: auto;
}

body.projects-horizontal #projectsRange{
  width: min(320px, 60vw);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 18px;
  cursor: pointer;
}

/* track */
body.projects-horizontal #projectsRange::-webkit-slider-runnable-track{
  height: 2px;
  background: rgba(0,0,0,0.25);
  border-radius: 2px;
}
body.projects-horizontal #projectsRange::-moz-range-track{
  height: 2px;
  background: rgba(0,0,0,0.25);
  border-radius: 2px;
}

/* thumb */
body.projects-horizontal #projectsRange::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  margin-top: -4px; /* középre a 2px trackhez */
}
body.projects-horizontal #projectsRange::-moz-range-thumb{
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
}


/* =========================
   PROJECTS – HORIZONTAL MODE (A) – CLEAN
   4 projekt látszik, vízszintes scroll, alul slider
========================= */

body.projects-horizontal {
  overflow: hidden; /* nincs vertikális scroll */
}

body.projects-horizontal .projects-page{
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* a konténer a filters alatt kitölti a maradék helyet */
body.projects-horizontal .projects-container{
  margin: 0 !important;                 /* felülírja a 150px/190px marginokat */
  padding: 0 var(--projects-pad-x, 50px) !important;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  align-items: center;                  /* vertikális közép */
}

/* EZ a vízszintes scroller */
body.projects-horizontal .projects-scroller{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  /* ENGEDÉKENY SNAP (nem rángat nagyot) */
  scroll-snap-type: x proximity;

  /* alapból lehet smooth, de slider húzásnál JS lekapcsolja */
  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.projects-horizontal .projects-scroller::-webkit-scrollbar{ display:none; }

/* 1 soros grid, 4 elem / viewport */
body.projects-horizontal .project-grid{
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr;
  grid-template-columns: none !important;   /* fontos: semlegesítjük a régi repeat(4,1fr)-t */
  gap: var(--projects-gap, 20px);
  align-items: center;

  grid-auto-columns: calc(
    (100vw - (var(--projects-pad-x, 50px) * 2) - (var(--projects-gap, 20px) * 3)) / 4
  );
}

/* semlegesítjük a régi flex-es maradékokat, ha bárhol megmaradt */
body.projects-horizontal .project-item{
  flex: none !important;
  min-width: 0;
}

/* “oldalanként” snap: 1,5,9... */
body.projects-horizontal .project-item{
  scroll-snap-align: none;
}
body.projects-horizontal .project-item{
  scroll-snap-align: start; /* ha megállsz, finoman igazít */
  scroll-snap-stop: normal;
}

/* Slider alul középen */
body.projects-horizontal .projects-slider{
  height: var(--slider-h, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
}

body.projects-horizontal #projectsRange{
  width: min(380px, 60vw);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 18px;
  cursor: pointer;
}

body.projects-horizontal #projectsRange::-webkit-slider-runnable-track{
  height: 2px;
  background: rgba(0,0,0,0.25);
  border-radius: 2px;
}
body.projects-horizontal #projectsRange::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  margin-top: -4px;
}

body.projects-horizontal #projectsRange::-moz-range-track{
  height: 2px;
  background: rgba(0,0,0,0.25);
  border-radius: 2px;
}
body.projects-horizontal #projectsRange::-moz-range-thumb{
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
}

/* ===== FIX: Projects horizontal módban a header ne legyen relative ===== */
body.projects-horizontal .header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--z-header, 900) !important;
}

/* a main kapjon felül helyet a fix headernek */
body.projects-horizontal .projects-page{
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: var(--header-h, 70px);
}

/* mobilon kisebb header */
@media (max-width: 600px){
  body.projects-horizontal .projects-page{
    padding-top: var(--header-h-mobile, 60px);
  }
}
/* Slider húzás közben: nincs snap, nincs smooth -> teljesen “szalag” érzés */
body.projects-horizontal .projects-scroller.is-dragging{
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

/* =========================
   MOBILE: 2x2 látható, átlós “csúszás” (1-esével tolódik)
========================= */
@media (max-width: 600px){

  /* mobilon legyen kicsit kisebb a preview sáv, hogy nagyobb legyen a kép */
  body.projects-horizontal{
    --preview-height: 42px;
    --projects-pad-x: 16px;
    --projects-gap: 14px;
    --filters-h: 40px;
    --slider-h: 32px;
  }

  /* mobilon a snap legyen határozottabb, hogy ne maradjon “félig kép” állapot */
  body.projects-horizontal .projects-scroller{
    scroll-snap-type: x mandatory;
    height: 100%;
  }

  /* 2 sor, oszloponként töltsön (bal-fent, bal-lent, jobb-fent, jobb-lent) */
  body.projects-horizontal .project-grid{
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    gap: var(--projects-gap);

    /* 2 oszlop férjen ki a viewportba */
    grid-auto-columns: calc(
      (100vw - (var(--projects-pad-x) * 2) - var(--projects-gap)) / 2
    );

    /* hogy a 2 sor tényleg kitöltse a rendelkezésre álló magasságot */
    height: 100%;
    align-items: stretch;
  }

  /* a kártyák töltsék ki a cellát */
  body.projects-horizontal .project-item{
    height: 100%;
    scroll-snap-align: start; /* 1-esével “átlósan” tolódik a 2x2 blokk */
  }

  /* a képek töltsék ki a cellát */
  body.projects-horizontal .project-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* opcionális: a konténer ne középre igazítson “furán”, hanem stabilan töltsön */
  body.projects-horizontal .projects-container{
    align-items: stretch;
  }
}
@media (max-width: 600px){
  body.projects-horizontal .projects-container{
    padding-top: 18px !important;
    box-sizing: border-box;
  }
}


/* =========================
   PROJECTS – PROGRESS SLIDER (snap-based)
========================= */
body.projects-horizontal #projectsRange{
  width: min(380px, 60vw);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 22px;
  cursor: pointer;

  /* JS állítja: --fill: "0%..100%" */
  --fill: 0%;

  /* monokróm színek */
  --track-fill: rgba(99, 99, 99, 0.65);   /* bejárt */
  --track-rest: rgba(70,70,70,0.18);   /* hátralévő */
  --track-h: 2px;

  --thumb-w: 5px;   /* függőleges vonal vastagság */
  --thumb-h: 20px;  /* függőleges vonal magasság */
}

/* WebKit (Chrome/Safari/Edge): gradient track */
body.projects-horizontal #projectsRange::-webkit-slider-runnable-track{
  height: var(--track-h);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--track-fill) 0%,
    var(--track-fill) var(--fill),
    var(--track-rest) var(--fill),
    var(--track-rest) 100%
  );
}

/* Függőleges “vonal” thumb (WebKit) */
body.projects-horizontal #projectsRange::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: var(--thumb-w);
  height: var(--thumb-h);
  margin-top: calc((var(--track-h) - var(--thumb-h)) / 2); /* középre a trackhez */
  border-radius: 0px;
  background: rgba(0,0,0,0.85);
  border: none;
}

/* Firefox: külön progress + track */
body.projects-horizontal #projectsRange::-moz-range-track{
  height: var(--track-h);
  border-radius: 999px;
  background: var(--track-rest);
}
body.projects-horizontal #projectsRange::-moz-range-progress{
  height: var(--track-h);
  border-radius: 999px;
  background: var(--track-fill);
}
body.projects-horizontal #projectsRange::-moz-range-thumb{
  width: var(--thumb-w);
  height: var(--thumb-h);
  border: none;
  border-radius: 2px;
  background: rgba(0,0,0,0.85);
}

/* 1 oldal esetén: teljesen “kitöltött” és opcionálisan thumb elrejtés */
body.projects-horizontal #projectsRange.is-single{
  cursor: default;
}
body.projects-horizontal #projectsRange.is-single::-webkit-slider-thumb{
  opacity: 0; /* ha mégis kell, vedd ki */
}
body.projects-horizontal #projectsRange.is-single::-moz-range-thumb{
  opacity: 0; /* ha mégis kell, vedd ki */
}

/* Lightbox INFO: a FULL (meta+details) görget, a header sticky marad */
.lightbox-inner.info-mode .lightbox-info{
  overflow: hidden;
}

.lightbox-inner.info-mode .lightbox-info .full{
  height: 100%;
  overflow-y: auto;   /* <-- meta is görgetni fog */
}

.lightbox-inner.info-mode .lightbox-info .full-header{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

/* mert most már nem a details a görgető konténer */
.lightbox-inner.info-mode .lightbox-info .full-details{
  overflow: visible;
  flex: 0 0 auto;
}

/* Lightbox INFO: a görgetősáv ne látszódjon, de a scroll működjön */
.lightbox-inner.info-mode .lightbox-info .full{
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge legacy */
}

.lightbox-inner.info-mode .lightbox-info .full::-webkit-scrollbar{
  display: none;              /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
}
/* Info mód: csak az Info gomb látszódjon (Prev/Next/Close eltűnik) */
.lightbox-inner.info-mode .lb-prev,
.lightbox-inner.info-mode .lb-next,
.lightbox-inner.info-mode .lb-close{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   RESPONSIVE HEADER OVERRIDE (ultrawide + iPhone Pro Max fix)
   Tedd a styles.css LEGVÉGÉRE
========================================================= */

:root{
  /* általános header méretek */
  --header-h: clamp(60px, 6vh, 82px);
  --header-pad-x: clamp(16px, 1.6vw, 25px);

  --page-pad-x: 20px;     /* Desktop: STUDIO NYUL bal/jobb távolság */
  --page-pad-x-m: 16px;   /* Mobil: bal/jobb távolság */

  /* menü UI (burger + nyelv) által elfoglalt hely jobbra
     ha még mindig közel van a címhez, ezt növeld */
  --menu-reserve: 130px;

  /* cím méret: ultrawide-on szépen nő, normálon ~50 körül marad */
  --title-size: clamp(44px, 2.8vw, 70px);

  /* nyelvváltó méret */
  --lang-size: clamp(12px, 0.9vw, 14px);
}

@media (max-width: 600px){
  :root{
    --header-h: 60px;
    --header-pad-x: 14px;

    /* mobilon kicsit kisebb “foglalás”, de elég az átfedés ellen */
    --menu-reserve: 96px;

    /* mobil cím: Pro Max-on sem szalad el */
    --title-size: clamp(30px, 7.2vw, 38px);

    --lang-size: 14px;
  }
}

/* Header mindig fix és stabil */
.header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  height: var(--header-h) !important;
  padding: 0 var(--header-pad-x) !important;
  box-sizing: border-box;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  z-index: var(--z-header, 900) !important;
}


/* Filters igazítása a header bal margójához */
body.subpage .projects-page .filters{
  margin-left: var(--header-pad-x) !important;
  margin-right: var(--header-pad-x) !important;
}

/* =========================================================
   CLEAN HEADER (NO MASK / NO RESERVE)
   - title bal oldalt, burger+lang jobb oldalt
   - nincs max-width hack, nincs kitakarás
========================================================= */

:root{
  /* EZZEL állítod a STUDIO NYUL bal/jobb távolságát desktopon */
  --page-pad-x: clamp(14px, 2vw, 50px);

  /* EZZEL állítod mobilon */
  --page-pad-x-m: 14px;

  /* rugalmas header magasság */
  --header-h-clean: clamp(60px, 6vh, 82px);

  /* rugalmas cím méret: ultrawide-on nő, normálon nem lesz óriás */
  --title-size-clean: clamp(44px, 2.8vw, 78px);

  /* mobil cím méret */
  --title-size-clean-m: clamp(30px, 7.2vw, 38px);
}

/* Header: 2 oszlop (cím | jobb oldali UI) */
.header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  height: var(--header-h-clean) !important;

  /* safe-area + egységes oldalpaddolás */
  padding-left: calc(var(--page-pad-x) + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(var(--page-pad-x) + env(safe-area-inset-right, 0px)) !important;

  box-sizing: border-box !important;

  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  column-gap: 16px !important;

  z-index: 1000 !important;
}

/* A cím blokk zsugorodhasson gridben */
.home-link,
.title-viewport{
  min-width: 0 !important;
}

/* Cím tipó: alkalmazkodik, nem takarásból fogy el */
.header-title{
  font-size: var(--title-size-clean) !important;
  line-height: 0.95 !important;
  white-space: nowrap !important;

  /* ha mégis extrém szűk a hely, kulturáltan rövidít */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Menu-wrapper NE legyen fixed/absolute/transform: maradjon a grid jobb oszlopában */
.header .menu-wrapper{
  position: static !important;
  transform: none !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  height: auto !important;
  margin: 0 !important;
}

/* a korábbi hamburger "top: -5px" mikro-eltolást nullázzuk */
.header .menu-toggle{
  top: 0 !important;
}

/* Mobil */
@media (max-width: 600px){
  .header{
    height: 60px !important;
    padding-left: calc(var(--page-pad-x-m) + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(var(--page-pad-x-m) + env(safe-area-inset-right, 0px)) !important;
    column-gap: 10px !important;
  }

  .header-title{
    font-size: var(--title-size-clean-m) !important;
  }
}

/* =========================
   PROJECTS SLIDER – DOTS UI (TRACK OFF)
========================= */

body.projects-horizontal .projects-slider{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--slider-h, 34px);
  padding-bottom: 15px;
}

/* Range marad állapotnak, de rejtve */
body.projects-horizontal #projectsRange{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Dot csoport: középen, fix gap, szimmetrikus bővülés */
body.projects-horizontal .projects-dots{
  position: relative;
  width: min(380px, 60vw);
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;         /* <- középre csoportosít */
  gap: clamp(26px, 5vw, 70px);     /* <- szép, rugalmas távolság */
}


/* Szürke pontok */
body.projects-horizontal .projects-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(70,70,70,0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
}

body.projects-horizontal .projects-dot:focus-visible{
  outline: 2px solid #000;
  outline-offset: 4px;
}

/* Fekete aktuális pont (thumb) */
body.projects-horizontal .projects-thumb{
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.679);
  pointer-events: none;
  left: 0px; /* JS állítja */
}

/* 1 oldal esetén: csak 1 szürke pont legyen */
body.projects-horizontal .projects-dots.is-single .projects-thumb{
  display: none;
}
body.projects-horizontal .projects-dots.is-single .projects-dot{
  cursor: default;
}

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}