/* ==========================================================================
   wide.css — keng ekranlar uchun gorizontal yoyilish
   --------------------------------------------------------------------------
   Muammo: sayt konteyneri hamma joyda qat'iy `max-width: 1240px` edi
   (style.css / ns-style.css / theme/v2/css/layout.css). 1600px+ monitorlarda
   kontent o'rtada tor ustunda qolib, ikki yonda katta bo'sh joy qolardi.

   Yechim: konteyner kengligi endi token — `--container-max` — va u ekran
   kengayishi bilan bosqichma-bosqich o'sadi. Matn satrlari o'qish uchun
   qulay bo'lib qolishi uchun 100% emas, bosqichli o'sish tanlandi.

   BU FAYL ENG OXIRIDA YUKLANADI (system/head.php va v2/shell/head.php),
   shuning uchun bir xil aniqlikdagi eski qoidalarni ustidan yozadi.
   ========================================================================== */

:root {
  /* Sayt konteyneri (header, footer, barcha ommaviy sahifalar) */
  --container-max: 1240px;
  --container-pad: 24px;
  /* Kengroq maketlar: kabinet, ariza, profil, universitet v3 (asli 1400px) */
  --container-max-lg: 1400px;
}

@media (min-width: 1440px) {
  :root { --container-max: 1360px; --container-max-lg: 1480px; --container-pad: 32px; }
}
@media (min-width: 1600px) {
  :root { --container-max: 1500px; --container-max-lg: 1620px; }
}
@media (min-width: 1800px) {
  :root { --container-max: 1680px; --container-max-lg: 1800px; --container-pad: 40px; }
}
@media (min-width: 2100px) {
  :root { --container-max: 1880px; --container-max-lg: 2000px; }
}
@media (max-width: 480px) {
  :root { --container-pad: 16px; }
}

/* ---------- Asosiy konteyner ---------- */
.container,
.ug .container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ---------- Keng maketlar ---------- */
.app-container,
.profile-container,
.v3-wrap {
  max-width: var(--container-max-lg);
}

/* Kabinet shell'i (V2) allaqachon keng — juda katta ekranlarda yana o'sadi. */
@media (min-width: 1900px) { .ug { --ug-shell-max: 1880px; } }
@media (min-width: 2200px) { .ug { --ug-shell-max: 2080px; } }

/* Profil mobil qoidasi (profile.css:3864) buzilmasin */
@media (max-width: 991px) {
  body.profile-page .profile-container,
  body.chat-page .profile-container { max-width: 100%; }
}

/* ==========================================================================
   Kartochka gridlari — kenglik oshgach ustun qo'shiladi
   (aks holda kartochkalar cho'zilib, rasm proporsiyasi buziladi)
   ========================================================================== */

@media (min-width: 1600px) {
  /* Universitetlar / lagerlar ro'yxati (universities.css, style.css) */
  .uni-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Kurslar (courses.css) */
  .courses-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Muvaffaqiyat hikoyalari 3 ustunda qoladi: kartochka ichidagi ball
     halqalari qatori (IELTS/SAT/GPA) 4 ustunda ~296px ga siqilib,
     oxirgi yorliq kesilib qolardi. 2100px dan keyin joy yetadi. */
  /* Blog ro'yxati ATAYLAB 2 ustunda qoldirildi: kartochka gorizontal
     (rasm + matn), 3 ustunda matn ustuni ~180px ga tushib sarlavha
     har so'zda uzilib ketadi. Kartochkalar shunchaki kengayadi. */
}

@media (min-width: 2100px) {
  .uni-grid,
  .courses-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cases-grid   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}