/* =====================================================================
   Visszajelzések (visszajelzesek.html) · lapsajátos stílus, 2026-10-15
   A 13 vélemény három jelenetben: 1–4 papíron és 10–13 papír-2-n
   „levélként” (bal oldalt a szám és az aláírás, jobbra a szöveg), 5–9,
   a forrás öt legrövidebb, egymást követő véleménye éjszakai színpadon,
   nagy betűvel, váltakozó oldalon. Előttük a névsor palán.
   A közös palatinus.css-hez nem nyúl; minden elemnek saját osztálya van,
   felülírásnál a felülírt szabálynál erősebb szelektorral.
   Mozgás: a palatinus.js adat-attribútumai + js/lapok/visszajelzesek.js
   (az aláírás arany vonala, a beúszó elemek billentyűs elérhetősége, a
   felzárkóztatás ugró görgetés után, a fejléc görgetés közben); csak
   transform és opacity animál. Telefonon (700 px alatt) a névsor tömör.
   ===================================================================== */

/* ── 1. Névsor (pala) ─────────────────────────────────────────────── */
.nevsor-belso { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.nevsor-fej .nevsor-cim { margin: 0; }
.nevsor-lista { margin: 0; padding: 0; list-style: none; columns: 2 290px; column-gap: clamp(24px, 4vw, 56px); }
.nevsor-elem { break-inside: avoid; }
.nevsor-link {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; column-gap: 12px; align-items: start;
  min-height: 60px; padding: 15px 0 16px;
  border-bottom: 1px solid var(--sz-vonal);
  color: var(--sz-szoveg); text-decoration: none;
}
.nevsor-szam {
  grid-column: 1; grid-row: 1 / span 2; padding-top: 3px;
  font: 500 13px/1.4 var(--betu-sans); letter-spacing: .08em; font-variant-numeric: tabular-nums;
  color: var(--sz-szoveg);
}
.nevsor-nev { grid-column: 2; grid-row: 1; font: 600 17px/1.35 var(--betu-sans); color: var(--sz-cim); }
.nevsor-ceg { grid-column: 2; grid-row: 2; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--sz-szoveg); overflow-wrap: break-word; }
.nevsor-nyil { grid-column: 3; grid-row: 1; width: 16px; height: 16px; margin-top: 3px; color: var(--sz-szoveg); transition: transform .3s var(--athuzas); }
.nevsor-link:hover .nevsor-nev { text-decoration: underline; text-decoration-color: var(--arany); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nevsor-link:hover .nevsor-nyil { transform: translateY(3px); }
.nevsor-tovabb { margin: 0; }
/* telefonon a névsor tömör: két hasábban a sorszám és a név (a cég a vélemény aláírásában áll),
   így az első vélemény kb. 1350 helyett kb. 500 px görgetés után jön. Koppintási cél ≥ 60 px. */
@media (max-width: 699px) {
  .nevsor-lista { columns: 2; column-gap: 16px; }
  .nevsor-link { grid-template-columns: minmax(0, 1fr); row-gap: 3px; align-content: start; min-height: 60px; padding: 12px 0 13px; }
  .nevsor-szam { grid-column: 1; grid-row: 1; padding-top: 0; font-size: 12.5px; }
  .nevsor-nev { grid-column: 1; grid-row: 2; font-size: 16px; overflow-wrap: break-word; }
  .nevsor-ceg, .nevsor-nyil { display: none; }
}
@media (min-width: 1100px) {
  .nevsor-belso { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 96px); }
  .nevsor-fej { grid-column: 1; grid-row: 1; }
  .nevsor-lista { grid-column: 2; grid-row: 1 / span 2; margin-top: -15px; }
  .nevsor-tovabb { grid-column: 1; grid-row: 2; align-self: start; }
}

/* ── 2. A vélemény (közös rész) ───────────────────────────────────── */
.levelek { margin: 0; padding: 0; list-style: none; }
.level-figura { margin: 0; }
/* a sorszám a jel nyelvén: álló Newsreader, mellette a kis arany négyzet (háttérként rajzolva) */
.level-szam {
  display: inline-block; padding-right: 20px;
  font: 400 clamp(40px, 4.4vw, 60px)/1 var(--betu-cim); letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--pala);
  background: linear-gradient(var(--arany), var(--arany)) no-repeat 100% .08em / 10px 10px;
}
.level-szoveg { margin: 0; }
/* 27 em: a dőlt Newsreaderrel mérve kb. 71 karakter/sor (33 em-en 86–88 jött ki) */
.level-bekezdes {
  margin: 0; max-width: 27em;
  font: italic 400 clamp(19px, 1.62vw, 23.5px)/1.58 var(--betu-idezet);
  color: var(--sz-cim, var(--tinta)); overflow-wrap: break-word;
}
.level-alairas {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  margin-top: 26px; font-size: 15px; line-height: 1.45; color: var(--sz-halk, var(--tinta-halk));
}
/* az aláírás vonala: mozgásban balról meghúzódik (js/lapok/visszajelzesek.js), mozgás nélkül így áll */
.level-vonal { display: block; width: 48px; height: 2px; margin: 0 0 12px; background: var(--arany); transform-origin: 0 50%; pointer-events: none; }
html.mozog .level-vonal { transform: scaleX(0); }
.level-nev { font: 600 17px/1.3 var(--betu-sans); color: var(--sz-cim, var(--tinta)); }
.level-sor { display: block; max-width: 28em; overflow-wrap: break-word; }

/* ── 3. Levél-elrendezés (1–4 és 10–13) ───────────────────────────── */
.levelek-hosszu .level { padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--sz-vonal); }
.levelek-hosszu .level:last-child { border-bottom: 1px solid var(--sz-vonal); }
.levelek-hosszu .level-szoveg { margin-top: 18px; }
@media (min-width: 900px) {
  .levelek-hosszu .level-figura {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 6vw, 96px); align-items: start;
  }
  .levelek-hosszu .level-szam { grid-column: 1; grid-row: 1; justify-self: start; }
  .levelek-hosszu .level-szoveg { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .levelek-hosszu .level-alairas { grid-column: 1; grid-row: 2; margin-top: 22px; }
}

/* ── 4. Éjszakai színpad (5–9): nagy betű, váltakozó oldal ───────── */
.levelek-szinpad { overflow-x: clip; }
.levelek-szinpad-belso { position: relative; z-index: 1; }
.levelek-fenyfolt { opacity: .85; }
.levelek-rovidek { display: grid; row-gap: clamp(64px, 9vw, 136px); }
.levelek-rovidek .level-figura { max-width: 860px; }
.levelek-rovidek .level-szam {
  font-size: clamp(36px, 3.6vw, 52px); color: var(--arany);
  background-image: linear-gradient(var(--pala-vilagos), var(--pala-vilagos));
}
.levelek-rovidek .level-szoveg { margin-top: 16px; }
.levelek-rovidek .level-bekezdes {
  max-width: 21em;
  font-size: clamp(24px, 2.75vw, 38px); font-weight: 300; line-height: 1.3; letter-spacing: -.004em;
}
.levelek-rovidek .level-alairas { margin-top: 28px; }
@media (min-width: 900px) {
  .levelek-rovidek .level:nth-child(even) .level-figura { margin-left: auto; }
}

/* ── 5. Fejléc görgetés közben ───────────────────────────────────────
   A közös fejléc a nyitókép végéig átlátszó; telefonon így a bevezető, a portré
   és az arany cella a logó mögött fut át (mérve 390×844-en). Itt az első 8 px
   görgetés után tömör: a js/lapok/visszajelzesek.js teszi fel a html.vj-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.vj-gorgetve .fejlec-atlatszo::before { opacity: 1; }