/* ═══════════════════════════════════════════════════════════════════════
   hb-public.css — BARCHA ommaviy (tashqi tashrifchi ko'radigan) sahifalar
   uchun UMUMIY tahririy primitivlar.

   Nega alohida: 2026-08-10 da yangiliklar (`hbn-`) va vakansiyalar (`hbj-`)
   uchun bir xil "wrap / masthead / eyebrow / meta / footer" qoidalari IKKI
   marta yozilgan edi. Yana to'rt sahifa qo'shilayotgani uchun ular shu yerga
   `hbp-` prefiksi bilan bir marta ko'chirildi. Sahifaga XOS bloklar
   (blogning karta to'ri, vakansiyaning qatorlari) o'z fayllarida qoladi.

   Tokenlar hb-tokens.css dan — yorug'/qorong'i tema avtomatik.
   ═══════════════════════════════════════════════════════════════════════ */

.hbp-root{
  --hbp-ink: var(--hb-txt);
  --hbp-mut: var(--hb-mut);
  --hbp-line: var(--hb-brd);
  --hbp-acc: var(--hb-acc, #24C29A);
  --hbp-paper: var(--hb-bg);
  --hbp-paper-2: var(--hb-bg2);
  --hbp-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --hbp-mono: 'JetBrains Mono', ui-monospace, monospace;
  --hbp-wrap: 1240px;

  /* `.hb-content` ning paddingi (16px 24px 32px) bekor qilinadi — ommaviy
     sahifa chetdan chetgacha bo'ladi, ichki bloklar o'z `.hbp-wrap`i bilan
     markazlashadi. */
  display:block; margin:-16px -24px -32px;
  background:var(--hbp-paper); color:var(--hbp-ink);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hbp-wrap{ max-width:var(--hbp-wrap); margin:0 auto; padding:0 clamp(16px,4vw,40px) }
.hbp-narrow{ max-width:860px }

/* Navigatsiya topbar MARKAZIDA (barcha ommaviy sahifalarda bir xil).
   [2026-08-10] Chegara 760px dan 980px ga ko'tarildi: 7-punkt
   ("Biz haqimizda") qo'shilgach, ~860px da markazlashtirilgan navbar
   o'ngdagi tema/til/qo'ng'iroq tugmalariga TEGIB qolardi (mutlaq
   joylashuv oqimdan chiqadi va joy talab qilmaydi). 980px dan pastda
   nav oddiy oqimda chapda turadi — spacer tugmalarni o'ngga suradi va
   ustma-ust tushish bo'lmaydi. */
body.hbp-public .hb-topbar{ position:relative }
@media (min-width:980px){
  body.hbp-public .hb-topbar .hbpn-links{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  }
}

/* ── Mayda qismlar ── */
.hbp-eyebrow{
  font-family:var(--hbp-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--hbp-acc); font-weight:500;
}
.hbp-meta{
  font-family:var(--hbp-mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--hbp-mut); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hbp-meta .dot{ opacity:.5 }

/* ── Masthead ── */
.hbp-masthead{ padding:clamp(44px,7vw,86px) 0 clamp(20px,3vw,32px) }
.hbp-masthead h1{
  font-family:var(--hbp-serif); font-weight:500;
  font-size:clamp(40px,8vw,92px); line-height:.95; letter-spacing:-.035em;
  margin:14px 0 0; color:var(--hbp-ink);
}
.hbp-sub{ margin-top:18px; max-width:54ch; font-size:clamp(15px,1.6vw,17.5px);
  line-height:1.62; color:var(--hbp-mut) }

/* Statistika qatori */
.hbp-stats{
  display:flex; gap:clamp(24px,5vw,64px); flex-wrap:wrap;
  margin-top:clamp(28px,4vw,44px); padding:22px 0;
  border-top:1px solid var(--hbp-line); border-bottom:1px solid var(--hbp-line);
}
.hbp-stat-n{ font-family:var(--hbp-serif); font-size:clamp(30px,4vw,44px); line-height:1;
  font-weight:500; letter-spacing:-.02em }
.hbp-stat-l{ font-family:var(--hbp-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hbp-mut); margin-top:8px }

/* ── Bo'lim sarlavhasi ── */
.hbp-section{ padding:clamp(50px,7vw,92px) 0; border-top:1px solid var(--hbp-line) }
.hbp-section:first-of-type{ border-top:none }
.hbp-section h2{
  font-family:var(--hbp-serif); font-weight:500; font-size:clamp(26px,3.6vw,46px);
  letter-spacing:-.025em; line-height:1.08; margin:14px 0 0;
}
.hbp-section-lead{ margin:16px 0 0; max-width:56ch; font-size:16px;
  line-height:1.65; color:var(--hbp-mut) }

/* ── Matn (prose) ── */
.hbp-prose{
  max-width:68ch; font-family:var(--hbp-serif); font-size:18.5px; line-height:1.72;
  color:var(--hbp-ink);
}
.hbp-prose > *:first-child{ margin-top:0 }
.hbp-prose p{ margin:0 0 1.2em }
.hbp-prose h2{ font-size:1.5em; line-height:1.2; font-weight:600;
  letter-spacing:-.02em; margin:1.8em 0 .5em }
.hbp-prose h3{ font-size:1.22em; font-weight:600; margin:1.6em 0 .45em }
.hbp-prose ul, .hbp-prose ol{ margin:0 0 1.2em; padding-left:1.3em }
.hbp-prose li{ margin:.35em 0 }
.hbp-prose a{ color:var(--hbp-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--hbp-acc) }
.hbp-prose blockquote{
  margin:1.8em 0; padding:2px 0 2px 24px; border-left:3px solid var(--hbp-acc);
  font-size:1.12em; font-style:italic;
}

/* ── Tugmalar ── */
.hbp-btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; cursor:pointer;
  height:48px; padding:0 26px; border-radius:999px; border:1px solid transparent;
  background:var(--hbp-acc); color:var(--hb-acc-ink,#0B1F19);
  font:inherit; font-size:14.5px; font-weight:700; letter-spacing:-.1px;
  transition:background .2s ease, transform .2s ease;
}
.hbp-btn:hover{ background:var(--hb-acc-d,#1FA884); color:var(--hb-acc-ink,#0B1F19);
  text-decoration:none; transform:translateY(-1px) }
.hbp-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none }
.hbp-btn-ghost{ background:transparent; border-color:var(--hbp-line); color:var(--hbp-ink) }
.hbp-btn-ghost:hover{ background:var(--hbp-paper-2); color:var(--hbp-ink) }

/* ── Bo'sh holat ── */
.hbp-empty{ padding:clamp(60px,10vw,120px) 0; text-align:center }
.hbp-empty-t{ font-family:var(--hbp-serif); font-size:clamp(24px,3vw,34px); margin:14px 0 8px }
.hbp-empty-s{ color:var(--hbp-mut); font-size:14.5px; max-width:48ch; margin:0 auto }

/* ── Footer ── */
.hbp-foot{ border-top:1px solid var(--hbp-line); background:var(--hbp-paper-2) }
.hbp-foot-in{
  max-width:var(--hbp-wrap); margin:0 auto; padding:30px clamp(16px,4vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.hbp-foot-brand{ font-family:var(--hbp-mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--hbp-mut) }
.hbp-foot-links{ display:flex; gap:18px; flex-wrap:wrap }
.hbp-foot-links a{ color:var(--hbp-mut); text-decoration:none; font-size:13px; font-weight:600 }
.hbp-foot-links a:hover{ color:var(--hbp-ink) }

@media (max-width:600px){
  .hbp-prose{ font-size:17px }
  .hbp-stats{ gap:24px }
}