/* ═══════════════════════════════════════════════════════
   BizBoard – Frontend Stylesheet
   Matches the supplied template's design system
═══════════════════════════════════════════════════════ */

/* ── Google Font ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ── CSS Variables ────────────────────────────────────── */
:root{
  --bb-blue-50:#EFF6FF;
  --bb-blue-100:#DBEAFE;
  --bb-blue-300:#93C5FD;
  --bb-blue-600:#2563EB;
  --bb-blue-700:#1D4ED8;
  --bb-gray-50:#F9FAFB;
  --bb-gray-100:#F3F4F6;
  --bb-gray-200:#E5E7EB;
  --bb-gray-300:#D1D5DB;
  --bb-gray-400:#9CA3AF;
  --bb-gray-500:#6B7280;
  --bb-gray-700:#374151;
  --bb-gray-900:#111827;
  --bb-radius:14px;
  --bb-shadow:0 2px 16px 0 rgba(17,24,39,.07);
  --bb-shadow-hover:0 8px 32px 0 rgba(17,24,39,.13);
  --bb-font:'Sora',sans-serif;
  --bb-font-body:'Inter',sans-serif;
}

/* ── Layout helpers ───────────────────────────────────── */
.bb-container          { max-width:1180px;margin:0 auto;padding:0 20px; }
.bb-row                { display:flex;flex-wrap:wrap;margin:-8px; }
.bb-g3                 { gap:20px;margin:0; }
.bb-flex               { display:flex; }
.bb-align-end          { align-items:flex-end; }
.bb-align-start        { align-items:flex-start; }
.bb-justify-between    { justify-content:space-between; }
.bb-justify-center     { justify-content:center; }
.bb-flex-wrap          { flex-wrap:wrap; }
.bb-gap2               { gap:8px; }
.bb-gap3               { gap:12px; }
.bb-text-center        { text-align:center; }
.bb-mb2                { margin-bottom:8px; }
.bb-mb4                { margin-bottom:24px; }
.bb-mt2                { margin-top:8px; }
.bb-mt5                { margin-top:40px; }

/* ── Section typography ───────────────────────────────── */
.bb-section-lbl{
  font-family:var(--bb-font);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bb-blue-600);
  margin-bottom:6px;
}
.bb-section-title{
  font-family:var(--bb-font);font-size:1.75rem;font-weight:800;
  color:var(--bb-gray-900);line-height:1.2;margin:0 0 4px;
}
.bb-section-sub{
  font-family:var(--bb-font-body);font-size:.88rem;color:var(--bb-gray-400);
  margin:0;
}

/* ── Section wrappers ─────────────────────────────────── */
.bb-biz-strip,
.bb-companies-wrap  { padding:56px 0; }
.bb-invest-section  { padding:56px 0; background:var(--bb-gray-50); }
.bb-search-section  { padding:56px 0; }

/* ── Chips / Filter pills ─────────────────────────────── */
.bb-chips{
  display:flex;flex-wrap:wrap;gap:8px;
}
.bb-chip{
  font-family:var(--bb-font);font-size:.79rem;font-weight:600;
  padding:7px 16px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--bb-gray-200);color:var(--bb-gray-500);
  background:#fff;transition:all .18s;display:flex;align-items:center;gap:6px;
  user-select:none;
}
.bb-chip:hover{border-color:var(--bb-blue-300);color:var(--bb-blue-600);}
.bb-chip.active{border-color:var(--bb-blue-600);color:var(--bb-blue-700);background:var(--bb-blue-50);}

/* ── Company picture cards ────────────────────────────── */
.bb-biz-pic-card{
  position:relative;border-radius:var(--bb-radius);overflow:hidden;
  aspect-ratio:4/3;background:var(--bb-gray-100);
  box-shadow:var(--bb-shadow);cursor:pointer;
  transition:transform .22s,box-shadow .22s;
}
.bb-biz-pic-card:hover{transform:translateY(-4px);box-shadow:var(--bb-shadow-hover);}
.bb-biz-pic-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s;
}
.bb-biz-pic-card:hover img{transform:scale(1.04);}
.bb-biz-pic-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(17,24,39,.80) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
}
.bb-biz-pic-tag{
  font-family:var(--bb-font);font-size:.72rem;font-weight:700;
  color:#fff;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);
  border-radius:999px;padding:4px 12px;display:inline-flex;align-items:center;
  gap:5px;margin-bottom:8px;width:fit-content;
}
.bb-biz-pic-name{
  font-family:var(--bb-font);font-size:1.05rem;font-weight:700;color:#fff;
  margin-bottom:4px;
}
.bb-biz-pic-meta{
  font-family:var(--bb-font-body);font-size:.78rem;color:rgba(255,255,255,.75);
}

/* ── Companies grid responsive ───────────────────────── */
.bb-companies-grid .bb-col{ flex:1 1 calc(33.33% - 20px);min-width:260px; }
.bb-col-2 .bb-col{ flex:1 1 calc(50% - 20px); }
.bb-col-4 .bb-col{ flex:1 1 calc(25% - 20px); }

/* ── Investment cards ─────────────────────────────────── */
.bb-invest-grid   { display:grid;grid-template-columns:repeat(3,1fr);gap:20px; }
@media(max-width:900px){ .bb-invest-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .bb-invest-grid{grid-template-columns:1fr;} }

.bb-col-invest { display:contents; }

.bb-invest-card{
  background:#fff;border-radius:var(--bb-radius);overflow:hidden;
  box-shadow:var(--bb-shadow);display:flex;flex-direction:column;
  transition:transform .22s,box-shadow .22s;
}
.bb-invest-card:hover{transform:translateY(-4px);box-shadow:var(--bb-shadow-hover);}

.bb-invest-card-img{
  width:100%;height:160px;object-fit:cover;display:block;
}
.bb-invest-card-body { padding:18px 18px 12px;flex:1; }
.bb-invest-logo{
  width:38px;height:38px;border-radius:10px;font-family:var(--bb-font);
  font-weight:800;font-size:.85rem;display:grid;place-items:center;
  flex-shrink:0;
}
.bb-invest-company{
  font-family:var(--bb-font);font-size:.97rem;font-weight:700;
  color:var(--bb-gray-900);margin:0 0 3px;
}
.bb-invest-location{
  font-family:var(--bb-font-body);font-size:.78rem;color:var(--bb-gray-400);
  margin-bottom:8px;display:flex;align-items:center;gap:4px;
}
.bb-invest-amt{
  font-family:var(--bb-font);font-size:1.45rem;font-weight:800;
  color:var(--bb-blue-700);margin-bottom:8px;
}
.bb-invest-desc{
  font-family:var(--bb-font-body);font-size:.82rem;color:var(--bb-gray-500);
  line-height:1.55;margin:0 0 12px;
}
.bb-invest-footer{
  padding:10px 18px 14px;border-top:1px solid var(--bb-gray-100);
  display:flex;align-items:center;justify-content:space-between;
}
.bb-invest-date{
  font-family:var(--bb-font-body);font-size:.75rem;color:var(--bb-gray-400);
  display:flex;align-items:center;gap:5px;
}
.bb-invest-tags { display:flex;flex-wrap:wrap;gap:5px; }
.bb-inv-tag{
  font-family:var(--bb-font-body);font-size:.72rem;font-weight:500;
  padding:3px 9px;background:var(--bb-gray-100);color:var(--bb-gray-500);
  border-radius:999px;
}

/* ── Stage Pills ──────────────────────────────────────── */
.bb-stage-pill{
  font-family:var(--bb-font);font-size:.7rem;font-weight:700;
  padding:4px 11px;border-radius:999px;
}
.stage-seed  { background:#ECFDF5;color:#059669; }
.stage-a     { background:#EFF6FF;color:#2563EB; }
.stage-b     { background:#F0F9FF;color:#0284C7; }
.stage-c     { background:#F5F3FF;color:#7C3AED; }
.stage-ipo   { background:#FFF3E0;color:#E65100; }

/* ── Search section ───────────────────────────────────── */
.bb-search-box{
  display:flex;align-items:center;gap:0;
  border:1.5px solid var(--bb-gray-200);border-radius:12px;
  background:#fff;padding:6px 8px 6px 18px;box-shadow:var(--bb-shadow);
  max-width:640px;margin:0 auto 20px;
}
.bb-search-box i{ color:var(--bb-gray-400);font-size:1.05rem;margin-right:10px; }
.bb-search-box input{
  flex:1;border:none;outline:none;font-family:var(--bb-font-body);
  font-size:.93rem;color:var(--bb-gray-700);background:transparent;
  min-width:0;
}
.bb-search-btn{
  font-family:var(--bb-font);font-weight:700;font-size:.85rem;
  background:var(--bb-blue-600);color:#fff;border:none;
  border-radius:9px;padding:9px 22px;cursor:pointer;
  transition:background .18s;white-space:nowrap;
}
.bb-search-btn:hover{ background:var(--bb-blue-700); }

.bb-search-results { margin-top:32px; }
.bb-results-group  { margin-bottom:32px; }
.bb-results-label{
  font-family:var(--bb-font);font-size:.82rem;font-weight:700;
  color:var(--bb-gray-500);text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:14px;display:flex;align-items:center;gap:6px;
}
.bb-no-results{
  font-family:var(--bb-font-body);color:var(--bb-gray-400);
  text-align:center;padding:48px 20px;font-size:.93rem;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.bb-no-results i{ font-size:2rem;color:var(--bb-gray-300); }

/* ── Load more ────────────────────────────────────────── */
.bb-load-more{
  font-family:var(--bb-font);font-weight:700;font-size:.9rem;
  border:1.5px solid var(--bb-blue-300);color:var(--bb-blue-600);
  border-radius:10px;padding:12px 28px;background:transparent;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .2s;
}
.bb-load-more:hover{ background:var(--bb-blue-50); }
.bb-load-more:disabled{ opacity:.5;cursor:default; }

/* ── Spinner ──────────────────────────────────────────── */
.bb-spinner{
  display:inline-block;width:18px;height:18px;
  border:2px solid var(--bb-blue-100);border-top-color:var(--bb-blue-600);
  border-radius:50%;animation:bb-spin .6s linear infinite;
}
@keyframes bb-spin{ to{transform:rotate(360deg);} }

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:768px){
  .bb-section-title{ font-size:1.35rem; }
  .bb-companies-grid .bb-col{ flex:1 1 calc(50% - 20px); }
  .bb-flex.bb-justify-between{ flex-direction:column;gap:12px; }
}
@media(max-width:480px){
  .bb-companies-grid .bb-col{ flex:1 1 100%; }
}