/* ══════════════════════════════════════════════════════════════════════════
   fpe-eloszto.css — ELOSZTÓ-RÉTEG (Sprint 1, 2026-08-05)

   HOL:  kizárólag a HVCO10_Koltsegvetes.html tölti be.
   MIT:  a wizard 4. lapjának végén álló „továbbvezetés" blokk megjelenése.
   PÁR:  fpe-eloszto.js (viselkedés)

   🔴 ADDITÍV RÉTEG. Egyetlen korábbi réteg (fpe-temak, fpe-ui2b/2c/2d,
      fpe-ui3, fpe-ui4, fpe-arany, fpe-nagyitas) egyetlen szabályát sem írja
      felül: minden szelektora a saját, új `.fpe-eloszto*` névtérben van.

   🔴 MIÉRT NEM `.fpe-szint-3` (arany keret): a 39-es fájl 2.7 pontja szerint
      az arany keret azt jelenti, „EZ A DÖNTÉS". Ezek viszont OPCIÓK — a
      látogató dönti el, megnézi-e. Ezért a blokk a 39-es fájl 1. SZINTJÉNEK
      nyelvét beszéli: nincs kártya-króm, nincs háttér, nincs glow. A
      hierarchiát egyetlen vékony vonal és a kártyák bal oldali accent-sávja
      adja.

   🔴 MIÉRT TÉR EL A KALKULÁTOR EREDMÉNY-DOBOZAITÓL: a `.big-result` és az
      `.insight-box` / `.success-box` mind SZÍNEZETT HÁTTERŰ, teli keretes
      doboz (piros/zöld tinttel). Ez a réteg átlátszó hátterű, és a keret is
      csak a semleges `--border-subtle`. Ránézésre nem eredmény, hanem út.

   ⚠️ MOZGÁS: ez a fájl NULLA `animation`-t és NULLA `transition`-t deklarál.
      A `prefers-reduced-motion` blokk lent ezért csak védőháló (ha egy
      későbbi kör mégis mozgást tenne ide, az itt kiesik).
      MEGJEGYZÉS: a lap saját `.page{animation:fadeIn .3s}` szabálya ennél a
      körnél VÁLTOZATLAN maradt — az mind az 5 wizard-lapra vonatkozik, nem
      csak erre a blokkra, ezért kívül esik ezen a körön (lásd a 62-es log
      7. pontját).
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. A BLOKK KERETE ──────────────────────────────────────────────────── */

.fpe-eloszto {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08));
}

/* A `hidden` attribútum a viselkedés hordozója (fpe-eloszto.js). Explicit
   szabály kell hozzá, mert a böngésző alapértelmezett `[hidden]{display:none}`
   szabályát bármelyik későbbi `display` deklaráció leverné. */
.fpe-eloszto[hidden],
.fpe-eloszto-kartya[hidden] { display: none !important; }

.fpe-eloszto-fej { margin-bottom: 14px; }

.fpe-eloszto-cimke {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent, #3498db));
  margin-bottom: 8px;
}

.fpe-eloszto-cim {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary, #fff);
  margin: 0 0 8px;
}

.fpe-eloszto-lead {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted, #a3abb9);
  margin: 0;
}


/* ── 2. A KÁRTYÁK ───────────────────────────────────────────────────────── */

.fpe-eloszto-lista {
  display: grid;
  grid-template-columns: 1fr;   /* egy oszlop mindenhol — lásd a fájl végét */
  gap: 12px;
}

.fpe-eloszto-kartya {
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  border-left: 3px solid var(--accent, #3498db);
  border-radius: 10px;
  padding: 14px 16px;
}

.fpe-eloszto-kartya-cim {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-secondary, #aeb4c9);
  margin: 0 0 10px;
}


/* ── 3. A LINKEK — 44 px-es TAP-TERÜLET (kötelező, 61-es prompt 6. pont) ── */

.fpe-eloszto-linkek {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fpe-eloszto-linkek > li { margin: 0; padding: 0; }

.fpe-eloszto-linkek a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* ← a kötelező tap-terület */
  padding: 10px 14px;
  max-width: 100%;
  border: 1px solid var(--border, rgba(41,128,185,.25));
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--accent-text, var(--accent, #3498db));
  text-decoration: none;
}

.fpe-eloszto-linkek a:hover,
.fpe-eloszto-linkek a:focus-visible {
  border-color: var(--accent-text, var(--accent, #3498db));
  text-decoration: underline;
}

/* A lap sehol máshol nem ír fókusz-gyűrűt; a billentyűs használhatóság
   viszont enélkül ezeken a linkeken múlna, ezért itt megadjuk. */
.fpe-eloszto-linkek a:focus-visible {
  outline: 2px solid var(--accent-text, var(--accent, #3498db));
  outline-offset: 2px;
}


/* ── 4. KESKENY KÉPERNYŐ ────────────────────────────────────────────────── */

/* 320 px-en a tartalom-oszlop 288 px (.app 16 px padding). A kártya-padding
   és a bal sáv után 253 px marad a chipeknek; a leghosszabb felirat ennél
   keskenyebb, de a hosszú összetett szavak tördelése biztosításként kell,
   hogy soha ne keletkezzen vízszintes túlcsordulás. */
@media (max-width: 400px) {
  .fpe-eloszto-linkek a {
    padding: 10px 12px;
    overflow-wrap: break-word;
  }
  .fpe-eloszto-kartya { padding: 13px 14px; }
}


/* ── 5. 125%-OS ALAPNÉZET 1200 px FÖLÖTT ────────────────────────────────

   A `fpe-nagyitas.css` (2026-08-03) GENERÁLT fájl: a mostani DOM-ból állt
   elő, ezért ezt az új blokkot nem ismerheti. Enélkül 1200 px fölött a lap
   minden más szövege 125%-on állna, ez a blokk viszont alapméreten — a
   képernyőn azonnal látszó törés, épp az 1440 px-es referencianézetben.

   Ezért a réteg SAJÁT SKÁLÁZÁST hoz, pontosan a 03-i kör konvenciójával:
   kizárólag `font-size` / `padding` / `gap` / `line-height`, `calc(… * 1.25)`
   alakban. Színt, keretet, árnyékot, és a `min-height: 44px` tap-területet
   NEM írja (a generált réteg sem ír ilyet — a 44 px marad 44 px).
   A generált fájlt egyetlen bájttal sem módosítottuk.
   ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1200px) {
  .fpe-eloszto        { padding-top: calc(20px * 1.25); }
  .fpe-eloszto-cimke  { font-size: calc(10px * 1.25); }
  .fpe-eloszto-cim    { font-size: calc(17px * 1.25); }
  .fpe-eloszto-lead   { font-size: calc(13px * 1.25); }
  .fpe-eloszto-lista  { gap: calc(12px * 1.25); }
  .fpe-eloszto-kartya { padding: calc(14px * 1.25) calc(16px * 1.25); }
  .fpe-eloszto-kartya-cim { font-size: calc(13.5px * 1.25); }
  .fpe-eloszto-linkek { gap: calc(8px * 1.25); }
  .fpe-eloszto-linkek a {
    font-size: calc(13px * 1.25);
    padding: calc(10px * 1.25) calc(14px * 1.25);
  }
}


/* ── 6. MOZGÁS-VÉDŐHÁLÓ ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fpe-eloszto,
  .fpe-eloszto * {
    animation: none !important;
    transition: none !important;
  }
}


/* ── 7. AMIT SZÁNDÉKOSAN NEM CSINÁL EZ A FÁJL ───────────────────────────

   - NINCS többoszlopos rács szélesebb nézetben sem. Egyszerre legfeljebb
     3 kártya látszik, mindegyikben 2-3 link; egy 760 px-es oszlopban a
     rács csak összenyomná a chipeket, és 44 px alá vinné a tap-területet.
   - NINCS `@media print` szabály. A nyomtatás-gomb a 2. lapon áll, onnan
     a `.page.active` miatt ez a blokk nem is kerül a papírra; egy külön
     rejtés csak látszat-teljesség lenne.
   - NINCS saját színdeklaráció, csak tokenek. Így ha a paletta változik,
     ez a réteg vele mozdul, és nem esik ki a bemért AA-ból.
   ────────────────────────────────────────────────────────────────────── */