/* =====================================================================
   Tudástár · lapsajátos kiegészítés (02_DEMO, 2026-10-15)
   A tudástár nyitólapja (body.lap-tudastar-index) és az öt cikk
   (body.tudastar-cikk, a fejléc „torzs_osztaly” mezőjéből) közös stílusa.
   Csak az, ami a közös komponensekben nincs meg:
     1. cikk-nyitó: a szerző és az olvasási idő sora, az MI-jelölés a borítón;
     2. cikk-törzs: álló Newsreader bevezető, arany vonás a fejezetcímek fölött,
        kiemelt mondat, négyzetes listajelek, számozott lista, idézet aláírással;
     3. a cikk vége: a szakterület linkje a forrás-megjegyzés alatt;
     4. kapcsolódó: a szakterület pala sávként, alatta a két cikk fekvő kártyán;
     5. nyitólap: az öt cikk váltakozó oldalú, nagy borítós sorokban;
     6. a JS-ből születő két dísz (js/lapok/tudastar.js): a borító redőnye a
        nyitólapon és az olvasást mutató arany sáv a cikkeken.
   Szabályok: csak a közös tokenek (két szín: pala és arany); az arany csak
   forma (vonás, négyzet, sáv); csak transform és opacity animál; a dísz
   pointer-events:none; minden szelektor a törzs osztályával kezdődik, így
   legalább akkora erősségű, mint a közös szabály, amit felülír.
   Képek: a kártya-borítók a generátor rögzített sizes-ával töltenek
   (1220 px fölött 380px, 700 px fölött 46vw, alatta 92vw). Ahol itt a keret
   szélesebb lehetne ennél, ott a keret van korlátozva, hogy a betöltött
   változat se nagyítódjon (1× és 2× kijelzőn mérve).
   ===================================================================== */

/* ── 1 · Cikk-nyitó ──────────────────────────────────────────────── */
.tudastar-cikk .tt-meta {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px;
  margin: 26px 0 0;
  font: 500 14px/1.4 var(--betu-sans); letter-spacing: .04em;
  color: var(--sz-halk, var(--pala-vilagos));
}
.tudastar-cikk .tt-meta-elem { display: inline-flex; align-items: center; }
.tudastar-cikk .tt-meta-elem + .tt-meta-elem::before {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 14px;
  background: var(--arany); pointer-events: none;
}
/* keskeny telefonon a két adat egymás alá kerül (különben a törés után a sor elején árva négyzet állna) */
@media (max-width: 400px) {
  .tudastar-cikk .tt-meta { flex-direction: column; align-items: flex-start; }
  .tudastar-cikk .tt-meta-elem + .tt-meta-elem::before { display: none; }
}
/* az MI-jelölés a borító jobb alsó sarkában (a két cella a bal alsó és a jobb felső sarkon kívül ül) */
.tudastar-cikk .tt-ai {
  position: absolute; right: 0; bottom: 0; z-index: 1; max-width: 100%;
  margin: 0; padding: 6px 10px;
  background: var(--ejszaka-mely); color: var(--pala-vilagos);
  font: 500 11.5px/1.3 var(--betu-sans); letter-spacing: .02em;
  pointer-events: none;
}

/* ── 2 · Cikk-törzs ──────────────────────────────────────────────── */
/* A közös 640 px-es hasáb Barlow 18,5 px-szel egyes bekezdésekben 81–82 karakteres sort adott
   (web-kapu V3, 1440 px, mérve 2026-10-15); 600 px-en a leghosszabb sor kb. 77 karakter. */
.tudastar-cikk .cikk { --cikk-szel: min(600px, 100% - 2 * var(--gutter)); }
.tudastar-cikk .cikk-torzs .cikk-bevezeto {
  margin-bottom: 1.3em;
  font: 300 clamp(21px, 1.9vw, 26px)/1.45 var(--betu-cim); letter-spacing: -.004em;
  color: var(--tinta);
}
.tudastar-cikk .cikk-torzs h2::before {
  content: ""; display: block; width: 36px; height: 3px; margin-bottom: 20px;
  background: var(--arany); pointer-events: none;
}
.tudastar-cikk .cikk-torzs > h2:first-child { margin-top: 0; }
/* zárójel: a jel arany négyzete a cikk utolsó sora után (dísz) */
.tudastar-cikk .cikk-torzs::after {
  content: ""; display: block; width: 10px; height: 10px; margin-top: 1.4em;
  background: var(--arany); pointer-events: none;
}
.tudastar-cikk .cikk-torzs .tt-fogalom { font-style: normal; font-weight: 500; }
/* a cikk egy kulcsmondata: álló Newsreader, arany vonással (a forrás saját mondata) */
.tudastar-cikk .cikk-torzs .tt-kiemeles {
  margin: 1.5em 0 1.6em; padding: 2px 0 2px 24px;
  border-left: 4px solid var(--arany);
  font: 400 clamp(22px, 2vw, 27px)/1.38 var(--betu-cim); letter-spacing: -.006em;
  color: var(--tinta);
}
/* listák: négyzetes jel (a jel rácsából), illetve 01, 02 … sorszám pala négyzetben */
.tudastar-cikk .cikk-torzs .tt-lista-pont { padding-left: 0; list-style: none; }
.tudastar-cikk .cikk-torzs .tt-lista-pont > li { position: relative; padding-left: 26px; }
.tudastar-cikk .cikk-torzs .tt-lista-pont > li::before {
  content: ""; position: absolute; left: 3px; top: .66em; width: 8px; height: 8px;
  background: var(--pala); pointer-events: none;
}
.tudastar-cikk .cikk-torzs .tt-lista-szam {
  padding-left: 0; list-style: none; counter-reset: tt-szam;
  border-top: 1px solid var(--pala-halvany);
}
.tudastar-cikk .cikk-torzs .tt-lista-szam > li {
  counter-increment: tt-szam;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 18px; align-items: center;
  margin: 0; padding: 12px 0; border-bottom: 1px solid var(--pala-halvany);
}
.tudastar-cikk .cikk-torzs .tt-lista-szam > li::before {
  content: counter(tt-szam, decimal-leading-zero);
  display: grid; place-items: center; width: 42px; height: 42px; align-self: start;
  background: var(--pala); color: var(--feher);
  font: 600 14.5px/1 var(--betu-sans); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
/* idézet a forrás aláírásával (szerző nélkül a figcaption elmarad) */
.tudastar-cikk .cikk-torzs .tt-idezet { margin: 1.9em 0 2em; }
.tudastar-cikk .cikk-torzs .tt-idezet blockquote { margin: 0; }
.tudastar-cikk .cikk-torzs .tt-idezet blockquote p + p { margin-top: .7em; }
.tudastar-cikk .tt-idezet-forras {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 16px; padding-left: 28px;
  font-size: 15px; line-height: 1.45; color: var(--tinta-halk);
}
.tudastar-cikk .tt-idezet-nev { font: 600 16px/1.3 var(--betu-sans); color: var(--tinta); }

/* ── 3 · A cikk vége ─────────────────────────────────────────────── */
.tudastar-cikk .tt-szakterulet { margin: 14px 0 0; }

/* ── 4 · Kapcsolódó: a szakterület (pala sáv) és két cikk ─────────── */
.tudastar-cikk .tt-kapcsolodo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.tudastar-cikk .tt-kapcsolodo-cim { margin: clamp(36px, 4.5vw, 52px) 0 18px; }
.tudastar-cikk .tt-kapcsolodo-szolg {
  --sz-kartya: var(--pala); --sz-kartya-vonal: var(--pala);
  --sz-cim: var(--feher); --sz-halk: var(--feher); --sz-szem: var(--feher);
}
.tudastar-cikk .tt-kapcsolodo-szolg .kartya { min-height: 0; }
.tudastar-cikk .tt-kapcsolodo-szolg .kartya:hover { border-color: var(--pala-mely); }
.tudastar-cikk .tt-kapcsolodo-szolg .kartya-cim { font-size: clamp(28px, 2.6vw, 36px); }
@media (min-width: 900px) {
  .tudastar-cikk .tt-kapcsolodo-szolg .kartya-test {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; grid-template-rows: auto auto;
    column-gap: clamp(28px, 4vw, 56px); align-items: center;
    padding: 36px clamp(32px, 3.6vw, 48px);
  }
  .tudastar-cikk .tt-kapcsolodo-szolg .kartya-felcim { grid-column: 1; grid-row: 1; align-self: end; }
  .tudastar-cikk .tt-kapcsolodo-szolg .kartya-cim { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
  .tudastar-cikk .tt-kapcsolodo-szolg .kartya-kivonat { grid-column: 2; grid-row: 1 / 3; margin: 0; max-width: 34em; }
  .tudastar-cikk .tt-kapcsolodo-szolg .kartya-tovabb { grid-column: 3; grid-row: 1 / 3; margin: 0; }
}
/* a két cikk: 700 px fölött fekvő kártya, a borító balra 200–260 px széles keretben
   (a betöltött 512/1024 px-es változat ennél mindig nagyobb, nem nagyítódik) */
.tudastar-cikk .tt-kapcsolodo-cikkek .kartya-cim { font-size: clamp(22px, 1.9vw, 26px); }
@media (min-width: 700px) {
  .tudastar-cikk .tt-kapcsolodo-cikkek { grid-template-columns: minmax(0, 1fr); }
  .tudastar-cikk .tt-kapcsolodo-cikkek .kartya-kepes { flex-direction: row; min-height: 0; }
  .tudastar-cikk .tt-kapcsolodo-cikkek .kartya-kep-keret { flex: none; align-self: stretch; width: clamp(200px, 30%, 260px); min-height: 230px; aspect-ratio: auto; }
  .tudastar-cikk .tt-kapcsolodo-cikkek .kartya-kep-keret picture { position: absolute; inset: 0; }
  .tudastar-cikk .tt-kapcsolodo-cikkek .kartya-test { padding: clamp(26px, 3vw, 36px) clamp(24px, 3vw, 36px); }
}
@media (min-width: 1220px) {
  .tudastar-cikk .tt-kapcsolodo-cikkek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 5 · Nyitólap: az öt cikk sorokban ───────────────────────────── */
/* telefonon a jel kisebb ablakban áll, hogy a cikklista közelebb kerüljön a hajtáshoz
   (a közös szabály a --ablak változóból számol; az inline --ablak-max asztalon marad érvényes) */
@media (max-width: 599px) {
  .lap-tudastar-index .aloldal-ablak { --ablak: min(200px, 52vw); }
}
.lap-tudastar-index .tt-lista { gap: clamp(20px, 3vw, 36px); counter-reset: tt-sor; }
.lap-tudastar-index .tt-lista > .kartya { counter-increment: tt-sor; }
.lap-tudastar-index .tt-lista .kartya-test::before {
  content: counter(tt-sor, decimal-leading-zero);
  content: counter(tt-sor, decimal-leading-zero) / "";
  display: block; margin: 0 0 16px;
  font: 300 clamp(34px, 3.6vw, 56px)/1 var(--betu-cim); letter-spacing: -.01em;
  color: var(--pala); font-variant-numeric: lining-nums;
  pointer-events: none;
}
.lap-tudastar-index .tt-lista .kartya-cim { line-height: 1.12; }
@media (min-width: 700px) {
  .lap-tudastar-index .tt-lista { grid-template-columns: minmax(0, 1fr); }
  .lap-tudastar-index .tt-lista .kartya-kepes { flex-direction: row; min-height: 0; }
  .lap-tudastar-index .tt-lista .kartya-kepes:nth-child(even) { flex-direction: row-reverse; }
  /* négyzetes keret, a sor 40 %-a, legfeljebb 440 px. A betöltött változat sehol nem kisebb ennél:
     1220 px fölött a sizes 380px → 1× kijelzőn a 512, 2×-en az 1024 px-es fájl jön (440 ≤ 512);
     700–1219 px között a sizes 46vw, a keret pedig mindig kisebb ennél (40 % × a belső szélesség).
     Ha a szöveg magasabb a négyzetnél (keskeny táblagépen), a keret a sor magasságára nyúlik, és a kép
     fedő kivágással áll (a skála akkor is 1 alatt marad, mérve). */
  .lap-tudastar-index .tt-lista .kartya-kep-keret { flex: none; width: min(440px, 40%); aspect-ratio: 1 / 1; }
  .lap-tudastar-index .tt-lista .kartya-test { justify-content: center; padding: clamp(26px, 3.3vw, 48px) clamp(26px, 3.6vw, 56px); }
  .lap-tudastar-index .tt-lista .kartya-test::before { margin-bottom: 12px; font-size: clamp(32px, 3.1vw, 46px); }
  .lap-tudastar-index .tt-lista .kartya-felcim { margin-bottom: 10px; }
  .lap-tudastar-index .tt-lista .kartya-cim { max-width: 15em; font-size: clamp(27px, 2.8vw, 42px); margin-bottom: 16px; }
  .lap-tudastar-index .tt-lista .kartya-kivonat { max-width: 34em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.58; margin-bottom: 20px; }
  .lap-tudastar-index .tt-lista .kartya-tovabb { margin-top: 0; }
}
.lap-tudastar-index .tt-megjegyzes { margin: clamp(28px, 3.4vw, 40px) 0 0; max-width: 40em; font-size: 15px; color: var(--sz-halk, var(--tinta-halk)); }

/* ── 6 · A JS-ből születő díszek (csak mozgás közben vannak a lapon) ── */
.lap-tudastar-index .tt-redony {
  position: absolute; inset: 0; z-index: 2;
  background: var(--pala); pointer-events: none;
}
.tudastar-cikk .tt-olvasas {
  position: fixed; left: 0; right: 0; top: var(--fej); z-index: 59; height: 3px;
  background: var(--arany); transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
html.menu-nyitva .tudastar-cikk .tt-olvasas { opacity: 0; }