/* =========================================================
   MOBIL MOSLASHUV — ENG OXIRIDA yuklanadi.
   Qolgan modullarni ustidan yozadi, tartib muhim.
   ========================================================= */
@media (max-width:1000px){
  /* Brend ustuni tepada to'liq kenglikda, qolgan uchtasi tagida.
     Aloqa hamon o'z ustunida — u ko'rinishi kerak. */
  .futer-tor{grid-template-columns:repeat(3,1fr)}
  .futer-tor > div:first-child{grid-column:1 / -1}
}

@media (max-width:720px){
  .futer-tor{grid-template-columns:1fr 1fr}
  .futer-aloqa{grid-column:1 / -1;padding-left:0;padding-top:18px}
  .futer-aloqa::before{
    left:0;right:0;top:0;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--law-brass-500),rgba(176,132,66,.15));
  }
}

/* =========================================================
   PESHTOQ — TOR EKRAN

   Ikki ustun bitta ustunga tushadi: avval gap, keyin varaqa.
   Varaqa OLIB TASHLANMAYDI — u mahsulot nima qilishini eng tez
   tushuntiradigan narsa. Faqat kichrayadi.

   Ustunlar orasidagi tik chiziq ham olinadi: bitta ustunda
   uning ma'nosi yo'q. Chekka hoshiyalar esa qoladi.

   min-height olib tashlanadi: tor ekranda mazmun o'zi uzun
   bo'ladi, ustiga majburiy balandlik qo'shilsa peshtoq bo'sh
   joyga cho'zilib ketadi.
   ========================================================= */
@media (max-width:980px){
  .peshtoq{min-height:auto;padding-bottom:clamp(48px,7vw,76px)}
  .peshtoq .peshtoq-tor{grid-template-columns:1fr;gap:34px}
  .peshtoq-matn{padding-right:0}
  .peshtoq-korgazma{max-width:520px;width:100%}
  .peshtoq h1{max-width:15ch}
  .peshtoq .lede{max-width:60ch}
  .tur-tik{display:none}

  /* BOSH SATR TOR EKRANDA OLIB TASHLANADI.
     Keng ekranda u kerak: yopishib turuvchi paneldagi brend chapda
     yuqorida, peshtoqdagi bosh satr esa undan ancha pastda va
     ular bir-birini takrorlamaydi.
     Tor ekranda esa panel ixchamlashadi va ikkalasi UST-USTIGA
     tushadi: bir ekranda "Qonun.ai" ikki marta, logotip ikki
     marta ko'rinadi. Takror brend ishonch qo'shmaydi, faqat
     birinchi ekrandan joy yeydi. */
  .bosh-satr{display:none}

  /* Bosh satr yo'q — uning hoshiyasiga tekislanadigan narsa ham
     yo'q. Varaqaning 46px lik siljishi bu yerda shunchaki bo'sh
     joy bo'lib qolardi (04-peshtoq.css dagi izohga qarang). */
  .peshtoq-korgazma{margin-top:0}

  /* Uch ustunli tasma tor ekranda ustma-ust tushadi: 300px da
     har ustunga 90px dan qolardi va yozuvlar ikki-uch qatorga
     sinardi. Tik hoshiyalar o'rniga gorizontal hoshiya. */
  .peshtoq-royxat{grid-template-columns:1fr;margin-top:28px}
  .peshtoq-royxat li{padding:12px 0}
  .peshtoq-royxat li + li{
    border-left:0;padding-left:0;
    border-top:1px solid rgba(221,188,133,.08);
  }
}

@media (max-width:640px){
  .peshtoq{padding-top:clamp(36px,8vw,56px)}
  .peshtoq h1{max-width:100%}
  /* Tugma to'liq enga cho'ziladi, havola esa uning tagida
     alohida qatorda turadi — ular bir xil og'irlikda emas. */
  .peshtoq-tugmalar{align-items:flex-start;gap:14px}
  .peshtoq-tugmalar .tugma{width:100%}
  .peshtoq-korgazma{max-width:100%}
  .hujjat-bosh{padding:10px 14px}
  .hujjat-qator{padding:12px 14px 14px}
  .qator-matn{font-size:.85rem}
  .natija-matn{font-size:.82rem}

  .kartalar{grid-template-columns:1fr}
  .qadamlar{grid-template-columns:1fr;gap:26px}
  .savol summary{font-size:.94rem;padding-right:30px}
  .savol .javob{padding:0 30px 16px 26px}

  .futer-tor{grid-template-columns:1fr}
  .futer-oxir{flex-direction:column;gap:6px}
}

/* =========================================================
   QUYI BO'LIMLAR — TOR EKRAN

   Reyestrlar (holatlar guruhlari, sonlar, aloqa) bitta yoki
   ikki ustunga tushadi. Tik hoshiyalar o'rniga gorizontal
   hoshiya: bitta ustunda tik chiziqning ma'nosi qolmaydi.
   ========================================================= */
@media (max-width:900px){
  /* Beshta guruh olti ustunli to'rdan ikki ustunga tushadi.
     Oxirgi guruh yolg'iz qolmasligi uchun u butun kenglikni
     oladi — aks holda yonida bo'sh katak qolardi. */
  .holatlar{grid-template-columns:repeat(2, minmax(0,1fr))}
  .holat-guruh,
  .holat-guruh:nth-child(4),
  .holat-guruh:nth-child(5){grid-column:span 1}
  .holat-guruh:nth-child(5){grid-column:1 / -1}
}

@media (max-width:760px){
  .reyestr{grid-template-columns:1fr}
  .reyestr-band + .reyestr-band{
    border-left:0;padding-left:0;
    border-top:1px solid var(--line-soft);
  }
  .aloqa{grid-template-columns:1fr}
  .aloqa a + a{border-left:0;padding-left:0}
}

@media (max-width:560px){
  .holatlar{grid-template-columns:1fr}
  .holat-guruh,
  .holat-guruh:nth-child(4),
  .holat-guruh:nth-child(5){grid-column:1 / -1}
}

/* Juda tor ekranlar (320px) — hech narsa toshib ketmasin */
@media (max-width:360px){
  :root{--bolim-x:14px}
  .karta{padding:18px}
}

/* =========================================================
   YOPISHIB TURUVCHI PANEL — MOBIL
   Bo'lim havolalari yig'iladi, "Kirish" tugmasi QOLADI:
   foydalanuvchi sahifaning istalgan joyidan kira olsin.
   ========================================================= */
@media (max-width:860px){
  .panel-burger{display:grid}

  .panel-menyu{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    margin:0;padding:10px var(--bolim-x) 16px;
    background:var(--srf-raised);
    border-bottom:1px solid var(--line);
    box-shadow:var(--sh-lg);
  }
  .panel-menyu.ochiq{display:flex;animation:menyuTushdi .22s var(--ease)}
  @keyframes menyuTushdi{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  .panel-menyu a{padding:13px 14px;font-size:.94rem;color:var(--txt-primary)}
  /* Yig'ilgan menyuda tag chiziq o'rniga yon chiziq — qatorlar
     ustma-ust turgani uchun shunday aniqroq ko'rinadi. */
  .panel-menyu a.joriy::after{
    left:0;right:auto;top:50%;bottom:auto;
    width:3px;height:18px;transform:translateY(-50%);
  }

  .panel-nom{font-size:.98rem}
  .panel-kirish{margin-left:0;padding:0 16px;font-size:.86rem}
}

/* Panelda joy tanqis bo'lganda avval menyu havolalari
   burger ostiga yig'iladi. Brend nomi va "Kirish" tugmasi
   HAR DOIM to'liq qoladi.

   Ilgari bu yerda birinchi navbatda yashiriladigan yordamchi
   yozuv ("Lex.uz huquqiy platformasi") ham bor edi. Qonun.ai
   nomiga o'tilganda logotip taglinesiz qoldirildi, shuning
   uchun endi faqat menyu qisqaradi. */
/* Joy tanqis bo'lganda avval menyu ixchamlashadi */
@media (max-width:1320px){
  .panel-menyu a{padding:9px 11px;font-size:.86rem}
}
@media (max-width:1120px){
  .panel-menyu a{padding:8px 8px;font-size:.83rem}
  .panel-ichki{gap:12px}
}
/* Burger chiqqach brend yana siqilishi mumkin — u yerda
   "Kirish" tugmasi ustun turadi. */
@media (max-width:860px){
  .panel-brend{flex-shrink:1}
}
@media (max-width:560px){
  .panel-nom{font-size:1rem}
}

@media (max-width:400px){
  /* 320px da "Qonun.ai" uch nuqtaga qisqarib qolardi. Shrift va
     bo'shliqlarni bir oz kichraytirsak to'liq sig'adi. */
  .panel-nom{font-size:.92rem}
  .panel-ichki{gap:8px;padding-left:12px;padding-right:12px}
  .panel-muhr{width:34px;height:34px}
  .panel-kirish{padding:0 13px;min-height:38px;font-size:.84rem}
  .panel-burger{width:38px;height:38px}
}

/* =========================================================
   BO'LIM NAMOYISHLARI — TOR EKRAN

   Namoyishlar OLIB TASHLANMAYDI: ular endi bo'limlarning
   tushuntirishi, bezak emas. Faqat ikki ustun bittaga tushadi
   va o'lchamlar kichrayadi.
   ========================================================= */
@media (max-width:900px){
  .imk{grid-template-columns:1fr;gap:26px}
  /* Tor ekranda barcha bandlar bir xil to'liq ko'rinadi: joriy
     bandni ajratish uchun sahifani aylantirib turish kerak
     bo'lardi, bu esa o'qishga xalaqit beradi. */
  .imk-band:not(.joriy){opacity:1}
  .imk-band::before{background:var(--line-strong)}
  .imk-band.joriy::before{background:var(--accent)}
}

@media (max-width:640px){
  .varaqa-bosh{padding:10px 13px}
  .varaqa-qator{padding:11px 13px 13px}
  .varaqa-matn,.ovoz-matn{font-size:.84rem}
  .tolqin{height:28px}
  .qng-satr,.qng-qator{grid-template-columns:46px 1fr;gap:10px}
  .qng-qator{font-size:.81rem}
  .imk-band{padding:11px 0 11px 14px}
  .imk-nom{font-size:.95rem}
  .imk-izoh{font-size:.83rem}
  .muddat{grid-template-columns:1fr;gap:4px}
  .mud-son{grid-row:auto;text-align:left}
  .tq-qator{font-size:.85rem}
  .tq-savol-matn{font-size:.9rem}
}

/* Til almashtirgich mobilda ham QOLADI (menyuga yig'ilmaydi) —
   sabab 03-panel.css da. Faqat ixchamlashadi: globus olib
   tashlanadi, qisqartma qoladi. */
@media (max-width:860px){
  .panel-til{margin-left:0}
  .panel-til > summary{padding:0 9px;font-size:.82rem}
}
@media (max-width:480px){
  .panel-til > summary svg{display:none}
  .panel-til > summary{min-height:38px;padding:0 8px}
  .panel-til-royxat{min-width:170px}
}