/**
 * brief.css — a „Röviden" nézet közös vizuális rétege.
 *
 * MIÉRT KÜLÖN FÁJL. A Röviden blokkjai (kérdések, folyamat, vezetői kép, lépték, bizonyíték,
 * zárás) partialokban élnek, és a partialok egy részét az Áttekintés és a Részletesen IS
 * használja. Ha a hangolást a partialok saját <style> blokkjába írnánk, a mélyebb nézetek is
 * elmozdulnának. Ezért minden szabály itt van, és minden szabály a `body[data-depth="brief"]`
 * alá van szkópolva: a többi mélység bitre ugyanaz marad.
 *
 * MIÉRT NYER EZ A FÁJL. A partialok <style> blokkjai a <body>-ban vannak, tehát forrásrendben
 * KÉSŐBB, mint ez a <link>. Ezért nem a sorrend dönt, hanem a specificitás: a `body[...] .bjr`
 * (0,2,1) erősebb, mint a partial `.bjr` (0,1,0). Emiatt sehol nincs !important.
 *
 * A CÉL nem „több design", hanem tisztább hierarchia:
 *     MAGYARÁZAT (~80%)  →  VALÓDI TERMÉKKÉPERNYŐ (~120%)  →  KONKLÚZIÓ (~100%)
 * és a másodlagos bizonyíték (~70%) ne nyomja el egyiket sem.
 */

body[data-depth="brief"] {
    /* --- Három szemantikus térköz-szint -------------------------------------------------
       A látható hézag két szomszédos szekció alsó és felső paddingjának ÖSSZEGE, ezért a
       tokenek a hézag felét tartalmazzák. 1440px-en: major ≈ 2×64 = 128px (új fejezet),
       related ≈ 2×44 = 88px (összetartozó rész, pl. képernyő és a hozzá tartozó kitekintés).
       A tintált folyamat-sáv saját belső levegőt kap: az a sáv magassága, nem hézag. */
    --brief-pad-major: clamp(44px, 4.6vw, 64px);
    --brief-pad-related: clamp(30px, 3.2vw, 44px);
    --brief-band-pad: clamp(52px, 6.4vw, 92px);   /* tintált sáv: 104 → 92 (−12%) */
    --brief-pad-tight: clamp(50px, 6.2vw, 88px);  /* kérdésblokk: 104 → 88 (−15%) */
    --brief-gap-within: clamp(22px, 2.2vw, 30px); /* címen/képen/feliraton belül */

    /* --- Termékképernyő ---------------------------------------------------------------
       A Röviden legfontosabb bizonyítéka a valódi felület. Alapértelmezés 880px (a korábbi
       760-hoz képest +16%); márkánként lentebb finomítva. A `min(100%, …)` miatt szűk
       ablakban soha nem lóg ki: a container oldalpaddingja adja a levegőt. */
    --brief-proof-w: 880px;

    /* --- Keret: bizonyíték, nem dekoráció --------------------------------------------
       Halk 1px keret, egységes lekerekítés, alig érzékelhető árnyék. Nincs böngésző-chrome,
       nincsenek Mac-pöttyök, nincs tilt, nincs üveghatás — a termék UI a főszereplő.
       2026-09-20: a keret a KÖZÖS proof-frame tokenekre mutat (modern-design-system.css),
       hogy a Röviden és az Áttekintés bizonyítékai ugyanúgy nézzenek ki. Csak a MÉRET marad
       itt brandenként hangolva — a keret nyelve mindenhol ugyanaz. */
    --brief-frame-radius: var(--proof-radius, 16px);
    --brief-frame-shadow: var(--proof-shadow, 0 18px 46px -34px rgba(16, 30, 54, .42));
}

/* ====================================================================================
   1 · KÉRDÉSBLOKK — felvezetés, nem fő attrakció
   ==================================================================================== */

/* Feszesebb felül, és a folyamat-sáv felé is rövidebb az út: a látogató gyorsabban ér el
   a problémától a modellig. A lista NEM lesz kártyarács, a ritmus marad tipográfiai. */
body[data-depth="brief"] .bq {
    padding-block: var(--brief-pad-tight) var(--brief-pad-major);
}

/* A kérdések közötti hézag enyhén kisebb (34 → 29px 1440-en), hogy egy gondolatsornak
   látsszanak, ne külön állításoknak. */
body[data-depth="brief"] .bq-list {
    gap: clamp(18px, 2.4vw, 29px);
}

/* A halk sorszám maradjon halk, de ne tűnjön el a fókuszon kívüli sorokban sem. */
body[data-depth="brief"] .bq-num {
    opacity: .62;
}

/* ====================================================================================
   2 · FOLYAMAT-SÁV — legyen világos magyarázó fejezet, de ne az oldal leghangosabb eleme
   ==================================================================================== */

/* A teljes szélességű pasztell sáv mint közös vizuális nyelv MARAD. Csak a telítettségét
   vesszük vissza ~15%-kal (a tintát ennyivel keverjük a lap háttere felé), és a sáv
   magasságából is lejön ~12%. A cím, a lépések olvashatósága és az accent pöttyök
   érintetlenek — a sáv nem lesz halványabb OLVASNI, csak halkabb LÁTNI. */
body[data-depth="brief"] .bjr {
    padding-block: var(--brief-band-pad);
    background: color-mix(in srgb, var(--bg-tint-current) 85%, var(--bg-primary, #fff));
}

/* Régebbi motorokon a color-mix nem fut le; ott az eredeti tint marad — az sem hibás állapot. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    body[data-depth="brief"] .bjr { background: var(--bg-tint-current); }
}

/* ====================================================================================
   3 · TERMÉKKÉPERNYŐ — a Röviden csúcspontja
   ==================================================================================== */

/* MEGJEGYZÉS a szomszédsági szelektorokhoz: a partialok a saját <style> blokkjukat a
   szekciójuk ELÉ írják, tehát a DOM-ban két szekció között mindig van egy <style> elem.
   Emiatt a `.bjr + .lview` típusú szabályok SOHA nem illeszkednének. A sorrend viszont
   márkánként determinisztikus, ezért a kapcsolódást a fókuszra szkópolva mondjuk ki —
   ez egyben olvashatóbb is: látszik, melyik márkánál mi követ mit.

   Alapértelmezett sorrend (hat márka):
       folyamat-sáv → KÉPERNYŐ → lépték → (másodlagos bizonyíték) → zárás
   A képernyő a tintált sáv után áll, ami már adott levegőt, és a lépték hozzá tartozik,
   tehát mindkét oldalon a szorosabb térköz a helyes. */
body[data-depth="brief"] .lview {
    padding-block: var(--brief-pad-related);
}

/* onePerformance kivétel: ott a léptékek a kép ELŐTT állnak, és a kép után rögtön a zárás
   jön — a képernyő tehát alul teljes fejezethatárt kap, felül szorosat. */
body[data-depth="brief"][data-focus="performance"] .lview {
    padding-block: var(--brief-pad-related) var(--brief-pad-major);
}
body[data-depth="brief"][data-focus="performance"] .bpf {
    padding-block: var(--brief-pad-major) var(--brief-pad-related);
}

/* A kép mérete: egyetlen közös logika, márkánként hangolt kerettel. */
body[data-depth="brief"] .lview--solo .lview-grid {
    max-width: var(--brief-proof-w);
    width: min(100%, var(--brief-proof-w));
}

body[data-depth="brief"] .lview-fig {
    border-radius: var(--brief-frame-radius);
    box-shadow: var(--brief-frame-shadow);
}

/* ====================================================================================
   4 · FELIRAT → ZÁRÓGONDOLAT hierarchia
   ==================================================================================== */

/* Ahol van zárógondolat, ott a felirat másodlagos sor: kisebb, halkabb, közvetlenül a kép
   alatt. Ahol NINCS (a hub vezetői képe), ott a felirat maga a zárás — azt nem halkítjuk. */
body[data-depth="brief"] .lview--has-closer .lview-cap {
    font-size: .95rem;
    color: var(--text-secondary, #5a6678);
    padding: 15px 20px 17px;
}

/* Felirat és zárógondolat között ~28px — elválik, de összetartozik. */
body[data-depth="brief"] .lview-closer {
    margin-top: 28px;
    font-weight: 600;
    font-size: clamp(1.08rem, 1.9vw, 1.32rem);
}

/* ====================================================================================
   5 · LÉPTÉK ÉS MÁSODLAGOS BIZONYÍTÉK
   ==================================================================================== */

body[data-depth="brief"] .bsc {
    padding-block: var(--brief-pad-related) var(--brief-pad-major);
}

body[data-depth="brief"] .bpf {
    padding-block: var(--brief-pad-major);
}

body[data-depth="brief"] .bcl {
    padding-block: var(--brief-pad-major) clamp(64px, 7vw, 100px);
}

/* ====================================================================================
   6 · MÁRKA-SPECIFIKUS ELTÉRÉSEK
   A közös rendszer mellett ezek szándékos különbségek, nem kivételkezelés.
   ==================================================================================== */

/* --- onePerformance: a kompetencia-képernyő fontos bizonyíték, kapjon +22%-ot. */
body[data-depth="brief"][data-focus="performance"] { --brief-proof-w: 930px; }

/* --- oneTiming: a keretmonitor a Röviden zászlóshajója, +22%. */
body[data-depth="brief"][data-focus="timing"] { --brief-proof-w: 930px; }

/* --- oneDashboard: itt maga a vezetői rálátás a termékélmény. A kép 860px széles, de
       mivel közel négyzetes, TERÜLETBEN messze a legnagyobb a hét Röviden közül — pont
       ezt akartuk, anélkül hogy a lap arányai elborulnának. */
body[data-depth="brief"][data-focus="dashboard"] { --brief-proof-w: 860px; }

/* --- oneDox: a dolgozói inbox egyszerűbb felület, itt elég a szerényebb növekedés. */
body[data-depth="brief"][data-focus="document"] { --brief-proof-w: 850px; }

/* onePerformance — „Nem kell hozzá nagy HR-projekt”
   A három példa eddig három egyforma, halk kártya volt. Most skálaspektrum: a ritmus
   (eyebrow-méret, bal akcentus-sáv vastagsága, tintáltság) balról jobbra erősödik, így
   ránézésre látszik, hogy UGYANAZ a mechanika nő, nem három csomag közül lehet válogatni.
   Szándékosan nincs ikon, nincs sorszám, nincs árazás-jelleg. */
body[data-depth="brief"][data-focus="performance"] .bpf-cards {
    align-items: stretch;           /* közös alapvonal: a kártyák egyforma magasak */
}
body[data-depth="brief"][data-focus="performance"] .bpf-card {
    position: relative;
    padding-left: 24px;
    background: color-mix(in srgb, var(--bg-tint-current) var(--bpf-step-tint, 0%), var(--bg-primary, #fff));
}
/* a bal oldali akcentus-sáv a három példán át vastagszik */
body[data-depth="brief"][data-focus="performance"] .bpf-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--bpf-step-rule, 2px);
    border-radius: 14px 0 0 14px;
    background: var(--accent-current);
    opacity: var(--bpf-step-op, .3);
}
body[data-depth="brief"][data-focus="performance"] .bpf-card:nth-child(1) { --bpf-step-rule: 2px; --bpf-step-op: .28; --bpf-step-tint: 0%; }
body[data-depth="brief"][data-focus="performance"] .bpf-card:nth-child(2) { --bpf-step-rule: 3px; --bpf-step-op: .5;  --bpf-step-tint: 30%; }
body[data-depth="brief"][data-focus="performance"] .bpf-card:nth-child(3) { --bpf-step-rule: 4px; --bpf-step-op: .78; --bpf-step-tint: 60%; }

/* a lépték maga (5 egység · félévente · havonta) legyen a kártya kulcsinformációja,
   ne egy aprócska verzálcímke a név alatt */
body[data-depth="brief"][data-focus="performance"] .bpf-size {
    font-family: inherit;
    font-size: .86rem;
    letter-spacing: .01em;
    text-transform: none;
    font-weight: 600;
    color: var(--accent-current);
    margin: 3px 0 10px;
}

/* --- oneSolution: „Kicsiben egyszerű. Nagyban is ugyanaz a rendszer.”
   A két pólust nem új tartalom választja el, hanem az arány: a bal hasáb keskenyebb és
   halkabb akcentust kap, a jobb szélesebbet és erősebbet. Két másodperc alatt leolvasható,
   hogy ugyanarról van szó, csak nagyobb léptékben. */
@media (min-width: 721px) {
    body[data-depth="brief"][data-focus="solution"] .bsc-cols {
        grid-template-columns: .86fr 1.14fr;
        align-items: start;
    }
}
body[data-depth="brief"][data-focus="solution"] .bsc-col p:not(.bsc-eyebrow) {
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--text-primary, #16202e);
}
body[data-depth="brief"][data-focus="solution"] .bsc-col:first-child {
    border-top-color: color-mix(in srgb, var(--accent-current) 45%, transparent);
}
body[data-depth="brief"][data-focus="solution"] .bsc-col:first-child p:not(.bsc-eyebrow) {
    font-size: 1.02rem;
    color: var(--text-secondary, #5a6678);
}
/* A kisebb pólus felirata is halkabb egy fokkal — ugyanaz a progresszió, mint a vonalnál. */
body[data-depth="brief"][data-focus="solution"] .bsc-col:first-child p.bsc-eyebrow {
    color: color-mix(in srgb, var(--accent-current) 72%, var(--text-muted, #8a94a6));
}

/* --- oneDox: az alsó haszon-sáv ne váljon újabb fő fejezetté.
   Tartalmilag minden marad — csak lejjebb kerül a vizuális hierarchiában a dokumentumút
   és a képernyő-bizonyíték alá: szorosabb sáv, halkabb kulcsszavak, könnyebb kártyák. */
body[data-depth="brief"][data-focus="document"] .bpf {
    /* A teljes szürke sáv még egy fokkal alacsonyabb (−13%), hogy a oneDox teljes hossza és
       ritmusa beálljon a testvérei közé: ott is egy állomás legyen, ne kettő. */
    padding-block: clamp(26px, 2.8vw, 38px);
}
/* A három kulcsszó és a két referencia EGY régió, nem két egymás utáni blokk: a köztük lévő
   térköz kisebb, mint a sáv saját paddingja, ezért egyetlen klaszterként olvasódnak. */
body[data-depth="brief"][data-focus="document"] .bpf-stats {
    margin-bottom: clamp(18px, 2vw, 24px);
    gap: clamp(14px, 2vw, 26px);
}
body[data-depth="brief"][data-focus="document"] .bpf-value {
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    font-weight: 700;
}
body[data-depth="brief"][data-focus="document"] .bpf-label {
    font-size: .86rem;
}
body[data-depth="brief"][data-focus="document"] .bpf-card {
    padding: 16px 18px;
    background: transparent;
    border-color: color-mix(in srgb, var(--border-light, #e6eaf0) 70%, transparent);
}
body[data-depth="brief"][data-focus="document"] .bpf-note {
    font-size: .9rem;
}

/* --- oneLearning: a 2002 / 25 év / 3 000 000+ SZÁNDÉKOSAN másodlagos bizonyíték.
   Nem erősítjük fel, csak a sáv térközét hozzuk a közös ritmusra. */

/* ====================================================================================
   7 · RESPONSIVE
   ==================================================================================== */

@media (max-width: 767px) {
    /* Mobilon a képernyő a rendelkezésre álló teljes szélesség — a container oldalpaddingja
       adja a levegőt. Vízszintes görgetés semmilyen méretnél nem keletkezhet. */
    body[data-depth="brief"] .lview--solo .lview-grid {
        width: 100%;
        max-width: 100%;
    }
    /* A kisebb képernyőn a sűrítés kevésbé kell: ott a görgetés amúgy is tagol. */
    body[data-depth="brief"] .bq-list { gap: 22px; }
}

/* ====================================================================================
   8 · MOZGÁS
   A keret nem mozog, nem emelkedik, nem billen. Aki csökkentett mozgást kért, semmit nem
   veszít — a tartalom megértéséhez sehol nincs szükség hoverre.
   ==================================================================================== */

@media (prefers-reduced-motion: reduce) {
    body[data-depth="brief"] .lview-fig { transition: none; }
}
