/* Jelvény-rendszer, 3. szakasz (2026-09-01) — MEGOSZTOTT stílus mindhárom
   felülethez (szakemberprofil sötét hero, szakember-kereső kártya, saját
   dashboard-profil). Minden szelektor `bdg-` előtaggal, a resetek
   `:where()`-be csomagolva NULLA specificitással — a /kozosseg-körben
   talált hiba (`.kv-page a{color:inherit}` felülírta a gomb-színt)
   tanulsága: eleve így kell építeni, nem utólag javítani. */

:where(.bdg, .bdg-more) { cursor: pointer; }

.bdg-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

.bdg{
  --bdg-sz:30px;
  width:var(--bdg-sz);height:var(--bdg-sz);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;flex:0 0 auto;transition:transform .12s;
}
.bdg:hover{transform:translateY(-2px)}
.bdg svg{width:56%;height:56%;display:block;fill:currentColor}
.bdg-role{color:#fff}
.bdg-alapito{background:linear-gradient(135deg,#6CE2F4,#A88FEA 55%,#E080CC);color:#0A0D18!important}
.bdg-moderator{background:#8B6FD6}
.bdg-kurator{background:#1391AB}
.bdg-mentor{background:#C4599F}
.bdg-contrib{background:#E4E9F1;color:#59677F;box-shadow:inset 0 0 0 1px #D3DAE6}
.bdg-bronze{background:#F4E3D1;color:#A96F35;box-shadow:inset 0 0 0 1px #E5C9A9}
.bdg-silver{background:#E8ECF2;color:#7E8899;box-shadow:inset 0 0 0 1px #D3D9E3}
.bdg-gold{background:#F8EECC;color:#B8880F;box-shadow:inset 0 0 0 1px #E9DA9E}

/* Sötét hátterű környezet (szakemberprofil hero, kereső "spot" kártya) —
   a hívó adja rá a `.bdg-on-dark` osztályt a jelvény-sor konténerére. */
.bdg-on-dark .bdg-contrib{background:rgba(255,255,255,.14);color:#DCE3EF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.17)}
.bdg-on-dark .bdg-bronze{background:rgba(212,148,80,.26);color:#E9C094;box-shadow:inset 0 0 0 1px rgba(233,192,148,.32)}
.bdg-on-dark .bdg-silver{background:rgba(150,161,180,.26);color:#D3DAE6;box-shadow:inset 0 0 0 1px rgba(211,218,230,.32)}
.bdg-on-dark .bdg-gold{background:rgba(214,164,40,.26);color:#F0D178;box-shadow:inset 0 0 0 1px rgba(240,209,120,.32)}

.bdg-yr{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:800;background:#141926;color:#fff;
  border-radius:99px;padding:1px 5px;line-height:1.35;letter-spacing:.01em;
}
.bdg-on-dark .bdg-yr{background:#E4E9F1;color:#0A0D18}

.bdg-more{
  width:var(--bdg-sz);height:var(--bdg-sz);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;color:#7C8494;
  border:1px dashed #C6CEDC;background:#fff;flex:0 0 auto;
}
.bdg-on-dark .bdg-more{border-color:rgba(255,255,255,.26);color:#AEB7C9;background:transparent}

/* Tooltip — CSAK olyan eszközön, ahol valódi egeres hover van (nem
   érintőn), a mobil-Safari "beragadt hover" hibája ellen. */
@media (hover:hover) and (pointer:fine) {
  /* A tooltip a BADGE bal széléhez van rögzítve (nem középre, mint korábban)
     — 2026-09-01-i javítás, éles hiba után: a kereső-kártya (260px, a
     jelvény a sor bal szélén) középre-igazított tooltipje a szöveg
     hosszától függően kilógott a kártya bal éléből, a névre csúszva. Ez a
     hiba pontosan a keskeny, korlátozott-szélességű felületeken jelenik
     meg, ahol a jelvény közel van a konténer széléhez — a hero/dashboard
     nagyobb elrendezésén (több hely a jelvény körül) ez korábban sem volt
     észrevehető. Balra rögzített horgony garantálja, hogy a tooltip SOHA
     nem nyúlik a jelvénytől balra — jobbra túlnyúlás elméletileg
     előfordulhat egy nagyon keskeny, jobb szélen lévő jelvénynél, de az
     jóval kisebb kockázat, mint a névre csúszó, félrevezető szöveg. */
  .bdg:before{
    content:attr(data-label);position:absolute;bottom:calc(100% + 9px);left:0;
    background:#0A0D18;color:#fff;font-size:12.5px;font-weight:600;
    padding:5px 11px;border-radius:7px;white-space:nowrap;pointer-events:none;
    opacity:0;transition:opacity .12s;z-index:30;
  }
  .bdg:after{
    content:"";position:absolute;bottom:calc(100% + 4px);left:calc(var(--bdg-sz) / 2);
    transform:translateX(-50%);border:5px solid transparent;border-top-color:#0A0D18;
    opacity:0;transition:opacity .12s;z-index:30;
  }
  .bdg:hover:before,.bdg:hover:after{opacity:1}
}

/* Saját profil (dashboard) — nagy méret, felirattal. */
.bdg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:24px 16px}
.bdg-i{text-align:center}
.bdg-i .bdg{margin:0 auto 11px;display:flex}
.bdg-i strong{display:block;font-size:14.5px;font-weight:650;margin:0 0 2px;letter-spacing:-.01em;color:#141926}
.bdg-i span{display:block;font-size:12.5px;color:#7C8494;line-height:1.4}

/* Részlet-panel — kattintásra nyílik, mindhárom felületen azonos. */
.bdg-pop-overlay{
  position:fixed;inset:0;background:rgba(10,13,24,.35);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.bdg-pop{
  max-width:420px;width:100%;background:#fff;border:1px solid #E1E5EE;border-radius:14px;
  padding:20px 22px;box-shadow:0 14px 40px rgba(20,25,38,.18);
}
.bdg-pop-h{display:flex;gap:14px;align-items:center;margin:0 0 13px}
.bdg-pop-h .bdg{--bdg-sz:42px;cursor:default}
.bdg-pop-h strong{font-size:17px;font-weight:670;letter-spacing:-.015em;display:block;color:#141926}
.bdg-pop-h em{font-style:normal;font-size:13.5px;color:#7C8494}
.bdg-pop p.bdg-crit{margin:0 0 13px;font-size:14.5px;color:#4A5266;line-height:1.55}
.bdg-pop .bdg-meta{font-size:13.5px;color:#7C8494;border-top:1px solid #EDF0F5;
  padding-top:12px;margin:0;line-height:1.75}
.bdg-pop .bdg-meta b{color:#4A5266;font-weight:640}
.bdg-pop-close{position:absolute;top:14px;right:14px;background:none;border:none;
  font-size:20px;line-height:1;color:#7C8494;cursor:pointer;padding:4px}
.bdg-pop{position:relative}