/* =====================================================================
   Vezetői coaching (vezetoi-coaching.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.
   Csak elrendezés és tipográfiai lépték; a színeket a szakasz-környezet
   adja (--sz-*). Ahol közös szabályt ír felül, a szelektor legalább két
   osztályos, vagyis erősebb a felülírtnál (pl. .vc-temak-lista .szamozott-elem
   a .szamozott-elem fölött). Mozgás itt nincs: az a js/lapok/ fájlban él,
   és csak opacity-t animál.
   ===================================================================== */

/* ── 1. Témák: a számozott lista a címek betűjével, nagyobb léptékben ── */
.vc-temak-lista .szamozott-elem {
  grid-template-columns: var(--vc-negyzet, 56px) minmax(0, 1fr);
  gap: 20px;
  padding: 20px 4px 20px 0;
}
.vc-temak-lista .szamozott-elem::before {
  width: var(--vc-negyzet, 56px);
  height: var(--vc-negyzet, 56px);
  font-size: 16px;
}
.vc-temak-lista .szamozott-elem::after { top: 20px; }
.vc-temak-lista .szamozott-szoveg {
  font: 400 clamp(22px, 2.2vw, 29px)/1.25 var(--betu-cim);
  letter-spacing: -.005em;
  color: var(--sz-cim, var(--tinta));
}
@media (min-width: 900px) {
  .vc-temak-lista { --vc-negyzet: 64px; }
  .vc-temak-lista .szamozott-elem { gap: 26px; padding: 24px 4px 24px 0; }
  .vc-temak-lista .szamozott-elem::after { top: 24px; }
  /* a cím a lista mellett marad, amíg a lista végig nem gördül */
  .vc-temak-fej { position: sticky; top: calc(var(--fej) + 40px); }
}

/* ── 2. Miért egyéni coaching: nagy állítás, alatta a három ok ──────── */
.vc-allitas {
  margin: 0 0 clamp(48px, 6vw, 80px);
  max-width: 24em;
  font: 300 clamp(27px, 3.3vw, 46px)/1.24 var(--betu-cim);
  letter-spacing: -.008em;
  color: var(--sz-cim, var(--papir));
}
.vc-allitas em { font-family: var(--betu-idezet); font-style: italic; font-weight: 400; color: var(--arany); }
.vc-okok-cim {
  margin: 0 0 24px;
  font: 600 19px/1.3 var(--betu-sans);
  color: var(--sz-cim, var(--papir));
}
.vc-okok {
  counter-reset: ok;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px;
  margin: 0; padding: 0; list-style: none;
}
.vc-ok { counter-increment: ok; position: relative; padding-top: 24px; border-top: 1px solid var(--sz-vonal); }
.vc-ok::before {
  content: counter(ok, decimal-leading-zero);
  display: block; margin-bottom: 18px;
  font: italic 400 clamp(40px, 4vw, 54px)/1 var(--betu-idezet);
  color: var(--arany);   /* arany szám csak sötét alapon (ez a szakasz éjszakai) */
  font-variant-numeric: lining-nums;
}
.vc-ok::after { content: ""; position: absolute; left: 0; top: -2px; width: 44px; height: 3px; background: var(--arany); pointer-events: none; }
.vc-ok-szoveg { margin: 0; max-width: 31em; font-size: 17px; line-height: 1.6; color: var(--sz-halk, var(--pala-vilagos)); }
@media (min-width: 900px) {
  .vc-okok { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
}

/* ── 3. Torzítás nélkül: belülről (keretben) és kívülről (szabadon) ─── */
.vc-nezopont { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 8px; }
@media (min-width: 900px) {
  .vc-nezopont { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 112px); align-items: center; }
}
.vc-belul { padding: clamp(24px, 3vw, 34px); background: var(--sz-kartya, var(--papir)); border: 1px solid var(--sz-kartya-vonal, var(--pala-halvany)); }
.vc-nezopont-cim {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  font: 600 19px/1.3 var(--betu-sans);
  color: var(--sz-cim, var(--tinta));
}
/* a jel két cellája: a d palája belülről, a P aranya kívülről */
.vc-nezopont-cim::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--pala); }
.vc-nezopont-cim-kivul::before { background: var(--arany); }
.vc-nezopont-szoveg { margin: 0; max-width: 31em; color: var(--sz-halk, var(--tinta-halk)); }
/* A betű a 7/12-es hasábhoz méretezve: 1440 px-en 34 px ≈ 38 karakter/sor (a web-kapu V3 alsó határa 35;
   42 px-en 31 karakter jött ki, mérve 2026-10-15). */
.vc-kimondas {
  margin: 0; max-width: 19em;
  padding-left: clamp(18px, 3vw, 36px);
  border-left: 4px solid var(--arany);
  font: 400 clamp(26px, 2.4vw, 34px)/1.24 var(--betu-cim);
  letter-spacing: -.008em;
  color: var(--sz-cim, var(--tinta));
}

/* ── 4. 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, ugyanúgy, mint a
   kiválasztás-lapon. A borító (1024 × 1024, generált) a jegyzetfüzetre vágva: az a kép alsó felében ül. */
.kartyak.vc-kiemelt { grid-template-columns: minmax(0, 1fr); }
.kartyak.vc-tovabbi { margin-top: 20px; }
.vc-kiemelt .kartya-kep { object-position: 50% 72%; }
@media (min-width: 700px) {
  /* A fekvő elrendezés már 700 px-től él, mert a generátor kártya-sizes-a 700 px fölött 46vw-t mond
     (többoszlopos rácsra méretezve): egy oszlopban, teljes szélességben 1×-en az 512w-s fájl jönne, és
     768 px-en 689 px-re nagyítódna (1,35×, mérve 2026-10-15). A bal cellában a borító mérve 768 px-en
     287 × 338, 1024 px-en 383 × 338, 1440 px-en 491 × 338 px, vagyis mindig az 512 px-es fájl alatt marad
     (a hover 1,03-as nagyítása mellett is: 1440 px-en 506 px).
     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. */
  .vc-kiemelt .kartya-kepes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 340px; }
  .vc-kiemelt .kartya-kep-keret { aspect-ratio: auto; }
  .vc-kiemelt .kartya-kep-keret picture { position: absolute; inset: 0; }
  .vc-kiemelt .kartya-test { padding: clamp(32px, 4vw, 52px); }
  .vc-kiemelt .kartya-cim { font-size: clamp(30px, 2.9vw, 40px); }
  .vc-kiemelt .kartya-kivonat { max-width: 30em; font-size: 17px; }
}

/* ── 5. Horgony-ugrás a témákhoz ─────────────────────────────────────
   A közös [id] { scroll-margin-top: fejléc + 20px } a szakaszt 88 px-re teszi: ilyenkor a nyitókép alsó
   20 px-e a fejléc alatt marad, a fejléc átlátszó (a közös JS szerint addig, amíg a nyitókép alja
   72 px alatt van), és 390 px-en a képablak arany cellája pont a logó mögé kerül (mérve 2026-10-15).
   A szakasznak saját felső térköze van (72–136 px), ezért itt a szakasz a fejléc aljához érkezik:
   a nyitókép teljesen kifut, a fejléc tömör, a felcím mérve 390 px-en 138 px-en, 1440 px-en 202 px-en áll.
   A szelektor két osztályos, így erősebb a közös [id] szabálynál. */
.szakasz.vc-temak-szakasz { scroll-margin-top: calc(var(--fej) - 2px); }

/* ── 6. Coaching a referencialistán: hajszálvonalas fal pala alapon ──
   A referenciák lap falának nyelve (ott: .ref-fal), itt a coaching-tétellel együtt. 20 cella:
   telefonon 2, 700 px-től 4, 1100 px-től 5 oszlop, így a rács minden szélességen hézag nélkül zárul.
   A hajszálvonalat a cellák jobb és alsó, a lista bal és felső széle adja (beúszás közben sem
   látszik a rács háttere). A logó --w értéke a 4.12b képletéből jön; a max-width csak kicsinyít. */
.szakasz-bevezeto.vc-ref-bevezeto { margin: -12px 0 clamp(28px, 4vw, 40px); }
.vc-ref-fal {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--sz-vonal); border-left: 1px solid var(--sz-vonal);
}
.vc-ref { display: flex; border-right: 1px solid var(--sz-vonal); border-bottom: 1px solid var(--sz-vonal); }
.vc-ref-link {
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 128px; padding: 20px 10px 18px; text-align: center;
  color: var(--sz-cim, var(--feher)); text-decoration: none;
}
/* hover és fókusz: sötétítő réteg és a jel arany négyzete a sarokban (csak opacity). A réteg sötétít,
   nem világosít: a fehér szöveg kontrasztja így hover közben is nő (5,3 → 6,3:1), nem esik 4,5 alá. */
.vc-ref-link::before {
  content: ""; position: absolute; inset: 0; background: rgba(15, 19, 23, .14);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.vc-ref-link::after {
  content: ""; position: absolute; left: -1px; top: -1px; width: 10px; height: 10px; background: var(--arany);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.vc-ref-link:hover::before, .vc-ref-link:focus-visible::before,
.vc-ref-link:hover::after, .vc-ref-link:focus-visible::after { opacity: 1; }
.vc-ref-link:focus-visible { outline: 2px solid var(--sz-fokusz, var(--feher)); outline-offset: -6px; }
.vc-ref-logo { position: relative; display: block; width: calc(var(--w, 120px) * .8); height: auto; max-width: 100%; margin-bottom: 2px; }
.vc-ref-nev {
  position: relative; max-width: 100%;
  font: 400 16px/1.24 var(--betu-cim); color: var(--sz-cim, var(--feher));
  overflow-wrap: anywhere; text-wrap: balance;
}
.vc-ref-nev.vc-ref-nev-logoval { font: 500 13px/1.35 var(--betu-sans); letter-spacing: .02em; }
/* a coaching-tétel: rövid arany vonal alatta a dőlt felirat (az arany itt forma, a szöveg fehér) */
.vc-ref-munka {
  position: relative; max-width: 100%;
  font: italic 400 15px/1.3 var(--betu-idezet); color: var(--sz-szoveg, var(--feher));
  overflow-wrap: anywhere; text-wrap: balance;
}
.vc-ref-munka::before { content: ""; display: block; width: 22px; height: 2px; margin: 2px auto 9px; background: var(--arany); pointer-events: none; }
@media (min-width: 700px) {
  .vc-ref-fal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vc-ref-link { min-height: 152px; padding: 24px 14px 20px; }
  .vc-ref-logo { width: var(--w, 120px); }
  .vc-ref-nev { font-size: 17px; }
}
@media (min-width: 1100px) {
  .vc-ref-fal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vc-ref-nev { font-size: 18px; }
  .vc-ref-munka { font-size: 16px; }
}

/* ── 7. Ügyfeleink írták: a három vélemény ───────────────────────────
   A közös .velemenyek (auto-fit, 340 px) 700–1099 px között 2 + 1 cellát adna, a harmadik fél
   sorral; itt 1, 2 (a harmadik teljes szélességben), 1100 px-től 3 oszlop. */
.velemenyek.vc-velemenyek { grid-template-columns: minmax(0, 1fr); }
/* egy sorban az aláírások egy vonalban: a vélemény kitölti a kártyát, az aláírás az aljára kerül */
.vc-velemenyek .velemeny { display: flex; flex-direction: column; }
.vc-velemenyek .velemeny-szoveg { flex: 1 0 auto; }
@media (min-width: 700px) {
  .velemenyek.vc-velemenyek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-velemenyek .velemeny:nth-child(3) { grid-column: 1 / -1; max-width: none; }
  /* a teljes szélességű kártyában a sor ne nőjön 75 karakter fölé: a dőlt Newsreaderben 1 em ≈ 2,7 karakter;
     mérve 768 és 1024 px-en: 30 em-mel 82, 26 em-mel 71 karakter/sor (2026-10-15) */
  .vc-velemenyek .velemeny:nth-child(3) .velemeny-szoveg { max-width: 26em; }
}
@media (min-width: 1100px) {
  .velemenyek.vc-velemenyek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vc-velemenyek .velemeny:nth-child(3) { grid-column: auto; }
}
/* Egymás melletti kártyákban az aláírás vonala is egy magasságban fusson (az aláírások 2–3 sorosak):
   a kártya két sora (vélemény, aláírás) a rács közös sora lesz. A rács 20 px-es sorköze itt a vélemény
   és az aláírás közé is beáll, ezért az aláírás saját felső margója ennyivel kisebb. Subgrid nélkül
   (régi böngésző) a fenti flex-elrendezés marad. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .vc-velemenyek .velemeny { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
    .vc-velemenyek .velemeny-alairas { margin-top: 2px; }
  }
}