/* =====================================================================
   Bemutatkozás (bemutatkozas.html) · lapsajátos kiegészítés, 2026-10-15
   Csak a bemutatkozas.html tölti be (a lapforrás extra_css mezője).
   A közös palatinus.css-t nem írja át: új osztályokat ad, és ahol egy közös
   osztályt finomít, ott a lap törzs-osztályával (.lap-bemutatkozas) legalább
   akkora erősségű a szelektor, mint a felülírt szabályé.
   Színek: csak a közös tokenek (pala, arany és a levezetett árnyalatok);
   az arany forma (négyzet, sín, szegély), szövegként csak sötét alapon.
   Mozgás: js/lapok/bemutatkozas.js, csak html.mozog alatt, csak transform és
   opacity. Mozgás nélkül a HTML és ez a fájl a végállapotot adja.
   ===================================================================== */

/* ── 1. Szakterületek-sáv (pala, közvetlenül a nyitó alatt) ───────────
   A /bemutatkozunk saját négypontos „Szakterületek” listája, betűhíven,
   a pontok a megfelelő szakterület-lapra visznek.
   Rögzített oszlopszám: 1 (telefon) · 2 (600 px-től) · 4 (1080 px-től). Az auto-fit
   800–1060 px között 3 + 1 elrendezést adott, a negyedik csempe árván maradt.
   Telefonon és két oszlopban tömör sor (jel · név · nyíl, függőlegesen középre);
   négy oszlopban egyforma mutatókártya: fent a jel és a nyíl, alul a név. */
.szakterulet-sav {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--sz-vonal); border: 1px solid var(--sz-vonal);
}
.szakterulet-sav-elem { display: flex; background: var(--sz-hatter); }
.szakterulet-sav-link {
  position: relative; isolation: isolate;
  display: grid; flex: 1 1 auto; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 16px;
  min-height: 76px; padding: 18px 20px;
  font: 500 17px/1.38 var(--betu-sans); color: var(--sz-cim); text-decoration: none;
}
/* hover: egy sötétebb pala réteg úszik be (csak opacity animál) */
.szakterulet-sav-link::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--pala-mely); opacity: 0; transition: opacity .25s ease;
}
.szakterulet-sav-link:hover::after { opacity: 1; }
.szakterulet-sav-link:focus-visible { outline-offset: -4px; }
.szakterulet-sav-ikon { width: 30px; height: 30px; color: var(--pala-vilagos); }
.szakterulet-sav-nev { min-width: 0; }
.szakterulet-sav-link:hover .nyil { transform: translateX(4px); }
@media (min-width: 600px) { .szakterulet-sav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .szakterulet-sav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .szakterulet-sav-link {
    grid-template-columns: minmax(0, 1fr) 16px; grid-template-rows: auto 1fr;
    align-items: start; row-gap: 44px; min-height: 184px; padding: 26px 24px;
  }
  .szakterulet-sav-link .szakterulet-sav-ikon { grid-column: 1; grid-row: 1; }
  .szakterulet-sav-link .nyil { grid-column: 2; grid-row: 1; margin-top: 7px; }
  .szakterulet-sav-link .szakterulet-sav-nev { grid-column: 1 / -1; grid-row: 2; align-self: end; font-size: 18px; }
}

/* ── 2. Pályakép: három fejezet, a jobb oldalon „főkönyvi” sorokkal ───
   Asztalon a fejezetcím ragad (position: sticky), a sorok mellette futnak;
   a sorok bal szélén egy sín, amit görgetés közben az arany kitölt.
   Mozgás nélkül a sín végig arany (ez a végállapot). */
.palyakep { display: grid; gap: clamp(56px, 7vw, 104px); margin-top: clamp(36px, 4.5vw, 64px); }
.palyakep-fejezet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.palyakep-fej { display: flex; align-items: center; gap: 18px; margin: 0; }
.palyakep-szam {
  position: relative; display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; background: var(--pala); color: var(--feher);
  font: 600 16px/1 var(--betu-sans); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.palyakep-szam::after {
  content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px;
  background: var(--arany); transform: translate(-6px, -6px); pointer-events: none;
}
.palyakep-cim { margin: 0; font: 400 clamp(28px, 2.8vw, 38px)/1.12 var(--betu-cim); letter-spacing: -.01em; color: var(--sz-cim); }
@media (min-width: 960px) {
  .palyakep-fejezet { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 88px); align-items: start; }
  .palyakep-fej { position: sticky; top: calc(var(--fej) + 36px); }
}

.palyakep-sorok-keret { position: relative; padding-left: 30px; }
.palyakep-sorok { margin: 0; padding: 0; list-style: none; }
.palyakep-sin { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; overflow: hidden; background: var(--pala-halvany); pointer-events: none; }
.palyakep-sin-toltes { position: absolute; inset: 0; background: var(--arany); transform-origin: 50% 0; }
.palyakep-sor {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px;
  padding: 24px 0 26px; border-bottom: 1px solid var(--sz-vonal);
}
.palyakep-sor:first-child { padding-top: 4px; }
/* a sor jele a sínen: arany négyzet, a sor első sorához igazítva */
.palyakep-sor::before {
  content: ""; position: absolute; left: -35px; top: 38px; width: 12px; height: 12px;
  background: var(--arany); box-shadow: 0 0 0 4px var(--sz-hatter); pointer-events: none;
}
.palyakep-sor:first-child::before { top: 18px; }
.palyakep-jel { margin: 0; font: 400 clamp(26px, 2.3vw, 31px)/1.1 var(--betu-cim); letter-spacing: -.01em; color: var(--pala); font-variant-numeric: lining-nums; }
.palyakep-tartalom { min-width: 0; }
.palyakep-szoveg { margin: 0; max-width: 32em; font-size: 17px; line-height: 1.62; color: var(--sz-szoveg); }
.palyakep-szoveg strong { font-weight: 600; color: var(--sz-cim); }
@media (min-width: 640px) {
  .palyakep-sor { grid-template-columns: 10.5rem minmax(0, 1fr); align-items: baseline; }
  .palyakep-sor::before { top: 36px; }
  .palyakep-sor:first-child::before { top: 16px; }
}

/* a tíz év négyzetei (8 ügyvezetői + 2 értékesítési vezetői); dísz, a mondat mondja ki */
.negyzet-abra { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 18px; }
.negyzetek { display: flex; gap: 5px; }
.negyzet { display: block; width: 20px; height: 20px; background: var(--pala); }
.negyzet-arany { background: var(--arany); }
.negyzet-felirat { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 12.5px/1.4 var(--betu-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sz-halk); }
.negyzet-felirat-elem { display: inline-flex; align-items: center; gap: 8px; }
.negyzet-felirat-elem::before { content: ""; width: 10px; height: 10px; background: var(--pala); }
.negyzet-felirat-arany::before { background: var(--arany); }

/* ── 3. Rólunk: az alapító első személyű szövege, a portré mellett ─────
   Asztalon a portré jobbra kerül és ragad, amíg a szöveg fut. */
.rolunk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
@media (min-width: 900px) {
  .rolunk { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 112px); }
  .rolunk-kep { order: 2; }
  .lap-bemutatkozas .rolunk-kep.portre { justify-self: end; }
}
/* a portré (kb. 560 px) csak akkor ragad, ha a nézetben a fejléc alatt egészben elfér */
@media (min-width: 900px) and (min-height: 700px) {
  .rolunk-kep { position: sticky; top: calc(var(--fej) + 40px); }
}
.level { margin: 0; }
.level-nyito { margin: 0 0 .6em; max-width: 17em; font: 400 clamp(30px, 3.4vw, 46px)/1.12 var(--betu-cim); letter-spacing: -.012em; color: var(--sz-cim); }
.level-bekezdes { margin: 0 0 1em; max-width: 30em; font: 400 clamp(19px, 1.55vw, 22px)/1.55 var(--betu-cim); color: var(--sz-szoveg); }
.level-vizio {
  margin: 1.5em 0 0; padding-left: clamp(18px, 2.4vw, 30px); max-width: 23em;
  border-left: 4px solid var(--arany);
  font: italic 400 clamp(22px, 2.1vw, 30px)/1.36 var(--betu-idezet); color: var(--sz-cim);
}
.level .idezet-forras { margin-top: 30px; }

/* ── 4. Misszió: a mondat görgetésre szavanként telik ki, alatta a gondolatmenet ── */
.lap-bemutatkozas .misszio-idezet { margin-bottom: clamp(56px, 7vw, 96px); }
.gondolatmenet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; margin: 0; padding-top: 40px; border-top: 1px solid var(--sz-vonal); counter-reset: gondolat; }
@media (min-width: 960px) { .gondolatmenet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); } }
.gondolatmenet-resz { counter-increment: gondolat; margin: 0; max-width: 32em; font-size: 17px; line-height: 1.65; color: var(--sz-halk); }
.gondolatmenet-resz::before {
  content: counter(gondolat, decimal-leading-zero); content: counter(gondolat, decimal-leading-zero) / "";
  display: block; margin-bottom: 16px; padding-top: 14px; width: 40px; border-top: 2px solid var(--arany);
  font: 600 13px/1 var(--betu-sans); letter-spacing: .16em; color: var(--arany);
}

/* ── 5. Társadalmi szerepvállalás: balra a cím és a Rotary-mondat, jobbra az UNICEF-lap ──
   A logó átlátszó hátterű, papírra és fehérre való (kepek/_leltar_extra.json → logofal).
   Szürkeárnyalatban áll, ahogy a referenciák lapon a partnerlogók: a lapon csak a pala és
   az arany színez. 108 × 40 px: a h80-as fájl 2× kijelzőn is éles, nagyobbra a próba
   nagyításnak mérné. Ezért a lap fejlécében áll, nem egy nagy, üresen maradó dobozban.
   Asztalon a bal hasáb ragad, amíg az UNICEF-lap fut (csak 700 px-nél magasabb nézetben). */
.kozosseg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.lap-bemutatkozas .kozosseg-bevezeto { margin-bottom: 0; }
@media (min-width: 960px) {
  .kozosseg { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); }
}
@media (min-width: 960px) and (min-height: 700px) {
  .kozosseg-fej { position: sticky; top: calc(var(--fej) + 40px); }
}
.unicef-lap {
  position: relative; padding: clamp(26px, 3.4vw, 48px) clamp(22px, 3.4vw, 48px);
  background: var(--feher); border: 1px solid var(--pala-halvany);
}
.unicef-lap::before { content: ""; position: absolute; left: -1px; top: -1px; width: 14px; height: 14px; background: var(--arany); pointer-events: none; }
.unicef-lap-fej { margin: 0 0 24px; padding: 4px 0 22px; border-bottom: 1px solid var(--pala-halvany); }
.unicef-logo { width: 108px; height: auto; filter: grayscale(1) contrast(1.15); }
.lap-bemutatkozas .unicef-lap-cim { margin-bottom: 16px; }
.kozosseg-kiemeles {
  margin: 28px 0 0; padding: 4px 0 4px 22px; max-width: 31em;
  border-left: 4px solid var(--arany);
  font: 400 clamp(19px, 1.6vw, 21px)/1.5 var(--betu-cim); color: var(--sz-cim);
}

/* ── 6. Videók: két bélyegképes kártya egymás mellett (a kép natív 600 px-éig) ── */
.videok-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 28px; justify-items: center; margin-top: 8px; }
@media (min-width: 900px) { .videok-racs { grid-template-columns: repeat(2, minmax(0, 600px)); justify-content: center; justify-items: stretch; } }
.videok-racs .video-kartya { width: 100%; }
/* a harmadik féltől (Újbuda Televízió) származó SD-képkocka szürkeárnyalatos:
   a kék stúdió a pala és arany világában így nem üt el. Statikus szűrő, nem animál. */
.lap-bemutatkozas .video-poszter-kep { filter: grayscale(1) contrast(1.06) brightness(.94); }

/* ── 7. Partnereink: stáblista éjszakai alapon ─────────────────────────
   A 14 név egymás után folyik, a neveket arany négyzet választja el. A sor
   eleji elválasztó a keret bal széle mögé esik (a lista a keretből balra
   kilóg, a keret levágja), így új sor sosem kezdődik négyzettel. */
.bm-partner-szakasz { overflow: hidden; isolation: isolate; }
.bm-partner-belso { position: relative; z-index: 1; }
.lap-bemutatkozas .bm-partner-feny { left: 22%; top: 38%; }
.bm-partnerek-keret { overflow: hidden; margin-top: clamp(8px, 1.5vw, 20px); padding-top: 4px; border-top: 1px solid var(--sz-vonal); }
.bm-partnerek {
  --elv: clamp(30px, 3.4vw, 50px);
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin: 0 0 0 calc(-1 * var(--elv)); padding: clamp(22px, 3vw, 36px) 0 0; list-style: none;
}
.bm-partner {
  position: relative; padding-left: var(--elv); margin: 0 0 clamp(10px, 1.2vw, 16px);
  font: 300 clamp(21px, 2.35vw, 32px)/1.3 var(--betu-cim); letter-spacing: -.006em; color: var(--sz-cim);
}
.bm-partner::before {
  content: ""; position: absolute; left: calc(var(--elv) / 2 - 4px); top: .58em;
  width: 8px; height: 8px; background: var(--arany); pointer-events: none;
}
@media (min-width: 640px) { .bm-partner { white-space: nowrap; } }
/* telefonon soronként egy név: a folyó sor 390 px-en rendezetlenül tört (egy- és kételemű
   sorok váltakoztak). Az elválasztó itt is a keret bal széle mögé esik, tehát nem látszik. */
@media (max-width: 639px) {
  .bm-partnerek { flex-direction: column; align-items: flex-start; }
  .bm-partner { margin-bottom: 12px; }
}

/* ── 8. A vélemények alatti linksor (visszajelzések, referenciák) ── */
.gombsor.bm-linksor { gap: 4px 30px; }

/* ── 9. Egyben maradó szó: a „2011-ben” ne törjön a kötőjelnél ── */
.bm-egyben { white-space: nowrap; }