/* ============================================================================
 * MelóPont — gömbös adat-megjelenítés (ORBS-ONE-01, 2026.10.13) — a js/mp-orbs.js párja
 * EGY stílus minden gömbös számsorhoz (Statisztikák, céges „Álláshirdetéseid elérése”, Kapcsolati háló).
 * Előtag: mp-orb-. Szín: --orb-c (alap: a néző szerepkör-színe, --mp-role); állapot-színhez a hívó
 * állítja (pl. a háló: --orb-c: var(--nw-c)). Minden méret a betűméret-szorzóval nő (FONT-SCALE-01).
 * ========================================================================== */
.mp-orbs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none;
  --orb-col: calc(64px * var(--mp-fs, 1)); }
.mp-orb-step { position: relative; display: grid; grid-template-columns: var(--orb-col) minmax(0, 1fr); column-gap: 14px; align-items: center;
  min-height: calc(72px * var(--mp-fs, 1)); }
.mp-orbs--list .mp-orb-step { min-height: calc(60px * var(--mp-fs, 1)); }
/* összekötő vonal (csak az útnál) — lépésenként két félből, így eltérő sormagasságnál sem szakad */
.mp-orbs--path .mp-orb-step::before, .mp-orbs--path .mp-orb-step::after { content: ''; position: absolute; left: calc(var(--orb-col) / 2 - 2px); width: 4px; z-index: 0;
  background: color-mix(in srgb, var(--mp-role, #0A66C2) 30%, var(--mp-surface-1, #FFFFFF)); }
.mp-orbs--path .mp-orb-step::before { top: 0; height: 50%; }
.mp-orbs--path .mp-orb-step::after { top: 50%; bottom: 0; }
.mp-orbs--path .mp-orb-step:first-child::before, .mp-orbs--path .mp-orb-step:last-child::after { display: none; }
.mp-orb-w { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--orb-col); }
.mp-orb { --orb-c: var(--mp-role, #0A66C2);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 999px; padding: 0 6px;
  font-size: calc(18px * var(--mp-fs, 1)); font-weight: 800; line-height: 1; letter-spacing: -.3px; font-variant-numeric: tabular-nums;
  min-width: calc(40px * var(--mp-fs, 1)); height: calc(40px * var(--mp-fs, 1));
  color: var(--mp-text-primary, #1D2939); border: 3px solid var(--orb-c);
  background: color-mix(in srgb, var(--orb-c) 12%, var(--mp-surface-1, #FFFFFF));
  box-shadow: 0 0 0 4px var(--mp-surface-1, #FFFFFF); }
.mp-orb--s2 { min-width: calc(46px * var(--mp-fs, 1)); height: calc(46px * var(--mp-fs, 1)); }
.mp-orb--s3 { min-width: calc(52px * var(--mp-fs, 1)); height: calc(52px * var(--mp-fs, 1)); font-size: calc(19px * var(--mp-fs, 1)); }
.mp-orb--s4 { min-width: calc(60px * var(--mp-fs, 1)); height: calc(60px * var(--mp-fs, 1)); font-size: calc(20px * var(--mp-fs, 1)); }
.mp-orb.is-last { background: var(--orb-c); border-color: var(--orb-c); color: var(--mp-white, #FFFFFF); }
.mp-orb.is-muted { border-color: var(--mp-line-1, #D8DEE6); }
.mp-orb.is-zero { color: var(--mp-text-muted, #5B6676); border-color: var(--mp-line-1, #D8DEE6); background: var(--mp-surface-2, #F6F8FB); }
.mp-orb-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 0; }
.mp-orb-tx strong { font-size: calc(16px * var(--mp-fs, 1)); font-weight: 800; line-height: 1.35; color: var(--mp-text-primary, #1D2939); overflow-wrap: anywhere; }
.mp-orb-desc { font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.4; color: var(--mp-text-secondary, #2B3340); }

/* PILL-FIT-01 (10.14): nagy betűnél keskeny helyen a gömb oszlopa ne egye el a szöveg helyét — mérve 320 px-en, 150 %-on
   a „alkalommal” szó betűnként tört a 96 px-es gömb-oszlop mellett */
@media (max-width: 480px) {
  html[data-mp-fs="1.3"] .mp-orbs, html[data-mp-fs="1.5"] .mp-orbs { --orb-col: calc(44px * var(--mp-fs, 1)); }
  html[data-mp-fs="1.3"] .mp-orb-step, html[data-mp-fs="1.5"] .mp-orb-step { column-gap: 10px; }
  html[data-mp-fs="1.3"] .mp-orb, html[data-mp-fs="1.5"] .mp-orb { min-width: calc(34px * var(--mp-fs, 1)); height: calc(34px * var(--mp-fs, 1)); font-size: calc(15px * var(--mp-fs, 1)); border-width: 2px; }
  html[data-mp-fs="1.3"] .mp-orb:is(.mp-orb--s2, .mp-orb--s3, .mp-orb--s4), html[data-mp-fs="1.5"] .mp-orb:is(.mp-orb--s2, .mp-orb--s3, .mp-orb--s4) { min-width: calc(40px * var(--mp-fs, 1)); height: calc(40px * var(--mp-fs, 1)); font-size: calc(16px * var(--mp-fs, 1)); }
  html[data-mp-fs="1.3"] .mp-orb-tx strong, html[data-mp-fs="1.5"] .mp-orb-tx strong { overflow-wrap: break-word; hyphens: auto; }
  html[data-mp-fs="1.3"] .mp-orb-desc, html[data-mp-fs="1.5"] .mp-orb-desc { overflow-wrap: break-word; hyphens: auto; }
}
@media (max-width: 360px) {
  html[data-mp-fs="1.3"] .mp-orb-tx strong, html[data-mp-fs="1.5"] .mp-orb-tx strong { font-size: calc(13.5px * var(--mp-fs, 1)); }
  html[data-mp-fs="1.3"] .mp-orb-desc, html[data-mp-fs="1.5"] .mp-orb-desc { font-size: calc(13px * var(--mp-fs, 1)); }
}