/* ==========================================================================
   BOSH-12 · VARIANT 1 · «GORIZONTAL MARSHRUT» — 2-tur hakam tuzatishlaridan keyin (12.09)
   Otabek, 12.09: «bu blockni gorizontal qilsak boladi laptopda».

   Oʻz-oʻziga yetarli: css/b12.css ga tayanmaydi. Tayanadi: tokenlar · asos ·
   komponent · ritm (boʻlim paddingi va h2 kegli data-blok orqali) · tahrir.

   Mobil-birinchi: asos = TIK marshrut (<1024), ≥1024 = GORIZONTAL marshrut.

   ── 2-TUR TUZATISHLARI (ikki hakam) ─────────────────────────────────────────
   1 · Sarlavha brifdagi ikki qatorli kompozitsiyaga qaytdi («Uch qadamda /
       toʻgʻri moy», urgʻu 2-qatorda) → max-width 14em → 9em, aks holda 1440 da
       <br> siz ham bitta qatorga sigʻardi.
   2 · CTA qatori ≥1024 da space-between: asosiy tugma chap chetda, tinch havola
       konteynerning oʻng chetida — «yonma-yon juftlik» naqshi ham, oʻng-pastdagi
       ~830×54 px boʻshliq ham yoʻqoldi.
   3 · Yoʻlning yakuni endi BITTA: relsning oʻng uchidagi navy terminal oʻchdi,
       oʻrniga CTA qatori oʻz relsi + toʻrtinchi AKSENT tuguni bilan yopadi →
       01 → 02 → 03 → CTA bitta lugʻatda (mobil bilan ham bir xil).
   4 · Rels rangi endi `--chiziq-chizma` tokeni orqali oʻqiladi (fallback shu
       yerda). ⚠️ TOKEN HALI tokenlar.css DA YOʻQ — bu turda faqat ikki fayl
       tahrir qilinadi; keyingi turda tokenlar.css ga koʻchirilsin —
       «--chiziq-chizma:rgba(1,36,76,.26)» izohi: yuza/canvas sirtda koʻrinadigan
       chizma relsi. Shunda BOSH-02 va BOSH-13 jarayon relslari ham bir xil
       qiymatda qoladi, blokdan blokka siljimaydi.
   5 · Assimetriya endi TIPOGRAFIKADA: ustunlar 4/5/3.5, tushuntirish oʻlchovi
       22 / 26 / 19em → 2 / 3 / 2 qator. Hakam bergan 26/34/22em ustun kengligidan
       KATTA edi (ustun 380/475/332 px) — hech nimani kesmasdi va uchala matn
       baribir 2 qator boʻlib «teng uch ustun» boʻlib oʻqilaverardi.
       Nisbat saqlangan, qiymat ustun kengligiga tushirilgan: 02 «ogʻir» (3 qator),
       03 qisqa yakuniy tekshiruv (2 qator, eng tor oʻlchov).
   6 · Raqamga havo: ≥1024 da 01 → sarlavha oraligʻi --s2 → --s4 (sarlavha →
       tushuntirish --s2 da qoldi) — raqam yorliq boʻlib turadi, sarlavhaning
       bir qismi boʻlib qolmaydi.
   7 · `--b12v1-btn-h:56px` sehrli raqami OʻCHIRILDI. Yakun tuguni endi tugmaning
       render balandligiga emas, tugma qutisining YUQORI qirrasiga tekislanadi
       (top:0) — «shakl doim yuqoriga tekislanadi»; tahrir.css §2 kontrol
       oʻlchamini yana oʻzgartirsa tugun joyidan siljimaydi. Tik rels ham shu
       tugunning markazigacha, tugma balandligisiz hisoblanadi.
   8 · Rels kontrasti: .18 → .26 (canvas #F2F6FB ustida ~1.3:1 juda past edi;
       blokning yagona grafik gʻoyasi shu 1 px chiziq). Tugunlar baribir eng
       kuchli belgi boʻlib qoladi. `--chiziq` / `--chiziq-ichki` ierarxiyasiga
       tegilmagan.
   9 · ≥1024 da yorliq sarlavha bilan BITTA qatorda, konteynerning oʻng chetida —
       1440 da sarlavha oʻngida qolgan ~875×70 px boʻsh tasma yopildi; kirish →
       rels oraligʻi ham qisqardi (44 → 37 px).
   ────────────────────────────────────────────────────────────────────────────

   Qoidalar: soya 0 · gradient 0 · tracking ≤ 0 (faqat .yorliq CAPS istisno) ·
   matn va shakl yuqoriga tekis · karta yoʻq · ustunlar orasida tik chiziq yoʻq ·
   aksent faqat belgi (tugun · raqam · urgʻu · asosiy CTA) · boʻlim paddingi yozilmaydi.
   ========================================================================== */

.b12v1{
  /* marshrut chizigʻi — CHIZMA relsi: navy kontur, 1px.
     Manba token: --chiziq-chizma (tokenlar.css ga koʻchirilishi kerak). */
  --b12v1-yol:var(--chiziq-chizma,rgba(1,36,76,.26));
  --b12v1-tugun:7px;                         /* tugun — aksent kvadrat */
  --b12v1-yolak:clamp(20px,2.2vw,32px);      /* tik: chiziqdan matngacha */
  --b12v1-oraliq:clamp(26px,2.6vw,34px);     /* tik: qadamlar orasi */
  --b12v1-yakun:clamp(34px,3.4vw,48px);      /* 03 dan yakuniy harakatgacha */
  --b12v1-tugun-top:8px;                     /* qadam tuguni: raqam cap tepasi (padding-top 4 + cap) */
}

/* ==========================================================================
   1 · KIRISH — sarlavha ikki qatorda; ≥1024 da yorliq oʻng chetga chiqadi
   ========================================================================== */
.b12v1__kirish{
  display:grid;justify-items:start;align-content:start;
  gap:var(--s4);margin-bottom:clamp(28px,2.6vw,38px);
}
/* ikki qatorli kompozitsiya kafolati: «Uch qadamda» / «toʻgʻri moy» */
.b12v1__kirish h2{max-width:9em}

/* ==========================================================================
   2 · TIK MARSHRUT (asos, <1024) — chap chiziq, yoʻl yakun tugunida tugaydi
   Rels roʻyxatning oʻzida: 01 tugunidan boshlanib, yakun tugunining markazigacha
   choʻziladi. Tugma balandligiga ham, havolaning qatorga sinishiga ham bogʻliq emas.
   ========================================================================== */
.b12v1__yol{position:relative;padding-left:var(--b12v1-yolak)}

.b12v1__qadamlar{
  position:relative;
  list-style:none;margin:0;padding:0;
  display:grid;row-gap:var(--b12v1-oraliq);
}
.b12v1__qadamlar::before{
  content:"";position:absolute;
  left:calc(-1 * var(--b12v1-yolak));
  top:var(--b12v1-tugun-top);
  bottom:calc(-1 * (var(--b12v1-yakun) + var(--b12v1-tugun) / 2));
  width:1px;background:var(--b12v1-yol);
}

.b12v1__q{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,34em);
  grid-template-areas:"n b" ". t";
  column-gap:clamp(14px,1.4vw,22px);row-gap:6px;
  align-items:start;align-content:start;
}
/* tugun — aksent faqat belgi sifatida; tepasi raqamning cap tepasida */
.b12v1__q::before{
  content:"";position:absolute;top:var(--b12v1-tugun-top);
  left:calc(-1 * var(--b12v1-yolak) - 3px);
  width:var(--b12v1-tugun);height:var(--b12v1-tugun);background:var(--aksent);
}

/* matn pogʻonalari: raqam → sarlavha → tushuntirish.
   Raqam yorliq emas: tracking −3%, uppercase yoʻq. */
.b12v1__n{
  grid-area:n;margin:0;padding-top:4px;
  font-size:13px;line-height:1.4;font-weight:700;
  color:var(--aksent-mayda);letter-spacing:var(--tracking);
  font-variant-numeric:tabular-nums;
}
.b12v1__b{
  grid-area:b;margin:0;
  font-size:clamp(19px,1.5vw,22px);line-height:1.3;
  max-width:14em;
}
.b12v1__t{
  grid-area:t;margin:0;
  font-size:var(--tana);line-height:1.66;color:var(--slate);
  max-width:34em;text-wrap:pretty;
}

/* yakun — yoʻlning yagona tugash nuqtasi.
   align-items:start (markaz emas); havola tugma YOZUVI bilan bitta baza
   chizigʻida — .ha ning global align-self:start i shu yerda baseline ga oʻtadi. */
.b12v1__yakun{
  position:relative;margin-top:var(--b12v1-yakun);
  display:flex;flex-wrap:wrap;align-items:start;
  column-gap:clamp(22px,2.6vw,40px);row-gap:var(--s4);
}
/* ikkalasi bitta baseline guruhida: tugma (eng katta baza masofasi) joyida
   qoladi, havola uning yozuvi bazasiga tushadi. Faqat .ha ga baseline berilsa
   u yolgʻiz guruh boʻlib start da qolardi. */
.b12v1__yakun .btn,.b12v1__yakun .ha{align-self:baseline}
/* yakun tuguni: tugma qutisining YUQORI qirrasida (top:0).
   Tugma balandligi hisobga olinmaydi — tahrir.css kontrol oʻlchamini
   oʻzgartirsa ham tugun siljimaydi (sehrli 56px olib tashlandi). */
.b12v1__yakun::before{
  content:"";position:absolute;top:0;
  left:calc(-1 * var(--b12v1-yolak) - 3px);
  width:var(--b12v1-tugun);height:var(--b12v1-tugun);background:var(--aksent);
}

/* ---------- tor mobil (<620): raqam matn ustida, tugma toʻliq kenglikda ---------- */
@media (max-width:619px){
  .b12v1{--b12v1-oraliq:var(--s8);--b12v1-yakun:var(--s8);--b12v1-tugun-top:4px}
  .b12v1__q{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"n" "b" "t";
  }
  .b12v1__n{padding-top:0;margin-bottom:2px}   /* padding 0 → tugun ham 4px ga koʻtariladi */
  .b12v1__yakun .btn{width:100%;justify-content:space-between}
}

/* ==========================================================================
   3 · GORIZONTAL MARSHRUT (≥1024) — 4 / 5 / 3.5 notekis ustun
        ■─────────────■──────────────────■───────────────────────
        01            02                 03
        ■──────────────────────────────────────────────────────
        [ CTA ]                          tinch havola oʻng chetda
   Chiziq — roʻyxatning yuqori chegarasi (1px, konteyner boʻylab);
   tugun — har ustunning chap chetida, chiziq markazida;
   yoʻlning YAGONA yakuni — CTA relsining chap uchidagi toʻrtinchi tugun.
   Ustunlar orasida tik chiziq YOʻQ, karta YOʻQ, L-boʻgʻin YOʻQ.
   ========================================================================== */
@media (min-width:1024px){
  .b12v1{
    --b12v1-ustun-gap:clamp(32px,3.6vw,56px);
    --b12v1-tugun-rels:calc((1px - var(--b12v1-tugun)) / 2);  /* 7px kvadrat 1px chiziq markazida */
    --b12v1-tugun-pad:calc(var(--s5) + 4px);                  /* tugundan kontentgacha */
  }

  /* kirish: yorliq sarlavha USTIDA, chap chetda — sahifadagi 12 blok bilan bitta
     tizim (12.09 · Otabek koʻrigidan keyin: oʻng chetdagi yorliq yolgʻiz qolib,
     boshqa bloklarning ochilishidan ajralib turardi). */
  .b12v1__kirish{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
  .b12v1__kirish .yorliq{grid-column:1;grid-row:1;justify-self:start}
  .b12v1__kirish h2{grid-column:1;grid-row:2}

  .b12v1__yol{padding-left:0}
  .b12v1__qadamlar::before{content:none}          /* tik rels yoʻq */

  .b12v1__qadamlar{
    grid-template-columns:minmax(0,8fr) minmax(0,10fr) minmax(0,7fr);  /* 4 / 5 / 3.5 */
    column-gap:var(--b12v1-ustun-gap);row-gap:0;
    border-top:1px solid var(--b12v1-yol);
  }
  .b12v1__q{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"n" "b" "t";
    row-gap:var(--s2);
    padding-top:var(--b12v1-tugun-pad);
  }
  /* tugun chiziq ustida: 7px kvadrat, 1px chiziqning markazida */
  .b12v1__q::before{top:var(--b12v1-tugun-rels);left:0}

  .b12v1__n{padding-top:0}
  /* raqamga havo: 01 → sarlavha 16px, sarlavha → tushuntirish 8px */
  .b12v1__b{margin-top:calc(var(--s4) - var(--s2))}

  /* assimetriya TIPOGRAFIKADA — 2 / 3 / 2 qator (ustun kengligi 380/475/332 px) */
  .b12v1__t{max-width:26em}
  .b12v1__q:nth-child(1) .b12v1__t{max-width:22em}
  .b12v1__q:nth-child(2) .b12v1__t{max-width:26em}
  .b12v1__q:nth-child(3) .b12v1__t{max-width:19em}

  /* CTA qatori — yoʻlning yakuni: oʻz relsi, chap uchida toʻrtinchi tugun,
     asosiy tugma chap chetda, tinch havola relsning oʻng uchida */
  .b12v1__yakun{
    margin-top:clamp(40px,3.8vw,56px);
    padding-top:var(--b12v1-tugun-pad);
    border-top:1px solid var(--b12v1-yol);
    justify-content:space-between;
  }
  .b12v1__yakun::before{top:var(--b12v1-tugun-rels);left:0}
}