/* ==========================================================================
   ICHKI SAHIFA BIRINCHI BLOK TIZIMI  ·  .ihero
   Brif: brif/ICHKI-HERO-12-09.md (Otabek, 12.09) — verbatim

   Muammo (brif §02): bosh sahifa = matn + kuchli kadr, ichki sahifalar = faqat
   matn. Shuning uchun ichki sahifa bosh sahifadan uzilib qolgan va arzonroq
   koʻrinardi.

   Yechim: bitta qayta ishlatiladigan MATN + KONTEKST KADRI tizimi. Kadr bosh
   sahifadagidan taxminan IKKI BAROBAR yengil — hech qachon u bilan raqobat
   qilmaydi (brif §04: bosh ★★★★★ · ichki hero ★★★ · sahifa kontenti ★★★★★).

   Oʻlchov (brif §05): balandlik 360–520 px, 100vh YOʻQ, toʻliq ekranli kadr YOʻQ.
   Ierarxiya (brif §18): krosh → yorliq → H1 → qisqa tavsif → CTA → kadr.

   Bu fayl har ichki sahifaning css roʻyxatida ENG OXIRIDA turadi — shuning uchun
   sahifaning eski [data-blok="XXX-01"] qoidalarini (bir xil ogʻirlik) bosib oʻtadi.
   Eski fayllarga tegilmagan: ortga qaytarish = META dagi `, ihero` ni oʻchirish.
   ========================================================================== */

/* ==========================================================================
   1 · TIZIM TOKENLARI — faqat mavjud brend tokenlaridan hosil qilingan
   ========================================================================== */
:root{
  /* H1 bosh sahifanikidan (62 px) sezilarli kichik — ichki sahifa «boʻlim
     sarlavhasi», «brend bayonoti» emas (brif §08: ortiqcha katta tipografika yoʻq) */
  --ih-h1:clamp(31px,3.25vw,46px);
  --ih-h1-lh:1.06;
  --ih-lid:clamp(16px,1.15vw,17px);
  --ih-lid-lh:1.62;
  --ih-krosh:13px;

  /* blok paddingi — ichki sahifalarda bitta qiymat (brif §31: bir xil ritm) */
  --ih-pad-ust:clamp(26px,2.8vw,40px);
  --ih-pad-ost:clamp(40px,4.4vw,64px);
  --ih-krosh-ost:clamp(18px,2vw,30px);

  /* kadr ramkasi — minimal radius, soyasiz (brif §15) */
  --ih-kadr-radius:8px 8px 16px 8px;
}

/* ==========================================================================
   2 · BLOK QOBIGʻI
   Sirt DOIM oq: keyingi boʻlim #F2F6FB boʻlib, hero bilan bitta kompozitsiya
   hosil qiladi va oʻtish tabiiy chiqadi (brif §30).
   ========================================================================== */
.ihero{
  padding-block:var(--ih-pad-ust) var(--ih-pad-ost);
  background:var(--pogona-1);
}

/* ==========================================================================
   3 · KROSH — mavjud iyerarxiya saqlanadi, ovozi past (brif §06)
   ========================================================================== */
.ihero__krosh{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:var(--ih-krosh-ost);
  font-size:var(--ih-krosh);line-height:1.4;color:var(--slate);
  letter-spacing:var(--tracking);
}
.ihero__krosh a{color:var(--slate);text-decoration:none;border-bottom:1px solid transparent}
.ihero__krosh a:hover{color:var(--navy);border-bottom-color:var(--chiziq)}
.ihero__krosh [aria-current]{color:var(--navy)}
.ihero__krosh__aj{color:#9FB0C2}

/* ==========================================================================
   4 · GRID — 12 ustun (brif §19). Matn 1–6, boʻshliq 7, kadr 8–12.
   ========================================================================== */
.ihero__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--grid-gap);
  row-gap:clamp(26px,3vw,40px);
  align-items:start;            /* Otabek qoidasi: DOIM yuqoriga tekislash */
}

/* --- A · standart editorial: matn chapda, kadr oʻngda (katalog · brend) --- */
.ihero--a .ihero__matn{grid-column:1 / span 6}
.ihero--a .ihero__kadr{grid-column:8 / span 5}

/* --- B · texnik: matn + texnik rels chapda, kadr oʻngda (moy tanlash) ----- */
.ihero--b .ihero__matn{grid-column:1 / span 6}
.ihero--b .ihero__kadr{grid-column:8 / span 5}

/* --- C · mahsulot: artikul kadri chapda, texnik varaqa oʻngda ------------ */
.ihero--c .ihero__kadr{grid-column:1 / span 5;grid-row:1}
.ihero--c .ihero__matn{grid-column:7 / span 6;grid-row:1}

/* --- D · sanoat: kadr kattaroq, matn qisqa va ishga oid (qoʻllash) ------- */
.ihero--d .ihero__matn{grid-column:1 / span 5}
.ihero--d .ihero__kadr{grid-column:7 / span 6}

/* --- vazmin · kadr eng past ovozda (aloqa, brif §25) -------------------- */
.ihero--vazmin .ihero__matn{grid-column:1 / span 6}
.ihero--vazmin .ihero__kadr{grid-column:9 / span 4}

/* ==========================================================================
   5 · MATN USTUNI — ierarxiya brif §18 boʻyicha
   ========================================================================== */
.ihero__matn{
  display:grid;align-content:start;
  gap:clamp(14px,1.4vw,20px);
}
.ihero__matn .yorliq{justify-self:start}

.ihero h1{
  font-size:var(--ih-h1);line-height:var(--ih-h1-lh);
  letter-spacing:var(--tracking-zich);color:var(--navy);
  max-width:14em;
}
.ihero__lid{
  font-size:var(--ih-lid);line-height:var(--ih-lid-lh);color:var(--slate);
  max-width:34em;           /* ≈70 belgi · Century Gothic da 1ch≈0.52em, shuning
                               uchun oʻlchov `em` da (tan.css saboqi) */
}
.ihero__amal{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  margin-top:var(--s1);
}

/* texnik rels — B varianti uchun: ramkasiz, faqat hairline (brif §16: kartasiz) */
.ihero__rels{
  display:flex;flex-wrap:wrap;
  margin-top:var(--s2);padding-top:var(--s4);
  border-top:1px solid var(--chiziq);
  gap:0;
}
.ihero__rels li{
  display:flex;align-items:center;gap:9px;
  padding-inline:clamp(14px,1.4vw,22px);
  font-size:var(--mayda);line-height:1.4;font-weight:600;color:var(--navy);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  border-right:1px solid var(--chiziq);
}
.ihero__rels li::before{content:"";width:6px;height:6px;background:var(--aksent);flex:none}
.ihero__rels li:first-child{padding-left:0}
.ihero__rels li:last-child{border-right:0;padding-right:0}

/* ==========================================================================
   6 · KADR — «kompozitsiyaning bir qismi», suzuvchi karta emas (brif §15)
   soya yoʻq · gradient yoʻq · bezak ramka yoʻq · radius minimal
   ========================================================================== */
.ihero__kadr{
  margin:0;position:relative;
  border:1px solid var(--chiziq);
  border-radius:var(--ih-kadr-radius);
  background:var(--canvas);
  overflow:hidden;
}
.ihero__kadr img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
.ihero__kadr--3x2{aspect-ratio:3/2}
.ihero__kadr--16x9{aspect-ratio:16/9}
.ihero__kadr--16x10{aspect-ratio:16/10}
.ihero__kadr--4x3{aspect-ratio:4/3}
.ihero__kadr--1x1{aspect-ratio:1/1}
/* artikul renderi — hech qachon kesilmaydi (brif §27) */
.ihero__kadr--artikul{background:var(--oq)}
.ihero__kadr--artikul img{object-fit:contain}

/* kadr ostidagi bitta qatorlik texnik izoh — ixtiyoriy */
.ihero__izoh{
  margin-top:10px;font-size:var(--mayda);line-height:1.45;color:var(--slate);
  letter-spacing:var(--tracking);
}

/* ==========================================================================
   7 · HERO OSTI RELSI — hero ichiga sigʻmagan yordamchi maʼlumot shu yerga
   tushadi (brif §09: hero — kirish, maqola emas). Blok ichida qoladi.
   ========================================================================== */
.ihero__ost{
  margin-top:clamp(30px,3.2vw,46px);
  padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--chiziq);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--grid-gap);row-gap:var(--s5);
}
.ihero__ost > *{grid-column:span 4}
.ihero__ost p{font-size:var(--kichik);line-height:1.6;color:var(--slate);margin:0}
.ihero__ost--ikki > *{grid-column:span 6}
.ihero__ost--keng > *{grid-column:1 / span 12}

/* ==========================================================================
   8 · HARAKAT — faqat nozik (brif §29). Sayt tizimidagi `.kir` ishlatiladi,
   yangi animatsiya kiritilmaydi. Kadr uchun kirish biroz kechikadi.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .ihero__kadr.kir{transition-delay:90ms}
}

/* ==========================================================================
   9 · RESPONSIV
   Sinov kengliklari: 1440 · 1280 · 1024 · 768 · 390
   ========================================================================== */
@media (max-width:1200px){
  .ihero--a .ihero__matn,
  .ihero--b .ihero__matn{grid-column:1 / span 7}
  .ihero--a .ihero__kadr,
  .ihero--b .ihero__kadr{grid-column:8 / span 5}
  .ihero--d .ihero__matn{grid-column:1 / span 6}
  .ihero--d .ihero__kadr{grid-column:7 / span 6}
  .ihero--vazmin .ihero__matn{grid-column:1 / span 7}
  .ihero--vazmin .ihero__kadr{grid-column:9 / span 4}
  .ihero--c .ihero__kadr{grid-column:1 / span 5}
  .ihero--c .ihero__matn{grid-column:6 / span 7}
}

@media (max-width:1000px){
  /* Mobil/planshet tartibi brif §27–28: matn BIRINCHI, kadr keyin.
     Siqilgan desktop hero emas — alohida ierarxiya. */
  .ihero__grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(24px,4vw,34px)}
  .ihero--a .ihero__matn,.ihero--b .ihero__matn,
  .ihero--c .ihero__matn,.ihero--d .ihero__matn,
  .ihero--vazmin .ihero__matn{grid-column:1;grid-row:auto;order:1}
  .ihero--a .ihero__kadr,.ihero--b .ihero__kadr,
  .ihero--c .ihero__kadr,.ihero--d .ihero__kadr,
  .ihero--vazmin .ihero__kadr{grid-column:1;grid-row:auto;order:2}
  .ihero h1{max-width:none}
  .ihero__lid{max-width:40em}
  /* planshetda kadr butun kenglikni egallamasin — ovozi baland chiqib ketardi
     (768 px da 686×457 boʻlib, bosh sahifa herosi bilan tenglashardi) */
  .ihero__kadr{max-width:min(100%,540px)}
  .ihero--c .ihero__galereya .ihero__kadr{max-width:min(100%,420px)}
  .ihero--c .ihero__lenta .ihero__kadr{max-width:none}
  .ihero__ost > *,.ihero__ost--ikki > *{grid-column:span 6}
}

@media (max-width:760px){
  .ihero{padding-block:clamp(20px,4vw,28px) clamp(34px,6vw,44px)}
  /* kadr birinchi ekranni yeb qoʻymasin: 220–300 px (brif §27) */
  .ihero__kadr{max-height:300px}
  .ihero__kadr--3x2,.ihero__kadr--16x9,
  .ihero__kadr--16x10,.ihero__kadr--4x3{aspect-ratio:16/10}
  .ihero__kadr--1x1{aspect-ratio:4/3}
  .ihero__ost{grid-template-columns:minmax(0,1fr)}
  .ihero__ost > *,.ihero__ost--ikki > *,.ihero__ost--keng > *{grid-column:1}
  .ihero__rels{flex-direction:column;align-items:flex-start;gap:10px}
  .ihero__rels li{padding-inline:0;border-right:0}
  .ihero__krosh a,.ihero__krosh [aria-current]{
    display:inline-flex;align-items:center;min-height:36px;
  }
  .ihero__amal{gap:var(--s3)}
  .ihero__amal .btn{width:100%;justify-content:space-between}
}

/* ==========================================================================
   10 · SAHIFAGA XOS MOSLAMALAR
   Tizim bitta — faqat kompozitsiya va kadr mavzusi oʻzgaradi (brif §20, §31).
   ========================================================================== */

/* --- KATALOG · A · artikul qatori (brif §21) ----------------------------- */
[data-blok="KAT-01"].ihero{padding-bottom:clamp(34px,3.6vw,52px)}
[data-blok="KAT-01"] .ihero__ost{margin-top:clamp(26px,2.8vw,38px)}

/* --- MOY TANLASH · B · tanlagich asosiy funksiya boʻlib qoladi (brif §22) - */
[data-blok="TAN-01"].ihero{background:var(--pogona-1)}
[data-blok="TAN-01"] .ihero__kadr{background:var(--navy)}

/* --- QOʻLLASH · D · sanoat ogʻirligi ------------------------------------- */
[data-blok="SOH-01"].ihero h1{max-width:11em}

/* --- BREND · A · kelib chiqish va ishlab chiqarish (brif §24) ------------ */
[data-blok="BRD-01"].ihero{
  padding-block:var(--ih-pad-ust) var(--ih-pad-ost);
}
[data-blok="BRD-01"] .ihero__kadr{background:var(--canvas)}

/* --- ALOQA · vazmin · harakat va maʼlumot birinchi (brif §25) ------------ */
[data-blok="ALQ-01"].ihero{padding-top:clamp(26px,2.8vw,40px)}
[data-blok="ALQ-01"] .ihero__kadr{background:var(--navy)}

/* --- MAHSULOT · C · texnik varaqa (brif §23) ---------------------------- */
[data-blok="MAH-01"].ihero{padding-bottom:clamp(44px,4.6vw,68px)}
[data-blok="MAH-01"].ihero h1{font-size:clamp(30px,3.1vw,44px);max-width:none}
.ihero__galereya{display:grid;gap:var(--s3)}
.ihero__lenta{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);
  margin:0;padding:0;list-style:none;
}
.ihero__lenta li{display:grid;gap:6px}
.ihero__lenta .ihero__kadr{border-radius:6px 6px 12px 6px}
.ihero__lenta .mayda{font-size:11px;line-height:1.35}
@media (max-width:760px){
  .ihero__lenta{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
  .ihero__lenta .ihero__kadr{max-height:none}
  .ihero__lenta .ihero__kadr--1x1{aspect-ratio:1/1}
}

/* --------------------------------------------------------------------------
   11 · TIZIM MATN KLASSLARI (§5 ga qoʻshimcha)
   -------------------------------------------------------------------------- */
/* lidning davomi — past ovozli davom qatori. Manba katagi ikkiga boʻlinganda
   ikkala boʻlak DOM da KETMA-KET turadi, shuning uchun matn 1:1 verbatim
   (verbatim.py teglarni olib tashlab, boʻshliqni bitta qilib solishtiradi). */
.ihero__lid-dav{
  font-size:var(--kichik);line-height:1.62;color:var(--slate);
  max-width:36em;margin:0;
}
.ihero__ost-lid{font-size:var(--kichik);line-height:1.6;color:var(--slate);margin:0}
.ihero__mayda{
  margin-top:clamp(14px,1.4vw,18px);
  font-size:var(--mayda);line-height:1.5;color:var(--slate);max-width:60em;
}
/* uchta meta qatori — ramkasiz roʻyxat (aloqa) */
.ihero__meta{
  margin-top:clamp(26px,2.8vw,38px);padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--chiziq);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--grid-gap);row-gap:var(--s4);list-style:none;padding-left:0;
}
.ihero__meta li{
  position:relative;padding-left:16px;
  font-size:var(--kichik);line-height:1.6;color:var(--slate);
}
.ihero__meta li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;background:var(--aksent);
}
/* hero ichidagi rels — hero ostiga qoʻyilganda oʻz oraligʻi bilan */
.ihero > .ich > .ihero__rels{
  margin-top:clamp(26px,2.8vw,40px);
}

/* --------------------------------------------------------------------------
   12 · C varianti (mahsulot) va brend ustuni uchun grid oʻrinlari
   -------------------------------------------------------------------------- */
.ihero--c .ihero__galereya{grid-column:1 / span 5;grid-row:1}
.ihero--c .mah-kart{grid-column:7 / span 6;grid-row:1;margin:0}
.ihero__galereya{display:grid;gap:var(--s3);align-content:start}
.ihero__galereya .nishon{justify-self:start}
/* brend: hero ostidagi 01–04 registri oʻz oʻlchovli ustunida qoladi */
[data-blok="BRD-01"] .brd-ustun{margin-top:clamp(30px,3.2vw,46px)}

@media (max-width:1200px){
  .ihero--c .ihero__galereya{grid-column:1 / span 5}
  .ihero--c .mah-kart{grid-column:6 / span 7}
}
@media (max-width:1000px){
  .ihero--c .ihero__galereya{grid-column:1;grid-row:auto;order:1}
  .ihero--c .mah-kart{grid-column:1;grid-row:auto;order:2}
  .ihero__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .ihero__meta{grid-template-columns:minmax(0,1fr)}
  /* mahsulot sahifasi — brif §28 istisnosi: artikul kadri H1 dan oldin turadi */
  .ihero--c .ihero__galereya .ihero__kadr{max-height:none}
}