/* ============================================================================
   СФЕРА РАБОТ — worksphere.ru | MAP-SITE.CSS
   Стили страниц «Карта вакансий / Города». Загружается синхронно на /map-site.
   Токены и общие классы (.glass-card, .btn, .breadcrumbs, фильтр, .seo-block,
   .empty-state) наследуются из critical.css + style.css. Здесь — только
   специфика: hero карты, переключатель типа, аккордеон регионов, список городов.
   ============================================================================ */

/* ---------------- HERO КАРТЫ ---------------- */
.map-site-hero{max-width:var(--container);margin:14px auto 22px;padding:0 var(--container-px)}
.map-site-hero-inner{position:relative;overflow:hidden;background:linear-gradient(135deg,#161616,#0d0d0d 60%,#000);border:0;border-radius:var(--r-2xl);padding:clamp(32px,5vw,56px) clamp(24px,4vw,48px);box-shadow:var(--shadow-3);text-align:center}
.map-site-hero-inner::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(224,24,43,.28),transparent 62%);top:-220px;right:-100px;filter:blur(40px);pointer-events:none}
.map-site-hero-inner .hero-eyebrow{position:relative;color:#fff;background:transparent;border:0}
.map-site-h1{position:relative;font-family:var(--font-display);font-size:clamp(26px,4vw,46px);font-weight:800;letter-spacing:-.035em;color:#fff;margin:14px 0 12px;line-height:1.1}
.map-site-sub{position:relative;font-size:clamp(15px,1.4vw,18px);color:#cbcbcb;max-width:62ch;margin:0 auto;line-height:1.6}
.map-site-sub strong{color:#fff}

/* ---------------- ПЕРЕКЛЮЧАТЕЛЬ ТИПА ЗАНЯТОСТИ ---------------- */
.type-switch{max-width:var(--container);margin:0 auto 20px;padding:0 var(--container-px);display:flex;flex-wrap:wrap;gap:10px}
.type-pill{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;font-size:14.5px;font-weight:600;color:var(--text-dim);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-full);transition:color .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.type-pill svg{color:currentColor}
.type-pill:hover{color:var(--accent);border-color:var(--accent-border);background:var(--accent-soft)}
.type-pill.active{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:var(--shadow-blue)}

/* ---------------- АККОРДЕОН РЕГИОНОВ ---------------- */
.sitemap-section{max-width:var(--container);margin:0 auto;padding:0 var(--container-px) 8px;display:flex;flex-direction:column;gap:12px}
.region-block{overflow:hidden;padding:0}
.region-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:18px 22px;text-align:left;cursor:pointer;transition:background-color .15s ease}
.region-toggle:hover{background:var(--surface-2)}
.region-icon{flex-shrink:0;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent)}
.region-name{flex:1;font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--text-strong)}
.region-count{font-size:13px;color:var(--text-mute);font-weight:500;white-space:nowrap}
.region-arrow{flex-shrink:0;color:var(--text-mute);transition:transform .2s ease}
.region-block.open .region-arrow{transform:rotate(180deg);color:var(--accent)}
/* Аккордеон через display — нет лишнего reflow и анимаций высоты */
.region-cities{display:none;padding:0 22px 20px}
.region-block.open .region-cities{display:block}
.cities-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;padding-top:6px;border-top:1px solid var(--line)}
.cities-inner{margin-top:2px}

/* ---------------- ССЫЛКА НА ГОРОД ---------------- */
.city-link{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--r-sm);font-size:14.5px;color:var(--text-dim);transition:color .15s ease,background-color .15s ease}
.city-link:hover{color:var(--red);background:var(--red-soft)}
.city-link-icon{flex-shrink:0;display:grid;place-items:center;color:var(--text-mute)}
.city-link:hover .city-link-icon{color:var(--red)}
.city-link-name{flex:1;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.city-link-arrow{flex-shrink:0;color:var(--text-mute);opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease}
.city-link:hover .city-link-arrow{opacity:1;transform:translateX(0);color:var(--red)}

/* ---------------- АДАПТИВ ---------------- */
@media(max-width:720px){
  .type-switch{gap:8px}
  .type-pill{padding:10px 16px;font-size:13.5px}
  .cities-inner{grid-template-columns:1fr}
  .region-toggle{padding:16px 18px}
  .region-cities{padding:0 18px 18px}
  .city-link-arrow{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .region-arrow,.city-link-arrow{transition:none}
}