/* Kiemelési rendszer — hero-szekció (2026-08, "hero-szekciók + kiemelés"
   kör). A jóváhagyott hero-mockup.html vizuális nyelvét követi, DE a
   site.css sötét/világos témájához igazítva (a mockup egy önálló, mindig
   sötét demo volt — itt a --sp-* tokenek témafüggők). */
.spot-hero{
  --sp-cyan:#6CE2F4; --sp-violet:#A88FEA; --sp-pink:#E080CC;
  --sp-grad:linear-gradient(90deg,var(--sp-cyan),var(--sp-violet),var(--sp-pink));
  --sp-card-bg:#12142a; --sp-card-line:rgba(255,255,255,.09);
  --sp-ink:#EEF0F8; --sp-ink-muted:#A8B2D0; --sp-ink-faint:#8892B8;
  background:radial-gradient(120% 140% at 15% -10%,#1a1030 0%,#0B0E1A 55%);
  border-radius:20px;
  max-width:1180px;margin:0 auto 28px;padding:40px 32px;
  display:grid;grid-template-columns:1fr 420px;gap:44px;align-items:center;
  color:var(--sp-ink);
}
.spot-hero.no-card{grid-template-columns:1fr;max-width:760px}
/* .spot-hero-surface-dark — a DESIGN.md-szabvány .surface-dark receptje a
   .spot-hero keretben (2026-08, hero-egységesítés 1. fázis). A /kozosseg
   ezt kapja, hogy a mai kinézetét (surface-dark) megtartsa a közös
   komponensre állva. A /szakemberek + /cegek NEM kapja ezt — azok marad-
   nak a fenti, nem-szabványos lila-navy .spot-hero gradiensen (lásd
   CSATLAKOZAS-HALADAS.md: "két sötét-recept" — külön kör dönt majd erről).
   Külön szabályként, a base .spot-hero{} UTÁN definiálva, hogy a cascade-
   sorrendtől függetlenül felülírja a háttért. */
.spot-hero.spot-hero-surface-dark{
  position:relative;
  background:
    radial-gradient(circle at 62% 38%, rgba(168,143,234,.16) 0%, transparent 45%),
    radial-gradient(circle at 32% 64%, rgba(108,226,244,.11) 0%, transparent 42%),
    radial-gradient(circle at 72% 70%, rgba(224,128,204,.09) 0%, transparent 40%),
    var(--bg);
}
.spot-hero.spot-hero-surface-dark::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;border-radius:inherit;
  background:
    linear-gradient(115deg, transparent 42%, rgba(108,226,244,.09) 50%, transparent 58%),
    linear-gradient(65deg, transparent 46%, rgba(224,128,204,.07) 52%, transparent 60%);
}
.spot-hero.spot-hero-surface-dark > *{position:relative;z-index:1}

/* .spot-hero-canvas-bg — a FŐOLDAL valódi, egér-reaktív canvas-háttere
   (2026-08, hero-egységesítés 1. fázis) — a heroCanvas.js közös forrásból
   mountolva. Ez a /szakemberek+/cegek (1. fázis) receptje; a #45 végleges
   döntése szerint EZ lesz a szabvány mind az 5 oldalon + a főoldalon (a
   .spot-hero-surface-dark egy köztes lépés volt, ez váltja fel később).
   A háttér-gradiens itt is jelen van STATIKUS fallbackként — ha a canvas
   nem rajzol (prefers-reduced-motion, lásd heroCanvas.js), ez marad
   látható, nem esik vissza feketére. */
.spot-hero.spot-hero-canvas-bg{
  position:relative;
  background:radial-gradient(120% 140% at 15% -10%, rgba(168,143,234,.10) 0%, transparent 55%), var(--bg);
}
.spot-hero.spot-hero-canvas-bg > canvas.hero-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.spot-hero.spot-hero-canvas-bg > *:not(canvas){position:relative;z-index:1}

.spot-kicker{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.14);
  border-radius:100px;padding:8px 16px 8px 11px;font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sp-ink-muted)}
.spot-kicker::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--sp-grad);flex:none}
.spot-hero h1{font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1.14;letter-spacing:-.03em;
  margin:18px 0 0;color:var(--sp-ink)}
.spot-hero h1 .g{background:var(--sp-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.spot-lead{font-size:16px;line-height:1.6;color:var(--sp-ink-muted);margin:16px 0 0;max-width:52ch}
.spot-cta{display:inline-block;margin:22px 0 0;background:var(--sp-grad);color:#08040f;
  text-decoration:none;font-weight:700;font-size:14.5px;border-radius:100px;padding:11px 22px}
.spot-note{font-size:12.5px;color:var(--sp-ink-faint);margin:12px 0 0}
/* .hero-meta — a site.css saját szabálya .hero-unified ősre van szűkítve
   (.hero-unified .hero-meta{...}), a .spot-hero-ban ezért nem érvényesülne
   — 2026-08, hero-egységesítés 4. fázis (heroBlockHtml() kiváltása): saját,
   .spot-hero-hez szűkített másolat, ugyanazzal a receptúrával. */
.spot-hero .hero-meta{display:flex;flex-direction:column;gap:8px;color:var(--sp-ink-muted);font-size:14.5px;margin:16px 0 0}

.spot-card{background:var(--sp-card-bg);border:1px solid var(--sp-card-line);border-radius:16px;overflow:hidden}
.spot-card-media{aspect-ratio:16/10;background:#181a36;position:relative;overflow:hidden}
.spot-card-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Cég-logó "illesztés háttérrel" — a logó SOSEM fotó, ezért nem szabad
   object-fit:cover-rel kitölteni/vágni (a legtöbb logó közel négyzetes,
   a kártya-média 16:10, cover ezért levágja a szélét). A logó eredeti
   arányban, középen, a maradék helyet márkaszín helyett (nincs tárolt
   márkaszín-mező) egy semleges, a hero-hoz illeszkedő gradiens tölti ki. */
.spot-card-media.logo-fit{background:linear-gradient(135deg,#232349,#12132a);display:flex;align-items:center;justify-content:center;padding:14%}
.spot-card-media.logo-fit img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.spot-card-body{padding:20px 22px 22px}
.spot-card-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sp-violet);margin:0 0 10px}
.spot-card-title{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:0;color:var(--sp-ink)}
.spot-card-meta{font-size:13.5px;color:var(--sp-ink-muted);margin:8px 0 0}
.spot-card-desc{font-size:13.5px;line-height:1.55;color:var(--sp-ink-muted);margin:10px 0 0}
.spot-card-btn{display:inline-block;margin:16px 0 0;border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:9px 19px;font-size:13.5px;font-weight:600;color:var(--sp-ink);text-decoration:none}
.spot-badge{position:absolute;top:11px;left:11px;background:rgba(6,7,20,.82);
  border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:5px 12px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#E3C888}
.spot-badge.pro{color:#8FE8D0;border-color:rgba(143,232,208,.35)}

.spot-person{display:flex;align-items:center;gap:14px;padding:20px 22px 0}
.spot-person img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;background:#181a36}
.spot-person .pn{font-size:16.5px;font-weight:800;letter-spacing:-.015em;color:var(--sp-ink)}
.spot-person .pp{font-size:13px;color:var(--sp-ink-muted);margin-top:2px}
.spot-chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.spot-chip{border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:5px 12px;
  font-size:12px;color:var(--sp-ink-muted)}
.spot-own-note{font-size:11.5px;color:#E3C888;margin:14px 0 0;padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.14)}

@media(max-width:900px){
  .spot-hero{grid-template-columns:1fr;gap:26px;padding:28px 20px;border-radius:16px}
  .spot-lead{font-size:15px}
  /* A kártya a szöveg ALÁ kerül, de a CTA a szöveg-blokk VÉGÉN marad —
     a grid-item sorrendje nem függ a DOM-sorrendtől, a szöveg-blokk marad
     elöl (order nélkül), a kártya (2. gyerek) utána, a hajtás alá nem
     tolja a CTA-t, mert az a szöveg-blokk RÉSZE, nem a kártyáé. */
}
@media(prefers-reduced-motion:reduce){.spot-hero *{transition:none!important}}

/* ═══ .spot-cover — a hero jobb oldali "nagy cover" panelje (2026-08,
   hero-egységesítés 1. fázis) — a jóváhagyott mockup vizuális nyelve,
   FELVÁLTJA a korábbi kis .spot-card-ot a hero-slotban (a .spot-card maga
   megmarad, nincs más hívója törölve). Nagy fotó/logó háttér + alsó,
   sötét felirat-sáv — a designEventTemplate.js heroMediaHtml()-jének
   mintáját követi, hogy a konferencia-hero és a szakember/cég-hero
   vizuálisan egy családba tartozzon. ═══ */
.spot-cover{border-radius:16px;overflow:hidden;aspect-ratio:4/3;position:relative;background:linear-gradient(160deg,#2a1f4a,#1a1030)}
.spot-cover img{width:100%;height:100%;object-fit:cover;display:block}
.spot-cover .spot-cover-badge{position:absolute;top:16px;left:16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(6,7,20,.6);backdrop-filter:blur(6px);color:#fff;padding:6px 13px;border-radius:100px;border:1px solid rgba(255,255,255,.18)}
.spot-cover .spot-cover-badge.pro{background:var(--sp-grad, linear-gradient(90deg,#6CE2F4,#A88FEA));color:#08040f;border:none}
.spot-cover .spot-cover-caption{position:absolute;left:0;right:0;bottom:0;padding:20px 18px 18px;background:linear-gradient(0deg,rgba(6,7,20,.92) 0%,rgba(6,7,20,.55) 60%,transparent 100%)}
/* .spot-cover-caption-solid — a fehér logó-plate FELETT a fenti, fotóra
   tervezett elhalványuló gradiens fehéren-fehér, olvashatatlan szöveget
   adott (2026-08, élő teszten talált hiba) — a plate-es (cég-logós)
   esetben ehelyett egy TELJES, nem halványuló sötét sáv kell, mert nincs
   fotó, amibe "kifusson" az átmenet. */
.spot-cover .spot-cover-caption.spot-cover-caption-solid{background:rgba(6,7,20,.92)}
.spot-cover .spot-cover-caption .name{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.02em}
.spot-cover .spot-cover-caption .spot-cover-role{font-size:13px;color:rgba(255,255,255,.7);margin-top:3px}
.spot-cover .spot-cover-caption .cta-link{display:inline-block;margin-top:11px;font-size:13px;font-weight:700;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
/* Logó-plate — DÖNTÉS (2026-08): fehér, MINDEN cég-logónál, kivétel
   nélkül — az áttetsző változat összevetésben veszített (a sötét háttér
   átütött, piszkította a logót), lásd HALADAS.md. */
.spot-cover .spot-logo-plate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff}
.spot-cover .spot-logo-plate img{width:auto;height:auto;max-width:58%;max-height:38%;object-fit:contain}

/* ═══ .spot-recruit-banner — a "7. hely" toborzó CTA-ja (2026-08) — ÖNÁLLÓ,
   MINDIG látható elem, a hero UTÁN, NEM a rotáció része (a felhasználó
   döntése: ne a random-választásba épüljön be, hanem külön, állandó
   elemként jelenjen meg — így a rotáció-logika (getMemberSpotlightCandidate/
   getCompanySpotlightCandidate) érintetlen marad). ═══ */
.spot-recruit-banner{max-width:1180px;margin:0 auto 28px;padding:22px 28px;border-radius:16px;
  background:linear-gradient(120deg,#1a1030,#0B0E1A);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.spot-recruit-banner .rb-text{max-width:600px}
.spot-recruit-banner .rb-kicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sp-violet, #A88FEA);margin-bottom:8px}
.spot-recruit-banner h3{font-size:18px;font-weight:800;color:#fff;margin:0 0 6px;letter-spacing:-.02em}
.spot-recruit-banner p{font-size:13.5px;color:rgba(255,255,255,.68);margin:0;line-height:1.5}
.spot-recruit-banner a{flex:none;display:inline-block;background:var(--sp-grad, linear-gradient(90deg,#6CE2F4,#A88FEA,#E080CC));color:#08040f;text-decoration:none;font-weight:700;font-size:14px;border-radius:100px;padding:12px 24px}
@media(max-width:640px){.spot-recruit-banner{padding:20px}}