/* ============================================================================
 * MelóPont — Munkalehetőségek (kereses.html) · v2 dizájn (2026.09.30)
 * ----------------------------------------------------------------------------
 * A kék kereső-fejléc a css/search-hero.css-ben, a lista-elrendezés (szűrősáv,
 * találat-fejléc, gombok, üres állapot, csontváz) a css/browse.css-ben van —
 * ugyanaz, mint a Böngészésé. Itt csak az álláskártya és a kis eltérések.
 * Tokenek: --mp-* (melopont-style.css), --br-* (search-hero.css / browse.css).
 * Minimum betűméret 13px.
 * ========================================================================== */
:root {
  --jb-urgent-bg: #FFF1E6;
  --jb-urgent-text: #9A3412;
}

/* A szűrők itt a sáv teljes szélességét kitöltik (nincs „Kit keresel?” kapcsoló) */
.jb-page .jb-filters { justify-content: flex-start; }
.jb-page .jb-filters .br-field { max-width: none; flex: 1 1 180px; }

/* Aktív kategória-chip: telt sötétkék, fehér felirat */
.br-hero .br-chip--solid[aria-pressed="true"] { background: var(--br-chip-text); border-color: var(--br-chip-text); color: var(--mp-white); }
.br-hero .br-chip--solid[aria-pressed="true"] span,
.br-hero .br-chip--solid[aria-pressed="true"] svg { color: var(--mp-white); }

/* ── Álláskártya ── */
.jb-grid { grid-template-columns: minmax(0, 1fr); }   /* STACK-01 (10.12, László: „ahol egymás mellett vannak a kártyák, legyenek egymás alatt”) */
.jb-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: var(--mp-white); border: 1px solid var(--mp-card-border); border-radius: var(--br-radius);
  box-shadow: var(--br-shadow-card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
  animation: br-in .25s ease-out both;
}
.jb-card:hover { transform: translateY(-3px); box-shadow: var(--br-shadow-hover); border-color: transparent; }
.jb-head { display: flex; align-items: flex-start; gap: 12px; }
.jb-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-blue-light); color: var(--mp-blue);
}
.jb-icon svg { width: 22px; height: 22px; }
.jb-head-text { min-width: 0; flex: 1; }
.jb-page .jb-card a.jb-title {
  display: block; font-size: calc(18px * var(--mp-fs, 1)); font-weight: 800; line-height: 1.25; letter-spacing: -.2px;
  color: var(--mp-text-primary); text-decoration: none; word-break: break-word;
}
.jb-page .jb-card a.jb-title:hover { color: var(--mp-blue); text-decoration: none; }
.jb-page .jb-category { margin-top: 2px; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); }
.jb-page .jb-urgent {
  flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700;
  background: var(--jb-urgent-bg); color: var(--jb-urgent-text);
}
.jb-page .jb-desc {
  font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.55; color: var(--mp-text-primary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.jb-card .br-facts { margin-top: 0; }

/* CARD-INFO-01: tagolt leírás-előnézet — bevezető + a feladatok első két pontja gömbökkel */
.jb-brief { display: flex; flex-direction: column; gap: 10px; }
.jb-page .jb-desc--intro { -webkit-line-clamp: 2; }
.jb-tasks {
  padding: 10px 14px 12px; border-radius: 12px;
  background: var(--mp-surface-2, #F6F8FB); border: 1px solid var(--mp-line-2, #E4E8EE);
}
.jb-page .jb-tasks-h {
  margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: calc(14px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-text-primary);
}
.jb-page .jb-tasks-n {
  padding: 0 8px; border-radius: 999px; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600;
  background: var(--mp-surface-1, #FFFFFF); border: 1px solid var(--mp-line-2, #E4E8EE); color: var(--mp-text-muted);
}
.jb-tasks .jb-orbs { margin: 0; }
.jb-page .jb-tasks .jb-orbs .mp-orb-li-t { font-weight: 500; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45; }
.jb-page .jb-tasks-more { display: inline-block; margin-top: 4px; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-role, #0A66C2); }

/* CARD-INFO-01: a cég válaszideje (3+ megválaszolt jelentkezéstől) */
.jb-page .jb-reply {
  display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 0;
  font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.4; color: var(--mp-text-muted);
}
.jb-reply svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.jb-page .jb-reply strong { display: block; color: var(--mp-text-primary); font-weight: 700; }
.jb-page .jb-reply-b { display: block; color: var(--mp-text-muted); }
.jb-reply--fast svg { color: var(--mp-st-ok-ink, #057642); }
.jb-poster {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  padding-top: 10px; border-top: 1px solid var(--mp-card-border); font-size: calc(14px * var(--mp-fs, 1));
}
.jb-poster-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jb-page .jb-poster-name { font-weight: 700; color: var(--mp-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-page .jb-poster-time { color: var(--mp-text-muted); min-width: 0; max-width: 100%; }
.jb-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(14px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-white);
  background: linear-gradient(135deg, var(--br-company-from), var(--br-company-to));
}
.jb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.jb-card mark { background: var(--br-mark-bg); color: inherit; border-radius: 3px; padding: 0; }
.jb-card .br-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) { .jb-card { animation: none; } .jb-card:hover { transform: none; } }
@media (max-width: 520px) {
  .jb-grid { grid-template-columns: minmax(0, 1fr); }
  .jb-page .jb-filters.br-filters { grid-template-columns: minmax(0, 1fr); }
}

/* AI-COVER-01 (10.06): „Jelentkezési üzenet AI-val” útmutató (?ai=cover) */
.jb-aicover {
  background: var(--mp-blue-light); border: 1px solid var(--mp-card-border);
  padding: 16px 18px; margin: 0 0 16px; color: var(--mp-text-primary);
}
.jb-aicover-head { display: flex; align-items: center; gap: 10px; color: var(--mp-blue); }
.jb-aicover-head h2 { flex: 1; margin: 0; font-size: calc(17px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-text-primary); }
.jb-aicover-x {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: transparent; color: var(--mp-text-muted); cursor: pointer;
}
.jb-aicover-x:hover, .jb-aicover-x:focus-visible { background: var(--mp-white); color: var(--mp-text-primary); }
.jb-aicover-steps { margin: 10px 0 0; padding-left: 22px; font-size: calc(15px * var(--mp-fs, 1)); line-height: 1.55; }
.jb-aicover-steps li + li { margin-top: 4px; }

/* JOB-CARD-APPLY-01 (10.06): „Jelentkezem” + „Részletek” a munka-kártyán */
.jb-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.jb-card .jb-actions .br-btn { width: auto; }
.jb-card .jb-apply { font-size: calc(15px * var(--mp-fs, 1)); }
.jb-applied {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  border-radius: 12px; background: var(--mp-green-light); color: var(--mp-green-dark); font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700;
}
.jb-applied svg { width: 16px; height: 16px; }
/* DELIVERY-01 (10.08): jelentkezés állapota a kártyán — elküldve a cégnek, megnézte, válasz */
.jb-applied-box {
  display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px;
  background: var(--mp-st-ok-bg); border: 1px solid var(--mp-st-ok-line);
}
.jb-applied-box .jb-applied { justify-self: start; min-height: 0; padding: 0; background: none; font-size: calc(15px * var(--mp-fs, 1)); }
.jb-applied-line, .jb-applied-next { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45; color: var(--mp-text-primary); }
.jb-applied-line strong { color: var(--mp-green-dark); }
.jb-applied-next { color: var(--mp-text-muted); }
.jb-applied-box.is-good .jb-applied-next { color: var(--mp-st-ok-ink); font-weight: 700; }
.jb-applied-box.is-todo .jb-applied-next { color: var(--mp-st-todo-ink); font-weight: 700; }
/* SIGNS-01: elutasított jelentkezés = LEZÁRULT (szilva állapot-fül + szöveg; EDGE-TAB-01) */
.jb-applied-box.is-closed { background: var(--mp-st-closed-bg); border-color: var(--mp-st-closed-line); --mp-edge: var(--mp-st-closed-bar); }
.jb-applied-box.is-closed .jb-applied-next { color: var(--mp-st-closed-ink); font-weight: 700; }
.jb-applied-box .br-btn { justify-self: start; width: auto; }
.jb-demo-note { margin: 0; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); }
.jb-deadline { display: inline-flex; align-items: center; gap: 6px; font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-text-muted); }
.jb-deadline svg { width: 16px; height: 16px; }
.jb-deadline--soon { color: var(--mp-orange-text); font-weight: 700; }

/* FONT-SCALE-02 (10.11): nagy betűnél a „Jelentkezem” + „Részletek” nem fér egy sorba telefonon → egymás alá */
.jb-actions { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 480px) {
  html[data-mp-fs="1.3"] .jb-actions, html[data-mp-fs="1.5"] .jb-actions { grid-template-columns: minmax(0, 1fr); }
  html[data-mp-fs="1.3"] .jb-card .jb-actions .br-btn, html[data-mp-fs="1.5"] .jb-card .jb-actions .br-btn { width: 100%; }
}

/* NEAR-CHIPS-01 (2026.10.27, László: „ugyanezt a címkés kártya-stílust a Munkalehetőségek kártyáira is”):
   a kártya adatai a közelben-kártyák címkéivel (.mp-na-chip, css/job-alert.css) — itt a szín a NÉZŐ szerepköre.
   A régi kiemelt bér-sáv (.jb-pay) helyett zöld bér-címke a sor elején; a határidő is címke. */
.jb-card { --na-c: var(--mp-role, #0A66C2); --na-c-dk: var(--mp-role-hover, #004182); --na-soft: var(--mp-tint-role, #EEF5FD); }
.jb-page .jb-chips { margin: 0; }
.jb-page .jb-chip-pay strong { font-weight: 800; }
.jb-page .jb-chip-nopay { color: var(--mp-text-muted, #5B6676); font-weight: 600; }
.jb-page .mp-na-chip.jb-deadline { font-weight: 600; color: var(--mp-text-primary, #191919); }
.jb-page .mp-na-chip.jb-deadline--soon {
  background: var(--mp-st-todo-bg, #FDF1DE); border-color: var(--mp-st-todo-line, #F2CF9B); color: var(--mp-st-todo-ink, #8A4204); font-weight: 700;
}
.jb-page .mp-na-chip.jb-deadline--soon svg { color: var(--mp-st-todo-ink, #8A4204); }
.jb-page .mp-na-chip svg { width: 16px; height: 16px; }
/* a gombsor halvány sávon, a kártya aljához simulva — mint a közelben-kártyákon */
.jb-page .jb-card .jb-actions {
  margin: 4px -18px -18px; padding: 12px 18px 14px;
  background: var(--mp-surface-2, #F6F8FB); border-top: 1px solid var(--mp-line-2, #E3E8EF);
  border-radius: 0 0 var(--br-radius, 16px) var(--br-radius, 16px);
}