/* ============================================================
   HERO ГЛАВНОЙ (#wbz-hero) — заголовок + поиск + чипы + доверие
   ============================================================ */
/* Legacy block heading markup (напр. «Выберите направление») — под текущий token. */

/* Баннер: полоса во всю ширину экрана + 2 колонки (текст | иллюстрация).
   Полосу рисует ::before — он выходит за 1080px до краёв вьюпорта (calc(50% - 50vw)),
   а #main получает overflow-x:clip, чтобы этот вылет не давал горизонтальной прокрутки.
   Все дети hero живут в первой колонке, иллюстрация — во второй на всю высоту. */
#wbz-hero{
  position:relative; box-sizing:border-box; max-width:var(--wbz-container); margin:0 auto 38px;
  padding:56px 360px 48px 0;                     /* справа — место под иллюстрацию */
  font-family:var(--wbz-font);
}
#wbz-hero::before{
  content:""; position:absolute; z-index:0; inset:0 calc(50% - 50vw);
  background:
    radial-gradient(620px 320px at 80% 14%, var(--wbz-glow), transparent 68%),
    radial-gradient(520px 300px at 6% 96%, var(--wbz-glow2), transparent 70%),
    linear-gradient(180deg, var(--wbz-bg2) 0%, var(--wbz-bg2) 74%, var(--wbz-bg) 100%);
  border-bottom:1px solid var(--wbz-line);
  box-shadow:inset 0 -3px 0 rgba(76,160,0,.5);   /* та же фирменная черта, что у шапок внутренних страниц */
}
#wbz-hero > *{ position:relative; z-index:1; }
#wbz-hero .wbz-hero-art{ position:absolute; z-index:1; right:0; top:50%; transform:translateY(-50%); width:320px; }
#wbz-hero .wbz-hero-art svg{ display:block; width:100%; height:auto; }
/* Страховка от горизонтальной прокрутки: полоса шире вьюпорта на ширину скроллбара.
   ВАЖНО: клип вешаем на #inner-wrap — он во всю ширину. Если повесить на #main
   (он внутри контейнера с гаттером), клип срежет полосу по краям и по бокам
   останутся светлые поля. */
body.home #inner-wrap{ overflow-x:clip; }
@media(max-width:1000px){
  #wbz-hero{ padding:34px 0 30px; margin-bottom:26px; }
  #wbz-hero .wbz-hero-art{ display:none; }      /* на узком экране картинка только мешает */
}
#wbz-hero .wbz-hero-badge{ display:inline-flex; align-items:center; gap:6px; background:var(--wbz-tint); color:var(--wbz-head); font-size:13px; font-weight:500; padding:6px 12px; border-radius:999px; margin:0 0 16px; }
#wbz-hero .wbz-hero-badge svg{ width:15px; height:15px; color:var(--wbz-acc); }
#wbz-hero .wbz-hero-h1{ font-size:clamp(28px,4vw,42px); font-weight:500; color:var(--wbz-head); letter-spacing:-.01em; line-height:1.15; margin:0 0 12px; }
#wbz-hero .wbz-hero-sub{ font-size:17px; color:var(--wbz-ink2); line-height:1.55; max-width:620px; margin:0 0 22px; }
#wbz-hero .wbz-hero-search{ display:flex; gap:8px; max-width:620px; margin:0 0 14px; }
#wbz-hero .wbz-hs-wrap{ position:relative; flex:1; }
#wbz-hero .wbz-hs-ic{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--wbz-mut); pointer-events:none; }
#wbz-hero .wbz-hero-search input[type="search"]{ width:100%; box-sizing:border-box; border:1.5px solid var(--wbz-line); border-radius:12px; background:var(--wbz-surface); color:var(--wbz-ink); font-size:16px; padding:14px 16px 14px 42px; font-family:var(--wbz-font); -webkit-appearance:none; appearance:none; }
#wbz-hero .wbz-hero-search input[type="search"]::placeholder{ color:var(--wbz-mut); }
#wbz-hero .wbz-hero-search input[type="search"]:focus{ outline:none; border-color:var(--wbz-acc); box-shadow:var(--wbz-focus-ring); }
#wbz-hero .wbz-hero-search button{ background:var(--wbz-acc); color:var(--wbz-acc-ink); border:none; border-radius:12px; padding:0 26px; font-size:15px; font-weight:700; cursor:pointer; font-family:var(--wbz-font); transition:background .15s,color .15s; }
#wbz-hero .wbz-hero-search button:hover{ background:var(--wbz-acc-d); }
html[data-theme="dark"] #wbz-hero .wbz-hero-search button:hover{ background:var(--wbz-action-hover); color:var(--wbz-action-ink); }
#wbz-hero .wbz-hero-chips{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0 0 24px; }
#wbz-hero .wbz-hero-chips .lbl{ font-size:13px; color:var(--wbz-mut); }
#wbz-hero .wbz-hero-chips a{ font-size:13px; color:var(--wbz-ink2); background:var(--wbz-surface); border:1px solid var(--wbz-line); padding:6px 12px; border-radius:999px; text-decoration:none; transition:border-color .15s,color .15s,background .15s; }
#wbz-hero .wbz-hero-chips a:hover{ border-color:var(--wbz-acc); color:var(--wbz-acc); background:var(--wbz-tint); }
/* Мобильно: чипы не сваливаются в три ряда «лесенкой», а едут одной строкой
   с прокруткой пальцем. Подпись «Часто ищут:» уезжает — чипы говорят сами за себя.
   Затухание справа (mask) намекает, что строку можно листать. */
@media(max-width:600px){
  #wbz-hero .wbz-hero-chips{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:8px;
    margin:0 -16px 22px; padding:2px 16px 2px 16px;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  #wbz-hero .wbz-hero-chips::-webkit-scrollbar{ display:none; }
  #wbz-hero .wbz-hero-chips .lbl{ flex:none; }
  #wbz-hero .wbz-hero-chips a{ flex:none; white-space:nowrap; padding:7px 14px; }
}
#wbz-hero .wbz-hero-trust{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--wbz-ink2); border-top:1px solid var(--wbz-line); padding-top:16px; }
#wbz-hero .wbz-hero-trust span{ display:inline-flex; align-items:center; gap:7px; }
#wbz-hero .wbz-hero-trust span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--wbz-acc); flex:none; }
/* Живые подсказки поиска */
#wbz-hero .wbz-hero-sug{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; background:var(--wbz-surface); border:1px solid var(--wbz-line); border-radius:12px; box-shadow:0 12px 30px rgba(16,21,40,.14); overflow:hidden; display:none; }
#wbz-hero .wbz-hero-sug.is-open{ display:block; }
#wbz-hero .wbz-sug-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; text-decoration:none; font-size:14px; border-top:0.5px solid var(--wbz-line); }
#wbz-hero .wbz-sug-item:first-child{ border-top:0; }
#wbz-hero .wbz-sug-item:hover, #wbz-hero .wbz-sug-item.is-active{ background:var(--wbz-tint); }
#wbz-hero .wbz-sug-item .t{ color:var(--wbz-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#wbz-hero .wbz-sug-item .k{ font-size:12px; color:var(--wbz-mut); flex:none; }
#wbz-hero .wbz-sug-empty{ padding:11px 14px; font-size:14px; color:var(--wbz-ink2); cursor:pointer; }
#wbz-hero .wbz-sug-empty:hover{ background:var(--wbz-tint); }
html[data-theme="dark"] #wbz-hero .wbz-hero-sug{ box-shadow:0 12px 30px rgba(0,0,0,.5); }