/* =====================================================================
   Szervezetfejlesztés és HR tanácsadás · lapsajátos kiegészítés (2026-10-15)
   Csak a szervezetfejlesztes.html tölti be (a lapforrás extra_css mezője).
   A közös palatinus.css-t nem írja át: a közös osztályok felülírása a lap
   törzs-osztálya (.lap-szervezetfejlesztes) alatt él, így legalább akkora
   erősségű, mint a felülírt szabály. A saját elemek „sf-” előtagot kapnak.
   Színek: csak a közös tokenek (pala, arany és a levezetett árnyalatok);
   az arany FORMA, szövegként csak sötét alapon.
   Mozgás: js/lapok/szervezetfejlesztes.js (csak transform és opacity).
   Ez a fájl a VÉGÁLLAPOTOT írja le; a mozgásos kiinduló állapotot a JS adja.
   ===================================================================== */

/* ── 1. Nyitó ───────────────────────────────────────────────────────
   A hangulatkép (1920×380, stock jellegű) kék-lila diagramjai kilógnának a két
   márkaszín világából, ezért a képablakban meleg, egyszínű tónust kap.
   Statikus szűrő, nem animál; a kép mérete és kivágása nem változik. */
.lap-szervezetfejlesztes .aloldal-ablak-kep { filter: grayscale(1) sepia(.2) contrast(1.06) brightness(.95); }

/* Fejléc mozgásban: 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/szervezetfejlesztes.js (5. pont) teszi fel a
   html.sf-gorgetve osztályt. A szelektor (0,4,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, törölhető. */
html.mozog.sf-gorgetve .lap-szervezetfejlesztes .fejlec-atlatszo::before { opacity: 1; }

/* ── 2. Meggyőződés: a forrás mondata kijelentés-címként ─────────────── */
.lap-szervezetfejlesztes .szakasz-cim.sf-kijelentes {
  max-width: 17em; margin-bottom: .7em;
  font-weight: 300; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.1; letter-spacing: -.016em;
}
.lap-szervezetfejlesztes .sf-kijelentes em { font-weight: 400; }
@media (min-width: 900px) {
  .lap-szervezetfejlesztes .sf-kijelentes-szoveg { margin-left: auto; margin-right: clamp(0px, 4vw, 64px); }
}

/* ── 3. Célok: számozott lista, elemenként beúszó változat ────────────
   A közös .szamozott a rács 2 px-es hézagát színezi vonalnak. Ha az elemek egyenként
   úsznak be, a még átlátszó elem mögül ez a hézagszín szürke foltként látszana, ezért itt
   a vonal az elemek saját szegélye. Végállapotban a kép azonos a közös komponenssel. */
.lap-szervezetfejlesztes .szamozott.sf-egyenkent { gap: 0; background: none; }
.lap-szervezetfejlesztes .sf-egyenkent > .szamozott-elem + .szamozott-elem { border-top: 2px solid var(--sz-vonal, var(--pala-halvany)); }
@media (min-width: 900px) {
  .lap-szervezetfejlesztes .sf-egyenkent.szamozott-ket-oszlop > .szamozott-elem:nth-child(2) { border-top: 0; }
  .lap-szervezetfejlesztes .sf-egyenkent.szamozott-ket-oszlop > .szamozott-elem:nth-child(even) { border-left: 2px solid var(--sz-vonal, var(--pala-halvany)); }
}

/* ── 4. Területek: ragadó bal oszlop állásjelzővel, mellette a kilenc pont ──
   Széles nézetben a bal oszlop (ikon, cím, számláló, 3×3 négyzet) ragad.
   Telefonon a bal oszlop „feloldódik” (display: contents), így az állásjelző a
   lista fölött ragadó sáv lehet; ragadni csak mozgásban ragad (html.mozog).
   Az állásjelző mozgás nélkül nem látszik: a HTML-ben hidden, a JS veszi le. */
.sf-teruletek-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.sf-teruletek-fej { margin-bottom: 28px; }
.sf-teruletek-ikon { width: clamp(48px, 5.4vw, 76px); height: auto; margin: 0 0 clamp(20px, 2.4vw, 32px); color: var(--pala); pointer-events: none; }
.lap-szervezetfejlesztes .sf-teruletek-cim { margin-bottom: 0; }

.sf-allas { pointer-events: none; }
.sf-allas-szamlalo { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.sf-allas-szam {
  display: inline-block; min-width: 1.1em;
  font: 300 34px/1 var(--betu-cim); letter-spacing: -.02em; color: var(--papir);
  font-variant-numeric: lining-nums tabular-nums;
}
.sf-allas-ossz { font: 500 13px/1 var(--betu-sans); letter-spacing: .2em; color: var(--pala-vilagos); }
.sf-negyzetek { display: grid; grid-template-columns: repeat(9, 12px); gap: 6px; margin: 0; padding: 0; list-style: none; }
.sf-negyzet { position: relative; width: 12px; height: 12px; box-shadow: inset 0 0 0 1px rgba(196, 202, 208, .42); }
.sf-negyzet-tolt { position: absolute; inset: 0; background: var(--arany); transform-origin: 50% 50%; pointer-events: none; }

.lap-szervezetfejlesztes .sf-teruletek-lista .szamozott-szoveg { max-width: 31em; }   /* ≈ 72 karakter/sor */

@media (max-width: 899px) {
  .sf-teruletek-bal { display: contents; }
  /* A sáv a margóval együtt a teljes nézetszélességet takarja (negatív margó + ugyanakkora
     belső térköz; a .belso ezen a szélességen pontosan 100% − 2 × gutter), különben az alatta
     elfutó pont arany sarok-négyzete a margóban kilátszana. Túlcsordulást nem ad. */
  .sf-allas {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter) 12px;
    background: var(--ejszaka); box-shadow: 0 1px 0 var(--sz-vonal);
  }
  html.mozog .sf-allas { position: sticky; top: var(--fej); z-index: 3; }
}
@media (min-width: 900px) {
  .sf-teruletek-racs { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .sf-teruletek-bal { position: sticky; top: calc(var(--fej) + 40px); }
  .sf-teruletek-fej { margin-bottom: 0; }
  .sf-allas { margin-top: clamp(28px, 3.2vw, 48px); }
  .sf-allas-szamlalo { margin-bottom: 26px; }
  .sf-allas-szam { font-size: clamp(80px, 8.4vw, 136px); line-height: .86; letter-spacing: -.03em; }
  .sf-allas-ossz { font-size: 14px; }
  .sf-negyzetek { grid-template-columns: repeat(3, 24px); gap: 8px; }
  .sf-negyzet { width: 24px; height: 24px; }
  .lap-szervezetfejlesztes .sf-teruletek-lista .szamozott-elem { font-size: clamp(17px, 1.3vw, 19px); padding-top: 22px; padding-bottom: 22px; }
}

/* ── 5. Szervezeti coaching: három szövegoszlop ─────────────────────── */
.sf-harmas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 8px; padding-top: 40px; border-top: 1px solid var(--sz-vonal); }
.sf-harmas-elem { position: relative; padding-top: 24px; }
.sf-harmas-elem::before { content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 3px; background: var(--arany); pointer-events: none; }
@media (min-width: 1000px) {
  .sf-harmas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
}

/* ── 6. Idézet palán: a jel két alakja görgetésre összezár ───────────────
   A keret overflow:hidden; a két alak benne mozog (csak transform). Mozgás nélkül
   az összezárt jel áll, pontosan a logó arányaiban (P: 0/0, d: 40%/20%, 60×80%). */
.sf-idezet-racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.sf-jel-keret { position: relative; display: grid; place-items: center; width: clamp(120px, 26vw, 176px); aspect-ratio: 4 / 5; overflow: hidden; pointer-events: none; }
.sf-jel { position: relative; width: 80%; aspect-ratio: 1 / 1; pointer-events: none; }
.sf-jel-p, .sf-jel-d { position: absolute; display: block; width: 60%; height: 80%; overflow: visible; pointer-events: none; }
.sf-jel-p { left: 0; top: 0; z-index: 2; }
.sf-jel-d { left: 40%; top: 20%; z-index: 1; }
.lap-szervezetfejlesztes .sf-idezet .kiemelt-idezet-szoveg { font-size: clamp(26px, 3.1vw, 44px); line-height: 1.2; max-width: 21em; }
/* Telefonon a jel az idézet fölött áll: a bal széle a felcím és az idézet bal szélével egy
   vonalban (középre igazítva a keret 10 %-ával beljebb ülne). */
@media (max-width: 899px) {
  .sf-jel-keret { justify-items: start; }
}
@media (min-width: 900px) {
  .sf-idezet-racs { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(48px, 7vw, 104px); }
  .sf-jel-keret { width: 100%; }
}

/* ── 7. Vélemények: széles nézetben három egyforma oszlop ──────────── */
.lap-szervezetfejlesztes .sf-velemenyek .velemeny-szoveg { font-size: clamp(18px, 1.35vw, 19.5px); }
@media (min-width: 1100px) {
  .lap-szervezetfejlesztes .velemenyek.sf-velemenyek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── 8. Referencialista: a bevezető a fejsor alatt; telefonon tömörebb kártyák ── */
.lap-szervezetfejlesztes .sf-referencia-bevezeto { margin-top: -8px; }
@media (max-width: 599px) {
  .lap-szervezetfejlesztes .sf-referenciak .referencia { margin-bottom: 10px; padding: 16px 18px 12px; }
  .lap-szervezetfejlesztes .sf-referenciak .referencia-ceg { margin-bottom: 6px; font-size: 17px; }
}

/* ── 10. Kapcsolódó: a saját cikk kiemelve, alatta a két szakterület ────
   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.
   Már 600 px-től kétoszlopos: a generátor a kártyaképnek rögzített sizes-t ad
   („(min-width: 700px) 46vw”), és egyoszlopos kártyán 700–899 px között a kép kb. 90vw
   széles lenne, vagyis 1× kijelzőn az 512 px-es fájl 1,35×-ös nagyításban állna (mérve 768 px-en). */
.kartyak.sf-kiemelt { grid-template-columns: minmax(0, 1fr); }
.kartyak.sf-tovabbi { margin-top: 20px; }
@media (min-width: 600px) {
  .sf-kiemelt .kartya-kepes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 340px; }
  .sf-kiemelt .kartya-kep-keret { aspect-ratio: auto; }
  .sf-kiemelt .kartya-kep-keret picture { position: absolute; inset: 0; }
  .sf-kiemelt .kartya-test { padding: clamp(32px, 4vw, 52px); }
  .sf-kiemelt .kartya-cim { font-size: clamp(30px, 2.9vw, 40px); }
  .sf-kiemelt .kartya-kivonat { max-width: 30em; font-size: 17px; }
}