/* ==========================================================================
   BOSH-05 · 5W-30 YOKI 10W-40 — VARIANT 2 · BENTO MOZAIKA (12.09)
   Gʻolib variant + ikki hakamning 2-tur tuzatishlari qoʻllangan.
   Otabek: «shu dizayn yoqmayapti bento stilda qilib kor»

   Kompozitsiya (12 ustun, 16px gap, radius 16 toʻrt burchakda bir xil):
     kirish   toʻliq kenglik: yorliq → [sarlavha 7 | izoh 5]
     ┌────────────────────┬────────────────────┐
     │ 5W-30        s6    │ 10W-40       s6    │  ← ikki katta plita, 5 qatorli SUBGRID
     ├────────────────────┴──────────┬─────────┤
     │ 0 °C chizma           s8      │ ESLATMA │  ← navy langar KENG yoʻlak · oq plita s4
     ├───────────────────────────────┴─────────┤
     │ CTA (chap oʻqda, plitasiz)   s12         │
     └──────────────────────────────────────────┘
   Plita oʻlchamlari 6 / 6 / 8 / 4 — haqiqiy mozaika, hamma joyda bir xil ustun EMAS
   (TAHRIR-2: «bitta katta + bir nechta kichik»).

   · Navy plita s8 da qoladi — s12 qilinsa u uchinchi «quyuq band» boʻlib koʻrinardi,
     sayt qonuni esa quyuq band ROPPA-ROSA IKKITA deydi (hero + BOSH-07).
   · Rang kodi: 5W-30 → aksent kvadrat (plitada ham, chizmada ham) ·
     10W-40 → navy kvadrat plitada, oq kvadrat+chiziq navy chizmada.
   · Soya 0 · gradient 0 · tracking ≤ 0 (faqat CAPS yorliq) · matn yuqorida.
   · Boʻlim paddingi va sarlavha kegli — ritm.css (`[data-blok="BOSH-05"] h2`) beradi,
     bu yerda YOZILMAYDI (h2 allaqachon A-pogʻonada: clamp(32px,3.9vw,56px)).
   · bento.css ga tayanadi (.bento .bp .bp--navy .s4 .s6 .s8 .s12); b05.css ga EMAS.

   2-tur hakam tuzatishlari:
     1 · toʻr 4/4/4 → 6/6 + 8/4 mozaika; uchinchi ustun oʻrovi olib tashlandi
     2 · qatorlar <dl><dt><dd> — boʻsh <span aria-label> oʻrniga haqiqiy semantika
     3 · chizma zaxira ustuni 66 → 84px: «~28 s» oʻng chetdan nafas oladi
     4 · oʻqning oraliq boʻlinmalari oʻchdi (hech nimani oʻlchamas edi) — faqat
         1px chiziq + chetki ikki shtrix
     8 · yoʻlak kengaygani uchun 5W chizigʻi 81 → 201px (@1440), nisbat 28.57% oʻsha
     9 · katta plitalar oʻz qatorida — uchinchi ustun endi ularning subgrid
         qatorlarini choʻzmaydi: plita ostidagi oʻlik choʻntak 59 → 24px (@1440),
         67 → 24px (@1280); qatorlar orasidagi ortiqcha 0 (lid oʻlchovi bilan)
    10 · chizmadagi nomlar oldida plitadagi kvadrat belgi (rang kodi tiklandi)
    11 · CTA toʻldirilgan aksentdan ikkilamchi koʻrinishga tushdi (GLOBAL-3)
    12 · «TEXNIK ESLATMA» yorligʻi CSS content da qoladi (verbatim), plitaga
         role="note" + aria-label berildi
   ========================================================================== */

/* ==========================================================================
   1 · KIRISH — yorliq alohida qatorda; sarlavha va izoh bitta yuqori chiziqda
   ========================================================================== */
.b05v2__kirish{
  display:grid;gap:var(--s5);justify-items:start;
  margin-bottom:clamp(30px,3.2vw,46px);
}
.b05v2__sarlavha{
  width:100%;display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3.4vw,64px);align-items:start;
}
.b05v2__sarlavha h2{max-width:11.5em;text-wrap:pretty}
.b05v2__lid{max-width:40em;padding-top:10px}   /* birinchi qator sarlavha bosh harfi bilan bir chiziqda */

/* ==========================================================================
   2 · KATTA PLITALAR — nom + 4 solishtirish qatori (subgrid)
   Ikkovi 12 ustunli toʻrning 1-qatorini toʻliq egallaydi (s6 + s6) va oʻzaro
   5 qatorli subgridni boʻlishadi: Kimga · Sovuq start · Issiqdagi parda ·
   Nimaga qaraladi ikkala plitada bir xil y da.
   ========================================================================== */
.b05v2__plita{
  display:grid;grid-template-rows:subgrid;grid-row:span 5;
  row-gap:0;align-content:start;
}
/* subgrid qoʻllamagan brauzerda ham plita buzilmaydi — qatorlar oʻz balandligida qoladi */
@supports not (grid-template-rows:subgrid){
  .b05v2__plita{display:flex;flex-direction:column;gap:0}
}

/* nom qatori: kvadrat belgi + katta raqam BIR QATORDA (saytning inline idiomasi «■ QANDAY TANLANADI») */
.b05v2__nom{
  display:flex;align-items:flex-start;gap:14px;
  padding-bottom:clamp(16px,1.6vw,22px);
}
.b05v2__nom::before{content:"";flex:none;width:12px;height:12px;margin-top:8px;background:var(--aksent)}
.b05v2__plita--b .b05v2__nom::before{background:var(--navy)}
.b05v2__nom-m{
  display:block;
  font-size:clamp(30px,2.8vw,40px);line-height:1;font-weight:700;
  letter-spacing:var(--tracking-zich);color:var(--navy);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* solishtirish qatori — <dl>: termin (dt) + taʼrif (dd), ustida 1px ichki chiziq.
   dl/dd oʻz brauzer margini bilan keladi — nolga tushiriladi. */
.b05v2__q{
  margin:0;
  display:grid;gap:6px;align-content:start;
  padding-block:clamp(13px,1.3vw,16px);
  border-top:1px solid var(--chiziq-ichki);
}
.b05v2__q:last-child{padding-bottom:0}

/* yorliq — sahifadagi CAPS tizimi: 12px / .09em / 600; qatorda navy */
.b05v2__y{
  margin:0;
  font-size:var(--mayda);line-height:1.35;font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--navy);
}
/* oʻng plitadagi takror nom — matnga qoʻshilmasin uchun CSS content;
   nomi <dl role="group" aria-label> orqali yordamchi texnologiyaga yetadi */
.b05v2__y--takror::before{content:attr(data-y)}

.b05v2__k{margin:0;font-size:15px;line-height:1.55;color:var(--slate);text-wrap:pretty}
/* Kimga — kalit tavsif: bir pogʻona kattaroq va navy; qolgan qatorlar tinchroq.
   21.5em oʻlchov (≈38 belgi, oʻlchandi: chap tavsif tabiiy 414px @18 / 365px @16,
   oʻng tavsif 583 / 514). Oʻlchovsiz plita s6 gacha kengaygach 1440 da chap tavsif
   bitta qatorga sigʻar, oʻngdagisi esa (583 > 582 — bir piksel!) ikki qator boʻlardi:
   subgrid qatori choʻziladi va chap plitada 26px oʻlik joy paydo boʻladi.
   21.5em ikkovini ham 2 qatorga tenglaydi va em da berilgani uchun kegl bilan birga
   oʻzgaradi — 1440 · 1280 · 1024 · 768 · 390 da qatorlar orasidagi ortiqcha 0. */
.b05v2__q--asos .b05v2__k{
  font-size:clamp(16px,1.25vw,18px);line-height:1.42;color:var(--navy);
  max-width:21.5em;
}

/* ==========================================================================
   3 · 0 °C CHIZMA — navy plita (langar), mozaikaning ikkinchi qatorida s8.
   Kengaygan yoʻlak: 1440 da 5W chizigʻi ≈ 200px (avval 81px edi), nisbat
   28.57% oʻzgarmadi — «8 s ↔ 28 s» farqi endi uzoqdan koʻrinadi.
   ========================================================================== */
.b05v2__chizma{gap:0}
.b05v2__y--chizma{
  width:100%;color:#8FC4EE;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14);
}
.b05v2__chizma .b05v2__bars{
  width:100%;display:grid;gap:16px;align-content:start;padding-top:22px;
}
/* Yoʻlak plitaning toʻliq ichki kengligida: nom chiziq USTIDA (1/-1), chiziq 1fr
   ustunda, son 100% li chiziq uchidan keyin — shuning uchun oʻngda zaxira ustun.
   84px: «~28 s» ≈ 63px, oʻng chetda ≥ 20px havo qoladi (avval 66px → 3px edi). */
.b05v2__qt,.b05v2__oq{
  display:grid;grid-template-columns:minmax(0,1fr) 84px;
  column-gap:12px;align-items:start;
}
/* nom + rang kodi: chizmadagi chiziq rangi plitadagi kvadrat bilan bir xil belgi beradi
   (5W → aksent · 10W → oq) — plita bilan chizma orasidagi bogʻ */
.b05v2__qt-n{
  grid-column:1/-1;display:flex;align-items:center;gap:9px;
  font-size:12px;line-height:1;font-weight:600;color:rgba(255,255,255,.74);
  letter-spacing:var(--tracking);font-variant-numeric:tabular-nums;padding-bottom:8px;
}
.b05v2__qt-n::before{content:"";flex:none;width:9px;height:9px;background:var(--aksent)}
.b05v2__qt--b .b05v2__qt-n::before{background:#fff}
/* oʻlchangan chiziq — 0 dan boshlanadi, uchida tik shtrix; son shtrix yonida turadi */
.b05v2__qt-shkala{grid-column:1;position:relative;display:block;height:26px}
.b05v2__qt-chiziq{
  position:absolute;left:0;top:11px;height:4px;width:var(--p);
  background:var(--aksent);
}
.b05v2__qt--b .b05v2__qt-chiziq{background:#fff}
.b05v2__qt-chiziq::after{
  content:"";position:absolute;right:0;top:-6px;width:2px;height:16px;background:inherit;
}
.b05v2__qt-s{
  position:absolute;left:var(--p);top:0;margin-left:12px;
  font-size:clamp(22px,1.8vw,26px);line-height:26px;font-weight:700;
  letter-spacing:var(--tracking-zich);color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* oʻq: 1px chiziq + faqat CHETKI ikki shtrix.
   Oraliq boʻlinmalar raqamsiz edi va 28.57% li chiziq ular orasiga tushardi —
   shkala hech nimani oʻlchamasdi, yaʼni «maʼnosiz texnik grafika». Oʻchirildi. */
.b05v2__oq{margin-top:-4px}
.b05v2__oq-r{
  grid-column:1;display:flex;justify-content:space-between;
  height:9px;border-top:1px solid rgba(255,255,255,.22);
}
.b05v2__oq-r i{display:block;width:1px;height:7px;background:rgba(255,255,255,.34)}
.b05v2__chizma .b05v2__qt-izoh{padding-top:20px;max-width:40em}

/* ==========================================================================
   4 · TEXNIK ESLATMA — oq plita s4; yorliq CSS content da (HTML matniga
   qoʻshilmaydi — verbatim tekshiruvi satr-multiset solishtiradi).
   ========================================================================== */
.b05v2__eslatma{gap:0}
.b05v2__eslatma::before{
  content:"TEXNIK ESLATMA";display:block;width:100%;
  padding-bottom:14px;border-bottom:1px solid var(--chiziq-ichki);
  font-size:var(--mayda);line-height:1.35;font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--navy);
}
.b05v2__eslatma-m{
  padding-top:16px;font-size:15px;line-height:1.6;color:var(--slate);
  max-width:44em;text-wrap:pretty;
}

/* ==========================================================================
   5 · KEYINGI QADAM — mozaikaning pastki qatori, plitasiz, chap oʻqda
   ========================================================================== */
.b05v2__cta{grid-column:1/-1;display:flex;padding-top:var(--s3)}

/* ==========================================================================
   RESPONSIV — 1440 · 1280 · 1024 · 768 · 390
   ========================================================================== */
@media (max-width:1100px){
  .b05v2__sarlavha{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .b05v2__lid{max-width:44em;padding-top:0}
}

/* 1024 da mozaika saqlanadi (6/6 + 8/4). 800 dan pastda eslatma ustuni 240px dan
   torayib ketmasin — chizma 7 | eslatma 5. */
@media (max-width:800px){
  .b05v2__chizma{grid-column:span 7}
  .b05v2__eslatma{grid-column:span 5}
  .b05v2__qt,.b05v2__oq{grid-template-columns:minmax(0,1fr) 76px;column-gap:10px}
}

/* 640 → hammasi tik: 5W-30 → 10W-40 → chizma → eslatma → CTA
   (bento.css `.bento>*{grid-column:span 12}` bilan) */
@media (max-width:640px){
  .b05v2__plita{grid-row:auto;grid-template-rows:none}
  /* yuqoridagi 7/5 qoidasi bento.css dagi `.bento>*{span 12}` bilan bir xil
     ogʻirlikda va undan KEYIN turadi — mobil tik tartib shu yerda qaytariladi */
  .b05v2__chizma,.b05v2__eslatma{grid-column:span 12}
  .b05v2__nom-m{font-size:30px}
  .b05v2__nom::before{width:10px;height:10px;margin-top:7px}
  .b05v2__qt,.b05v2__oq{grid-template-columns:minmax(0,1fr) 68px;column-gap:10px}
  .b05v2__qt-shkala{height:22px}
  .b05v2__qt-chiziq{top:9px}
  .b05v2__qt-chiziq::after{top:-5px;height:14px}
  .b05v2__qt-s{font-size:20px;line-height:22px;margin-left:10px}
}