/* ==========================================================================
   BOSH-08 · XIZMAT MUDDATI — v2 · BENTO (12.09, hakam tuzatishlaridan keyin)
   brif/TAHRIR-2-12-09-bento.md  ·  Otabek: «bu blockda ham bento stilni
   ishlatsang boladi qaysidir joyiga»

   Kompozitsiya (3 qavat, hammasi YUQORIGA tekislangan):
     1 · sarlavha — toʻliq kenglikda (kegli ritm.css dan, bu yerda yozilmaydi)
     2 · BENTO mozaika — 12 ustun, IKKI qator:
           chap 5 ustun : langar plita, CANVAS (raqam + lid)  ↑
                          OQIBATI plitasi, OQ + 1 px chiziq  ↓
           oʻng 7 ustun : ochiq katak, ikkala qatorni egallaydi — h4 + 6 holat
                          plitasi, 1.15 / .85 ikki ustun × 3 qator, oqim USTUN
                          boʻylab (01·02·03 chapda, 04·05·06 oʻngda),
                          har birida raqam CHAPDA
         Chapda ikki xil sirt va balandlikdagi plita + oʻngda olti xilma-xil
         plita — haqiqiy mozaika. Ortiqcha havo bitta teshik emas: qaysi ustun
         kaltaroq boʻlsa u choʻziladi (auto qatorlar + align-content:stretch;
         1fr EMAS — u qatorlarni eng balandiga tenglashtirib, bir qatorli
         plitalarda 60 % havo qoldirardi).
     3 · DUM — DIQQAT (1–7 ustun, plitasiz, «small but HIGH-PRIORITY») va
         CTA (9–12 ustun, matn-havola) BITTA relsda, BITTA yakuniy chiziq
         ostida. Navy plita QILINMAYDI, tik koʻk chiziq ham qaytarilmaydi.

   BOSH-07 v2 ↔ BOSH-08 v2 — qoʻshni ikki blok, yaqin arxetip («raqam plitasi +
   N kichik plita»). Ularni ajratib turadigan farqlar QULFLANGAN (GLOBAL-2:
   qoʻshni ikki blok bir xil koʻrinmaydi):
     · sirt          — BOSH-08: oq boʻlim               | BOSH-07: QUYUQ band
     · langar sirti  — BOSH-08: canvas-on-white         | BOSH-07: oq-on-navy
     · chok koʻzgusi — BOSH-08: langar CHAPDA           | BOSH-07: langar OʻNGDA
     · kichik plita  — BOSH-08: 2 ASSIMETRIK ustun × 3 qator, ustun oqimi,
                       raqam CHAPDA                     | BOSH-07: 5 TENG ustun
                       bitta qatorda, raqam TEPADA
     · raqam kegli   — BOSH-08: h2 × .84 (1440 da 42 px, ogʻirlik 3)
                                                        | BOSH-07: 64 px (langar, 5)

   Qoidalar: soya 0 · gradient 0 · tracking ≤ 0 (faqat CAPS yorliq .09em/600) ·
   radius toʻrt burchakda 16 px (bento.css) · plita ichida plita yoʻq ·
   aksent faqat belgi: «km» birligi, 01–06 raqamlari, yorliq kvadrati va
   DIQQAT yorligʻi · boʻlim paddingi va h2 kegli — ritm.css dan.
   Oʻz-oʻziga yetarli: css/b08.css ga tayanmaydi. bento.css dan KEYIN yuklanadi.

   ⚠ TIZIM DARAJASIDA QOLGAN IKKI ISH (bu variant ikki faylidan tashqarida,
   ota-agent bajaradi — shu yerda hack qilinmadi):
     · `--bento-pad-k:clamp(18px,1.5vw,22px)` bento.css :root ga eʼlon qilinsin.
       Hozir `.b08v2__q` uni fallback bilan chaqiradi — qiymat AYNAN oʻsha,
       lekin manba bitta boʻlmaguncha keyingi blok boshqa padding chizishi mumkin.
     · `--canvas` tokenlar.css da #F2F6FB (oq ustida ~2 % qadam) — plita zoʻrgʻa
       plita boʻlib oʻqiladi. Ota-loyihada bu allaqachon #EDF2F8 ga oʻtkazilgan
       (sirt.css / GLOBAL-2: «avval #F2F6FB — farqi 3 % edi, koʻrinmasdi»).
       Butun sayt boʻyicha bitta qaror, BOSH-05/07 gʻoliblari bilan birga.
   ========================================================================== */

/* ==========================================================================
   1 · SARLAVHA — toʻliq kenglikda
   ========================================================================== */
.b08v2__bosh{
  display:grid;gap:var(--s5);justify-items:start;
  margin-bottom:clamp(32px,3.2vw,44px);
}
/* «… oraliq —» birinchi qatorda tugaydi, tire yangi qator boshlamaydi */
.b08v2__bosh h2{max-width:13em;text-wrap:pretty}

/* ==========================================================================
   2 · BENTO MOZAIKA — 12 ustun × 2 qator, joylashuv nomlangan maydonlar bilan
   (DOM: langar → holat → oqibat; OQIBATI chapga faqat shu yerda oʻtadi)
   ========================================================================== */
.b08v2__mozaika{
  grid-template-areas:
    "l l l l l h h h h h h h"
    "o o o o o h h h h h h h";
  grid-template-rows:auto auto;
  align-items:stretch;
}
.b08v2__langar{grid-area:l}
.b08v2__holat{grid-area:h}
.b08v2__oqibat{grid-area:o}

/* --- chap · langar plita (canvas) ---
   Raqam plitaning ichki kengligiga qarab oʻlchanadi (container units), lekin
   shu blok h2 sidan (var(--h2): ritm.css B pogʻona — 1440 da 50 px, 1280 da
   44.8, 1024 da 35.8, ≤768 da 30) HECH QAYERDA oshmaydi: brifda raqam
   ierarxiyada 2-oʻrin, GLOBAL-2 jadvalida BOSH-08 ogʻirligi 3 (langar emas). */
.b08v2__langar{gap:var(--s5);container-type:inline-size}
/* Hakam (1 + 9): raqam h2 ga TENG baqirardi (1440 da ikkalasi ham roppa-rosa
   50 px). Cheklov ikki tomondan tushirildi — ichki clamp 44 px, ustidan
   h2 × .84 tomi: 1440 da 42 px, 1280 da 37.6, ya'ni sarlavhadan bir pogʻona
   past, lekin plita ichida hamon eng katta narsa. */
.b08v2__raqam{
  font-size:min(clamp(28px,3.2vw,44px),calc(var(--h2) * .84));   /* cqi boʻlmasa */
  font-size:min(clamp(28px,10cqi,44px),calc(var(--h2) * .84));
  line-height:.95;white-space:nowrap;
}
/* birlik — blokdagi aksent belgi; canvas ustida AA uchun quyuqroq koʻk;
   kichik raqamda ham 12 px dan tushmaydi */
.b08v2__raqam .plyus{margin-left:.14em;color:var(--aksent-mayda);font-size:max(.38em,12px)}
/* balance emas — pretty: «15 000–40 000 km» oraligʻi qator oxirida boʻlinmasin
   (1024 · 1280 · 1440 da oʻlchangan) */
.b08v2__lid{max-width:27em;text-wrap:pretty;color:var(--slate)}

/* --- chap · OQIBATI plitasi (canvas) — kuchli editorial oqibat gapi.
   Yorliq CSS `content` orqali: kvadrat nuqta ::before, matn ::after —
   HTML matni asl bilan 1:1. align-content:start — plita choʻzilganda
   yorliq qatori oʻsmaydi, matn yuqorida qoladi. --- */
.b08v2__oqibat{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:9px;row-gap:var(--s4);align-items:start;align-content:start;
}
.b08v2__oqibat::before{
  content:"";grid-area:1/1;width:7px;height:7px;margin-top:3px;background:var(--aksent);
}
.b08v2__oqibat::after{
  content:"OQIBATI";grid-area:1/2;
  font-size:var(--mayda);line-height:1;font-weight:600;
  letter-spacing:var(--tracking-caps);color:var(--navy);
}
.b08v2__g{
  grid-area:2/1/3/3;
  font-size:var(--lid);line-height:1.5;max-width:32em;
  color:var(--navy);letter-spacing:var(--tracking);text-wrap:pretty;
}

/* --- oʻng · ochiq katak (ikki qator) — h4 + 6 plita.
   Katakning oʻzi chegarasiz: plita ichida plita yoʻq.
   h4 auto, toʻr qolgan balandlikni oladi — chap ustun balandroq boʻlsa
   toʻrning auto qatorlari teng ulushda choʻziladi (§12.8 stretch auto tracks),
   ortiqcha havo oltita plitaga tarqaladi; intrinsik oʻlchamda esa inflatsiya yoʻq. --- */
.b08v2__holat{
  display:grid;grid-template-rows:auto minmax(0,1fr);
  align-content:stretch;gap:var(--s5);min-width:0;
}
/* h4 ning BOSH CHIZIGʻI langar plitaning yuqori qirrasi bilan bitta oʻqda:
   19 px / 1.3 qatorda harf tepasi qutidan 4 px pastda turadi (1440 da
   oʻlchangan) — shu 4 px yuqoriga koʻtariladi. */
.b08v2__h4{max-width:22em;margin-top:-4px}
/* Hakam (2 + 12): ikkita muammo bitta toʻr bilan hal boʻladi.
   · 2 — BOSH-07 v2 ham «langar + teng kataklar» edi; teng ikki ustun qoʻshni
     blokning aksi boʻlib oʻqilardi. 1.15 / .85 — plita oʻlchamlari xilma-xil.
   · 12 — oqim USTUN boʻylab: 01·02·03 chapda, 04·05·06 oʻngda. Koʻz chapga-
     oʻngga sakramaydi; uzun matnli 01–03 keng ustunda nafas oladi, bir qatorlik
     04–06 tor ustunga aniq tushadi.
   align-content:stretch — chap ustun balandroq boʻlsa ortiqcha havo uch qatorga
   teng tarqaladi (bitta teshik qolmaydi). */
.b08v2__tor{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-rows:repeat(3,auto);grid-auto-flow:column;
  align-content:stretch;gap:var(--bento-gap);
}
/* holat plitasi: raqam CHAPDA, matn oʻngda — ikkalasi bitta yuqori chiziqda.
   Padding — kichik plita tokeni (tizim), langar/OQIBATI — --bento-pad. */
.b08v2__q{
  display:grid;grid-template-columns:2.2em minmax(0,1fr);
  column-gap:var(--s3);align-items:start;align-content:start;
  padding:var(--bento-pad-k,clamp(18px,1.5vw,22px));
}
.b08v2__n{
  font-size:var(--kichik);line-height:25px;font-weight:700;
  color:var(--aksent-mayda);letter-spacing:var(--tracking);
  font-variant-numeric:tabular-nums;
}
.b08v2__m{
  font-size:var(--tana);line-height:1.5;color:var(--ink);
  letter-spacing:var(--tracking);max-width:30em;
}

/* ==========================================================================
   3 · DUM — DIQQAT va KEYINGI QADAM BITTA RELSDA
   Hakam (4): avval ikkita toʻliq kenglikdagi hairline 110 px oraliqda ketma-ket
   turardi («dum ikki lenta»), ikkalasi ostida ham qisqa kontent. Endi bitta
   yakuniy chiziq: DIQQAT 1–7 ustun, CTA 9–12 ustun, ikkisi ham yuqoriga tekis.
   ~80 px yutuq, blok qatʼiy bitta chiziq bilan yopiladi.
   ========================================================================== */
.b08v2__past{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--bento-gap);row-gap:clamp(20px,2vw,26px);align-items:start;
  margin-top:clamp(28px,2.6vw,36px);
  padding-top:clamp(24px,2.2vw,30px);
  border-top:1px solid var(--chiziq);
}
.b08v2__ogoh{
  grid-column:1/span 7;max-width:30em;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:9px;row-gap:var(--s4);align-items:start;align-content:start;
}
.b08v2__ogoh::before{
  content:"";grid-area:1/1;width:7px;height:7px;margin-top:3px;background:var(--aksent);
}
/* Hakam (5): DIQQAT blokdagi eng past ovozli element edi — belgisi OQIBATI
   niki bilan bir xil, matni undan kichik va plitasiz. Brif esa uni «small but
   HIGH-PRIORITY … expert mechanic's note» deb belgilaydi. Qoidani buzmasdan
   ajratildi: yorliq aksent rangda (aksent BELGI sifatida — ruxsat etilgan) va
   matn ogʻirligi koʻtarildi. Tik koʻk chiziq QAYTARILMADI — u 12.09
   soddalashtirishida ataylab olib tashlangan. */
.b08v2__ogoh::after{
  content:"DIQQAT";grid-area:1/2;
  font-size:var(--mayda);line-height:1;font-weight:600;
  letter-spacing:var(--tracking-caps);color:var(--aksent-mayda);
}
/* usta eslatmasi — tana kegli, ikki muvozanatli qator («Darhol tekshiring.» yetim qolmaydi).
   Ogʻirlik 600: Century Gothic W da 400 · 600 · 700 yuzlari bor, 500 yuzi YOʻQ —
   `font-weight:500` brauzerda 400 ga qaytadi va hech nima oʻzgarmasdi. */
.b08v2__d{
  grid-area:2/1/3/3;
  font-size:var(--tana);line-height:1.6;max-width:30em;font-weight:600;
  color:var(--navy);letter-spacing:var(--tracking);text-wrap:balance;
}

/* ==========================================================================
   4 · KEYINGI QADAM — DIQQAT bilan bitta relsda, oʻz chizigʻisiz
   ========================================================================== */
.b08v2__yakun{grid-column:9/-1;align-self:start;justify-self:end}
.b08v2__cta{font-size:16px}

/* ==========================================================================
   RESPONSIV — 1440 · 1280 · 1024 · 768 · 390  (gorizontal toshish 0)
   ========================================================================== */
/* laptop/planshet: bitta ustun — langar → holatlar → OQIBATI (DOM tartibi) */
@media (max-width:1024px){
  .b08v2__mozaika{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"l" "h" "o";
    grid-template-rows:auto;
  }
  /* langar plita toʻliq kenglikda: raqam chapda, lid oʻngda — bitta yuqori chiziqda */
  .b08v2__langar{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:clamp(24px,4vw,44px);align-items:start;align-content:start;
  }
  /* 28em: 1024 da lid ustuni 588 px — 30–34em da «15 000–40 000» qator oxirida
     qolib, «km» keyingi qatorga tushardi; 28em da oraliq butun qatorga oʻtadi */
  .b08v2__lid{max-width:28em}
  /* yaqinlik: h4 oʻz plitalariga tegishli — yuqoridagi langardan 16 + 32 px,
     plitalaridan 20 px */
  .b08v2__holat{padding-top:var(--s8);grid-template-rows:auto auto;align-content:start}
  .b08v2__h4{margin-top:0}
  /* Hakam (3 + 11): ≤1024 da mozaika yoʻqoladi va OQIBATI toʻliq kenglikdagi
     plitaga aylanardi — matni 34 em da tugab, oʻngida ~330 px oʻlik havo
     qolardi. Plita olib tashlanadi: OQIBATI endi DIQQAT bilan bir tilda,
     1 px chiziq ostidagi editorial gap. Bento esa Otabek soʻraganidek
     «qaysidir joyida» — langar + 6 plita — saqlanadi. */
  .b08v2__oqibat{
    background:none;border:0;border-top:1px solid var(--chiziq);
    border-radius:0;padding:24px 0 0;
  }
  .b08v2__g{max-width:34em}
}
@media (max-width:900px){
  /* DIQQAT toʻliq kenglikda (7/12 ustun tor ekranda 200 px ga tushib qolardi),
     CTA esa uning ostidagi qatorga tushadi — rels bitta chiziq bilan yopiq qoladi */
  .b08v2__ogoh{grid-column:1/-1}
  .b08v2__yakun{grid-column:1/-1;justify-self:start}
}
@media (max-width:640px){
  .b08v2__langar{display:flex;gap:var(--s5)}
  /* h4 oʻzi belgilagan roʻyxatga yaqin turadi */
  .b08v2__holat{padding-top:var(--s5);gap:var(--s3)}
  /* Mobil: 6 plita ustma-ust karta EMAS — holatlar CHIZIQLI roʻyxatga qaytadi
     (asl brif: «Do not simply stack six cards»). Bento elementlar faqat
     langar va OQIBATI plitalari. */
  /* ⚠ ustun oqimi (grid-auto-flow:column) mobilda BEKOR qilinadi, aks holda
     chiziqli roʻyxat ikkiga boʻlinib sinardi */
  /* roʻyxatning yopuvchi chizigʻi YOʻQ: uni OQIBATI ning border-top i bajaradi.
     Ikkalasi ham boʻlsa 390 da 24 px oraliqda ikkita hairline duduqlanardi. */
  .b08v2__tor{
    grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;
    gap:0;
  }
  .b08v2__q{
    background:none;border:0;border-top:1px solid var(--chiziq-ichki);
    border-radius:0;padding:14px 0;
  }
  .b08v2__m,.b08v2__g,.b08v2__d,.b08v2__lid{max-width:none}
}