/* ==========================================================================
   14-page.css — Belső oldalak: oldalfej, morzsamenü, tartalomhasáb

   Ez a fájl designolja azt a ~90 oldalt, aminek nincs saját sablonja: az
   univerzális page.php-t és minden rá épülő oldalsablont.

   Forrás: Figma 1920w light — Magyar tagság (node 1:3641) és
   Civil szervezeteknek (node 1:3198). A tervekből átvett értékek:
     oldalfej   — csontszín háttér, 64px felül / 96px alul
     cím        — Nunito SemiBold 72px, középre, ecsetvonás-aláhúzás
     morzsamenü — 13px, +0.14em betűköz, verzál, világoskék
     tartalom   — 820px széles hasáb, középre, 96px felső levegő

   A törzs TIPOGRÁFIÁJA nem itt van: a .page-body__inner ugyanazt a
   készletet kapja, mint a hír- és esemény-oldal törzse (07-components.css),
   a táblázat pedig a 99-wp-overrides.css-ből. Itt csak a LAYOUT van.
   ========================================================================== */

@layer components {

  /* ========================================================================
     OLDALFEJ

     A dekoráció (ecsetvonások) abszolút pozicionált, a szövegre nincs
     hatása. A .brush alaposztályt és a mobil elrejtést a 09-home.css adja,
     itt csak a pozíciókat állítjuk be.
     ======================================================================== */

  .page-hero {
    position: relative;
    isolation: isolate;

    /* A Figma tervben 64/96px a szekció belső tere, DE ott a cím alatt még
       egy lead bekezdés is áll. Lead nélkül a 96+96px összeadódó térköz úgy
       hat, mintha hiányozna valami az oldalról — ezért itt kevesebb. */
    padding-block: var(--space-16) var(--space-12);
    background-color: var(--color-bg);
    text-align: center;
  }

  .page-hero__deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .page-hero__inner {
    position: relative;
    z-index: 1;

    /* Az oldalfej a TELJES hasábot kapja, és a tartalma középre zárt — a
       törzsszöveg bal igazításához NEM igazodik. Az oldalfej önálló,
       szimmetrikusan komponált egység (két oldalán ecsetvonás-dekorációval);
       a szöveghasáb szélességére szorítva a cím és a morzsamenü a lap
       közepétől balra csúszna, és kibillentené a lap tetejét. */
    inline-size: min(100% - var(--space-8), var(--page-measure));
    margin-inline: auto;
  }

  .page-hero__title {
    margin-block: var(--space-4) 0;
    font-size: var(--text-page-title);
    text-wrap: balance;
  }

  .page-hero__lead {
    margin-block-start: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-lead);
    line-height: var(--lh-body);
  }

  /* Ecsetvonások — a Figma pozíciói arányosítva, hogy nagy kijelzőn se
     ússzanak el a szövegtől. A jobb oldali nyíl kilóg a viewportból,
     ezért a .page-hero__deco vágja. */
  .brush--page-sparkle {
    inset-block-start: var(--space-2);
    inset-inline-start: 3.5%;
    inline-size: 240px;
  }

  .brush--page-wave {
    inset-block-start: var(--space-12);
    inset-inline-start: -40px;
    inline-size: 360px;
  }

  /* A kék nyíl az EGYETLEN telített színfolt az oldalfejben (a másik kettő
     fehér csontszínen, tehát alig látszik). Teljes méretben és opacitásban
     erősebb volt az oldalcímnél — dekoráció nem viheti el a fókuszt a
     laptól, amiért a látogató odajött. */
  .brush--page-arrow {
    inset-block-start: -18px;
    inset-inline-end: -30px;
    inline-size: 260px;
    opacity: 0.45;
  }

  /* ========================================================================
     MORZSAMENÜ

     Az elválasztót CSS adja (::after), nem markup — így a képernyőolvasó
     csak az oldalneveket olvassa fel, a » jelet nem.
     ======================================================================== */

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;
    list-style: none;
  }

  .breadcrumb__item {
    color: var(--color-secondary);
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    line-height: var(--lh-snug);
    text-transform: uppercase;
  }

  .breadcrumb__item + .breadcrumb__item::before {
    content: "»";
    margin-inline-end: var(--space-2);
    color: var(--color-text-subtle);
  }

  .breadcrumb__item a {
    color: inherit;
    text-decoration: none;
  }

  .breadcrumb__item a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .breadcrumb__item [aria-current="page"] {
    color: var(--color-text-muted);
  }

  /* ========================================================================
     TARTALOMHASÁB — KÉT szélesség, nem egy

     A Figma tartalomoszlopa 820px volt, és sokáig MINDEN ebben futott. A
     kártyarácsok megjelenésével ez megfordult: 820px-en az elnökségi kártya
     e-mail címe szótagolás nélkül tört ketté, a logórácsba pedig három
     doboznál több nem fért.

     Ezért a hasáb 1140px, DE a folyószöveg a Figma eredeti 820px-én marad:
     a hosszabb sorokon a szem nehezebben találja meg a következő sor
     elejét, és ezeken a lapokon 300+ szavas bekezdések is vannak. Ami
     RÁCS, TÁBLÁZAT vagy KÉP, az kilép ebből és a teljes hasábot használja.
     A szöveg tehát pontosan annyi marad, amennyi eddig volt — csak a
     kártyák kaptak helyet.

     ⚠️ A sorhossz NEM `ch` egységben áll, pedig kézenfekvő lenne: a
     Plus Jakarta Sans nullája szokatlanul széles, ezért a `72ch` ebben a
     fontban 896px-et, vagyis MÉRT 92 karaktert adott soronként — jóval
     többet, mint amit a szám ígér. A px-érték mérésből jön.

     Mindkettő komponens-szintű változó, hogy egy oldalsablon felülírhassa:
     <main class="page-main" style="--page-measure: 64rem;">
     ======================================================================== */

  .page-main {
    /* 2026-09-16: a hasáb SZŰKEBB lett, a szöveg pedig SZÉLESEBB — az
       ügyfél jelezte, hogy az oldalakon és az eseményeknél túl sok az üres
       fehér tér a szöveg mellett. Mérve: 1140px-es hasábban a 820px-es
       szöveg mellett 320px maradt üresen; most 960/864, tehát 96px.
       A sorhossz így is 78 karakter körül van, ami még olvasható.

       A kártyarácsok, táblázatok és képek a szövegnél SZÉLESEBBEK maradnak:
       azok a `--page-wide` szélességet kapják (lásd lent) — a 2026-08-06-i
       döntés szerint ugyanis 820px-en megfojtották magukat.

       ⚠️ A `--page-wide` a HASÁBBAL egyezik, nem nagyobb nála. Amíg 1140px
       volt (a szűkítés előtti hasábméret), a kitörés szimmetrikus negatív
       margója (960 − 1140) / 2 = −90px-et adott: a kártyarács 90 pixellel a
       szöveg ELÉ kezdődött, és a lap két különböző bal szélen állt. Pont az,
       amit az alábbi szabály megjegyzése ígért elkerülni. Egy forrásból
       származtatva ez nem tud újra elcsúszni, és a lapszintű
       `--page-measure` override mindkettőt együtt mozgatja.

       Mérve: 960px-en a rácsok ugyanannyi oszlopot adnak, mint 1140-en — a
       logórács 4-et (a 220px-es minimum miatt), az elnökségi 3-at, és ott a
       kártya 299px, amiben a leghosszabb e-mail cím (261px) kifér. */
    --page-measure: 60rem;      /* 960px — a tartalomhasáb külső határa */
    --page-prose: 54rem;        /* 864px — a folyószöveg sorhossza */
    --page-wide: var(--page-measure);  /* a rácsoknak, tábláknak, képeknek */
  }

  .page-body {
    padding-block: var(--space-8) var(--space-32);
  }

  .page-body__inner {
    inline-size: min(100% - var(--space-8), var(--page-measure));
    margin-inline: auto;
  }

  /* A KÖZVETLEN gyerekek kapják a sorhossz-korlátot, mert a blokk-szerkezet
     itt lapos: a bekezdés, a címsor és a lista mind első szinten áll. A
     `.flow` a függőleges ritmust adja (margin-block-start), ez az inline
     tengelyt — nem ütköznek.

     ⚠️ A szöveg BALRA igazodik, NEM középre (`margin-inline: auto` nélkül).
     Középre zárva a rövidebb szövegblokk és a teljes szélességű rács bal
     széle két különböző vonalon állna, és a rács úgy néz ki, mintha kilógna
     az oldalból. Balra igazítva minden egy vonalban kezdődik, csak a szöveg
     ér véget hamarabb. */
  .page-body__inner > * {
    max-inline-size: var(--page-prose);
  }

  /* Ami NEM folyószöveg, az KITÖR a szűkített hasábból a `--page-wide`
     szélességre. A `wp-block-group` a migrációk kártyarácsait fedi le
     (logo-cards, board-grid, cta-cards, badge-cards), a többi a
     szerkesztőből jövő kép és táblázat.

     A negatív margó szimmetrikus, tehát a széles elem a szöveghasáb
     KÖZEPÉHEZ igazodva nyúlik szét — nem csak jobbra. Szűk kijelzőn a
     `min()` miatt sosem lóg ki a viewportból. */
  .page-body__inner > :is(.wp-block-group, .wp-block-table, .wp-block-image, figure, table) {
    inline-size: min(100vw - var(--space-8), var(--page-wide));
    max-inline-size: none;
    margin-inline: calc((100% - min(100vw - var(--space-8), var(--page-wide))) / 2);
  }

  /* A térközt a `.flow` utility adja (margin-block-start: var(--flow-space)),
     és az utilities layer erősebb ennél a fájlnál — ezért NEM a margót
     írjuk felül, hanem a változót, amit a .flow beolvas. */
  .page-body__inner :is(h2, h3) {
    --flow-space: var(--space-10);
  }

  .page-body__inner :is(h4, h5, h6) {
    --flow-space: var(--space-8);
  }

  /* Szekciócím egy akkordeon-futam fölött — idézett szabálypont doboza.

     A „Gyakori kérdések" oldalon az Etikai Kódex 21 számozott pontja h4-ként
     vezeti be a hozzá tartozó kérdéseket. Az alap tipográfiával ezek
     ugyanolyan méretűek és ugyanolyan kékek, mint maguk a kérdések — így nem
     lehet eldönteni, hol kezdődik egy új szakasz és mi kérdés.

     A doboz azt is elmondja, amit a puszta címsor nem: ez nem a mi
     szövegünk, hanem a Kódexből IDÉZETT pont, amihez a alatta lévő kérdések
     tartoznak. A sárga függőleges sáv ugyanaz a jelölés, mint a lábléc
     oszlopcímeinél.

     A `:has(+ .wp-block-details)` szándékos szűkítés: csak ott lesz doboz,
     ahol a címsor tényleg akkordeont vezet be. Más oldalak címsorai
     érintetlenek. */
  .page-body__inner :is(h2, h3, h4):has(+ .wp-block-details) {
    --flow-space: var(--space-16);

    position: relative;

    margin-block-end: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background-color: var(--color-bg-alt);

    color: var(--color-text);
    font-size: var(--text-h4);
    line-height: var(--lh-snug);

    /* A globális címsor-szabály (05-base.css) `balance`-ra állítja a
       tördelést. Rövid címeknél ez jó, ezek a kódex-pontok viszont 2–4
       mondatos bekezdések: a balance egyenlő hosszú, de rövid sorokra
       vágja őket, és a doboz jobb harmada üresen marad. */
    text-wrap: pretty;
  }

  /* Sárga jelölősáv a doboz bal szélén */
  .page-body__inner :is(h2, h3, h4):has(+ .wp-block-details)::before {
    content: "";
    position: absolute;
    inset-block: var(--space-5);
    inset-inline-start: var(--space-3);

    inline-size: 4px;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
  }

  /* A doboz KIHÚZÁSA a tartalomhasábon kívülre.

     A doboz külső széle eddig pontosan a hasábbal esett egybe, a SZÖVEGE
     viszont a paddingtól 33px-cel beljebb kezdődött, mint az alatta lévő
     kérdéseké. A szem a szövegek bal szélét követi, ezért ez rendezetlennek
     hatott — pedig a dobozok szélessége stimmelt.

     Megoldás: a doboz annyival lóg ki a hasábból, amennyi a belső tere, így
     a SZÖVEGE kerül egy vonalba a kérdésekkel, a sárga sáv pedig a margóba.
     Csak elég széles kijelzőn, ahol van hova kilógni — a hasáb kis
     kijelzőn `100% - 32px`, ott a kihúzás túlfolyást okozna. */
  @media (min-width: 1024px) {

    /* A belső tér PLUSZ a keret vastagsága — enélkül a szöveg 1px-cel
       beljebb kezdődne, mint a kérdéseké. */
    .page-body__inner :is(h2, h3, h4):has(+ .wp-block-details) {
      margin-inline: calc((var(--space-6) + 1px) * -1);
    }
  }

  /* A doboz alatti első akkordeon-elem fölé nem kell vonal: a doboz maga
     zárja le a szakasz elejét. */
  .page-body__inner :is(h2, h3, h4):has(+ .wp-block-details) + .wp-block-details {
    border-block-start: none;
  }

  /* A régi tartalomban maradt <h1> — a page-hero címe után egy második h1
     szemantikailag hibás, de amíg a normalizáló migráció le nem fut, ne
     nézzen ki nagyobbnak a szekciócímeknél. */
  .page-body__inner h1 {
    --flow-space: var(--space-10);

    color: var(--color-primary);
    font-size: var(--text-h3);
  }

  /* ========================================================================
     TARTALMI KÉP — a szerkesztőből jövő Kép blokk

     A régi tartalom képei natív méretükben renderelődtek: az „Év ICF Coacha
     2011" portréja 778×1024, tehát EGY TELJES KÉPERNYŐT elfoglalt, a
     bevezető mondat pedig fölötte magára maradt. Álló képnél ez a
     leggyakoribb eset, mert a hasáb szélessége (1140px) sosem fogja meg —
     csak a magasság.

     Ezért a korlát a MAGASSÁGON van, nem a szélességen: a fekvő képek
     (csoportkép, diagram) érintetlenek maradnak, a portrék viszont
     ésszerű méretre húzódnak vissza. Az `inline-size: auto` KELL hozzá:
     a `width` HTML-attribútum nélküle megtartaná az eredeti szélességet,
     és a kép torzulna.

     A `>` szándékos: csak a lap SAJÁT képeire vonatkozik. A kártyák képeit
     (logórács, elnökségi portré) a saját komponensük méretezi. */
  .page-body__inner > .wp-block-image img {
    max-block-size: min(70vh, 560px);
    inline-size: auto;
    border-radius: var(--radius-2xl);
  }

  /* Kutatási diagram — a magasság-korlát alóli kivétel.

     A riportok egyetlen érdemi tartalma az infografika, rajta apró
     feliratokkal (százalékok, kategória-nevek). Ezeknél nem a lap ritmusa a
     szempont, hanem az olvashatóság: kapják meg a teljes hasábot. A
     migráció ezért az EREDETI méretű képre állítja a forrást, különben a
     nagyobb doboz csak felnagyítaná a kisebb variánst. */
  .page-body__inner > .research-figure img {
    max-block-size: none;
    inline-size: 100%;
  }

  /* ========================================================================
     GYIK AKKORDEON — a natív „Összecsukó" blokkra (core/details)

     A 004-es migráció 10 oldalon 117 Elementor toggle-t alakított át erre.
     Szándékosan NINCS JavaScript mögötte: a <details>/<summary> alapból
     összecsukható, billentyűzettel kezelhető és képernyőolvasóval helyes.
     Az egyszerre-egy-nyitva viselkedést a name attribútum adja (a migráció
     futamonként azonos nevet ír), szintén JS nélkül.

     Forrás: Figma „GY.I.K." komponens (node 14:56) + a Civil szervezeteknek
     1920w light lap világos akkordeonja (node 1:3198).
     ======================================================================== */

  .wp-block-details {
    --details-space: var(--space-5);

    border-block-end: 1px solid var(--color-border);
    padding-block: var(--details-space);
  }

  /* Az első elem fölé is kell vonal, hogy a lista lezártnak látsszon */
  .wp-block-details:not(.wp-block-details + .wp-block-details) {
    border-block-start: 1px solid var(--color-border);
  }

  .wp-block-details > summary {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;

    cursor: pointer;
    list-style: none;   /* a natív háromszög helyett saját kör-gomb */

    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-h5);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);

    transition: color var(--duration-base) var(--ease);
  }

  /* Safari/WebKit saját nyila */
  .wp-block-details > summary::-webkit-details-marker {
    display: none;
  }

  /* Kör alakú chevron gomb a sor végén. A ::after tartalma üres — a formát
     maszk adja, hogy a szín tokenből jöjjön és kövesse a Testreszabót. */
  .wp-block-details > summary::after {
    content: "";
    flex: none;

    inline-size: 32px;
    block-size: 32px;

    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);

    background-color: transparent;
    background-image: linear-gradient(var(--color-text), var(--color-text));
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 2px;

    transition:
      background-color var(--duration-base) var(--ease),
      border-color var(--duration-base) var(--ease),
      transform var(--duration-base) var(--ease);
  }

  /* Csukott állapot: „+" — a függőleges szár egy második gradienssel */
  .wp-block-details:not([open]) > summary::after {
    background-image:
      linear-gradient(var(--color-text), var(--color-text)),
      linear-gradient(var(--color-text), var(--color-text));
    background-size: 12px 2px, 2px 12px;
  }

  .wp-block-details[open] > summary {
    color: var(--color-primary);
  }

  /* Nyitva alul is több levegő: a válasz vége ne tapadjon az elválasztó
     vonalhoz, különben a következő kérdéshez tartozónak látszik. */
  .wp-block-details[open] {
    padding-block-end: var(--space-8);
  }

  /* Nyitva: sárga kitöltés, ahogy a tervben */
  .wp-block-details[open] > summary::after {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
  }

  .wp-block-details > summary:hover::after {
    border-color: var(--color-primary);
  }

  .wp-block-details > summary:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 4px;
  }

  /* A válasz törzse — a summary alatt minden más.

     A kérdés és a válasz közé bőven kell tér: a kérdés félkövér display
     betű, a válasz folyószöveg, és szorosan egymás alatt a kettő egyetlen
     bekezdésnek látszik — pont az veszik el, hogy hol ér véget a kérdés. */
  .wp-block-details > :not(summary) {
    margin-block-start: var(--space-6);
    max-inline-size: 68ch;
    color: var(--color-text-muted);
  }

  .wp-block-details > :not(summary) + :not(summary) {
    margin-block-start: var(--space-3);
  }

  /* ========================================================================
     CTA-KÁRTYARÁCS — a hub oldalak alja

     A 005-ös migráció 13 oldalon alakította ezzé a „címsor + csupasz link"
     párokat. Korábban ezek egy hosszú, egyoszlopos „cím – sárga gomb – cím –
     sárga gomb" oszlopként estek szét.

     A kártya EGÉSZE kattintható, de nem egy körbeölelő <a>-val: az blokként
     nem lenne szerkeszthető. Helyette a linket terítjük ki ::after-rel a
     kártyára — így a markup natív blokkokból áll, és a kliens a címet és a
     feliratot külön tudja szerkeszteni.
     ======================================================================== */

  .cta-cards {
    --flow-space: var(--space-12);

    display: grid;
    gap: var(--space-5);
  }

  @media (min-width: 640px) {
    .cta-cards {
      grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    }
  }

  .cta-card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background-color: var(--color-bg-alt);

    transition:
      border-color var(--duration-base) var(--ease),
      box-shadow var(--duration-base) var(--ease),
      transform var(--duration-base) var(--ease);
  }

  .cta-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .cta-card__title {
    --flow-space: 0;

    margin: 0;
    color: var(--color-primary);
    font-size: var(--text-h4);
    line-height: var(--lh-snug);

    /* NINCS `hyphens: auto` — az kötőjellel vágta ketté a kétszavas
       címeket is („Jelentke-zés ügyfeleknek”), amit az ügyfél 2026-09-16-án
       jelzett. Szóközzel tagolt cím a szóköznél törjön, két sorba.
       A `break-word` végszükségre marad: a leghosszabb egybeírt cím a
       tartalomban a „Kompetenciahatárok" (18 karakter), a többi 17 alatt. */
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .cta-card__cta {
    --flow-space: 0;

    margin: 0;
    margin-block-start: auto;   /* a gomb a kártya aljára tapad */
    padding-block-start: var(--space-2);
  }

  /* Teljes szélességű akciósor: a felirat balra, a nyíl mindig a kártya
     jobb szélén. Inline-flex mellett a nyíl a tördelt felirat utolsó sora
     után csúszna, tehát egy- és kétsoros kártyáknál más helyre kerülne. */
  .cta-card__cta a {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;

    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-nav);
    font-weight: var(--fw-semibold);
    text-decoration: none;
  }

  /* A link kiterítése az egész kártyára */
  .cta-card__cta a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
  }

  .cta-card__cta a::after {
    content: "→";
    transition: transform var(--duration-base) var(--ease);
  }

  .cta-card:hover .cta-card__cta a {
    color: var(--color-primary);
  }

  .cta-card:hover .cta-card__cta a::after {
    transform: translateX(4px);
  }

  .cta-card__cta a:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 4px;
  }

  /* ========================================================================
     JELVÉNY-KÁRTYÁK — ACC / PCC / MCC minősítési szintek

     A 006-os migráció két oldalon rendezte három oszlopba. Korábban a
     600×600-as jelvények egymás alatt, teljes szélességben álltak, így a
     három szint összehasonlítása — a lap egyetlen célja — nem működött.
     ======================================================================== */

  .badge-cards {
    --flow-space: var(--space-12);

    display: grid;
    gap: var(--space-6);
  }

  @media (min-width: 640px) {
    .badge-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .badge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
  }

  .badge-card__media {
    margin: 0;
    inline-size: min(180px, 60%);
  }

  .badge-card__media img {
    inline-size: 100%;
    block-size: auto;
    border-radius: 0;   /* a jelvény kör alakú, a kártya-radius elrontaná */
  }

  .badge-card__title {
    --flow-space: 0;

    margin: 0;
    font-size: var(--text-h5);
    line-height: var(--lh-snug);
    text-wrap: balance;
  }

  .badge-card__title a {
    color: var(--color-primary);
    text-decoration: none;
  }

  .badge-card__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .badge-card__text {
    --flow-space: 0;

    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--lh-body);
  }

  /* ========================================================================
     LOGÓ-KÁRTYÁK — akkreditált képzők, partnerek, kedvezményes programok

     A 013-as migráció rendezte rácsba négy oldalon. Korábban a logó és a
     hozzá tartozó név egymás alatt, teljes tartalomszélességben futott: az
     Akkreditált képzők oldalán 33 képző EGYETLEN oszlopban. A lap célja —
     hogy a képzőket egymás mellett lehessen végignézni — így nem működött,
     ráadásul a név vizuálisan az ALATTA lévő logóhoz tapadt.

     A média fix magasságú dobozt kap: a logók aránya és mérete szórt
     (300×150-től 525×263-ig), enélkül a rács soraiban a nevek eltérő
     magasságban állnának, és a sor „lépcsőzne".
     ======================================================================== */

  .logo-cards {
    --flow-space: var(--space-10);

    display: grid;
    gap: var(--space-4);

    /* 220px, nem 200: a szélesebb hasábban (1140px) a 200-as minimum öt
       oszlopot enged, és ott a hosszabb nevek háromfelé törnek
       („Antener / Oktatásszervező / Kft."). 220-nál négy oszlop lesz,
       egyenként 273px.

       auto-FILL, nem auto-fit: az auto-fit összezárja az üres sávokat,
       ezért a LEVEL 3 egyetlen képzője egymaga kifeszült a teljes 1140px-re
       — egy 273px-es kártya helyett egy hatalmas, magányos doboz. Az
       auto-fill meghagyja az üres helyeket, tehát minden kártya egyforma
       marad, akárhány van a szekcióban. */
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  }

  .logo-card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: center;

    /* A rács sorai a legmagasabb kártyához igazodnak (három soros névhez is).
       Középre igazítva a rövid nevű kártyák nem a doboz tetejére tapadnak. */
    justify-content: center;
    gap: var(--space-3);

    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background-color: var(--color-bg-alt);
    text-align: center;

    transition:
      border-color var(--duration-base) var(--ease),
      box-shadow var(--duration-base) var(--ease),
      transform var(--duration-base) var(--ease);
  }

  /* Emelés csak ott, ahol van hova kattintani — a „Korábbi partnereink"
     kártyáin nincs link, azoknál a hover hamis ígéret lenne. */
  .logo-card:has(a):hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .logo-card__media {
    --flow-space: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    inline-size: 100%;
    block-size: 96px;
  }

  .logo-card__media img {
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    max-block-size: 100%;
    object-fit: contain;
  }

  .logo-card__title {
    --flow-space: 0;

    margin: 0;
    font-size: var(--text-h6);
    line-height: var(--lh-snug);

    /* Kötőjelezés NINCS: a névsorban angol nevek is vannak, és a magyar
       szótagolás azokat rosszul töri („Busi-ness Education"). A hosszú
       magyar összetételek („Oktatásszervező") kötőjel nélkül is beférnek a
       200px-es oszlopba; a break-word csak végszükség esetére marad. */
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .logo-card__title a {
    color: var(--color-primary);
    text-decoration: none;
  }

  /* Link nélküli kártya („Korábbi partnereink"): a név ne a linkek kékjén
     álljon, mert kattinthatóságot ígérne, ami nincs. */
  .logo-card:not(:has(a)) .logo-card__title {
    color: var(--color-text);
  }

  /* A link kiterítése az egész kártyára */
  .logo-card__title a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
  }

  .logo-card:hover .logo-card__title a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .logo-card__title a:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 4px;
  }

  /* A leírás NEM tapad a kártya aljára (nincs `margin-block-start: auto`):
     a magasabb sorokban elszakadna a névtől, amihez tartozik. */
  .logo-card__text {
    --flow-space: 0;

    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
  }

  /* ========================================================================
     ELNÖKSÉGI KÁRTYARÁCS A BELSŐ OLDALON

     A `.board-grid` / `.board-card` a /kapcsolat/ oldal komponense
     (13-contact.css) — a 014-es migráció az „A szervezet" oldal névsorát is
     erre állítja, hogy egy kártyatípust kelljen karbantartani.

     ⚠️ ITT KORÁBBAN EGY OSZLOPSZÁM-FELÜLÍRÁS ÁLLT. A komponens 1024px felett
     három oszlopot adott, ami a szűkebb tartalomhasábban kezelhetetlen volt,
     ezért itt kettőre fogtuk. 2026-09-16 óta MAGA A KOMPONENS kettő oszlopos
     (az e-mail cím kettétörése miatt, lásd a 13-contact.css indoklását), így
     a felülírás feleslegessé vált — és egy néma másolat, ami a következő
     változásnál szétcsúszna. Ezért törölve.
     ======================================================================== */


  /* A kártyán a cím maga a `mailto:` link (lásd a 014 indoklását) — a
     /kapcsolat/ külön „E-mail küldése" sorával szemben. Hogy a kártya képe
     ott se változzon, a link a szöveg színén marad, és csak hoverre húz
     alá. */
  .page-body__inner .board-card__email a {
    color: inherit;
    text-decoration: none;
  }

  .page-body__inner .board-card__email a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* ========================================================================
     PROGRAMSOR — előadói portré + a hozzá tartozó alkalom

     A Visible Coach oldalon öt alkalom szerepel, mindegyikhez 3-6 bekezdés
     és egy „Tovább" gomb. Kártyarácsba ez nem fér: a 015-ös migráció ezért
     sorokká alakítja — portré balra, szöveg jobbra.

     A sor a SZÖVEG szélességén marad (nem a teljes 1140px-en), mert itt a
     szöveg a lényeg: a széles hasábban a leírás 96 karakteres sorokat
     kapna. A portré emiatt 140px — a 180px-es változat mellett a
     szövegoszlop 63 karakterre szűkült volna.
     ======================================================================== */

  .program-row {
    --flow-space: var(--space-12);

    display: grid;
    gap: var(--space-6);
    align-items: start;
  }

  /* A hasáb-szabály minden `.wp-block-group`-ot teljes szélességre enged
     (`max-inline-size: none`), és az erősebb szelektor — ezért kell ugyanazon
     a szinten visszafogni. A programsor NEM rács: itt a szöveg a tartalom. */
  .page-body__inner > .program-row {
    max-inline-size: var(--page-prose);
  }

  @media (min-width: 640px) {

    .program-row {
      grid-template-columns: 140px minmax(0, 1fr);
    }
  }

  /* Két portré (ahol két témavezető van) egymás alá kerül, nem egymás mellé:
     140px-en félbevágva egyik sem lenne felismerhető. */
  .program-row__media {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* A portré a sor aljáig együtt görög a szöveggel.

     Mért indok: a programsorok 520–815px magasak. Nagy monitoron (895px)
     tízből kettő csordul túl a képernyőn, egy tipikus laptopon (~700px)
     viszont tízből HÉT — ott tehát a látogató a leírás közepétől már nem
     látja, melyik előadóról olvas, pedig a lap egyetlen feladata, hogy az
     öt alkalom közül válasszon.

     A `top` a lebegő fejléc alá igazít (`--scroll-offset` = a header
     magassága), különben a portré becsúszna alá. A ragadás magától megáll a
     sor alján: a sticky elem a SZÜLŐ dobozán belül mozog, a szülő pedig
     maga a programsor.

     Csak kétoszlopos elrendezésben: mobilon a portré a szöveg FÖLÖTT áll,
     ott a ragadás elfedné az olvasott bekezdést. */
  @media (min-width: 640px) {

    .program-row__media {
      position: sticky;
      top: calc(var(--scroll-offset, 6rem) + var(--space-4));
    }
  }

  .program-row__photo {
    overflow: hidden;
    margin: 0;
    inline-size: 100%;
    max-inline-size: 140px;
    aspect-ratio: 1;
    border-radius: var(--radius-xl);
    background-color: var(--color-bg);

    & img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  /* A `.flow` utility csak a `.page-body__inner` KÖZVETLEN gyerekeit
     ritmizálja, a csoporton belülre nem ér el — enélkül a leírás bekezdései
     összetapadnak. Itt tehát a margót adjuk meg, nem a `--flow-space`-t. */
  .program-row__body > * + * {
    margin-block-start: var(--space-4);
  }

  /* ⚠️ A `.page-body__inner` prefix KELL: a törzs-tipográfia
     (`07-components.css`) `.page-body__inner :is(h4, h5, h6)` alakban állítja
     a címsorok méretét és színét, ami (0,1,1) — erősebb egy magányos
     osztálynál. Enélkül a programsor címe és a témavezető-sora ugyanolyan
     kék 18px marad, és a kettőt nem lehet megkülönböztetni. */
  .page-body__inner .program-row__title {
    --flow-space: 0;

    margin: 0;
    color: var(--color-primary);
    font-size: var(--text-h4);
    line-height: var(--lh-snug);
    text-wrap: balance;
  }

  /* Az előadó sora a forrásban is címsor (h5), de nem szakaszcím, hanem a
     programcímhez tartozó kísérőadat — ezért néz ki címkeként. A szintjéhez
     nem nyúlunk, hogy az oldal vázlata ne rendeződjön át. */
  .page-body__inner .program-row__lead {
    --flow-space: var(--space-1);

    margin: 0;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-wide);
  }

  /* A MAP sorozaton az előadó neve ELŐZI meg a programcímet (a Visible
     Coachon fordítva). A `margin: 0` mindkét sorra érvényes, tehát ebben az
     irányban külön kell térközt adni, különben a név rátapad a címre. */
  .page-body__inner .program-row__lead + .program-row__title {
    margin-block-start: var(--space-1);
  }

  /* ========================================================================
     TARTALOMJEGYZÉK

     A hosszabb dokumentum-oldalak (Kompetenciahatárok) elején álló felsorolás.
     Az Elementorból inline stílussal érkezett — `background-color: #ffffff`
     éles sarkokkal, `color: #7a7a7a` szürke szöveggel —, ami idegen testként
     ült a csontszín háttéren. Az inline stílust a 012-es migráció szedi le,
     és `toc` osztályt tesz a listára; a kinézet innen jön.

     Az osztály a listán van, nem egy külső dobozon: így a szerkesztőben egy
     sima Lista blokk marad (a Haladó → CSS-osztályok mezőben látszik), és a
     kliens tud bele elemet felvenni anélkül, hogy a doboz elromlana.
     ======================================================================== */

  /* ========================================================================
     BEHÚZOTT BEKEZDÉS (.indent)

     Az Elementorból örökölt tartalomban a tagoló felsorolások behúzása
     `style="padding-left: 40px"` inline stílusként ült a bekezdésen — amitől
     a `core/paragraph` blokk érvénytelen (a `save`-je csupasz `<p>`-t ír).
     A 022-es migráció ezért osztályra váltotta: a behúzás mint TAGOLÁS
     megmarad, de a blokk érvényes, és a kliens szerkeszteni tudja.

     Az érték a 40px helyett tokenre áll (--space-10 = 40px): ugyanaz a
     látvány, de a skálán belül marad.
     ======================================================================== */

  .page-body__inner .indent {
    padding-inline-start: var(--space-10);
  }

  .page-body__inner .toc {
    --flow-space: var(--space-6);

    /* A .flow em-alapú ritmusát a lista elemei örökölnék — a doboznak fix
       belső térköz kell, különben a 16px-es lista sorai összecsúsznak. */
    margin-block-end: var(--space-8);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-bg-alt);
    box-shadow: var(--shadow-card);
  }

  /* A `.flow` csak a KÖZVETLEN gyerekeit ritmizálja (`.flow > * + *`), a
     listaelemek tehát nem kapnak tőle térközt — itt kell megadni. */
  .page-body__inner .toc li + li {
    margin-block-start: var(--space-2);
  }

  .page-body__inner .toc li {
    color: var(--color-text);
  }

  .page-body__inner .toc li::marker {
    color: var(--color-primary);
  }

  @media (max-width: 767px) {

    .page-body__inner .toc {
      padding: var(--space-6);
    }
  }

  /* ========================================================================
     DOKUMENTUM-KÁRTYÁK — PDF-listák és rövid hivatkozás-rácsok

     A régi tartalomban a dokumentumtár csupasz `<p><a href="…pdf">` sorokból
     állt. A `the_content` szűrő (inc/content.php) mindegyiket gombbá tette —
     helyesen, hiszen egyedül állnak a blokkjukban —, így a Jegyzőkönyvek
     oldal 30 darab, egymás alatt lógó sárga pillé esett szét: a lap jobb
     kétharmada üresen maradt, a görgetés pedig sosem ért véget. Ugyanez a
     kép az „Év ICF Coacha" évfolyam-listáján.

     Kétféle tartalom, egy formanyelv:
       .doc-card--file  letölthető fájl (PDF ikon elöl, letöltés-nyíl hátul)
       .doc-card        belső oldalra mutató hivatkozás (→ nyíl)

     A rács `auto-fit`, tehát a hasáb szélességétől függ, hány oszlop lesz —
     a hosszú jegyzőkönyv-címeknél kettő, a rövid évszámoknál (--compact)
     négy-öt. Fix oszlopszám itt rossz lenne: ugyanez a komponens szolgálja
     ki mindkét szélsőséget.
     ======================================================================== */

  .page-body__inner .doc-cards {
    --doc-min: 320px;
    --flow-space: var(--space-8);

    display: grid;
    gap: var(--space-4);
  }

  /* Rövid feliratú hivatkozások (évszámok): keskenyebb oszlopok, több fér ki */
  .page-body__inner .doc-cards--compact {
    --doc-min: 210px;
  }

  @media (min-width: 640px) {
    .page-body__inner .doc-cards {
      grid-template-columns: repeat(auto-fit, minmax(min(var(--doc-min), 100%), 1fr));
    }
  }

  /* A kártya MAGA a bekezdés — nincs külön burkoló doboz. Így a
     szerkesztőben sima Bekezdés blokk marad (a Haladó → CSS-osztályok
     mezőben látszik az osztály), és a kliens tud bele írni. */
  .page-body__inner .doc-card {
    --flow-space: 0;

    position: relative;
    isolation: isolate;

    margin: 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-alt);

    transition:
      border-color var(--duration-base) var(--ease),
      box-shadow var(--duration-base) var(--ease),
      transform var(--duration-base) var(--ease);
  }

  .page-body__inner .doc-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
  }

  .page-body__inner .doc-card a {
    display: flex;
    gap: var(--space-3);
    align-items: center;

    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-nav);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    text-decoration: none;

    /* A fájlnevekből örökölt címek hosszúak és tördelhetetlen dátumokat
       hordoznak („2025.02.11.") — enélkül kilógnának a kártyából. */
    overflow-wrap: break-word;
  }

  /* A link kiterítése az egész kártyára */
  .page-body__inner .doc-card a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
  }

  .page-body__inner .doc-card:hover a {
    color: var(--color-primary);
  }

  .page-body__inner .doc-card a:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 4px;
  }

  /* A záró jel a sor VÉGÉN, a szöveg után — `margin-inline-start: auto`
     tolja ki a kártya jobb széléig. Maszkolt SVG, nem karakter: a letöltés
     és a továbblépés két különböző ígéret, és ezt a két ikon mondja el. */
  .page-body__inner .doc-card a::after {
    content: "";
    flex: none;
    margin-inline-start: auto;

    inline-size: 18px;
    block-size: 18px;

    background-color: var(--color-primary);
    mask-image: url("../icons/arrow-right.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    transition: transform var(--duration-base) var(--ease);
  }

  .page-body__inner .doc-card:hover a::after {
    transform: translateX(3px);
  }

  /* --- Letölthető fájl ---------------------------------------------------

     A PDF ikon a cím ELŐTT áll: a lista végigfutásakor az első kérdés nem
     az, hogy „hova visz", hanem hogy „mi ez". Az ikon a `::before`-t nem
     foglalhatja el (az a link kiterítése), ezért a kártyára kerül. */
  .page-body__inner .doc-card--file {
    padding-inline-start: var(--space-12);
  }

  .page-body__inner .doc-card--file::before {
    content: "";
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-5);

    inline-size: 20px;
    block-size: 20px;

    background-color: var(--color-primary);
    mask-image: url("../icons/file-text.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .page-body__inner .doc-card--file a::after {
    mask-image: url("../icons/download.svg");
    block-size: 17px;
    inline-size: 17px;
  }

  .page-body__inner .doc-card--file:hover a::after {
    transform: translateY(2px);
  }

  @media (max-width: 767px) {

    .page-body__inner .doc-card {
      padding: var(--space-4);
    }

    /* A padding és az ikon helye együtt mozog — enélkül az ikon beljebb
       ülne, mint a doboz belső tere. */
    .page-body__inner .doc-card--file {
      padding-inline-start: var(--space-10);
    }

    .page-body__inner .doc-card--file::before {
      inset-inline-start: var(--space-4);
    }
  }

  /* ========================================================================
     JEGYZET-DOBOZ — forrás- és fordítási megjegyzés

     A minősítési dokumentumok élén álló, mindig párban jelentkező megjegyzés
     (angolul + magyarul): mire hivatkozik a szöveg, és mikor készült a
     fordítás. Az Elementorból `background-color: #eeeeee` inline stílussal
     érkezett, ami szürke foltként ült a csontszín háttéren — a lap minden
     más kiemelt doboza fehér. Az inline stílust a 017-es migráció szedi le
     és cseréli `note-box` osztályra; a kinézet innen jön.

     A doboz szándékosan halkabb a törzsszövegnél: nem a lap mondanivalója,
     hanem a forrás megnevezése. A dőlt szedést a tartalom `<i>`-je adja.
     ======================================================================== */

  .page-body__inner .note-box {
    --flow-space: var(--space-6);

    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-bg-alt);

    /* A `.toc` és a kártyák `--shadow-card`-ot kapnak (0 30px 60px), de az
       ott EGY doboz körül lélegzik. Itt a két megjegyzés egymás alatt áll,
       közel: a felső árnyéka ráterült az alsó dobozra, és a kettő közötti
       rés szürke sávnak látszott. Minimális árnyék: a doboz elválik a
       csontszín háttértől, de nem fest maga alá. */
    box-shadow: var(--shadow-sm);

    color: var(--color-text-muted);
    font-size: var(--text-base);
  }

  /* Két egymást követő doboz (az eredeti és a fordítás) közé kevesebb tér
     kell, mint a törzsszöveg és a doboz közé: azok összetartoznak. */
  .page-body__inner .note-box + .note-box {
    --flow-space: var(--space-3);
  }

  @media (max-width: 767px) {

    .page-body__inner .note-box {
      padding: var(--space-5);
    }
  }

  /* ========================================================================
     RESPONSIVE
     ======================================================================== */

  @media (max-width: 1023px) {

    .page-hero {
      padding-block: var(--space-12) var(--space-16);
    }

    .page-hero__title {
      font-size: var(--text-section-title);
    }

    .page-body {
      padding-block: var(--space-6) var(--space-20);
    }
  }

  @media (max-width: 767px) {

    .page-hero__title {
      font-size: 2.125rem;   /* 34px — igazodik a 05-base.css h1-éhez */
    }

    .breadcrumb__list {
      gap: var(--space-1);
    }
  }
}