/* ═══════════════════════════════════════════════════════════════════════
   hbs-base.css — Sahifa konstruktori bo'limlarining UMUMIY asosi
   (TZ/sahifa-konstruktori). Har bir bo'limning o'z CSS'i
   hrm_launcher/sections/<key>/section.css da, faqat `.hbs-<key>` ostida.

   Bu yerda faqat hamma bo'limga tegishli narsa: bo'lim ramkasi, sarlavha
   naqshi (hozirgi bosh sahifa `.hbm-head` bilan AYNAN bir xil ko'rinish —
   buyurtmachi qarori S-5) va urg'u rangi tokeni.

   Qoidalar: rang faqat `--hb-*` token orqali; qaymoq/kulrang fon yo'q;
   izohlarda yulduzcha va slesh yonma-yon kelmasin (butun faylni sindiradi).
   ═══════════════════════════════════════════════════════════════════════ */

.hbs-page{ width:100%; display:flex; flex-direction:column; gap:var(--hbs-gap, clamp(56px, 7vw, 96px)); box-sizing:border-box }
/* Sahifa zichligi (pages.py `density`) — hozirgi sahifalar ritmi aynan
   saqlanadi (S-5): kompaniya sahifalari 40px (telefon 24px), bosh sahifa 28px. */
.hbs-page--company{ --hbs-gap:40px }
.hbs-page--home{ --hbs-gap:28px }
@media (max-width: 640px){ .hbs-page--company{ --hbs-gap:24px } }

.hbs{
  width:100%; box-sizing:border-box;
  container-type:inline-size;
  padding-inline:clamp(4px, 2vw, 28px);
  /* Bo'lim urg'u rangi — `accent` maydoni `hbs-acc-<nom>` klassi bilan almashtiradi. */
  --hbs-accent: var(--hb-acc);
  --hbs-accent-text: var(--hb-acc-text);
}
.hbs *, .hbs *::before, .hbs *::after{ box-sizing:border-box }
.hbs [hidden]{ display:none !important }

/* Jamoa ranglari — home_sections.py::TEAM_CONFIG bilan bir xil qiymatlar. */
.hbs .hbs-acc-mebelcity, .hbs.hbs-acc-mebelcity{ --hbs-accent:#E5484D; --hbs-accent-text:#E5484D }
.hbs .hbs-acc-bittada,   .hbs.hbs-acc-bittada  { --hbs-accent:#24C29A; --hbs-accent-text:var(--hb-acc-text) }
.hbs .hbs-acc-bigone,    .hbs.hbs-acc-bigone   { --hbs-accent:#D4AF37; --hbs-accent-text:#B8932A }
.hbs .hbs-acc-neutral,   .hbs.hbs-acc-neutral  { --hbs-accent:var(--hb-txt); --hbs-accent-text:var(--hb-txt) }

/* ── Sarlavha naqshi ──────────────────────────────────────────────────── */
.hbs-head{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:760px; margin:0 auto clamp(24px, 3vw, 36px); text-align:center;
}
/* Bosh sahifa: sarlavha va kontent orasi bugungi `.hbm-sec` oralig'i bilan
   aynan — HAMMA kenglikda 28px (u yerdagi `@container` ichidagi 22px hech
   qachon ishlamaydi: bo'lim o'zi konteyner, o'z-o'ziga so'rov bo'lmaydi —
   o'lchab tekshirilgan, 390..1440px). Kompaniya sahifalari umumiy qoidada. */
.hbs-page--home .hbs-head{ margin-bottom:28px }
.hbs-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hbs-accent-text);
}
.hbs-eyebrow::before{ content:''; width:22px; height:1.5px; background:currentColor; opacity:.6; flex:none }
.hbs-title{
  margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.07;
  font-size:clamp(26px, 3.2cqw + 14px, 46px); color:var(--hb-txt);
}
.hbs-title-acc{ color:var(--hbs-accent-text) }
.hbs-lead{
  margin:0; max-width:62ch; color:var(--hb-mut);
  font-size:clamp(14.5px, .6cqw + 12px, 16.5px); line-height:1.62;
  white-space:pre-line;
}

/* Havola bo'lgan element — fokus ko'rinishi hamma bo'limda bir xil. */
.hbs a.hbs-link{ color:inherit; text-decoration:none }
.hbs a.hbs-link:focus-visible{ outline:2px solid var(--hbs-accent); outline-offset:3px; border-radius:inherit }

@media (prefers-reduced-motion: reduce){
  .hbs *, .hbs *::before, .hbs *::after{ animation:none !important; transition:none !important }
}

/* Muharrir preview'ida tanlangan bo'lim (hbs-preview.js `data-hbs-selected`
   qo'yadi). Oddiy ko'rish sahifasida bu atribut hech qachon bo'lmaydi. */
.hbs[data-hbs-selected]{ outline:2px solid var(--hb-acc); outline-offset:6px; border-radius:18px }