/* ═══════════════════════════════════════════════════════════════════════
   hb-news.css — Yangiliklar / universal blog (ommaviy sahifalar).

   DIZAYN YO'NALISHI (2026-08-10 tadqiqotidan keyin — Speckyboy "modern
   magazine layouts", MaxiBestOf editorial to'plami, Colorlib news/blog
   ro'yxatlari, Linear/Vercel/Stripe naqshlari):
     · TAHRIRIY (editorial) tipografiya — sarlavhalar SERIF (Newsreader,
       aynan yangilik/uzoq matn uchun yaratilgan), interfeys elementlari
       sans (Space Grotesk), meta esa monospace. Uch shriftning har biri
       O'Z VAZIFASINI bajaradi — "bitta shrift hamma joyda" emas.
     · KATTA OQ MAYDON va tinch to'r — Wired/New Yorker naqshi: matn
       ustuni 68ch dan oshmaydi, rasm esa "galereya asari" kabi keng.
     · IYERARXIYA: bitta bosh maqola (hero) qolganidan KESKIN kattaroq —
       tashrifchi "hozir eng muhimi nima" degan savolga bir qarashda
       javob oladi (Time/Verge).
     · O'ZARO TA'SIR ZICHLIGI: har element hover/focus/klaviaturaga javob
       beradi (Linear/Vercel), lekin bezak minimal.

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

/* `.hbn-root` — blog kontentining o'rami. UMUMIY primitivlar (wrap,
   masthead, eyebrow, meta, footer, tugmalar) endi hb-public.css da
   (`hbp-`) — bu yerda faqat blogga XOS bloklar qoladi. Tokenlar shu yerda
   ham e'lon qilinadi, chunki `hbn-` qoidalari ularga tayanadi. */
.hbn-body, .hbn-root{
  --hbn-ink: var(--hb-txt);
  --hbn-mut: var(--hb-mut);
  --hbn-line: var(--hb-brd);
  --hbn-acc: var(--hb-acc, #24C29A);
  --hbn-paper: var(--hb-bg);
  --hbn-paper-2: var(--hb-bg2);
  --hbn-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --hbn-sans: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --hbn-mono: 'JetBrains Mono', ui-monospace, monospace;
  --hbn-wrap: 1240px;

  background:var(--hbn-paper); color:var(--hbn-ink);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.hbn-body{ margin:0 }
/* Manfiy margin endi `.hbp-root` da (hb-public.css) — bu yerda takroran
   qo'llansa kontent ikki marta siljirdi. */
.hbn-root{ display:block }
.hbn-wrap{ max-width:var(--hbn-wrap); margin:0 auto; padding:0 clamp(16px,4vw,40px) }

/* Navigatsiyani markazlashtirish → hb-public.css (`body.hbp-public`). */

/* ── Umumiy mayda qismlar ────────────────────────────────────────────── */
.hbn-eyebrow{
  font-family:var(--hbn-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--hbn-acc); font-weight:500;
}
.hbn-meta{
  font-family:var(--hbn-mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--hbn-mut); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hbn-meta .dot{ opacity:.5 }
.hbn-cat{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--hbn-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; color:var(--hbn-ink);
}
.hbn-cat::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--hbn-cat-color, var(--hbn-acc));
}

/* ═══ Masthead ═══════════════════════════════════════════════════════ */
.hbn-masthead{ padding:clamp(44px,7vw,86px) 0 clamp(24px,3vw,36px) }
.hbn-masthead h1{
  font-family:var(--hbn-serif); font-weight:500;
  font-size:clamp(44px,9vw,104px); line-height:.92; letter-spacing:-.035em;
  margin:14px 0 0; color:var(--hbn-ink);
}
.hbn-masthead .hbn-sub{
  margin-top:18px; max-width:52ch; font-size:clamp(15px,1.6vw,17.5px);
  line-height:1.62; color:var(--hbn-mut);
}
.hbn-mast-rule{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:clamp(26px,4vw,44px); padding-bottom:14px;
  border-bottom:1px solid var(--hbn-line);
  font-family:var(--hbn-mono); font-size:11.5px; letter-spacing:.08em;
  color:var(--hbn-mut); text-transform:uppercase;
}

/* ═══ Bosh maqola (hero) ═════════════════════════════════════════════ */
.hbn-hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px);
  align-items:center; padding:clamp(34px,5vw,64px) 0;
  border-bottom:1px solid var(--hbn-line);
}
.hbn-hero-media{
  position:relative; border-radius:var(--hb-radius,22px); overflow:hidden;
  background:var(--hbn-paper-2); aspect-ratio:4/3;
}
.hbn-hero-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.hbn-hero:hover .hbn-hero-media img{ transform:scale(1.035) }
.hbn-hero-body{ min-width:0 }
.hbn-hero h2{
  font-family:var(--hbn-serif); font-weight:500;
  font-size:clamp(30px,4.4vw,58px); line-height:1.04; letter-spacing:-.025em;
  margin:16px 0 0;
}
.hbn-hero h2 a{ color:var(--hbn-ink); text-decoration:none; background-image:linear-gradient(var(--hbn-acc),var(--hbn-acc));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s cubic-bezier(.16,1,.3,1); }
.hbn-hero h2 a:hover{ background-size:100% 2px }
.hbn-hero .hbn-lead{
  margin:18px 0 0; font-size:17px; line-height:1.62; color:var(--hbn-mut);
  max-width:46ch;
}
.hbn-hero .hbn-meta{ margin-top:22px }
.hbn-hero-badge{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:6px;
  padding:5px 11px; border-radius:999px; background:var(--hbn-acc);
  color:var(--hb-acc-ink,#0B1F19);
  font-family:var(--hbn-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}

/* ═══ Filtr paneli ═══════════════════════════════════════════════════ */
.hbn-filters{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:22px 0; border-bottom:1px solid var(--hbn-line);
}
.hbn-chips{ display:flex; gap:8px; flex-wrap:wrap; flex:1; min-width:0 }
.hbn-chip{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  padding:7px 14px; border-radius:999px; border:1px solid var(--hbn-line);
  font-size:12.5px; font-weight:600; color:var(--hbn-mut); background:transparent;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
a.hbn-chip:hover{ color:var(--hbn-ink); border-color:var(--hb-brd2); text-decoration:none }
.hbn-chip.active{ background:var(--hbn-ink); border-color:var(--hbn-ink); color:var(--hbn-paper) }
.hbn-chip .n{ font-family:var(--hbn-mono); font-size:10.5px; opacity:.7 }
.hbn-search{
  display:flex; align-items:center; gap:9px; height:38px; padding:0 15px;
  border:1px solid var(--hbn-line); border-radius:999px; min-width:230px;
  color:var(--hbn-mut); transition:border-color .18s ease;
}
.hbn-search:focus-within{ border-color:var(--hbn-acc) }
.hbn-search input{
  border:0; outline:0; background:transparent; color:var(--hbn-ink);
  font:inherit; font-size:13px; width:100%; min-width:0;
}

/* ═══ Karta to'ri ════════════════════════════════════════════════════ */
.hbn-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,44px) clamp(20px,2.6vw,36px);
  padding:clamp(34px,5vw,58px) 0;
}
.hbn-card{ display:flex; flex-direction:column; min-width:0 }
.hbn-card-media{
  position:relative; border-radius:var(--hb-radius-md,18px); overflow:hidden;
  background:var(--hbn-paper-2); aspect-ratio:16/11; margin-bottom:16px;
}
.hbn-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.hbn-card:hover .hbn-card-media img{ transform:scale(1.05) }
/* Rasmsiz post — bo'sh kulrang to'rtburchak o'rniga sarlavha harfi bilan
   tipografik muqova (blogda rasm har doim ham bo'lavermaydi). */
.hbn-card-ph, .hbn-hero-ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--hbn-paper-2); color:var(--hbn-line);
  font-family:var(--hbn-serif); font-size:clamp(60px,10vw,120px); line-height:1;
  user-select:none;
}
.hbn-card h3{
  font-family:var(--hbn-serif); font-weight:500; font-size:22px; line-height:1.22;
  letter-spacing:-.015em; margin:10px 0 0;
}
.hbn-card h3 a{
  color:var(--hbn-ink); text-decoration:none;
  background-image:linear-gradient(var(--hbn-acc),var(--hbn-acc));
  background-size:0 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .4s cubic-bezier(.16,1,.3,1);
}
.hbn-card:hover h3 a{ background-size:100% 1.5px }
.hbn-card p{
  margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--hbn-mut);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hbn-card .hbn-meta{ margin-top:14px }

/* ═══ Bo'sh holat / sahifalash ═══════════════════════════════════════ */
.hbn-empty{
  padding:clamp(60px,10vw,120px) 0; text-align:center; border-bottom:1px solid var(--hbn-line);
}
.hbn-empty-t{ font-family:var(--hbn-serif); font-size:clamp(24px,3vw,34px); margin:14px 0 8px }
.hbn-empty-s{ color:var(--hbn-mut); font-size:14.5px }
.hbn-pager{ display:flex; gap:10px; justify-content:center; padding:0 0 clamp(50px,7vw,90px) }
.hbn-pager a, .hbn-pager span{
  padding:10px 20px; border-radius:999px; border:1px solid var(--hbn-line);
  font-size:13px; font-weight:600; text-decoration:none; color:var(--hbn-ink);
}
.hbn-pager a:hover{ background:var(--hbn-paper-2); text-decoration:none }
.hbn-pager span{ color:var(--hbn-mut); opacity:.5 }

/* ═══ Maqola sahifasi ════════════════════════════════════════════════ */
.hbn-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:80;
  background:var(--hbn-acc); transition:width .1s linear;
}
.hbn-article{ padding:clamp(34px,5vw,64px) 0 0 }
.hbn-art-head{ max-width:860px; margin:0 auto; text-align:center }
.hbn-art-head h1{
  font-family:var(--hbn-serif); font-weight:500;
  font-size:clamp(32px,5.6vw,66px); line-height:1.03; letter-spacing:-.03em;
  margin:18px 0 0;
}
.hbn-art-lead{
  margin:22px auto 0; max-width:60ch; font-size:clamp(16px,1.8vw,19px);
  line-height:1.6; color:var(--hbn-mut);
}
.hbn-art-byline{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:30px; padding-top:26px; border-top:1px solid var(--hbn-line);
}
.hbn-avatar{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--hbn-acc); color:var(--hb-acc-ink,#0B1F19);
  font-weight:700; font-size:14px; font-family:var(--hbn-sans);
}
.hbn-byline-txt{ text-align:left; line-height:1.35 }
.hbn-byline-name{ font-weight:700; font-size:14px }
.hbn-art-cover{
  margin:clamp(32px,5vw,56px) auto 0; max-width:1080px;
  border-radius:var(--hb-radius,22px); overflow:hidden; background:var(--hbn-paper-2);
}
.hbn-art-cover img{ width:100%; display:block }
.hbn-art-cover figcaption{
  padding:12px 4px 0; font-family:var(--hbn-mono); font-size:11px;
  color:var(--hbn-mut); text-align:center;
}

/* ── O'qish ustuni ── */
.hbn-prose{
  max-width:68ch; margin:clamp(38px,5vw,64px) auto 0;
  font-family:var(--hbn-serif); font-size:19.5px; line-height:1.72;
  color:var(--hbn-ink); letter-spacing:-.003em;
}
.hbn-prose > *:first-child{ margin-top:0 }
.hbn-prose p{ margin:0 0 1.35em }
/* Bosh harf (drop cap) — bosma jurnal an'anasi, faqat BIRINCHI xatboshida
   va faqat keng ekranda (mobil ustunda u satrni buzadi). */
@media (min-width:700px){
  .hbn-prose > p:first-of-type::first-letter{
    float:left; font-size:4.05em; line-height:.84; padding:.06em .09em 0 0;
    font-weight:600; color:var(--hbn-ink);
  }
}
.hbn-prose h2{
  font-size:1.55em; line-height:1.2; font-weight:600; letter-spacing:-.02em;
  margin:2em 0 .6em;
}
.hbn-prose h3{ font-size:1.25em; line-height:1.28; font-weight:600; margin:1.7em 0 .5em }
.hbn-prose a{ color:var(--hbn-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--hbn-acc); text-decoration-thickness:1.5px }
.hbn-prose a:hover{ color:var(--hbn-acc) }
.hbn-prose ul, .hbn-prose ol{ margin:0 0 1.35em; padding-left:1.3em }
.hbn-prose li{ margin:.4em 0 }
.hbn-prose img, .hbn-prose video{
  max-width:100%; height:auto; display:block; border-radius:var(--hb-radius-md,18px);
  margin:2em 0;
}
/* Iqtibos — chap chiziqli, kattaroq va sal "chetga chiqqan" (bosma
   pull-quote naqshi). */
.hbn-prose blockquote{
  margin:2em 0; padding:2px 0 2px 26px; border-left:3px solid var(--hbn-acc);
  font-size:1.16em; line-height:1.5; font-style:italic; color:var(--hbn-ink);
}
.hbn-prose blockquote p:last-child{ margin-bottom:0 }
.hbn-prose hr{ border:0; border-top:1px solid var(--hbn-line); margin:2.4em 0 }
.hbn-prose code{
  font-family:var(--hbn-mono); font-size:.82em; background:var(--hbn-paper-2);
  padding:.15em .4em; border-radius:6px;
}
.hbn-prose pre{
  font-family:var(--hbn-mono); font-size:13.5px; line-height:1.6;
  background:var(--hbn-paper-2); padding:18px 20px; border-radius:14px;
  overflow-x:auto; margin:2em 0;
}
.hbn-prose pre code{ background:none; padding:0 }
.hbn-prose table{ width:100%; border-collapse:collapse; margin:2em 0; font-size:.85em;
  font-family:'Inter',sans-serif }
.hbn-prose th, .hbn-prose td{ border-bottom:1px solid var(--hbn-line); padding:10px 12px; text-align:left }

/* ── Maqola oxiri ── */
.hbn-art-foot{ max-width:68ch; margin:clamp(34px,5vw,52px) auto 0;
  padding-top:26px; border-top:1px solid var(--hbn-line) }
.hbn-tags{ display:flex; gap:8px; flex-wrap:wrap }
.hbn-tag{
  text-decoration:none; padding:6px 12px; border-radius:999px;
  background:var(--hbn-paper-2); color:var(--hbn-mut);
  font-family:var(--hbn-mono); font-size:11px; letter-spacing:.04em;
  transition:color .18s ease, background .18s ease;
}
a.hbn-tag:hover{ color:var(--hbn-ink); text-decoration:none }
.hbn-share{ display:flex; gap:8px; align-items:center; margin-top:22px; flex-wrap:wrap }
.hbn-share-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:8px 14px; border-radius:999px; border:1px solid var(--hbn-line);
  background:transparent; color:var(--hbn-ink); font:inherit; font-size:12.5px; font-weight:600;
  text-decoration:none; transition:background .18s ease;
}
.hbn-share-btn:hover{ background:var(--hbn-paper-2); text-decoration:none }

.hbn-related{ padding:clamp(46px,6vw,80px) 0 clamp(50px,7vw,90px) }
.hbn-related-h{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:16px; margin-bottom:clamp(24px,3vw,36px);
  border-top:1px solid var(--hbn-line); padding-top:26px;
}
.hbn-related-h h3{ font-family:var(--hbn-serif); font-weight:500; font-size:clamp(22px,2.6vw,30px); margin:0 }

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

/* ═══ Moslashuvchanlik ═══════════════════════════════════════════════ */
@media (max-width:1000px){
  .hbn-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:760px){
  .hbn-hero{ grid-template-columns:1fr; gap:24px }
  /* Rasm sarlavhadan OLDIN — mobil o'qishda birinchi ko'z ilg'aydigan
     narsa rasm bo'lishi kerak (desktopda esa matn chapda turadi). */
  .hbn-hero-media{ order:-1; aspect-ratio:16/10 }
  .hbn-grid{ grid-template-columns:1fr; gap:34px }
  .hbn-filters{ gap:12px }
  .hbn-search{ width:100%; min-width:0 }
  .hbn-prose{ font-size:18px }
  .hbn-art-head{ text-align:left }
  .hbn-art-byline{ justify-content:flex-start }
}
@media (prefers-reduced-motion:reduce){
  .hbn-hero-media img, .hbn-card-media img{ transition:none }
  .hbn-hero:hover .hbn-hero-media img, .hbn-card:hover .hbn-card-media img{ transform:none }
}