/* ============================================================
   weblockai — A BELSŐ FELÜLET A NYILVÁNOS ARCULATBAN (2026-09-29)

   A user: „A publikus oldalak, főleg a főoldal design, színek, betűtípus
   nagyon jól néz ki, ezt szeretném, ha alkalmaznád a belépés utáni
   felületekre. Mindenhol, minden legyen teljes szélességben, nagyon nagy
   kijelzőn arányosan.”

   🔴 A SZÍNEK NEM INNEN JÖNNEK. Az első változat a főoldal majdnem fekete
      alapját tette be; a user: „a belső felület háttérszíne sötét módban az
      a kék, az kell vissza”, és a világos/sötét kapcsoló is maradjon. A
      színeket ezért továbbra is a design.css adja (navy sötét + világos).

   🔑 A design.css + arculat.css + elonezetek.css UTÁN töltődik.
   🔑 Lekerekítés: gomb, mező legfeljebb 4 px; doboz 8 px (lent, 2026-09-29).
   ============================================================ */

:root {
  --r-lg: 4px;
  --r-xl: 4px;
  /* a főoldal címbetűje; a szöveg Inter marad (ugyanaz, mint kint) */
  --font-fo: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

/* ── Címek: a főoldal betűje (Bricolage 800) ──
   Az arculat.css név szerint írja a Plus Jakartát ezekre, ezért itt is
   név szerint kell. A kis, csupa nagybetűs címkék (.sec-label) maradnak. */
h1, h2, h3, h4,
.head h1, .tile-name, .dont-cim, .dont-uj-cim {
  font-family: var(--font-fo);
  letter-spacing: -0.02em;
}
h1, h2, .head h1, .dont-cim, .dont-uj-cim { font-weight: 700; }
h3, h4, .tile-name { font-weight: 700; }

/* ── LAPSZÉLESSÉG (2026-11-10, a user: „az összes oldal legyen full screen, ahol
   indokolt, a többi legyen középre rendezett, normális szélesség, kijelzőtípushoz igazítva”) ──
   Alap: középen, telefonon és tableten teljes, laptopon 1180, nagy monitoron 1320 px
   (2500 px fölött a 1.3-as nagyítás arányosan növeli). Munkalap (filmtervező, galéria,
   storyboard, képalkotó, Hollywood Box, hirdetés, táblázatos superadmin-lap):
   `class="page page--teljes"`, az teljes szélességű marad.
   A lapok saját korlátja (filmtervező 1000 px, Javaslat 760 px) továbbra sem él. */
/* 🔁 2026-11-11, a user: „az egyik oldal full screen, a másik random középre rendezett … gagyi”:
   MINDEN lap teljes szélességű, a tartalom mindenhol ugyanott kezdődik (a bal menü után). A fenti 11-10-i szabály felülírva. */
:root { --lap-normal: none; }
.page, .um-lap { max-width: var(--lap-normal) !important; margin-inline: auto; }
.page.page--teljes { max-width: none !important; }
.page > .sec[style*="max-width"] { max-width: none !important; }

/* ── NAGYON NAGY KIJELZŐN ARÁNYOSAN ──
   2200 px fölött az egész felület arányosan nő, hogy 2560-on is ugyanúgy
   nézzen ki, mint 1920-on (különben apró betű és üres tenger).
   🔴 A nagyítás a `vh`-t is felszorozza: a `100vh` így 130%-a a képernyőnek, és
      a lap alja kilóg (2026-10-05). A `--z` a nagyítás mértéke: képernyőmagasságot
      mindig így írj: `calc(100vh / var(--z, 1))`. */
/* 2026-11-11, a user: nagy monitoron a nagyítás KI („mintha rossz felbontás”). A `--z` marad 1, a `calc(100vh / var(--z, 1))` alak így is jó. */

/* ── ERŐSEBB KERETEK A DOBOZOKON (2026-09-29, a user kérése) ──
   „A dobozok csak egy vékony szürke vonallal vannak elválasztva, egybefolyik
   minden. Erősebbek, kicsit lekerekítettebbek, a színe lime, mint a
   Higgsfieldben.” A mintákon kipróbálva, a user: „az egész Műhelyre”.
   🔑 Dobozon 8 px sarok; a GOMBOK és mezők maradnak 4 px (a pill-tilalom rájuk szól).
   🔑 Csak a teljes keretű dobozok. Kimaradnak, amelyeknek szándékos színes
      jelölése van (.szak teteje, .tipus és .dont-fo bal csíkja, .ai-blokk, .ut,
      .pro-hivas), mert az egységes keret eltüntetné a jelzést. A régi filmtervező
      (`um-*`) is kimarad: a lapon belüli stílusa később töltődik, és úgyis lecseréljük.
   🔑 2026-10-24 óta a Hollywood Box is (a user: „Legyen teljesen egységes a felület”).
   🔑 `:where()` a lapszűrőn: a pontosság egy osztálynyi marad, így a kijelölt
      és hover-állapotok (pl. `.tile.itt`) továbbra is felülírják. */
:root {
  --doboz-keret: color-mix(in srgb, var(--accent-line) 55%, var(--border-strong));
  --doboz-sarok: 8px;
}
:is(
  .sec, .tile, .terkep, .folyamat, .proj-sor, .gep, .kedv-panel, .segeddoboz,
  .csomag, .adm-szam, .adm-tabla-doboz, .kepdoboz, .adm-kartya-user, .mh-mod,
  .mh-tetel, .kedv-kartya, .cb-lepes, .sb-kocka, .bev-diagram, .news-keret,
  .news-kartya, .news-doboz, .news-jelenet, .bgk-doboz, .out, .ujsag
) {
  border-width: 1.5px; border-style: solid; border-color: var(--doboz-keret);
  border-radius: var(--doboz-sarok);
}
/* Két pontosabb szabályú doboz (mérve, 09-29): a Fiók lap kártyái (`.fiok-lap .fiok-racs > .sec`)
   és a Külön eszközök kártyái (`.esz-kartya`, a lapon belüli stílus később töltődik, ezért
   dupla osztály; a lap saját hover-szabálya így is nyer, mert az még később jön).
   🔑 KÜLÖN szabály a kettő: egy közös `:is()` a legerősebb tag pontosságát kapná,
      és elnyomná a kártyák hover-kiemelését. */
.fiok-lap .fiok-racs > .sec,
.esz-kartya.esz-kartya {
  border-width: 1.5px; border-style: solid; border-color: var(--doboz-keret);
  border-radius: var(--doboz-sarok);
}

/* ── ÁRVA SOROK ÉS TELEFONOS LAPOZÓ (2026-09-30, mérve mindkét arculatban) ──
   A user szabálya: sehol nem lehet tört sor. A lapok saját stílusa később
   töltődik, ezért `:root` adja a pontosságot.
   🔑 A rács helyett tördelő sor: az utolsó sor elemei KITÖLTIK a sort, így nem
      marad se egyedül álló elem, se lyuk (a régi rácsban szürke üres cella volt). */
:root .mf-osszegzo { display: flex; flex-wrap: wrap; }
:root .mf-osszegzo > div { flex: 1 1 140px; min-width: 0; }

/* A 9 platform: 3×3; telefonon 2 oszlop, a kilencedik végigér. */
@media (min-width: 600px) {
  :root .mf-platformok:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  :root .mf-platformok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .mf-platformok > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Külön eszközök „ezt kapod” sora: az oszlopszám az elemszámból (7 lépés: 4+3,
   4 lépés: 2+2, különben 3 egy sorban), és az utolsó sor kitölti a helyet. */
:root .esz-folyamat { display: flex; flex-wrap: wrap; }
:root .esz-folyamat > li { flex: 1 1 30%; min-width: 0; }
:root .esz-folyamat:has(> :nth-child(4):last-child) > li { flex-basis: 45%; }
:root .esz-folyamat:has(> :nth-child(7):last-child) > li { flex-basis: 22%; }
@media (max-width: 700px) { :root:root:root .esz-folyamat > li { flex-basis: 45%; } }

/* A skill-doboz listája két oszlopban: a páratlan utolsó végigér. */
:root .um-skillek ul > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* A lapozó telefonon: „Előző” és „Következő” egy sorban, a „Kész, tovább”
   (a fő lépés) fölöttük, teljes szélességben. Eddig egyedül lógott alattuk. */
@media (max-width: 599px) {
  :root .md-app .nz-lapoz > :is(.btn, .wg) { flex: 1 1 40%; justify-content: center; }
  :root .md-app .nz-lapoz > [data-nz-kesz] { flex-basis: 100%; order: -1; }
  :root .md-app .nz-lapoz > [data-nz-lep="1"] { margin-left: 0; }
}

/* ── „A teljes film” idővonal sávnevei (2026-09-30, a mostani arculatban mérve) ──
   A színes sávnév halvány volt a világos kártyán (Narráció 3,5 · Zene 3,2 · Zörej 2,0),
   telefonon pedig kilógott a 62 px-es oszlopából (a „Narráció” 23 px-szel).
   A felirat a lap szövegszíne, az oszlop szélesebb. (Az A arculat a sajátját hozza.) */
/* a szín beágyazott stílusban jön (film.php), ezért kell az !important */
:root .md-savnev { color: var(--text) !important; }
@media (max-width: 760px) {
  :root .md-savok { grid-template-columns: 5.75rem auto; }
  :root .md-savnev { letter-spacing: .02em; }
}


/* ── 2026-09-30, a teljes újramérés (40 lap × 8 szélesség) maradék hibái ── */
/* „Folytatom” kártyák: az oszlopszám az elemszámból (768 px-en 2+1 lett a háromból). */
@media (min-width: 761px) {
  :root .ft-folytat:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .ft-folytat:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A skill-csomag ábrája (ZIP → mappa → 32 kis ZIP): 760 px-ig egymás alatt,
   fölötte egy sorban. Tableten a harmadik doboz egyedül csúszott új sorba. */
@media (min-width: 601px) and (max-width: 760px) {
  :root .um-zip { flex-direction: column; align-items: stretch; }
  :root .um-zip-nyil { justify-content: center; }
  :root .um-zip-nyil::after { content: '↓'; }
}
@media (min-width: 761px) {
  :root .um-zip { flex-wrap: nowrap; align-items: stretch; }
  :root .um-zip-lep { flex: 1 1 0; justify-content: center; }
  :root .um-zip-nyil { align-self: center; }
}
/* Meghívók, keskeny telefon: a „FELHASZNÁLVA” felirat kilógott a 88 px-es oszlopból. */
@media (max-width: 400px) {
  :root .mh-tetel { padding: var(--s3); }
  :root .mh-tetel-adat { column-gap: 10px; }
  :root .mh-tetel-adat span { letter-spacing: .02em; }
  /* az űrlap kétoszlopos rácsában a „HÁNY NAPRA AD HOZZÁFÉRÉST” 3 px-szel lógott ki */
  :root .mh-urlap .mezo-racs { column-gap: 10px !important; }
  :root .mh-urlap .mezo-racs label { letter-spacing: .02em !important; }
  /* Felhasználók: a hosszú feliratú gomb („Hollywood Box — bekapcsolva”) törhet, ne lógjon ki a kártyából */
  :root .auk-form .btn { white-space: normal; height: auto; min-height: 44px; max-width: 100%; line-height: 1.3; text-align: left; }
}
/* Bevétel: a két hasábos elrendezésben (901–1279 px) a három „ingyen adott” kártya
   85 px-es oszlopokba szorult, a szöveg kilógott. Ott egymás alá kerülnek. */
@media (min-width: 901px) and (max-width: 1279px) {
  :root:root:root .bev-racs .gep-racs { grid-template-columns: minmax(0, 1fr) !important; }
  :root:root:root .bev-racs .gep-racs > * { grid-column: auto !important; }
}
/* A törlés ikon-gombja 32 px széles volt; érintéshez legalább 44 × 44 px kell. */
:root .btn.btn--danger.btn--icon { min-width: 44px; justify-content: center; }
/* A lépés-sáv telefonon a MOSTANI arculatban is (mérve 320–375 px): az „5. Összevágás”
   felirat 7–18 px-szel kilógott a gombjából. Az ötödik oszlop szélesebb, mint az A-ban. */
@media (max-width: 760px) { :root .md-lepesek { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); } }
@media (max-width: 420px) { :root .md-lepesek .nev { letter-spacing: -0.01em; } }

/* ══ IZZÓ KÁRTYA (2026-11-11, a user: „nagyon kopár és csúnya … lime vagy magenta színekkel a doboz keret higisen”) ══
   Az Eszközök lap kártyái felváltva lime és magenta peremet kapnak, halk belső fénnyel; rámutatva felizzanak.
   Ugyanez a minta mehet más lapok kártyáira: `--iz-rgb` adja a színt. */
:root:root :is(.esz-racs > li > .esz-kartya, .at-kartya, .fiok-lap .fiok-racs > .sec){ --iz-rgb: var(--m-lime-rgb); }
:root:root :is(.at-kartya:nth-of-type(even), .fiok-lap .fiok-racs > .sec:nth-child(even)){ --iz-rgb: var(--m-magenta-rgb); }
:root:root .esz-racs > li:nth-child(even) > .esz-kartya{ --iz-rgb: var(--m-magenta-rgb); }
:root:root :is(.esz-kartya.esz-kartya, .at-kartya.at-kartya, .fiok-lap .fiok-racs > .sec.sec){
  border-color: rgba(var(--iz-rgb), .5); border-top-color: rgba(var(--m-feher-rgb), .28);
  background-image: radial-gradient(130% 100% at 0% 120%, rgba(var(--iz-rgb), .16), transparent 62%),
    radial-gradient(70% 60% at 100% 0%, rgba(var(--m-feher-rgb), .04), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .10), 0 0 0 1px rgba(var(--iz-rgb), .12), 0 0 22px rgba(var(--iz-rgb), .14);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
:root:root .esz-kartya.esz-kartya:is(:hover, :focus-visible){
  border-color: rgba(var(--iz-rgb), .95); background-color: var(--bg-card); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .16), 0 0 0 1px rgba(var(--iz-rgb), .35), 0 0 18px rgba(var(--iz-rgb), .45), 0 0 52px rgba(var(--iz-rgb), .22);
}
:root:root .esz-kartya.esz-kartya b .i{ color: rgb(var(--iz-rgb)); }
:root:root[data-theme="light"] :is(.esz-kartya.esz-kartya, .at-kartya.at-kartya, .fiok-lap .fiok-racs > .sec.sec){ background-image: none; box-shadow: 0 0 0 1px rgba(var(--iz-rgb), .18); }
@media (prefers-reduced-motion: reduce){ :root:root .esz-kartya.esz-kartya{ transition: none; } :root:root .esz-kartya.esz-kartya:hover{ transform: none; } }