/* Meteon Pictures — a petertamas.com/corporate-video strukturális 1:1 másolata:
   szürke oldalháttéren úszó fehér panel, sűrű rács, teli stáblista-feliratok,
   finom időkód-jelvények, tág navigáció logó nélkül. */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500&display=swap');

:root{
  /* v57: teljes, tudatos, TISZTÁN SEMLEGES (R=G=B) szürke-létra fehértől
     egy középvilágos szürkéig — ez a nav/hero/mozaik/lábléc/oldal-margó
     réteg, ez maradt világos. */
  --bg:#ffffff;
  --page-bg:#f6f6f6;
  --bg-alt:#eeeeee;
  --text:#000000;
  --text-dim:#000000;
  --text-dimmer:#4a4a4a;
  --border:#e0e0e0;
  --border-strong:#c8c8c8;
  /* v68: EGYETLEN kék az egész oldalon ("kevesebb több") — a korábbi két
     árnyalat (tiszta #00C0F3 az ikonokon/gombokon + sötétített #0090B6 a
     panelokon) helyett most MINDENHOL ez az egy, #0090B6-os kék van
     használva: --accent maga is ez lett, a --panel-category pedig ugyanezt
     olvassa ki (nincs többé külön változó rá). */
  --accent:#0090b6;
  --panel-category:var(--accent);
  /* v59: a tp.hu jobban kihasználja a böngésző szélességét — a korábbi
     1600px-es felső korlát helyett most 1920px, hogy a csempék nagyobb
     kijelzőn is szélesebbek, látványosabbak legyenek, anélkül hogy
     teljesen szélig kiérne az oldal. */
  --max:1920px;
  /* v76: a leírás-kártyák szélessége — JS írja felül a tényleges főmenü-
     szélességgel (lásd main.js updateNavWidthVar()); ez csak a legelső
     festés/fallback értéke, mire a JS lefut. */
  --nav-content-width:1024px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--text);
  font-family:'Raleway',sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:1.5;
  /* v92: a Raleway alapból "text figures" (régi stílusú, kis/nagybetűkhöz
     igazodó magasságú) számjegyeket használ — ez feliratokban/nagybetűs
     szövegben (pl. a sorozat-jelvény "3 VIDEÓ" felirata) alacsonyabbnak
     tűnő számokat eredményez. Globálisan lining-numerálisra váltva minden
     szám a nagybetűk magasságához igazodik, az egész oldalon egységesen. */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
h1,h2,h3{font-family:'Raleway',sans-serif;font-weight:400;margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}

/* --- fehér panel a szürke oldalháttéren (mért szélesség: 1600px) --- */
.sheet{background:var(--bg);max-width:var(--max);margin:0 auto;}

/* --- nav (tág, logó nélküli, mint a referencia) --- */
.nav{
  display:flex;align-items:center;justify-content:center;
  gap:40px;padding:30px 32px;border-bottom:1px solid var(--border);
  background:var(--bg);
}
.nav .logo{font-weight:400;font-size:24px;letter-spacing:1px;color:var(--text-dimmer);position:absolute;left:32px;}
.nav-inner{position:relative;display:flex;align-items:center;justify-content:center;}
/* v65: a főmenüpontok közti térköz 50%-kal nagyobb (40px -> 60px), mert
   túl közel voltak egymáshoz. */
/* v96: 5 kategória + Rólunk + Kapcsolat = 7 elem — a korábbi 60px-es
   térköz és 24px-es betű ennyi ponttal már nem fért volna el egy sorban,
   ezért mindkettőt visszavettük (lásd .nav-link is lejjebb).
   v97: a térköz 20%-kal nagyobb (34px -> 41px), hogy a főmenü jobban
   kitöltse a sáv szélességét. */
.nav ul{list-style:none;display:flex;align-items:center;gap:41px;margin:0;padding:0;}
.nav a{font-size:24px;letter-spacing:0.5px;color:var(--text);text-transform:uppercase;}
.nav a.active{border-bottom:1px solid var(--text);padding-bottom:3px;}
/* v99: a nyelvváltó visszakerült önálló, right:32px-re pozicionált elemnek
   (mint v97 előtt) — a közösségimédia-ikonok most már NEM egy külön jobb
   felső csoportban vannak a .lang mellett, hanem a Kapcsolat gomb mellett,
   közvetlenül a főmenü <ul>-jában (lásd .nav-social lejjebb és index.html). */
.nav .lang{font-size:24px;color:var(--text-dimmer);position:absolute;right:32px;}
/* v99: a Kapcsolat melletti Facebook/Instagram ikonok — a felhasználó
   kérésére 2x akkorák, mint a v98-as verzióban (21px -> 42px), hogy
   szemet szúrjanak ("kellenek a követők"). Normál <li> a főmenü sorában,
   ezért a .nav ul-ra kentt align-items:center gondoskodik a függőleges
   középre igazításról a szöveges gombok mellett. */
.nav-social{display:flex;align-items:center;gap:20px;}
.nav-social .social-link{color:var(--text-dimmer);display:inline-flex;transition:color .2s ease;}
.nav-social .social-link:hover{color:var(--accent);}
.nav-social svg{width:42px;height:42px;display:block;}
/* v64: a HU/EN kapcsoló most két külön gomb — az AKTÍV nyelv a kék
   accent-színt kapja (mint a kiválasztott menüpont), az inaktív marad a
   halványszürke "dim" árnyalatban. */
/* v66: "hamburger" gomb — csak mobilon (≤640px) látszik (lásd lejjebb),
   a teljes menüt (kategóriák + Rólunk/Kapcsolat) nyitja/zárja lenyíló
   sávként a nav alatt, mert eddig 640px alatt a menü egyszerűen eltűnt,
   pótlás nélkül. */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:28px;height:28px;background:none;border:none;padding:0;cursor:pointer;
}
.nav-burger span{display:block;width:100%;height:2px;background:var(--text);}
.nav .lang button{
  font-size:24px;color:var(--text-dimmer);background:none;border:none;padding:0;
  cursor:pointer;font-family:'Raleway',sans-serif;font-weight:400;
  transition:color .2s ease;
}
.nav .lang button.active{color:var(--accent);}

/* --- főmenü mint szűrő/panel-kapcsoló (v32): a gombok ugyanúgy néznek ki,
   mint a sima nav-linkek, csak <button>-ök, mert nem navigálnak, hanem
   vagy szűrnek (Brand/Culture/Event), vagy egy infó-sávot nyitnak
   (Rólunk/Kontakt). Alapból mindhárom kategória "normál" színben van —
   ez jelenti azt, hogy MINDEN munka látszik. Ha egyre rákattintasz, az a
   kettő, amit NEM választottál, elszürkül ("dim"), a kiválasztott aláhúzást
   kap ("selected"), és a rács csak arra szűkül. Ugyanarra újra kattintva
   minden visszaáll — megint minden látszik. */
.nav-link{
  /* v96: 24px -> 19px, hogy a most már 7 elemű főmenü elférjen egy sorban.
     v97: 19px -> 21px — a nagyobb térközzel együtt jobban kitölti a sávot,
     még mindig biztonságosan elfér 7 elemmel egy sorban. */
  font-size:21px;letter-spacing:0.5px;color:var(--text);text-transform:uppercase;
  background:none;border:none;padding:0;cursor:pointer;font-family:'Raleway',sans-serif;font-weight:400;
  border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.nav-link.selected{color:var(--accent);}
.nav-link.dim{color:var(--border-strong);}

/* --- info-panel: a Rólunk / Kontakt lenyíló sávja a menü és a hero
   között (a tamaspeter.hu SZŰRŐK paneljének mintájára) --- */
/* v39: a panel magassága most JS-ből, px-ben animált (height:0 alap +
   overflow:hidden), hogy ne csak nyitás/zárás, hanem a Rólunk<->Kontakt
   közti VÁLTÁS is szépen tudjon animálni. A tényleges szöveg egy külön
   belső elemben (.info-panel-inner) van, aminek csak az opacity-jét
   animáljuk — váltáskor előbb ez tűnik el (fade out), UTÁNA cserélődik a
   tartalom és nő/csökken a magasság az új tartalomhoz, majd ez a belső
   elem fade-el vissza. Így a két szöveg SOHA nincs egyszerre látszódva
   egymáson (nem sima cross-dissolve), nincs átfedés. */
.info-panel{
  height:0;overflow:hidden;
  transition:height .5s cubic-bezier(.4,0,.2,1);
}
.info-panel[hidden]{display:none;}
/* v75: a korábbi teljes-szélességű, sötét sáv helyett most a mozaik-rács
   mintájára egy halványszürke (--bg-alt) "hátteret" ad a sáv, 20px
   belső margóval (ugyanaz, mint a MOSAIC_GAP) — ebben úszik egy kártyaszerű,
   lekerekített, kék (--panel-category) blokk, KÖZÉPRE igazítva, ami maga
   már nem teljes szélességű. Ettől nem "üres tér + kis szöveg-sziget"
   hatást kelt, hanem egy arányos, tervezett kártyát. */
.info-panel.page,
.info-panel.category{
  background:var(--bg-alt);
  padding:20px;
}
/* v78: mióta (v75) mindkét sávnak saját 20px belső margója van a kártya
   körül, a page + panel-gap + category együtt 60px rést adott ki (20+20+20)
   a két kártya közt, a kívánt 20px helyett. A -20px margó "behúzza" a
   panel-gap dobozt a szomszédos sávok saját, ugyanolyan szürke margójába
   (nincs látható varrás, mert azonos szín) — így a két kártya közti
   TÉNYLEGES rés pontosan 20px lesz, mint a thumbnailek közt. */
.panel-gap{height:20px;background:var(--bg-alt);margin:-20px 0;}
.panel-gap[hidden]{display:none;}
/* v76: a kártya szélessége pontosan a főmenü mért szélessége
   (--nav-content-width, lásd main.js), nem egy fix érték. */
.info-panel-inner{
  padding:28px 32px;opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease;
  width:min(var(--nav-content-width),100%);max-width:100%;margin:0 auto;
  background:var(--panel-category);border-radius:12px;
}
/* v71: a leírás-sávok címe (Rólunk, Kapcsolat, Event Highlights, stb.)
   most mindig nagybetűkkel jelenik meg, ugyanúgy mint a főmenüben — a
   mögöttes szöveg (a JS-ben) nem változott, csak a megjelenítés. */
.info-panel-inner h2{font-size:26px;font-weight:400;margin:0 0 12px;color:#ffffff;text-transform:uppercase;letter-spacing:0.5px;}
/* v71: a leírás-sorok most jóval szélesebb oszlopban törnek (kb. az oldal
   feléig), nem törnek meg olyan hamar, mint korábban (640px -> 960px). */
.info-panel-inner p{font-size:22px;color:rgba(255,255,255,0.75);margin:0 0 10px;font-weight:300;line-height:1.6;max-width:960px;}
.info-panel-inner p:last-child{margin-bottom:0;}
.info-panel-inner strong{color:#ffffff;font-weight:500;}

/* --- hero (visszafogott, nem domináns) --- */
/* v37: a hero (szlogen) csak a főoldal megnyitásakor látszik — ha a
   látogató bármelyik fenti menüpontra kattint (szűrő vagy Rólunk/Kontakt),
   elanimálva összecsukódik, hogy ne zavarjon. A logóra kattintva jön csak
   vissza (lásd main.js showHero()/hideHero()). max-height-alapú átmenet,
   mert a natúr "height:auto" nem animálható CSS-ben. */
/* v61: a szlogen-sáv most MINDENBEN megegyezik a kategória-leírás
   mezővel (háttér, belső margó, betűméretek, sortávolság, szín) — a
   .info-panel-inner + .info-panel.category szabályok pontos másolata,
   hogy egy "családba" tartozzanak. */
/* v75: a hero is ugyanazt a "szürke háttér + középre igazított, kerekített
   kék kártya" szerkezetet kapja, mint a leírás-sávok (lásd .info-panel). */
.hero{
  padding:20px;background:var(--bg-alt);
  max-height:420px;opacity:1;overflow:hidden;
  transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .4s ease,padding .5s cubic-bezier(.4,0,.2,1);
}
.hero.hero-hidden{max-height:0;opacity:0;padding-top:0;padding-bottom:0;}
.hero-inner{
  width:min(var(--nav-content-width),100%);max-width:100%;margin:0 auto;
  background:var(--panel-category);border-radius:12px;
  padding:28px 32px;
}
.hero h1{font-size:26px;line-height:1.3;max-width:960px;font-weight:400;margin:0 0 12px;color:#ffffff;}
.hero p{font-size:22px;color:rgba(255,255,255,0.75);max-width:960px;margin:0 0 10px;font-weight:300;line-height:1.6;}
.hero p:last-child{margin-bottom:0;}
.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;letter-spacing:0.5px;color:var(--text);
  border-bottom:1px solid var(--border-strong);padding-bottom:3px;
  text-transform:uppercase;
}
.btn:hover{border-color:var(--text);}

/* --- kategória-sáv + szűrő (mint a referencia "BRAND & PROMOTIONAL" + "All Categories" sora) --- */
.section-label{
  background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:12px 32px;display:flex;align-items:center;justify-content:space-between;
}
.section-label .label{font-size:12px;letter-spacing:0.5px;color:var(--text-dim);text-transform:uppercase;font-weight:400;}
.section-label select{
  font-family:'Raleway',sans-serif;font-size:12px;color:var(--text-dim);
  background:transparent;border:none;cursor:pointer;
}

/* --- szűrő fülek (v31 kísérlet: 3. opció) — a KINÉZET megegyezik az
   eredeti aláhúzásos stílussal, de nagyobb térközzel és egy halvány
   feliratos "címkével" választjuk el a fenti főmenütől, hogy egyértelmű
   legyen: ez egy másik, helyi funkció (szűrés), nem a menü ismétlése. --- */
.tabs-label{
  padding:28px 32px 0;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-dimmer);opacity:0.65;
}
.tabs{display:flex;gap:0;flex-wrap:wrap;padding:10px 32px 0;}
.tab{
  font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:var(--text-dimmer);
  padding:12px 16px 12px 0;margin-right:16px;cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;
  font-family:'Raleway',sans-serif;font-weight:400;
}
.tab.active{color:var(--text);border-bottom-color:var(--text);}

/* --- munka-mozaik: v35 — a tamaspeter.hu-n megnézett technikára váltva.
   Ott minden csempe position:absolute, a pozíciót (nem csak a méretet)
   is a JS számolja ki és transform:translate()-tel állítja be — ezért
   MINDEN pozícióváltozás (szűrés, átrendeződés) simán, folyamatosan
   animálható CSS transition-nel, nem kell a böngésző natív rács-
   újratördelésére (flex-wrap) hagyatkozni, ami nem animálható. Ez adta
   a különbséget a "durvának" érzett korábbi verzió és a referencia
   között. */
/* v42: halványszürke alap a rács mögött (a tp.hu mintájára) — ettől minden
   munka (kép+felirat együtt, mint egy fehér "kártya") jobban elkülönül az
   oldal fehér hátterétől. A belső margót (padding) a layoutMosaic() JS
   veszi figyelembe a szélesség/magasság-számításnál. */
.mosaic{
  position:relative;overflow:hidden;
  background:var(--bg-alt);
  /* a külső margó pontosan ugyanannyi, mint a csempék közti hézag
     (MOSAIC_GAP = 20px a main.js-ben) — így minden irányban egységes. */
  padding:20px;
}
/* v79: a hero és a két leírás-sáv (v75 óta) mind saját 20px szürke margót
   kapott a kártya körül — ez a mozaik saját 20px felső paddingjával
   összeadódva 40px-es rést adott ki, a kívánt 20px helyett, VALAHÁNYSZOR
   ezek közül bármelyik épp látható közvetlenül a mozaik felett. Mivel ez
   több kombinációtól függ (hero látszik? kategória-leírás? Rólunk/Kapcsolat?
   — lásd main.js updateMosaicSpacing()), ezt JS dönti el egy osztály
   be/kikapcsolásával, nem próbáljuk CSS testvér-szelektorokkal lefedni az
   összes esetet. */
.mosaic.tight-top{padding-top:0;}
.mosaic .tile{
  position:absolute;top:0;left:0;
}
/* a tp.hu mintájára — hézag a csempék közt, 3 munka egy sorban (nagyobb
   kép), és a cím/kategória/típus-ikon a kép ALATT, mindig látható
   feliratként (nem hoverre felbukkanó overlay), hogy a rács egy
   pillantásra böngészhető legyen. Hoverre csak a kép finom "zoom in"-je. */
/* v77: a teljes csempe (kép + ikon-jelvény + felirat együtt) lekerekített
   sarkú kártya — az overflow:hidden "kivágja" mind a kép tetejét, mind a
   jelvény/felirat-sáv alját ugyanahhoz a lekerekített körvonalhoz, így a
   jelvényt magát nem kell külön kerekíteni. */
.tile{
  display:block;border-radius:12px;overflow:hidden;
  transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .55s cubic-bezier(.4,0,.2,1);
}
/* Szűréskor a kieső csempék csak elhalványulnak, a HELYÜKÖN maradva —
   a megmaradók eközben a main.js által kiszámolt új transform-pozícióba
   csúsznak, ugyanazzal az átmenettel. */
.tile.tile-out{opacity:0;pointer-events:none;}
.tile-thumb{position:relative;overflow:hidden;background:#111;}
.tile-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.tile:hover .tile-thumb img{transform:scale(1.06);}
/* v80: "sorozat" (több videó ugyanarról a témáról) borító-csempéjén egy
   kis jelvény jelzi, hány videó tartozik hozzá — hogy a rács ne tűnjön
   soványabbnak attól, hogy csak 1 csempe reprezentál többet. */
.tile-series-badge{
  position:absolute;top:12px;right:12px;
  background:var(--accent);color:#fff;
  /* v91: ugyanaz a betűméret, mint a kép alatti kategória-feliraté (18px) */
  font-size:18px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;
  padding:6px 14px;border-radius:22px;
  /* v92: a számjegy-igazítási hiba javítása globálisan, a body{} szabálynál
     történik (lásd ott a részletes magyarázatot) — nem kellett fontot
     cserélni, a Raleway is tud "lining" (nagybetűkhöz igazodó) számokat. */
}
/* A felirat-sáv fehér (a szürke mosaic-alapon ez ad "kártya" hatást), az
   ikon-négyzet pedig a sáv TELJES magasságát kitölti, közvetlenül a kép
   alján — nincs se függőleges, se vízszintes rés a kép és az ikon közt. */
/* v60: az ikon+cím sáv 50%-kal nagyobb (50px -> 75px), a betűméretek is
   arányosan nőttek, hogy jobban olvasható legyen. */
.tile-caption{
  display:flex;align-items:stretch;height:75px;background:var(--bg);
}
.tile-caption .mtype{
  flex:0 0 75px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.tile-caption .tile-text{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 18px;}
.tile-caption .title{
  font-size:20px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase;color:var(--text);
  margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* v61: a cím és a kategória-felirat közti sorköz 25%-kal kisebb (4px -> 3px). */
/* v73: a kategória-felirat (Brand & Promotional, stb.) a thumbnailek alatt
   és a lightbox-ban egyaránt a márka kékjét kapja a korábbi szürke helyett. */
.tile-caption .eyebrow{
  font-size:18px;color:var(--accent);margin:3px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* --- Lightbox: projekt-nézet kattintásra, a petertamas.com mintájára —
   beépített lejátszó + infóbox jobbra + filmstrip alul, YouTube-ra
   kiugró linkkel, ahelyett hogy azonnal elnavigálna a YouTube-ra. --- */
.lightbox{
  position:fixed;inset:0;z-index:1000;
  display:flex;flex-direction:column;
  background:rgba(10,10,10,0.97);
  outline:none;
}
.lightbox[hidden]{display:none;}
.lightbox-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;flex:0 0 auto;
}
.lightbox-brand{color:#fff;font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:0.7;}
.lightbox-close{
  background:none;border:none;color:#fff;font-size:30px;line-height:1;cursor:pointer;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;opacity:0.8;
  font-family:Arial,sans-serif;
}
.lightbox-close:hover{opacity:1;}

.lightbox-body{
  flex:1 1 auto;display:flex;align-items:flex-start;gap:28px;padding:8px 20px 0;min-height:0;
}
.lightbox-nav{
  background:none;border:none;color:#fff;font-size:38px;cursor:pointer;opacity:0.45;
  flex:0 0 auto;width:32px;font-family:Arial,sans-serif;align-self:center;
}
.lightbox-nav:hover{opacity:1;}
/* A lejátszó a rendelkezésre álló teret kitölti a leírásig, DE most már
   a magasságra is figyel: előbb a MAGASSÁGHOZ méretezzük (height:100%),
   és csak akkor korlátozzuk szélességben (max-width:100%), ha ez szélesebb
   lenne, mint a rendelkezésre álló hely — így se a fejlécbe nem lóg bele
   (ez történt, amikor csak szélesség alapján méreteztük), se nagy üres
   sáv nem marad a leírás előtt (ez volt az előző, max-width-es hiba). */
/* A videó pontos méretét (px-ben, mindkét irányban) a main.js számolja ki
   — a "legnagyobb 16:9 téglalap, ami befér a rendelkezésre álló szélesség
   ÉS magasság közé is" (mint egy object-fit:contain). Tiszta CSS-sel ez a
   kombinált korlátozás nem oldható meg pontosan, ezért itt ugyanazt a
   JS-es mérés-alapú technikát alkalmazzuk, mint a mozaik csempéknél. Ha a
   böngészőablak szokatlanul széles-és-alacsony, egy kis üres sáv így is
   maradhat — az fizikailag elkerülhetetlen anélkül, hogy a videó a
   fejlécbe lógna, vagy torzulna. */
/* justify-content:flex-end — a mérés most már helyesen működik (a korábbi
   "0px, mert még rejtve volt" hiba javítva), DE ha a magasság a szűkebb
   korlát, a videó szélessége nem éri el a teljes rendelkezésre álló
   szélességet — a megmaradó üres sáv a leírás felé eddig középre volt
   osztva (fele-fele a nyíl és a leírás oldalán). Most inkább a nyíl felé
   (balra) toljuk az egészet, hogy a leírás közvetlenül a videó mellett
   maradjon, ahogy a referencián is. */
.lightbox-player{flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;justify-content:flex-end;}
/* v49: a .lightbox-player most egyetlen gyereket (.lightbox-media) tartalmaz,
   ami a képet/videót ÉS (ha van) a fotó-album saját, belső galéria-csíkját
   fogja össze egy oszlopba — ez a csík teljesen külön dolog a lenti,
   kategória-szintű filmstriptől (az más MUNKÁK közt navigál, ez ugyanazon
   munka saját képei közt). */
.lightbox-media{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;}
.lightbox-video-wrap{aspect-ratio:16/9;background:#000;}
.lightbox-video-wrap iframe,
.lightbox-video-wrap img{width:100%;height:100%;border:0;display:block;object-fit:cover;}
.lightbox-album-strip{display:flex;gap:6px;max-width:100%;overflow-x:auto;}
.lightbox-album-strip .as-item{
  flex:0 0 auto;width:50px;aspect-ratio:16/9;cursor:pointer;opacity:0.5;overflow:hidden;
}
.lightbox-album-strip .as-item img{width:100%;height:100%;object-fit:cover;display:block;}
.lightbox-album-strip .as-item.active{opacity:1;outline:2px solid #fff;outline-offset:-2px;}
.lightbox-album-strip .as-item:hover{opacity:0.85;}
/* v80: "sorozatok" (pl. IKMF Krav Maga, Balázs Ildikó sminktetoválás) saját
   galéria-csíkja — a fotó-album csíkjához hasonló elven (más MUNKA-ra vált,
   nem csak más képre), ezért minden elemnek van saját, rövid címe is. */
.lightbox-series-strip{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding-top:2px;}
.lightbox-series-strip .series-item{flex:0 0 auto;width:120px;cursor:pointer;opacity:0.55;}
.lightbox-series-strip .series-item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.lightbox-series-strip .series-item-title{
  display:block;font-size:10.5px;color:#fff;margin-top:4px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lightbox-series-strip .series-item.active{opacity:1;}
.lightbox-series-strip .series-item.active img{outline:2px solid #fff;outline-offset:-2px;}
.lightbox-series-strip .series-item:hover{opacity:0.85;}
/* Description: felülre zárt (mint a referencián), nem középre igazítva,
   és jóval nagyobb betűkkel — kb. a korábbi méret duplája. */
.lightbox-info{flex:0 0 380px;color:#fff;align-self:flex-start;padding-top:4px;}
.lightbox-eyebrow{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin:0 0 14px;}
.lightbox-title{font-size:32px;font-weight:400;margin:0 0 16px;line-height:1.3;font-family:'Raleway',sans-serif;}
/* Ügyfél / Ügynökség sorok a cím alatt — külön soron, névvel ellátva,
   hogy ne csak egy meztelen cégnév álljon ott (pl. "SPICE"), amiről a
   nem szakmabeli látogató nem tudná, hogy az ügynökség neve. */
.lightbox-meta .byline{margin:0 0 18px;}
.lightbox-meta .byline p{font-size:14px;color:rgba(255,255,255,0.6);margin:0 0 4px;font-weight:300;letter-spacing:0.3px;}
/* Rövid, szabadon szerkeszthető leírás — v83: a cím alatt, saját mezőként,
   ugyanazzal a vékony elválasztó vonallal FENT (cím felől) és LENT
   (ügyfél/ügynökség felé), mint amit eddig csak a stáblista előtt
   használtunk (lásd .credits border-top lejjebb) — konzisztens elválasztás
   minden szakasz közt. Csak akkor jelenik meg (és foglal helyet), ha a
   tételnek TÉNYLEG van kitöltött leírása. */
.lightbox-meta .description{font-size:16px;color:rgba(255,255,255,0.85);margin:0 0 18px;font-weight:300;line-height:1.6;max-width:34ch;padding:16px 0;border-top:1px solid rgba(255,255,255,0.15);border-bottom:1px solid rgba(255,255,255,0.15);}
/* Stáblista — elválasztó vonallal a leírástól */
.lightbox-meta .credits{border-top:1px solid rgba(255,255,255,0.15);padding-top:18px;}
.lightbox-meta .credits p{font-size:14.5px;color:rgba(255,255,255,0.7);margin:0 0 10px;font-weight:300;line-height:1.5;}

.lightbox-filmstrip{
  flex:0 0 auto;display:flex;gap:4px;padding:48px 28px 24px;overflow-x:auto;
}
.lightbox-filmstrip .fs-item{
  flex:0 0 auto;width:300px;aspect-ratio:16/9;position:relative;cursor:pointer;opacity:0.5;
  overflow:hidden;
}
.lightbox-filmstrip .fs-item img{width:100%;height:100%;object-fit:cover;display:block;}
.lightbox-filmstrip .fs-item.active{opacity:1;outline:2px solid #fff;outline-offset:-2px;}
.lightbox-filmstrip .fs-item:hover{opacity:0.85;}

@media (max-width:900px){
  .lightbox-body{flex-direction:column;padding:0 16px;gap:12px;overflow-y:auto;}
  .lightbox-nav{display:none;}
  /* A JS-es sizeLightboxVideo() a .lightbox-player TÉNYLEGES (mért)
     magasságához igazít — ehhez itt kell neki egy értelmes, nem
     összeeső kiinduló magasság. 56.25vw = a teljes szélességből számolt
     16:9 magasság, 60vh-ra sapkázva (fekvő mobilon ne nőjön túl magasra). */
  .lightbox-player{height:min(56.25vw,60vh);width:100%;}
  .lightbox-info{flex:0 0 auto;width:100%;}
  .lightbox-filmstrip{padding:12px 16px;}
}

/* --- footer --- */
/* A footer korábbi border-top-ja most feleslegesen rajzolt ki egy vékony,
   sötétebbnek ható csíkot ott, ahol a szürke mosaic-alap fehérbe vált —
   a színváltás önmagában elég elválasztó, nincs szükség még egy vonalra. */
/* v85: gördülő partner/ügyfél-sávok — 3 kategória, mindegyik saját sorban,
   ellentétes irányba görgő szöveg-lista (lásd main.js renderPartners()).
   A .partner-mask szélein finom kifakulás (mask-image) jelzi, hogy a
   szöveg "alóla" folyik ki/be, nem hirtelen vágódik el. */
.partners{background:var(--bg);}
/* v86: 1.5x magasabb sorok (a majdani logó-képeknek nagyobb hely), és a
   gördülés sebességét/időtartamát mostantól JS számolja ki soronként
   (lásd main.js fitPartnerTrack()) — egyenlő px/mp sebesség minden sorban,
   függetlenül attól, hány név/logó van benne. */
.partner-row{padding:39px 0;overflow:hidden;}
.partner-row + .partner-row{border-top:1px solid var(--border);}
.partner-label{text-align:center;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dimmer);margin:0 0 20px;}
.partner-mask{
  overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  /* v88: kézzel is tekerhető (lásd main.js initPartnerDragScroll) */
  cursor:grab;touch-action:pan-y;
}
.partner-mask-dragging{cursor:grabbing;}
.partner-mask-dragging .partner-item{cursor:grabbing;}
.partner-track{display:flex;align-items:center;gap:56px;width:max-content;user-select:none;}
.partner-row:hover .partner-track{animation-play-state:paused;}
.partner-track-l{animation-name:partner-scroll-l;animation-timing-function:linear;animation-iteration-count:infinite;}
.partner-track-r{animation-name:partner-scroll-r;animation-timing-function:linear;animation-iteration-count:infinite;}
@keyframes partner-scroll-l{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes partner-scroll-r{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.partner-item{font-size:22px;font-weight:300;color:var(--text-dimmer);white-space:nowrap;transition:color .3s ease;flex:0 0 auto;cursor:pointer;}
.partner-item:hover{color:var(--accent);}
.partner-item-active{color:var(--accent);}
@media (prefers-reduced-motion: reduce){
  .partner-track-l,.partner-track-r{animation:none;}
}

/* v87: jelvény a rács fölött, amikor a partner-sávból kattintva ügyfél/
   ügynökség-szűrés van aktívan (lásd main.js setClientFilter()). Ugyanaz a
   --bg-alt háttér és 20px-es "ritmus", mint a hero/info-panel sávoké, hogy
   a mozaik feletti térköz konzisztens maradjon (lásd .mosaic.tight-top). */
.client-filter-badge{
  background:var(--bg-alt);padding:16px 32px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:13px;color:var(--text-dimmer);
}
.client-filter-badge strong{color:var(--text);font-weight:400;}
.client-filter-clear{
  background:none;border:none;cursor:pointer;font-size:20px;line-height:1;
  color:var(--text-dimmer);padding:0;margin-left:2px;
}
.client-filter-clear:hover{color:var(--accent);}

footer{background:var(--bg);padding:18px 32px;}
footer .row{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dimmer);max-width:1400px;margin:0 auto;}

/* --- simple content pages --- */
.page-head{padding:36px 32px 16px;background:var(--bg);}
.page-head h1{font-size:22px;font-weight:400;}
.content-block{padding:0 32px 36px;max-width:680px;background:var(--bg);}
.content-block h2{font-size:15px;margin-bottom:10px;font-weight:400;}
.content-block p{color:var(--text-dim);margin:0 0 16px;font-size:13.5px;font-weight:300;}
.service-list{display:grid;gap:0;padding:0 32px 36px;background:var(--bg);}
.service{border-top:1px solid var(--border);padding:18px 0;}
.service h3{font-size:15px;margin-bottom:6px;font-weight:400;}
.service p{color:var(--text-dim);font-size:13.5px;margin:0;font-weight:300;}

@media (max-width:640px){
  /* v66: a menü mobilon (≤640px) többé nem tűnik el pótlás nélkül — a
     logó + nyelvváltó + hamburger marad egy sorban, a hamburgerre kattintva
     a teljes menü (kategóriák + Rólunk/Kapcsolat) egy külön sorban,
     egymás alatt nyílik le, a nav alatt. */
  .nav{flex-wrap:wrap;justify-content:space-between;gap:0;padding:22px 24px;}
  .nav .logo{position:static;order:1;font-size:19px;}
  /* v99: a .lang megint önálló, közvetlen gyereke a .nav-nak (mint v97
     előtt), a .nav-social pedig most a főmenü <ul> belsejében van, egy
     sima <li>-ként — mobilon a listával együtt oszlopba rendeződik, nincs
     szüksége külön order/position felülbírálásra. */
  .lang{position:static;order:2;}
  .nav-social{gap:14px;}
  .nav-social svg{width:30px;height:30px;}
  .nav-burger{display:flex;order:3;}
  .nav-inner{order:4;flex-basis:100%;display:none;justify-content:flex-start;}
  .nav.menu-open .nav-inner{display:flex;}
  .nav ul{flex-direction:column;align-items:flex-start;gap:22px;width:100%;padding-top:24px;}
  .nav-link,.nav a{font-size:19px;}
  .nav .lang button{font-size:19px;}
  .hero h1{font-size:20px;}
  .section-label{flex-direction:column;align-items:flex-start;gap:8px;}
}