/* 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{
  /* pontosan mért érték a petertamas.com-ról: rgb(227, 233, 234) */
  --page-bg:#e3e9ea;
  --bg:#ffffff;
  --bg-alt:#f2f2f0;
  --text:#000000;
  --text-dim:#000000;
  --text-dimmer:#4a4a4a;
  --border:#e3e3e0;
  --border-strong:#cfcfcb;
  --max:1600px;
}

*{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;
}
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:1600px;margin:0 auto;}

/* --- nav (tág, logó nélküli, mint a referencia) --- */
.nav{
  display:flex;align-items:center;justify-content:center;
  gap:56px;padding:26px 32px;border-bottom:1px solid var(--border);
  background:var(--bg);
}
.nav .logo{font-weight:400;font-size:12px;letter-spacing:1px;color:var(--text-dimmer);position:absolute;left:32px;}
.nav-inner{position:relative;display:flex;align-items:center;justify-content:center;}
.nav ul{list-style:none;display:flex;gap:56px;margin:0;padding:0;}
.nav a{font-size:12px;letter-spacing:0.5px;color:var(--text);text-transform:uppercase;}
.nav a.active{border-bottom:1px solid var(--text);padding-bottom:3px;}
.nav .lang{font-size:11px;color:var(--text-dimmer);position:absolute;right:32px;}

/* --- hero (visszafogott, nem domináns) --- */
.hero{padding:40px 32px 32px;background:var(--bg);}
.hero h1{font-size:24px;line-height:1.3;max-width:640px;font-weight:400;}
.hero p{font-size:13.5px;color:var(--text-dim);max-width:560px;margin:14px 0 18px;}
.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;
}

/* --- filter tabs (funkcionálisan ugyanaz, mint a dropdown, csak láthatóbb) --- */
.tabs{display:flex;gap:0;flex-wrap:wrap;padding:0 32px;}
.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: tömör, rés nélküli rács, hover-re sötétedő overlay
   (zane-productions.com mintájára). A csempék méretét (szélesség+magasság,
   pixelben) a main.js számolja ki és állítja be inline style-ként — ezért
   itt NEM szabad flex-basis%-ot vagy max-width%-ot megadni: a böngésző
   a flex-basis-t részesítené előnyben a JS-ből kapott width helyett, ami
   kerekítési eltérést (és ebből eredő vízszintes csíkot) okozott a sorok
   között. flex:0 0 auto = a méretet kizárólag a JS-es inline style adja. */
.mosaic{
  display:flex;flex-wrap:wrap;
  overflow:hidden;
}
/* -1px jobbra/lefelé minden csempén: apró átfedés, ami garantáltan
   eltünteti a böngésző kerekítéséből adódó hajszálvékony rést —
   akkor is, ha a pixel-pontos JS-méretezés ellenére 1px-nyi eltérés
   maradna a renderelésben (zoom/DPI okozta törtpixel-kerekítés). */
.mosaic .tile{flex:0 0 auto;margin:0 -1px -1px 0;}

.tile{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#111;}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.tile:hover img{transform:scale(1.04);}
.tile .mtype{
  position:absolute;left:8px;bottom:8px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;color:#fff;z-index:2;
}
.tile .overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0.68);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16px;opacity:0;transition:opacity .25s ease;
}
.tile:hover .overlay{opacity:1;}
.tile .eyebrow{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.7);margin:0 0 8px;}
.tile .title{font-family:'Raleway',sans-serif;font-size:16px;font-weight:400;color:#fff;margin:0;line-height:1.3;}
.tile[hidden]{display:none;}

/* --- 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;}
.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;}
/* 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:rgba(255,255,255,0.5);margin:0 0 14px;}
.lightbox-title{font-size:32px;font-weight:400;margin:0 0 26px;line-height:1.3;font-family:'Raleway',sans-serif;}
.lightbox-meta p{font-size:16px;color:rgba(255,255,255,0.8);margin:0 0 14px;font-weight:300;line-height:1.55;}

.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 --- */
footer{background:var(--bg);border-top:1px solid var(--border);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){
  .nav{gap:0;}
  .nav ul{display:none;}
  .nav .logo{position:static;}
  .hero h1{font-size:20px;}
  .section-label{flex-direction:column;align-items:flex-start;gap:8px;}
}