/* =====================================================================
   Kapcsolat (kapcsolat.html) · lapsajátos kiegészítés, 2026-10-15
   A lap gazdája írja; a közös palatinus.css-hez nem nyúl.
   · A színt a szakasz-környezet adja (--sz-*). Arany szöveg csak a sötét
     nyitóban van (a név), máshol az arany forma: négyzet, a jel P-je.
   · Ahol közös szabályt ír felül, a szelektor legalább két osztályos
     (.kp-nyito .aloldal-cim, erősebb a közös .aloldal-cim-nél).
   · A díszek pointer-events:none-nal, a kilógó mozgás overflow:hidden
     keretben fut. Mozgás: js/lapok/kapcsolat.js, csak transform és opacity.
   ===================================================================== */

/* ── 1. Nyitó: cím és névjegy ─────────────────────────────────────────
   A „Kapcsolatfelvétel” egyetlen hosszú szó. Mérve (2026-10-15, Newsreader
   álló, változó opsz): 6,96 em 40 px-en, 7,45 em 76 px-en. Telefonon a közös
   40 px-es méret kifér (320 px-en 278 px a 288-ból). Két hasábban (900 px-től)
   a szöveghasáb a nézet fele, ott a közös 7,4vw már szélesebb volna a hasábnál,
   ezért itt 5,9vw (900 px-en 380 px a 450-ből). A forrásban álló ­ csak
   tartalék (például amíg a webbetű nem töltött be). */
@media (min-width: 900px) { .kp-nyito .aloldal-cim { font-size: clamp(42px, 5.9vw, 76px); } }

.kp-nevjegy { margin: 30px 0 0; font-style: normal; }
.kp-nev {
  margin: 0;
  font: italic 400 clamp(27px, 2.5vw, 34px)/1.12 var(--betu-idezet);
  color: var(--arany);              /* arany szöveg: csak itt, sötét alapon (számolva 7,1:1, a fényfolt alatt kb. 7:1) */
}
.kp-szerep {
  margin: 8px 0 0;
  font: 500 12.5px/1.45 var(--betu-sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--sz-halk, var(--pala-vilagos));
}
.kp-adatok { margin: 24px 0 0; padding: 0; max-width: 34em; border-top: 1px solid var(--sz-vonal); }
.kp-adat {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  padding: 10px 0 8px; border-bottom: 1px solid var(--sz-vonal);
}
.kp-adat-cimke {
  font: 500 12px/1.4 var(--betu-sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--sz-halk, var(--pala-vilagos));
}
.kp-adat-ertek { margin: 0; min-width: 0; }
.kp-adat-link {
  display: inline-block; padding: 8px 0 9px;
  font: 500 clamp(19px, 1.65vw, 23px)/1.3 var(--betu-sans); letter-spacing: .01em;
  color: var(--sz-szoveg, var(--papir));
  text-decoration: underline; text-decoration-color: rgba(170, 153, 96, .6);
  text-decoration-thickness: 1px; text-underline-offset: 6px;
  overflow-wrap: anywhere;
}
.kp-adat-link:hover { text-decoration-color: var(--arany); text-decoration-thickness: 2px; }
/* 400 px-től a címke a sor elején áll, az érték mellette */
@media (min-width: 400px) {
  .kp-adat { grid-template-columns: 6.4em minmax(0, 1fr); align-items: baseline; gap: 18px; padding: 6px 0; }
}

/* ── 2. Iroda: a cím nagy betűvel, mellette a jel ─────────────────── */
.kp-iroda-belso {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 8vw, 96px); align-items: center;
}
@media (min-width: 960px) { .kp-iroda-belso { grid-template-columns: minmax(0, 1fr) auto; } }

.kp-cim-blokk { display: block; margin: 6px 0 0; font-style: normal; }
/* Egy sor = egy maszk: mozgásban a belső sor ebből csúszik fel.
   A felső-alsó párna (.08 + .16 em) az ékezeteknek és a lelógó betűknek ad
   helyet; a következő maszk ugyanennyivel (-.24 em) feljebb kezdődik, így a
   sorköz pontosan a sormagasság marad. */
.kp-cim-sor { display: block; overflow: hidden; padding: .08em 0 .16em; }
.kp-cim-sor + .kp-cim-sor { margin-top: -.24em; }
.kp-cim-sor-belso { display: block; }
.kp-cim-utca {
  font: 400 clamp(38px, 10.6vw, 104px)/.98 var(--betu-cim); letter-spacing: -.016em;
  color: var(--sz-cim, var(--tinta));
}
/* két hasábban a „Széchenyi István” egy sorban maradjon. Mérve: 7,22 em széles;
   1024 px-en 518 px a 600-as hasábban, 1440 px-en 694 px a 768-asban */
@media (min-width: 960px) { .kp-cim-utca { font-size: clamp(56px, 7vw, 96px); } }
.kp-cim-utca em { font-family: var(--betu-idezet); font-style: italic; font-weight: 400; }
.kp-cim-varos, .kp-cim-epulet {
  font: 500 clamp(18px, 1.55vw, 21px)/1.45 var(--betu-sans); letter-spacing: .02em;
  color: var(--sz-szoveg, var(--tinta));
}
.kp-cim-utca + .kp-cim-varos { margin-top: clamp(22px, 2.8vw, 34px); }
.kp-cim-epulet .kp-cim-sor-belso { display: flex; align-items: center; gap: 12px; }
.kp-cim-epulet .kp-cim-sor-belso::before {
  content: ""; flex: none; width: 10px; height: 10px; background: var(--arany);
}
.kp-iroda .gombsor { margin-top: clamp(28px, 3.4vw, 40px); }
.kp-kulso { width: 15px; height: 15px; flex: none; }
.kp-terkep-megjegyzes { margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--sz-halk, var(--tinta-halk)); }

/* A jel: a főoldali nyitókép P-je és d-je egy 5 × 5-ös rács fölött.
   Mozgás nélkül összezárt állapotban áll (a logó jele). */
.kp-jel {
  position: relative; margin: 0; overflow: hidden; pointer-events: none;
  width: min(100%, 208px); aspect-ratio: 1 / 1; justify-self: start;
}
@media (min-width: 960px) { .kp-jel { width: clamp(240px, 22vw, 316px); justify-self: end; } }
.kp-jel-racs {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(94, 110, 125, .32) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(94, 110, 125, .32) 1px, transparent 1px);
  background-size: 20% 20%;
  box-shadow: inset -1px -1px 0 rgba(94, 110, 125, .32);
}
.kp-jel-p, .kp-jel-d { position: absolute; display: block; width: 60%; height: 80%; overflow: visible; pointer-events: none; }
.kp-jel-p { left: 0; top: 0; z-index: 2; }
.kp-jel-d { left: 40%; top: 20%; z-index: 1; }

/* Ha a lap JS-e nem fut le, a címsor 3 mp múlva magától a helyére áll.
   A JS az első dolgaként kp-js-t tesz a gyökérre, onnan ő mozgat. */
html.mozog:not(.kp-js) .kp-cim-sor-belso { transform: translateY(108%); animation: kp-tartalek .6s ease-out 3s forwards; }
@keyframes kp-tartalek { to { transform: none; } }

/* Fejléc görgetés közben. A közös fejléc (palatinus.js, fejlecAllapot) a nyitó
   végéig átlátszó; mérve 1440 × 900-on és 390 × 844-en a nyitó címe, az „alapító”
   sor és a portré a logó és a menü mögött fut át. Itt az első 8 px görgetés után
   tömör (a közös 0,4 mp-es áttűnéssel), a lap tetején átlátszó marad, ugyanúgy,
   ahogy a visszajelzések lapján. A js/lapok/kapcsolat.js teszi fel a
   html.kp-gorgetve osztályt. A szelektor (0,3,2) erősebb a közös
   html.mozog .fejlec-atlatszo::before szabálynál (0,2,2). Ha a közös fejléc ezt
   megoldja, ez a szabály törölhető. */
html.mozog.kp-gorgetve .fejlec-atlatszo::before { opacity: 1; }

/* ── 3. Szakterületek: az öt lap egy listában ─────────────────────── */
.kp-teruletek-fej .szakasz-cim { margin-bottom: 0; }
.kp-teruletek-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sz-vonal); }
.kp-terulet { margin: 0; border-bottom: 1px solid var(--sz-vonal); }
.kp-terulet-link {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 18px;
  min-height: 74px; padding: 14px 6px;
  color: var(--sz-cim, var(--feher)); text-decoration: none;
}
.kp-terulet-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255, 255, 255, .08); opacity: 0; transition: opacity .25s ease;
}
.kp-terulet-link:hover::before { opacity: 1; }
.kp-terulet-ikon { width: 30px; height: 30px; color: var(--pala-vilagos); }
.kp-terulet-nev { font: 400 clamp(21px, 1.9vw, 27px)/1.22 var(--betu-cim); letter-spacing: -.004em; }
.kp-terulet-link:hover .nyil, .kp-terulet-link:focus-visible .nyil { transform: translateX(4px); }
.kp-terulet-link:focus-visible { outline-offset: -2px; }