/* ============================================================
   РЕДИЗАЙН ОБЁРТКИ РАЗДЕЛА «ВОЗМОЖНОСТИ» (index.html #view-opportunities)
   По утверждённым макетам (гость / авторизован). Это только визуальная
   обёртка: все стили ниже сознательно скопированы из макета и СКОПИРОВАНЫ
   ТОЛЬКО под #view-opportunities, чтобы не затронуть ни одну другую
   страницу/раздел сайта. Функционал (формы, модалки, отклики, теги-фильтры,
   бесконечная подгрузка) не менялся — здесь оформление контейнеров вокруг
   уже существующих элементов (см. index.html, js/opportunities-wrapper.js).
   ============================================================ */

/* ---------- раскладка: боковая навигация + основная колонка ---------- */
#view-opportunities .opp-layout{ display:flex; gap:32px; align-items:flex-start; }
#view-opportunities .opp-main{ flex:1; min-width:0; }

/* ---------- боковое меню раздела (видно только залогиненным) ---------- */
#view-opportunities .opp-side{
  width:252px; flex-shrink:0; position:sticky; top:96px;
  background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:12px;
}
#view-opportunities .opp-side-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:10px 8px 6px; }
#view-opportunities .opp-side-label.second{ margin-top:8px; border-top:1px solid var(--border); padding-top:18px; }
#view-opportunities .opp-side-toggle{ display:none; }
#view-opportunities .opp-nav-item{
  width:100%; display:flex; align-items:center; gap:12px; padding:7px 10px 7px 8px; border-radius:16px;
  border:none; background:transparent; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700;
  color:var(--ink-soft); text-align:left; transition:.15s ease;
}
#view-opportunities .opp-nav-item:hover{ background:var(--bg); color:var(--ink); }
#view-opportunities .opp-nav-ic{ width:36px; height:36px; border-radius:11px; background:var(--icon-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#view-opportunities .opp-nav-ic svg{ width:18px; height:18px; }
#view-opportunities .opp-nav-item.active{ background:var(--violet-tint); color:#5847c9; }
#view-opportunities .opp-nav-item.active .opp-nav-ic{ background:#fff; }
#view-opportunities .opp-nav-count{ margin-left:auto; font-size:12px; font-weight:700; background:var(--bg); color:var(--ink-soft); border-radius:999px; padding:2px 9px; }
#view-opportunities .opp-nav-item.active .opp-nav-count{ background:#fff; color:#5847c9; }

/* ---------- кнопка «Создать» с выпадающим меню (замена 3 отдельных кнопок) ---------- */
#view-opportunities .opp-create{ position:relative; }
#view-opportunities .opp-create .btn svg{ width:16px; height:16px; }
#view-opportunities .opp-menu{
  display:none; position:absolute; right:0; top:calc(100% + 10px); width:340px; z-index:70;
  background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow-soft); padding:8px;
}
#view-opportunities .opp-menu.open{ display:block; }
#view-opportunities .opp-menu button{
  display:flex; align-items:center; gap:12px; width:100%; padding:10px; border-radius:16px; border:none;
  background:transparent; text-align:left; cursor:pointer; font-family:inherit; color:var(--ink);
}
#view-opportunities .opp-menu button:hover{ background:var(--bg); }
#view-opportunities .opp-menu strong{ display:block; font-size:14px; }
#view-opportunities .opp-menu small{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:1px; }
/* Старые кнопки ("Добавить возможность"/"Добавить стартап"/"Добавить компанию"/
   "Мои компании") больше не показываем визуально — их место заняла кнопка
   "Создать" + боковое меню, по макету. !important нужен, т.к. js/opportunities-tabs.js
   и js/nav-and-auth-entry.js по-прежнему переключают им inline style.display —
   логику этих скриптов не трогаем, просто перекрываем видимость на этой странице. */
#view-opportunities .opp-legacy-hidden{ display:none !important; }

/* ---------- вкладки «Возможности / Кофаундер» ---------- */
#view-opportunities .opp-tabs{ display:flex; gap:26px; flex-shrink:0; margin-bottom:18px; }
#view-opportunities .opp-tab{
  position:relative; border:none; background:none; padding:9px 0; font-family:inherit; font-size:15px; font-weight:700;
  color:var(--ink-faint); cursor:pointer; transition:color .15s ease; white-space:nowrap;
}
#view-opportunities .opp-tab:hover{ color:var(--ink); }
#view-opportunities .opp-tab.active{ color:var(--coral); }
#view-opportunities .opp-tab.active::after{ content:''; position:absolute; left:0; right:0; bottom:-9px; height:2px; border-radius:2px; background:var(--coral); }

/* ---------- строка чипов (тип/источник объявления, «Фильтры») ---------- */
#view-opportunities .opp-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-bottom:22px; }
#view-opportunities .opp-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 6px; flex:0 1 auto; min-width:0; }
#view-opportunities .opp-chip{
  border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); border-radius:999px; padding:7px 10px;
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:.15s ease;
  display:inline-flex; align-items:center; gap:6px;
}
#view-opportunities .opp-chip:hover{ border-color:#c7c9d6; color:var(--ink); }
#view-opportunities .opp-chip.active{ border-color:var(--ink); color:var(--ink); }
#view-opportunities .opp-chip svg{ width:14px; height:14px; }
#view-opportunities .opp-chip.opp-filter{ margin-right:4px; }
#view-opportunities .opp-chip.opp-filter.open{ border-color:var(--ink); color:var(--ink); }

/* ---------- панель фильтров (уже существующие облака тегов, только спрятаны за кнопку «Фильтры») ---------- */
#view-opportunities .opp-filters{
  display:none; background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:22px 24px 8px; margin-bottom:22px;
}
#view-opportunities .opp-filters.open{ display:block; }
#view-opportunities .opp-filters .tags-group{ margin-bottom:20px; }
#view-opportunities .opp-filters .tags-groups:empty{ display:none; }

/* ---------- заголовок экранов «Мои …» ---------- */
#view-opportunities .opp-screen-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; }
#view-opportunities .opp-screen-head h2{ font-size:20px; font-family:'Unbounded',sans-serif; }

/* ---------- «плитка добавления» в конце списка «Мои …» ---------- */
#view-opportunities .opp-add-tile{
  border:1.5px dashed var(--border); border-radius:var(--radius-md); background:transparent; width:100%; min-height:120px;
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:12px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14px; color:var(--ink-soft); transition:.2s ease; padding:20px; margin-top:18px;
}
#view-opportunities .opp-add-tile:hover{ border-color:var(--ink); color:var(--ink); background:var(--surface); }
#view-opportunities .opp-add-tile .ic{ width:44px; height:44px; border-radius:14px; background:var(--icon-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#view-opportunities .opp-add-tile .ic svg{ width:20px; height:20px; }

/* ---------- карточки: не уже 310px, до 4 колонок (как в макете) ---------- */
#view-opportunities .opp-main .opportunity-grid,
#view-opportunities .opp-main .startup-grid{
  grid-template-columns:repeat(auto-fill, minmax(max(280px, calc((100% - 54px) / 4 - 1px)), 1fr));
}
#view-opportunities .case-card-foot{ flex-wrap:nowrap; gap:8px; }
#view-opportunities .case-card-foot .case-card-cta{ flex-shrink:0; }
#view-opportunities .case-card-foot .btn{ white-space:nowrap; flex-shrink:0; }

/* ---------- адаптив ---------- */
@media(max-width:880px){
  #view-opportunities .opp-layout{ flex-direction:column; gap:18px; align-items:stretch; }
  #view-opportunities .opp-main{ width:100%; }
  #view-opportunities .opp-side{ position:static; width:100%; padding:6px; border-radius:20px; }
  #view-opportunities .opp-side-toggle{
    display:flex; align-items:center; gap:10px; width:100%; padding:8px 14px 8px 8px; border:none; background:transparent;
    font-family:inherit; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; text-align:left;
  }
  #view-opportunities .opp-side-toggle .cur{ display:flex; align-items:center; gap:12px; flex:1; }
  #view-opportunities .opp-side-toggle .cur .opp-nav-ic{ width:30px; height:30px; }
  #view-opportunities .opp-side-toggle .caret{ width:16px; height:16px; color:var(--ink-soft); transition:transform .2s ease; flex-shrink:0; }
  #view-opportunities .opp-side.open .opp-side-toggle .caret{ transform:rotate(180deg); }
  #view-opportunities .opp-side-list{ display:none; border-top:1px solid var(--border); margin-top:6px; padding-top:6px; }
  #view-opportunities .opp-side.open .opp-side-list{ display:block; }
  #view-opportunities .opp-menu{ left:0; right:0; width:auto; }
  #view-opportunities .opp-create{ width:100%; }
  #view-opportunities .opp-create .btn{ width:100%; }
}
@media(max-width:640px){
  #view-opportunities .opp-bar{ gap:18px; margin-bottom:26px; }
  #view-opportunities .opp-tabs{ width:100%; gap:26px; }
  #view-opportunities .opp-chips{ width:100%; flex-basis:100%; gap:14px 8px; }
  #view-opportunities .opp-chip.opp-filter{ margin-left:0; }
}