/* =====================================================================
   Kiválasztás támogatás · lapsajátos kiegészítés (2026-10-15)
   Csak ezen a lapon él (a lapforrás extra_css mezőjéből), a közös
   palatinus.css UTÁN töltődik. Saját osztályok kt- előtaggal; ahol közös
   komponenst igazít, ott legalább akkora erősségű szelektorral, mint a
   felülírt szabály (pl. .referenciak.kt-referenciak, .kt-kiemelt .kartya-kepes).
   Színek: csak a közös tokenek (pala, arany és a levezetett árnyalatok);
   az arany itt is FORMA, szövegként csak sötét alapon.
   ===================================================================== */

/* ── 0. Fejléc görgetés közben ───────────────────────────────────────
   A közös fejléc (palatinus.js, fejlecAllapot) a nyitókép végéig átlátszó; mérve mozgással
   390 × 844-en és 1440 × 900-on görgetés közben a morzsamenü, a cím, a bevezető, a kép és az
   arany cella a logó és a menü mögött futott á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, csak opacity), a lap tetején átlátszó marad, ahogy a kapcsolat, a
   visszajelzések és a pszichológiai tanácsadás lapján. A js/lapok/kivalasztas-tamogatas.js
   (3. pont) teszi fel a html.kt-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.kt-gorgetve .fejlec-atlatszo::before { opacity: 1; }

/* ── 1. A négy pont: a Kiválasztás jele nagyban ───────────────────────
   Ugyanaz a rajz, mint a menüben és a főoldali csempén (keret + arany középső cella). */
.kt-jel { width: clamp(64px, 7vw, 96px); height: auto; margin: 0 0 28px; color: var(--pala); pointer-events: none; }
/* A pontok egyenként úsznak be (data-be a li-n). A közös .szamozott rései a lista szürke
   hátteréből jönnek, ami a beúszás előtt üres, szürke lapként látszana; itt a réseket a
   pontok saját alsó vonala adja, így a lista háttere átlátszó, és vonal csak ponttal együtt jelenik meg. */
.szamozott.kt-szamozott { gap: 0; background: transparent; border-bottom: 0; }
.kt-szamozott .szamozott-elem { border-bottom: 2px solid var(--sz-vonal, var(--pala-halvany)); }

/* ── 2. Meghatározás: nagy, álló Newsreader, arany sávval ───────────── */
.kt-par { margin-top: clamp(8px, 1.5vw, 20px); }
.kt-meghatarozas {
  margin: 0; max-width: 21em;
  padding-left: clamp(18px, 2.4vw, 30px); border-left: 4px solid var(--arany);
  font: 400 clamp(23px, 2.2vw, 30px)/1.34 var(--betu-cim); letter-spacing: -.004em;
  color: var(--sz-cim, var(--tinta));
}
.kt-fogalom { font-family: var(--betu-idezet); font-style: italic; font-weight: 400; }

/* ── 3. Feltárás: a mondat szavanként világosodik ki ───────────────────
   A mozgást a js/lapok/kivalasztas-tamogatas.js adja (csak html.mozog alatt,
   csak opacity és transform). Mozgás nélkül ez a végállapot: teljes fényerő. */
.szakasz.kt-feltaras { padding: clamp(96px, 13vw, 184px) 0; }
.kt-feltaras-belso { position: relative; z-index: 1; }
.kt-feny {
  position: absolute; left: 4%; top: -35%; width: 92%; height: 170%;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(170, 153, 96, .2), rgba(170, 153, 96, .07) 55%, rgba(170, 153, 96, 0));
  pointer-events: none;
}
.kt-feltaras-mondat {
  margin: 4px 0 0; max-width: 19em;
  font: 300 clamp(30px, 4.2vw, 58px)/1.16 var(--betu-cim); letter-spacing: -.012em;
  color: var(--sz-cim, var(--papir));
}
.kt-feltaras-mondat em { font-family: var(--betu-idezet); font-style: italic; font-weight: 400; color: var(--arany); }
html.mozog .kt-szo { will-change: opacity; }
.kt-feltaras-reszlet {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 48px;
  margin-top: clamp(56px, 7vw, 96px); padding-top: 30px;
  border-top: 1px solid var(--sz-vonal);
}
.kt-reszlet-cim { margin: 0 0 8px; }
.kt-reszlet-szoveg { color: var(--sz-halk, var(--pala-vilagos)); }
@media (min-width: 900px) {
  .kt-feltaras-reszlet { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* ── 4. Két hasáb: kiemelt mondat + szöveg (fejlesztés, szervezetfejlesztés) */
.kt-kiemelt-mondat {
  margin: 0; max-width: 17em;
  font: 400 clamp(24px, 2.4vw, 33px)/1.28 var(--betu-cim); letter-spacing: -.006em;
  color: var(--sz-cim, var(--tinta));
}
.kt-hasab { max-width: 34em; }
.kt-hasab-szoveg + .kt-hasab-szoveg { margin-top: 1.05em; }
.kt-pontok { margin: 0 0 22px; padding: 0; list-style: none; border-top: 1px solid var(--sz-vonal); }
.kt-pont {
  position: relative; padding: 15px 0 15px 26px; border-bottom: 1px solid var(--sz-vonal);
  font-size: 17px; line-height: 1.5; color: var(--sz-szoveg, var(--tinta));
}
.kt-pont::before { content: ""; position: absolute; left: 0; top: calc(15px + .55em); width: 8px; height: 8px; background: var(--arany); pointer-events: none; }
.kt-zaro { margin: 0; max-width: 32em; color: var(--sz-halk, var(--tinta-halk)); }

/* Szervezetfejlesztés: balra a tartalom (bevezető mondat, felsorolás, zárómondat),
   jobbra mellette a bizonyíték, a vélemény. Telefonon egymás alatt, ebben a sorrendben. */
.kt-kiemelt-mondat.kt-bevezeto-mondat { margin-bottom: 26px; font-size: clamp(24px, 2.2vw, 30px); }
.szem.kt-velemeny-szem { margin: 0 0 22px; }
/* hárommondatos vélemény a hasábban: a dőlt Newsreader 21 px-en 29 em-nél ≈ 74 karakter/sor
   (a közös 34 em teljes szélességben 87 karakteres sort adott; web-kapu V3, felső határ 80) */
.kt-velemeny .velemeny-szoveg { max-width: 29em; }
@media (min-width: 900px) {
  /* a vélemény a felsorolás első vonalával egy magasban indul */
  .kt-velemeny { padding-top: 4px; }
}

/* ── 5. A referencialista kiválasztási tételei: hasábok helyett rács, logóval ──
   (három rövid kártyánál a hasábos kiegyenlítés kettőt egymás alá tenne) */
.referenciak.kt-referenciak { columns: auto; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
/* 700 px-től három hasáb (az auto-fit 768 px-en 2 + 1 kártyát adott, a harmadik árván állt) */
@media (min-width: 700px) { .referenciak.kt-referenciak { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ahol a cégnév két sorba törik, mindhárom két sornyi helyet kap: a munkák egy vonalban indulnak */
@media (min-width: 700px) and (max-width: 1199px) { .kt-referencia .referencia-ceg { min-height: 2.6em; } }
.kt-referenciak .referencia { margin: 0; border-top-color: var(--arany); }
/* a logó sávja a legmagasabb logó (MÁV, 52 px) magassága: a három cégnév egy vonalban indul */
.kt-ref-logo { display: flex; align-items: center; height: 52px; margin: 6px 0 20px; pointer-events: none; }
.kt-ref-logo-kep { width: var(--w, 120px); height: auto; max-width: 100%; }
@media (max-width: 600px) {
  .kt-ref-logo { height: 42px; margin-bottom: 16px; }
  .kt-ref-logo-kep { width: calc(var(--w, 120px) * .8); }
}

/* ── 6. Kapcsolódó: a saját cikk kiemelt kártyája, alatta a két szakterület ──
   Egy rácsban egyfajta kártya áll (OLVASD_EL 4.7): a borítós cikk külön rácsban. */
.kartyak.kt-kiemelt { grid-template-columns: minmax(0, 1fr); }
.kartyak.kt-tovabbi { margin-top: 20px; }
/* 700 px-től kéthasábos: a generátor kártya-sizes-a 700 px fölött 46vw-t mond, ezért 1×-es kijelzőn
   a böngésző a 512 px-es borítót tölti be. Egyhasábos, teljes szélességű kártyán (768 px-en 689 px)
   ez 1,35-szörös nagyítás lenne; a bal cellában a kép 512 px alatt marad (768 px-en 287 px). */
@media (min-width: 700px) {
  /* a borító a bal oldali cellát tölti ki; legfeljebb ~490 × 340 px (natív 1024 × 1024).
     A kép abszolút réteg, hogy a négyzetes kép ne húzza fel a kártyát a saját magasságára. */
  .kt-kiemelt .kartya-kepes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 340px; }
  .kt-kiemelt .kartya-kep-keret { aspect-ratio: auto; }
  .kt-kiemelt .kartya-kep-keret picture { position: absolute; inset: 0; }
  .kt-kiemelt .kartya-kep { object-position: 50% 62%; }
  .kt-kiemelt .kartya-test { padding: clamp(32px, 4vw, 52px); }
  .kt-kiemelt .kartya-cim { font-size: clamp(30px, 2.9vw, 40px); }
  .kt-kiemelt .kartya-kivonat { max-width: 30em; font-size: 17px; }
}