/* Perfectus 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 (v113): a felhasználó kérésére a kategóriák teljesen kikerültek
a fejlécből — lásd lejjebb .category-filter, ami önálló sávként a rács
fölött él (a hero alatt). A fejlécben ezután csak két, RÖVID elem marad:
a logó (balra) és a .nav-side (Rólunk, Kapcsolat, ikonok, nyelvváltó —
jobbra). Mivel mindkettő rövid, ez soha nem szorul tördelésre semmilyen
szélességen — nincs többé szükség a korábbi flex-basis:0 trükkre vagy
a hosszú kommentekre, amik a kategóriák egy sorban tartásáról szóltak. */
.nav{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:12px 24px;padding:24px 32px;border-bottom:1px solid var(--border);
background:var(--bg);
}
/* v116: a felhasználó kérésére a logó 2x akkora (24px -> 48px). */
.nav .logo{display:flex;flex-direction:column;width:540px;max-width:100%;font-family:'Montserrat',sans-serif;color:var(--text-dimmer);line-height:1;text-decoration:none;order:1;} .nav .logo span{display:flex;justify-content:space-between;} .nav .logo i{font-style:normal;} .nav .logo{position:relative;width:678px;padding-left:138px;} .nav .logo::before{content:'';position:absolute;left:0;top:12px;width:108px;height:108px;border-radius:50%;background:var(--accent);} .nav .logo .l1{font-weight:600;font-size:77px;} .nav .logo .l2{font-weight:200;font-size:47px;margin-top:3px;} @media(max-width:1100px){.nav .logo{width:521px;padding-left:101px;} .nav .logo::before{top:9px;width:79px;height:79px;} .nav .logo .l1{font-size:56px;} .nav .logo .l2{font-size:34px;}} @media(max-width:700px){.nav .logo{width:290px;padding-left:60px;} .nav .logo::before{top:5px;width:47px;height:47px;} .nav .logo .l1{font-size:33px;} .nav .logo .l2{font-size:20px;}} @media(max-width:400px){.nav .logo{width:238px;padding-left:48px;} .nav .logo::before{top:4px;width:37px;height:37px;} .nav .logo .l1{font-size:26px;} .nav .logo .l2{font-size:16px;}}
/* v115: .nav-side — a felhasználó kérésére új sorrend: legfelül a
nyelvváltó (HUN/ENG), utána egy nagyobb, kb. egysoros térköz
(.nav-side-links margin-top-ja), majd Rólunk/Kapcsolat/Facebook/
Instagram szorosabb csoportja. order:2, tehát a logó (1) után, a .nav
sorának jobbra igazított tagjaként. */
.nav-side{
order:2;flex:0 0 auto;
display:flex;flex-direction:column;align-items:flex-end;
}
.nav-side-links{
display:flex;flex-direction:column;align-items:flex-end;gap:10px;
margin-top:24px;
}
/* v117: a felhasználó kérésére a Rólunk/Kapcsolat is ugyanúgy kékbe
(var(--accent)) vált egérrel fölé húzva, mint a Facebook/Instagram
(.social-link:hover) — így a teljes .nav-side egységesen viselkedik. */
.nav-side-links .nav-link:hover{color:var(--accent);}
/* v116: a felhasználó kérésére a Facebook/Instagram (logó ELŐL, szöveg
UTÁNA) és a HUN/ENG nyelvváltó mostantól PONTOSAN ugyanazt a
betűstílust kapja, mint a Rólunk/Kapcsolat (.nav-link): 21px, 0.5px
letter-spacing, nagybetűs (text-transform:uppercase), 400-as súly. Ezt
egy közös szabály adja mindháromnak (.nav .lang, .nav .lang button,
.social-link), hogy soha ne csússzanak szét. A logó mérete (1em) a
szöveg magasságát követi, ezért automatikusan együtt nő/csökken vele.
v119: a felhasználó kérésére EGYSÉGESEN a logó (PERFECTUS PICTURES)
árnyalatára, var(--text-dimmer) #4a4a4a-ra váltott a teljes sötét
szöveg-készlet: a jobb felső menü (Rólunk/Kapcsolat/Facebook/Instagram),
a thumbnailek alatti projekt-címek, és a partnerek nevei — lásd lejjebb
.nav-side-links .nav-link és .tile-caption .title. A .nav .lang-en
maradt a --text-dimmer/accent kontraszt, mert ott a szürke/kék jelzi,
melyik nyelv az AKTÍV (lásd .nav .lang button.active lejjebb). */
.nav-side-links .nav-link{color:var(--text-dimmer);}
.nav .lang,
.nav .lang button,
.social-link{
font-size:21px;letter-spacing:0.5px;text-transform:uppercase;
font-weight:400;color:var(--text-dimmer);
}
.social-link{
display:inline-flex;align-items:center;gap:8px;
transition:color .2s ease;
}
.social-link:hover{color:var(--accent);}
.social-link svg{width:1em;height:1em;display:block;flex-shrink:0;}
/* v64: a nyelvváltó 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. v115: 3 betűs HUN/ENG felirat (a felhasználó
kérésére), és a .nav-side LEGTETEJÉRE került. */
/* v66: "hamburger" gomb — csak mobilon (≤640px) látszik (lásd lejjebb).
v113 óta már csak a .nav-side-ot (Rólunk, Kapcsolat, ikonok, nyelvváltó)
nyitja/zárja, mert a kategóriák kikerültek a fejlécből (lásd
.category-filter) — azok mobilon is mindig, kattintás nélkül látszanak. */
.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{
background:none;border:none;padding:0;
cursor:pointer;font-family:'Raleway',sans-serif;
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. */
/* v114: .category-filter — a v113-as kis "pill" gombok a felhasználó
szerint túl aprók voltak, nem tűntek szemet, pedig a cél épp az, hogy
a látogató AZONNAL lássa, hány különböző irányban dolgozunk. Megoldás:
CSS Grid, 5 egyenlő (1fr) oszloppal — ez 2026-ban a natív, natúr módja
annak, hogy N elem MINDIG, BÁRMILYEN monitor-szélességen pontosan
kitöltse a rendelkezésre álló helyet, arány-alapon, JS/számolgatás
nélkül. Minden kategória egy teljes szélességű, nagybetűs "csempe" —
nem gomb, hanem egy kb. a nav-magasságú sáv, függőleges elválasztó
vonalakkal, mint egy fül-sor (tab bar). Mobilon (≤640px) 2 oszlopra
vált, az 5. elem (Talks & Performances) teljes szélességet kap.
v115: a betűméret 15px -> 20px (a felhasználó szerint még mindig túl
kicsi volt), és border-top helyett nincs felső szegély, mert a hero
törlése óta a .category-filter közvetlenül a fejléc alatt van, aminek
már úgyis van saját border-bottom-ja — két egymás alatti vonal
csúnya lett volna.
v116: a felhasználó kérésére a háttér a Play-gomb kékje lett
(var(--accent), #0090b6 — ez a szín amúgy is már létezett a
design-rendszerben), a szöveg fehér, a betűméret 20px -> 22px. Hover/
kiválasztott állapotban egy sötétebb kék árnyalat jelzi a változást
(mivel a szöveg már fehér, nem lehet tovább "kékíteni" a szöveget mint
korábban); a "dim" (nem-kiválasztott, szűréskor elhalványuló) állapotot
opacity-vel oldjuk meg, hogy a kék háttér és a fehér szöveg aránya
mindig konzisztens maradjon. */
.category-filter{
display:grid;grid-template-columns:repeat(5,1fr);
border-bottom:1px solid var(--border);
}
.category-filter .nav-link{
font-size:22px;letter-spacing:0.6px;text-transform:uppercase;
border:none;border-radius:0;border-right:1px solid rgba(255,255,255,.25);
padding:28px 16px;color:#ffffff;background:var(--accent);
display:flex;align-items:center;justify-content:center;text-align:center;
line-height:1.3;transition:background-color .2s ease,opacity .2s ease;
}
.category-filter .nav-link:last-child{border-right:none;}
.category-filter .nav-link:hover{background:#00748f;}
.category-filter .nav-link.selected{background:#00748f;}
.category-filter .nav-link.dim{opacity:.5;}

.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-dimmer);
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;}
/* v101: apró, halvány, nagybetűs "sáv-felirat" — a felhasználó
visszajelzése alapján a sorozat-sáv és a lenti kategória-filmstrip
vizuálisan túl hasonló volt ahhoz, hogy egyértelmű legyen, melyik mit
mutat. Ugyanez a stílus a képkocka-galéria feliratán is (lásd lejjebb). */
.strip-label{
font-size:11px;letter-spacing:1px;text-transform:uppercase;
color:rgba(255,255,255,0.45);margin:0 0 8px;
}
/* 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. */
/* v101: a csík most egy .lightbox-series-wrap-ba került (felirat + maga a
csík), hogy a "hidden" állapotot és a magasság-mérést (sizeLightboxVideo)
együtt, egyben lehessen kezelni. */
.lightbox-series-wrap{display:flex;flex-direction:column;gap:2px;max-width:100%;}
.lightbox-series-wrap[hidden]{display:none;}
.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;}
/* v101: opcionális képkocka-galéria (item.keyframes) a stáblista alatt —
elsősorban a Talks & Performances hosszú/több kamerás anyagaihoz, hogy
a néző scrubbelés nélkül is átlássa, mi van a felvételben. Kattintásra
a kép teljes méretben, új fülön nyílik meg. */
.lightbox-meta .keyframes{border-top:1px solid rgba(255,255,255,0.15);padding-top:18px;margin-top:18px;}
.keyframes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.keyframes-grid a{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;}
.keyframes-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease;}
.keyframes-grid a:hover img{opacity:0.8;}

/* v101: a felirat + a csík most egy közös .lightbox-filmstrip-wrap-ban van,
hogy a felirat ne "ússzon szabadon", és a bezárás-figyelő (lásd main.js)
is egyben kezelhesse a kettőt. */
.lightbox-filmstrip-wrap{
flex:0 0 auto;padding:48px 28px 24px;
}
.lightbox-filmstrip{
display:flex;gap:4px;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-wrap{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;}

/* v104-v109: a nav "rálógott a logóra" hibát (és az utána következő
"szétesett menü" / "zsúfolt egysoros menü" problémákat) korábban egy
külön, ≤2350px-ig érvényes, kézzel kitalált törésszélességgel próbáltuk
kezelni. Ez a teljes szabályhalmaz v110-nél BEOLVADT a fenti, alap
.nav/.nav-inner/.nav .logo/.nav .lang/.nav ul szabályokba (lásd ott a
részletes magyarázatot) — mostantól nincs külön "közepes szélesség"
eset, a natív flexbox-tördelés minden szélességen egységesen dönt. */

@media (max-width:640px){
.hero h1{font-size:20px;}
.section-label{flex-direction:column;align-items:flex-start;gap:8px;}
/* v106: a valódi, keskeny mobil-nézeten (≤640px) marad a bevált,
kattintásra lenyíló hamburger-menü, egy-oszlopos listával — ez a
viselkedés korábban külön (Android/Brave) le lett tesztelve és jónak
találva, itt nem változott semmi a v104/v105 óta. */
.nav-burger{display:flex;order:2;}
/* v113: a .nav-side (Rólunk, Kapcsolat, ikonok, nyelvváltó) mobilon a
hamburgerre kattintva nyílik le, saját teljes szélességű sorban, balra
igazítva (nem a desktopon használt jobbra igazítással) — a kategóriák
már nem itt vannak, lásd .category-filter, ami mindig látszik. */
.nav-side{display:none;flex-basis:100%;order:3;align-items:flex-start;margin-top:16px;}
.nav.menu-open .nav-side{display:flex;}
.nav-side-links{align-items:flex-start;}
/* v114: mobilon 2 oszlop, az 5. (páratlan) elem 2 oszlopot foglal el,
hogy az is teljes szélességben töltse ki a helyet, ne maradjon
félbevágva/árván a sor végén. */
.category-filter{grid-template-columns:repeat(2,1fr);}
.category-filter .nav-link{font-size:17px;padding:18px 8px;}
.category-filter .nav-link:nth-child(odd){border-right:1px solid rgba(255,255,255,.25);}
.category-filter .nav-link:nth-child(even){border-right:none;}
.category-filter .nav-link:last-child{grid-column:1 / -1;border-right:none;}
}