/* ============================================================================
 * MelóPont — kezdőlapi okos kereső · SEARCH-INTENT-01 (2026.10.04)
 * ----------------------------------------------------------------------------
 * A közös css/search-hero.css (.br-hero, .br-search, .ls-panel) FÖLÉ, csak a
 * kezdőlapon (#heroSearch). Előtag: mp-hs-.
 *  · mód-váltó: „Munkát keresek” (kék) / „Munkaerőt keresek” (zöld) — a kártya színe is vált
 *  · nagy, kerek kereső „Keresés” gombbal (telefonon csak nyíl)
 *  · okos válasz a találati panel tetején: felismert szakma/város, valós számok, következő lépés
 * Színek csak tokenből (melopont-style.css :root + az alábbi --hs-* tokenek).
 * ========================================================================== */
:root {
  --hs-blue-deep: #083B7E;          /* kék kártya sötét vége */
  --hs-blue-track: #072F66;         /* mód-váltó sávja a kék kártyán (fehér szöveg ~12:1) */
  --hs-green-deep: #03452A;         /* zöld kártya sötét vége */
  --hs-green-track: #023A22;        /* mód-váltó sávja a zöld kártyán */
  --hs-green-hover: #045E35;
  --hs-ans-blue: #F2F7FE;           /* okos válasz háttere (állás) */
  --hs-ans-green: #F1F9F4;          /* okos válasz háttere (munkaerő) */
  --hs-tile-border: #DCE6F2;
  --hs-ring: rgba(255, 255, 255, .35);
}

/* ── Kártya: mód szerinti szín ── */
#heroSearch.lp-finder {
  --br-hero-from: var(--mp-blue);
  --br-hero-to: var(--hs-blue-deep);
  --hs-accent: var(--mp-blue);
  --hs-accent-hover: var(--mp-blue-hover);
  --hs-track: var(--hs-blue-track);
  border-radius: 28px;
  box-shadow: 0 24px 48px -20px rgba(8, 59, 126, .55), 0 2px 6px rgba(8, 59, 126, .18);
  transition: box-shadow .25s ease;
}
#heroSearch.lp-finder[data-intent="people"] {
  --br-hero-from: var(--mp-green);
  --br-hero-to: var(--hs-green-deep);
  --br-chip-text: var(--hs-green-deep);
  --br-chip-hover: var(--mp-green-light);
  --hs-accent: var(--mp-green);
  --hs-accent-hover: var(--hs-green-hover);
  --hs-track: var(--hs-green-track);
  box-shadow: 0 24px 48px -20px rgba(3, 69, 42, .55), 0 2px 6px rgba(3, 69, 42, .18);
}
#heroSearch.lp-finder .br-hero-inner { padding: 20px 22px 18px; }

/* ── Mód-váltó (két nagy, egyértelmű gomb) ── */
#heroSearch .mp-hs-intent {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px;
  max-width: 460px; padding: 4px; border-radius: 999px;
  background: var(--hs-track);
}
#heroSearch .mp-hs-seg {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--hs-track); color: var(--mp-white);
  font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; line-height: 1.2; white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
#heroSearch .mp-hs-seg span, #heroSearch .mp-hs-seg svg { color: inherit; }
#heroSearch .mp-hs-seg svg, #heroSearch .mp-hs-seg .lucide, #heroSearch .mp-hs-seg [data-lucide] { width: 18px; height: 18px; }
#heroSearch .mp-hs-seg:hover { box-shadow: inset 0 0 0 1px var(--hs-ring); }
#heroSearch .mp-hs-seg[aria-checked="true"] {
  background: var(--mp-white); color: var(--hs-accent);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35);
}
#heroSearch .mp-hs-seg:focus-visible { outline: 3px solid var(--mp-white); outline-offset: 2px; }

/* ── Kereső-mező: nagyobb, „Keresés” felirattal ── */
#heroSearch .br-search { margin-top: 16px; }
#heroSearch .br-input { min-height: 64px; font-size: calc(18px * var(--mp-fs, 1)); }
#heroSearch .br-search-icon { color: var(--hs-accent); }
#heroSearch .br-input:focus { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35), 0 0 0 5px var(--hs-ring); }
#heroSearch .br-search--go .br-input { padding-right: 172px; }
#heroSearch .br-search--go .br-clear { right: 140px; }
#heroSearch .mp-hs-go-btn {
  width: auto; height: 50px; right: 7px; gap: 8px; padding: 0 18px 0 22px; border-radius: 999px;
  background: var(--hs-accent); color: var(--mp-white);
  font: inherit; font-size: calc(16px * var(--mp-fs, 1)); font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45);
}
#heroSearch .mp-hs-go-btn:hover { background: var(--hs-accent-hover); }
#heroSearch .mp-hs-go-btn span, #heroSearch .mp-hs-go-btn svg { color: var(--mp-white); }
#heroSearch .mp-hs-go-btn svg { width: 20px; height: 20px; }

#heroSearch .br-quick { margin-top: 14px; }
#heroSearch .br-chip--solid { box-shadow: 0 1px 2px rgba(0, 0, 0, .12); transition: background .15s, transform .12s, box-shadow .15s; }
#heroSearch .br-chip--solid:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45); }
#heroSearch .br-chip svg { color: var(--hs-accent); }
#heroSearch .br-hint { line-height: 1.45; }

/* ── Okos válasz a találati panel tetején ── */
.ls-panel .mp-hs-ans {
  margin: 10px 12px 6px; padding: 14px 14px 12px; border-radius: 16px;
  background: var(--hs-ans-blue); border: 1px solid var(--hs-tile-border);
}
.ls-panel[data-intent="people"] .mp-hs-ans { background: var(--hs-ans-green); }
.ls-panel .mp-hs-ans-head { display: flex; align-items: center; gap: 10px; }
.ls-panel .mp-hs-ans-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-blue); color: var(--mp-white);
}
.ls-panel[data-intent="people"] .mp-hs-ans-icon { background: var(--mp-green); }
.ls-panel .mp-hs-ans-icon svg { width: 18px; height: 18px; }
.ls-panel .mp-hs-ans-title { font-size: calc(16px * var(--mp-fs, 1)); font-weight: 800; color: var(--mp-text-primary); line-height: 1.3; }
.ls-panel .mp-hs-ans-sub { font-weight: 600; color: var(--mp-text-muted); }

.ls-panel .mp-hs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ls-panel .mp-hs-tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px;
  border-radius: 999px; background: var(--mp-white); border: 1px solid var(--hs-tile-border);
  font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted);
}
.ls-panel .mp-hs-tag b { color: var(--mp-text-primary); font-weight: 700; }
.ls-panel .mp-hs-tag svg { width: 15px; height: 15px; color: var(--mp-blue); }
.ls-panel[data-intent="people"] .mp-hs-tag svg { color: var(--mp-green); }

.ls-panel .mp-hs-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }   /* STACK-01 (10.12, László: „ahol egymás mellett vannak a kártyák, legyenek egymás alatt”) */
.ls-panel .mp-hs-tile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--mp-white); border: 1px solid var(--hs-tile-border);
}
.ls-panel .mp-hs-tile-n { font-size: calc(24px * var(--mp-fs, 1)); font-weight: 800; line-height: 1.1; color: var(--mp-text-primary); font-variant-numeric: tabular-nums; }
.ls-panel .mp-hs-tile--main .mp-hs-tile-n { color: var(--mp-blue); }
.ls-panel[data-intent="people"] .mp-hs-tile--main .mp-hs-tile-n { color: var(--mp-green); }
.ls-panel .mp-hs-tile-l { font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); line-height: 1.3; }

.ls-panel .mp-hs-msg { margin: 10px 0 0; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45; color: var(--mp-text-primary); }
.ls-panel .mp-hs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ls-panel a.mp-hs-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 16px; border-radius: 12px;
  background: var(--mp-blue); color: var(--mp-white); font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; text-decoration: none;
}
.ls-panel[data-intent="people"] a.mp-hs-go { background: var(--mp-green); }
.ls-panel a.mp-hs-go span, .ls-panel a.mp-hs-go svg { color: var(--mp-white); }
.ls-panel a.mp-hs-go:hover, .ls-panel a.mp-hs-go.is-active { background: var(--mp-blue-hover); color: var(--mp-white); text-decoration: none; }
.ls-panel[data-intent="people"] a.mp-hs-go:hover, .ls-panel[data-intent="people"] a.mp-hs-go.is-active { background: var(--hs-green-hover); }
.ls-panel a.mp-hs-go svg, .ls-panel a.mp-hs-alt svg { width: 17px; height: 17px; }
.ls-panel a.mp-hs-alt {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 12px;
  background: var(--mp-white); border: 1px solid var(--hs-tile-border);
  color: var(--mp-text-primary); font-size: calc(14px * var(--mp-fs, 1)); font-weight: 700; text-decoration: none;
}
.ls-panel a.mp-hs-alt:hover, .ls-panel a.mp-hs-alt.is-active { border-color: var(--mp-blue); color: var(--mp-text-primary); text-decoration: none; }
.ls-panel .mp-hs-note { display: inline-flex; align-items: center; gap: 6px; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted); }
.ls-panel .mp-hs-note svg { width: 15px; height: 15px; }

/* „Melyikre gondolsz?” — választható szakmák */
.ls-panel .mp-hs-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ls-panel .mp-hs-choice {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--hs-tile-border); background: var(--mp-white);
  font: inherit; font-size: calc(15px * var(--mp-fs, 1)); font-weight: 700; color: var(--mp-text-primary); cursor: pointer;
}
.ls-panel .mp-hs-choice:hover, .ls-panel .mp-hs-choice.is-active { border-color: var(--mp-blue); background: var(--mp-blue-light); }
.ls-panel[data-intent="people"] .mp-hs-choice:hover, .ls-panel[data-intent="people"] .mp-hs-choice.is-active { border-color: var(--mp-green); background: var(--mp-green-light); }
.ls-panel .mp-hs-choice-n { font-size: calc(14px * var(--mp-fs, 1)); font-weight: 600; color: var(--mp-text-muted); }

/* zöld mód: a panel fő gombja is zöld */
.ls-panel[data-intent="people"] a.ls-btn--primary { background: var(--mp-green); border-color: var(--mp-green); }
.ls-panel[data-intent="people"] a.ls-btn--primary:hover, .ls-panel[data-intent="people"] a.ls-btn--primary.is-active { background: var(--hs-green-hover); }

/* ── COMPANY-GATE-01: vendég cégnek egyértelmű „regisztráció kell” doboz ── */
.ls-panel .mp-hs-gate {
  margin-top: 12px; padding: 12px; border-radius: 14px;
  background: var(--mp-white); border: 1.5px solid var(--mp-green);
}
.ls-panel .mp-hs-gate-head { display: flex; gap: 10px; align-items: flex-start; }
.ls-panel .mp-hs-gate-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mp-green-light); color: var(--mp-green-dark);
}
.ls-panel .mp-hs-gate-icon svg { width: 18px; height: 18px; }
.ls-panel .mp-hs-gate-title { font-size: calc(15px * var(--mp-fs, 1)); font-weight: 800; line-height: 1.3; color: var(--mp-text-primary); }
.ls-panel .mp-hs-gate-text { margin-top: 3px; font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.45; color: var(--mp-text-muted); }
.ls-panel .mp-hs-gate-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ls-panel .mp-hs-gate-actions a.mp-hs-go { flex: 1 1 220px; }
.ls-panel .mp-hs-gate-actions a.mp-hs-alt { flex: 1 1 160px; justify-content: center; }

/* a mező alatti tipp linkje (vendég, „Munkaerőt keresek”) */
#heroSearch .br-hint a.mp-hs-hint-link,
#heroSearch .br-hint a.mp-hs-hint-link:hover {
  display: inline; color: var(--mp-white); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 520px) {
  #heroSearch.lp-finder { border-radius: 22px; }
  #heroSearch.lp-finder .br-hero-inner { padding: 14px 12px 16px; }
  #heroSearch .mp-hs-intent { max-width: none; }
  #heroSearch .mp-hs-seg { font-size: calc(14px * var(--mp-fs, 1)); padding: 8px 8px; gap: 6px; }
  #heroSearch .mp-hs-seg svg, #heroSearch .mp-hs-seg .lucide, #heroSearch .mp-hs-seg [data-lucide] { width: 16px; height: 16px; }
  #heroSearch .br-input { min-height: 56px; font-size: calc(16px * var(--mp-fs, 1)); }
  #heroSearch .br-search--go .br-input { padding-right: 100px; }
  #heroSearch .br-search--go .br-clear { right: 54px; }
  #heroSearch .mp-hs-go-btn { width: 44px; height: 44px; padding: 0; right: 6px; }
  #heroSearch .mp-hs-go-text { display: none; }
  .ls-panel .mp-hs-ans { margin: 8px 8px 4px; padding: 12px; }
  .ls-panel .mp-hs-tile { padding: 8px 10px; }
  .ls-panel .mp-hs-tile-n { font-size: calc(22px * var(--mp-fs, 1)); }
  .ls-panel a.mp-hs-go { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #heroSearch .br-chip--solid:hover { transform: none; }
}

/* VOICE-SEARCH-02 (10.12, mérve 390 px-en, 130–150 %-os betűvel): a két mód-gomb (nowrap) egymás mellett 475 px-ig
   tolta ki a kezdőlapot — nagy betűnél telefonon egymás alá kerülnek, a felirat tördelhető. */
@media (max-width: 600px) {
  html[data-mp-fs="1.3"] #heroSearch .mp-hs-intent, html[data-mp-fs="1.5"] #heroSearch .mp-hs-intent { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  html[data-mp-fs="1.3"] #heroSearch .mp-hs-seg, html[data-mp-fs="1.5"] #heroSearch .mp-hs-seg { white-space: normal; }
}