/* ==========================================================================
   BOSH-04 · ASOSIY MAHSULOTLAR — qayta dizayn (12.09, art-direksiya revizyasi)
   Otabek: «bitta ekranga sigʻdirsak yaxshi edi laptopda · rasmni 16:9 qilib
   joylasak boladi · dizaynini ham yaxshilash kerak».

   Kompozitsiya — «artikul yoymasi»: chapda sarlavha relsi, oʻngda ikki artikul
   varaqasi, ular faqat 1 px tik chiziq bilan ajratilgan (karta yoʻq, soya yoʻq).
   Sarlavha relsda turgani uchun vertikal joy egallamaydi → blok noutbukning
   bitta ekraniga sigʻadi.

   Revizyada: (1) sarlavha kattalashtirilib rels ustunining egasi qilindi;
   (2) ikki varaqa SUBGRID ga oʻtkazildi — kadr · izoh · nom · 01 · 02 · 03 ·
   spetsifikatsiya qatorlari HAR QANDAY kenglikda aynan bir chiziqda turadi
   (solishtirish blokining butun maʼnosi shu); (3) koʻk shovqin kamaytirildi —
   01/02/03 registri navy, aksent faqat belgi sifatida qoldi.
   bloklar.css dan KEYIN yuklanadi.
   ========================================================================== */

.b04{
  background:var(--oq);
  /* yon oraliq: tik chiziq gutterning aynan oʻrtasida turishi uchun ikki tomonga teng */
  --b04-oraliq:clamp(18px,1.85vw,26px);
}

/* ---------- YOYMA: rels · artikul A · artikul B ----------
   7 qator: kadr · izoh · nom · 01 · 02 · 03 · ost.
   Ikkala varaqa ham shu qatorlarga subgrid bilan ulanadi. */
.b04__yoyma{
  display:grid;
  grid-template-columns:minmax(0,4.4fr) minmax(0,3.8fr) minmax(0,3.8fr);
  grid-template-rows:repeat(7,auto);
  row-gap:0;
  /* ustunlar orasidagi oraliq: tik chiziq uning AYNAN oʻrtasida turadi,
     shuning uchun matn chiziqqa tegib ketmaydi va oʻng chekka konteyner
     chekkasiga tekis tushadi (padding bilan qilinsa biri surilib qolardi) */
  column-gap:calc(var(--b04-oraliq)*2);
}

/* ---------- CHAP RELS: yorliq · sarlavha · lid ---------- */
/* gutter = 2×oraliq, tik chiziq uning aynan oʻrtasida turadi */
.b04__rels{
  grid-column:1;grid-row:1/-1;
  display:grid;gap:var(--s5);align-content:start;
}
.b04__rels h2{
  font-size:clamp(27px,3.45vw,50px);line-height:1.02;
  letter-spacing:var(--tracking-zich);max-width:9.2em;
}
.b04__rels .lid{max-width:26em}

/* ---------- ARTIKUL VARAQASI ----------
   Ikki ustun AYNAN bir xil kenglikda: ikkalasida ham faqat chap padding. */
.b04__art{
  position:relative;grid-row:1/-1;
  display:grid;grid-template-rows:subgrid;row-gap:0;
}
/* ajratuvchi — oraliqning oʻrtasidagi 1 px chiziq (karta emas, ramka emas) */
.b04__art::before{
  content:"";position:absolute;top:0;bottom:0;
  left:calc(-1*var(--b04-oraliq));width:1px;background:var(--chiziq);
}
.b04__art:first-of-type{grid-column:2}
.b04__art:last-of-type{grid-column:3}

/* 16:9 — Otabekning talabi (avval 1:1 va 300 px gacha choʻzilgan edi) */
.b04__media{aspect-ratio:16/9;min-height:0;margin-bottom:18px}
.b04__media .slot__yoz{max-width:30ch}

/* ---------- IZOH + NOM ----------
   izoh bu yerda koʻk pill emas — Manufact tilidagi kvadrat aksent nuqta +
   navy CAPS satr. Grid: nuqta alohida ustunda, matn ikkinchi ustunda sindiriladi. */
.b04__izoh{
  display:grid;grid-template-columns:7px minmax(0,1fr);gap:9px;align-items:start;
  justify-self:stretch;align-self:start;
  background:none;padding:0;border-radius:0;
  color:var(--navy);font-size:var(--mayda);line-height:1.35;
  margin-bottom:9px;
}
.b04__izoh::before{
  content:"";width:7px;height:7px;background:var(--aksent);margin-top:4px;
}
.b04__nom{
  align-self:start;
  font-size:clamp(19px,1.55vw,23px);line-height:1.2;
  letter-spacing:var(--tracking);
  margin-bottom:var(--s4);
}

/* ---------- 01/02/03 — kartasiz registr, faqat ingichka chiziq ---------- */
.b04__qator{grid-row:4/7;display:grid;grid-template-rows:subgrid}
.b04__qator li{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);
  align-items:start;align-content:start;padding-block:10px;
  border-top:1px solid var(--chiziq-ichki);
}
.b04__qator li:first-child{border-top:1px solid var(--chiziq)}
.b04__n{
  font-size:var(--mayda);font-weight:700;color:var(--navy);
  letter-spacing:0;font-variant-numeric:tabular-nums;   /* musbat tracking yoʻq */
  padding-top:3px;
}
.b04__qator p{font-size:var(--kichik);line-height:1.55;color:var(--slate)}

/* ---------- OST: spetsifikatsiya qatorlari + havola ---------- */
.b04__ost{
  display:grid;gap:4px;align-content:start;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--chiziq);
}
/* asos.css dagi balance bu yerda «·» ni pastki qatorga tashlab yuboradi */
.b04__ost .mayda{text-wrap:wrap}
.b04__ost .mijozdan{margin-top:1px}
.b04__ost .ha{margin-top:10px;justify-self:start}

/* ==========================================================================
   RESPONSIV
   ========================================================================== */

/* 1200–1360 px (1280 laptop): rels toraytiriladi — artikul matni 2 qatorda qoladi */
@media (max-width:1360px){
  .b04__yoyma{
    grid-template-columns:minmax(0,3.9fr) minmax(0,4.05fr) minmax(0,4.05fr);
  }
  .b04__rels h2{font-size:clamp(25px,3.1vw,44px);max-width:9.2em}
}

/* 1200 px dan pastda sarlavha tepaga chiqadi, ikki ustun solishtiruv qoladi.
   Qator andozasi bitta qatorga uzayadi: sarlavha · kadr · izoh · nom · 01·02·03 · ost */
@media (max-width:1200px){
  .b04__yoyma{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(8,auto);
  }
  .b04__rels{
    grid-column:1/-1;grid-row:1;
    margin-bottom:clamp(32px,3.4vw,48px);
  }
  .b04__art{grid-row:2/-1}
  .b04__art:first-of-type{grid-column:1}
  .b04__art:first-of-type::before{display:none}
  .b04__art:last-of-type{grid-column:2}
  /* .b04__qator qatori subgrid ichida LOKAL sanaladi — 4/7 boʻlib qolaveradi */
  .b04__rels h2{font-size:var(--h2);line-height:var(--h2-lh);max-width:15em}
}

/* ikki ustunli solishtiruv 760 px gacha saqlanadi — blokning butun maʼnosi shunda */
@media (max-width:760px){
  .b04__yoyma{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .b04__rels{grid-row:auto}
  .b04__art{grid-row:auto;grid-template-rows:none;align-content:start}
  .b04__art:first-of-type,.b04__art:last-of-type{grid-column:1}
  .b04__art::before{display:none}
  .b04__art:last-of-type{
    border-top:1px solid var(--chiziq);padding-top:var(--s8);
    margin-top:var(--s8);
  }
  .b04__qator{grid-row:auto;grid-template-rows:none}
  .b04__media{max-width:420px}
}