/* ============================================================
   USTOZ AI — Responsive & Accessibility
   Telefon, planshet, iPad va zamonaviy qurilmalar uchun
   ============================================================ */

/* ---- O'qish qulayligi (barcha ekranlar) ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, iframe, canvas { max-width: 100%; }
* { -webkit-tap-highlight-color: transparent; }

/* Gorizontal toshib ketishni (zoom/scroll) butunlay to'xtatamiz — hamma ekranда.
   overflow-x:clip — sticky panellarga ta'sir qilmaydi (hidden'dan afzal). */
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* MUHIM: grid/flex bolalari kontentга qarab konteynerdan kengaymasin.
   (min-width:auto sabab "1fr" ustun o'sib, o'ng tomon kesilishi tuzatiladi — barcha ekranда) */
.layout, .prac-grid, .lc-grid, .ai-wrap, .hero-grid, .ac-hero-grid { min-width: 0; }
.layout > *, .prac-grid > *, .lc-grid > *, .ai-wrap > * { min-width: 0; }
.layout #lessonContent, .layout .md-content, .vocab, .vocab > * { min-width: 0; overflow-wrap: anywhere; }

/* Drawer (yon menyu) tugmasi — desktopда yashirin, mobil'da ko'rinadi */
.drawer-burger, .drawer-overlay { display: none; }

/* Dars matni — kattaroq va o'qishga qulay (ko'zi zaiflar uchun).
   Shrift zaxirasi: lotin → Onest, arab harflari → Amiri (chiroyli naskh). */
#lessonContent { font-size: 17.5px !important; line-height: 1.9 !important; color: var(--ink-800);
  font-family: var(--font), 'Amiri', 'Noto Naskh Arabic', serif; }
#lessonContent .ar-block { padding: 28px 20px; }
#lessonContent .ar-block .big { font-size: 56px; line-height: 1.5; }
#lessonContent .ar-block > div:not(.big) { font-size: 16px; }

/* Lug'at — arab so'zlari kattaroq va chiroyli (Amiri shrifti) */
#vocabList .vocab { padding: 14px 0; }
#vocabList .vocab .ar { font-size: 30px !important; line-height: 1.6; font-family: var(--font-ar); direction: rtl; }
#vocabList .vocab .muted { font-size: 13.5px !important; }

/* ---- Matn o'lchami boshqaruvi (A− / A+) — bosqichma-bosqich ----
   --reader-scale (0.8–2.0) o'zgaruvchisi orqali dars matnи muloyim kattalashadi.
   Foydalanuvchi +/− bilan o'ziga moslaydi (head.ejs: adjustReader). */
#lessonContent, .md-content { font-size: calc(17.5px * var(--reader-scale, 1)) !important; line-height: 1.9 !important; }
#lessonContent .ar-block .big { font-size: calc(56px * var(--reader-scale, 1)) !important; }
#lessonContent .ar-block > div:not(.big) { font-size: calc(16px * var(--reader-scale, 1)) !important; }
#vocabList .vocab .ar { font-size: calc(30px * var(--reader-scale, 1)) !important; }
#vocabList .vocab .muted { font-size: calc(13.5px * var(--reader-scale, 1)) !important; }

/* ============================================================
   PLANSHET / IPAD (max 980px)
   ============================================================ */
@media (max-width: 980px) {
  .grid-3 { grid-template-columns: 1fr 1fr !important; }
  .why-grid, .tst-grid, .price-grid { grid-template-columns: 1fr 1fr !important; }
  .courses-grid { grid-template-columns: 1fr 1fr !important; }
  .hero-grid, .featured, .ai-wrap, .featured-arabic { grid-template-columns: 1fr !important; }
  .lc-grid { grid-template-columns: 1fr !important; }

  /* Lesson — yon panel pastga tushadi */
  .layout { grid-template-columns: 1fr !important; }

  /* Courses — filtr panel pastga */
  .courses-layout { grid-template-columns: 1fr !important; }
  .filter-panel { position: static !important; }

  /* AI tutor — yon panellarni yashiramiz, chat qoladi */
  .tutor-shell { grid-template-columns: 1fr !important; height: auto !important; }
  .tutor-shell .rail, .tutor-shell .ctx { display: none !important; }
  .chat { height: auto !important; min-height: 80vh; }

  /* Practice */
  .prac-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   TELEFON (max 760px)
   ============================================================ */
@media (max-width: 760px) {
  /* --- Drawer tugmasi va fon --- */
  .drawer-burger {
    display: flex; position: fixed; top: 8px; left: 8px; z-index: 80;
    width: 42px; height: 42px; border-radius: 11px; border: none;
    background: #0f5132; color: #fff; align-items: center; justify-content: center;
    box-shadow: var(--sh-md); cursor: pointer;
  }
  .drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 75; }
  .drawer-overlay.show { display: block; }

  /* --- Admin paneli: yon menyu siljuvchi drawer --- */
  .admin { grid-template-columns: 1fr !important; }
  .aside {
    position: fixed !important; top: 0; left: 0; bottom: 0;
    width: 270px; max-width: 84vw; height: 100vh !important;
    flex-direction: column !important; overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 78;
  }
  .aside.open { transform: translateX(0); }
  .atop { height: auto !important; min-height: 54px; padding: 12px 14px 12px 62px !important; flex-wrap: wrap; gap: 10px; }
  .atop h1 { font-size: 18px; flex: 1 1 100%; margin: 0; }
  .atop .search { max-width: none !important; order: 5; flex: 1 1 100%; }
  .atop .btn { flex: 1 1 auto; justify-content: center; }
  .abody { padding: 18px 16px 44px !important; }
  .acard-pad { padding: 16px !important; }
  .kpis { grid-template-columns: 1fr 1fr !important; }
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar .select, .toolbar .search { max-width: none !important; flex: 1 1 100%; }

  /* --- Admin jadvallari → KARTA ko'rinishi (o'quvchi saytidek tartibli) --- */
  .acard { overflow: visible !important; }
  .atable { min-width: 0 !important; display: block; }
  .atable thead { display: none !important; }
  .atable tbody { display: block; }
  .atable tr {
    display: block; background: #fff; border: 1px solid var(--line);
    border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--sh-xs);
  }
  .atable td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 5px 0 !important; border: none !important; text-align: right !important;
  }
  /* birinchi katak — karta sarlavhasi (kurs/ism nomi) */
  .atable td:first-child {
    display: block; text-align: left !important; font-weight: 700; font-size: 15.5px;
    color: var(--ink-900); margin-bottom: 6px; padding-bottom: 8px !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  /* ustun nomi (data-label bo'lsa) chap tomonда ko'rinadi */
  .atable td[data-label]::before {
    content: attr(data-label); font-weight: 600; color: var(--ink-400);
    font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; text-align: left;
  }
  /* harakatlar kataki — tugmalar qatori */
  .atable td:last-child { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 10px !important; }

  /* --- O'quvchi paneli: yon menyu siljuvchi drawer --- */
  .app { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed !important; top: 0; left: 0; bottom: 0;
    width: 270px; max-width: 84vw; height: 100vh !important;
    flex-direction: column !important; overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 78;
    border-right: 1px solid var(--line); background: #fff;
  }
  .sidebar.open { transform: translateX(0); }
  .main { padding: 62px 16px 44px !important; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar .search { max-width: none !important; flex: 1 1 100%; order: 5; }

  /* --- Sarlavha (header) — mobil menyu header.ejs ichida (hamburger) --- */

  /* --- Umumiy gridlar --- */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .courses-grid { grid-template-columns: 1fr !important; }
  .why-grid, .tst-grid, .price-grid { grid-template-columns: 1fr !important; }
  .lang-grid { grid-template-columns: 1fr 1fr !important; }

  /* "Davom etish/Boshlash" kartasi — telefonда tugma pastга tushadi (sarlavha qisilmaydi) */
  .welcome { flex-direction: column; align-items: flex-start !important; gap: 16px; padding: 22px 20px !important; }
  .welcome > a.btn, .welcome .btn { width: 100%; justify-content: center; }
  /* Promo/CTA kartalarida sarlavha+tugma yonma-yon bo'lsa — stack bo'lsin */
  .cta-band .flex, .ai-card .flex { flex-wrap: wrap; }
  .path { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .lc-skills { grid-template-columns: 1fr 1fr !important; }

  /* --- Lesson --- */
  .lesson-bar .container { gap: 10px; }
  .lesson-progress { display: none; }
  .layout { padding: 14px 16px 40px !important; gap: 16px; }
  .content-card { padding: 18px !important; }
  /* Matn o'lchami boshqaruvi — kichik ekranда sig'sin, A+ kesilmasin */
  .reader-controls { max-width: 100%; }
  .reader-controls .btn { padding: 4px 9px !important; }
  aside .side-card { padding: 16px; }

  /* --- Dars sahifasidagi sarlavhalar --- */
  h1 { font-size: 22px; }
  .section-title { font-size: 24px !important; }

  /* --- Placement / Practice --- */
  .pt-wrap { padding: 16px 14px 50px !important; }
  .q-block { padding: 22px !important; }
  .result-card { padding: 26px !important; }
  .wrap { padding: 16px 16px 50px !important; }

  /* --- Modal --- */
  .modal { max-width: 96vw !important; }
  .modal-body { padding: 18px !important; }
}

/* ============================================================
   KICHIK TELEFON (max 420px)
   ============================================================ */
@media (max-width: 420px) {
  .kpis, .grid-2, .grid-3, .lang-grid, .lc-skills, .path { grid-template-columns: 1fr !important; }
  .price-amount { font-size: 32px !important; }
  /* Juda kichik ekran — "Matn o'lchami:" yozuvini yashiramiz, A−/A/A+ sig'sin */
  .reader-label { display: none; }
  #lessonContent .ar-block .big { font-size: 46px; }
  #vocabList .vocab .ar { font-size: 26px !important; }
}

/* ============================================================
   QO'SHIMCHA MOBIL MUSTAHKAMLASH — overflow va sticky panellar
   ============================================================ */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  /* Barcha .container — chap/o'ng tomonда qulay bo'shliq (matn chetga yopishmasin) */
  .container { padding-left: 18px !important; padding-right: 18px !important; }

  /* Sticky panellar — balandlik moslashuvchan, toshib ketmasin */
  .lesson-bar, .prac-bar { height: auto !important; min-height: 54px; }
  .lesson-bar .container, .prac-bar .container {
    flex-wrap: wrap; gap: 8px; padding: 8px 0; max-width: 100%;
  }
  /* Imtihon panelining markaziy progress qatori to'liq enli */
  .prac-bar .container > div[style] { max-width: 100% !important; }
  .prac-bar .container > div:nth-child(2) { order: 5; flex: 1 1 100%; margin: 0 !important; }

  /* Imtihon natija paneli kontent ustida osilib qolmasin */
  .prac-grid > aside { position: static !important; top: auto !important; }

  /* Yakuniy karta — tugmalar sig'sin */
  .final-card { padding: 28px 18px !important; }
  .final-card .flex { flex-wrap: wrap; }
  .final-card .btn { flex: 1 1 auto; }

  /* AI tutor — telefonда oddiy scroll + input pastга yopishadi (har doim yetib bo'ladi) */
  .tutor-page { height: auto !important; overflow-x: hidden !important; overflow-y: visible !important; }
  .tutor-shell { height: auto !important; min-height: auto !important; grid-template-columns: 1fr !important; }
  .tutor-page .chat { height: auto !important; min-height: auto !important; }
  /* xabarlar maydoni ichki emas, sahifa bilan birga suriladi */
  .tutor-page .chat-scroll { overflow: visible !important; flex: none !important; padding: 18px 16px 24px; }
  /* sarlavha tepada, kirish maydoni pastда — yopishib turadi */
  .tutor-page .chat-header { position: sticky; top: 0; z-index: 30; }
  .tutor-page .composer { position: sticky; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }

  /* Uzun lug'at qatorlari telefonда buzilmasin */
  .vocab { flex-wrap: wrap; gap: 6px; }

  /* Tugma guruhlari — telefonда qulay */
  .btn-lg { padding: 13px 18px; font-size: 15px; }

  /* MUHIM: hero/CTA tugma qatorlari telefonда o'ralsin (toshib/kesilib ketmasin) */
  .ac-hero .flex, .hero-cta, .hero .flex, .cta-band .flex,
  .ac-stats, .hero-trust { flex-wrap: wrap !important; }
  /* Bitta uzun tugma ham ekrandan chiqib ketmasin */
  .btn { max-width: 100%; }
  /* Uzun matn/havola/email — so'z bo'linib, chetga chiqmasin (faqat matn konteynerlari) */
  h1, h2, h3, p, .lede, td, .muted { overflow-wrap: anywhere; }

  /* Hero ustidagi suzuvchi bezak kartalar — telefonда chetga chiqmasin (overflow) */
  .float-card { display: none !important; }
  .mock { margin: 0 auto; max-width: 100%; }

  /* --- Alifbo kartalari — tartibli, toshib ketmaydi --- */
  .lgrid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  .lcard { padding: 12px 6px 10px !important; }
  .lcard .glyph { font-size: 26px !important; }
  .lcard.ar .glyph { font-size: 34px !important; }
  .lcard .lname { font-size: 11px !important; margin-top: 5px !important; }
  .lcard .lread { font-size: 12px !important; }
  .ltabs { gap: 8px !important; }

  /* --- Footer — 2 ustun, brend tepada to'liq enli (bir tarafga qisilmaydi) --- */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 26px 22px !important; padding-top: 40px !important; padding-bottom: 28px !important; }
  .footer-grid > div:first-child { grid-column: 1 / -1 !important; }
  .footer a, .footer p { overflow-wrap: anywhere; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 460px) {
  .lgrid { grid-template-columns: repeat(3, 1fr) !important; }
  /* footer 2 ustunligicha qoladi — kenglik to'liq ishlatiladi */
}

/* ============================================================
   BARCHA SAHIFA BO'LIMLARI — kurs/landing gridlari mobil'da tartibli
   (homepage'dan tashqari sahifalar uchun ham)
   ============================================================ */

/* 2 ustunli "split" bo'limlar (matn + karta/rasm) → 1 ustun */
@media (max-width: 900px) {
  .ac-hero-grid, .arabic-banner, .mission, .contact-grid,
  .lc-grid, .ai-wrap, .featured, .hero-grid, .auth { grid-template-columns: 1fr !important; }
}

/* Login/Register — telefonда faqat forma, dekorativ panel yashiriladi */
@media (max-width: 760px) {
  .auth { min-height: auto !important; }
  .auth-brand { display: none !important; }
  .auth-form { min-height: 100vh; }
}

@media (max-width: 760px) {
  /* Matnli karta gridlari — to'liq enli, o'qishga qulay */
  .levels, .skills-grid, .method-grid, .cards, .form-grid,
  .courses-grid, .why-grid, .tst-grid, .price-grid { grid-template-columns: 1fr !important; }

  /* Kichik/ixcham kartalar — 2 ustun */
  .benefit-grid, .val-grid, .stat-band, .lc-skills, .ach-grid { grid-template-columns: 1fr 1fr !important; }
  .skill { gap: 14px; }
  /* Eslatma: .cal (haftalik kalendar) 7 ustunligicha qoladi — tegilmaydi */
}

@media (max-width: 460px) {
  .benefit-grid, .val-grid, .stat-band, .lc-skills, .ach-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   INLINE (klasssiz) ko'p ustunli gridlar — asosan admin sahifalarda.
   Telefonда 1 ustunga tushadi. Eslatma: haftalik kalendar (.cal) — KLASS,
   inline emas, shuning uchun bu yerga tushmaydi va 7 ustunligicha qoladi.
   ============================================================ */
@media (max-width: 760px) {
  /* 2 ustunli "split" (kontent + yon panel) → 1 ustun */
  [style*="grid-template-columns"][style*="fr 1fr"],
  [style*="grid-template-columns"][style*="repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  /* 3+ ustunli ixcham kartalar → 2 ustun */
  [style*="grid-template-columns"][style*="repeat(3"],
  [style*="grid-template-columns"][style*="repeat(4"],
  [style*="grid-template-columns"][style*="repeat(5"],
  [style*="grid-template-columns"][style*="repeat(6"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Uzun matn / email chetdan oshib ketmasin */
  .acard, .acard td, .atable td, .abody a, .abody .muted,
  .card a, .card .muted, .lesson-item, .task { overflow-wrap: anywhere; }
}
@media (max-width: 460px) {
  [style*="grid-template-columns"][style*="repeat(3"],
  [style*="grid-template-columns"][style*="repeat(4"],
  [style*="grid-template-columns"][style*="repeat(5"],
  [style*="grid-template-columns"][style*="repeat(6"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   PLANSHET (iPad) — admin paneli gridlari qisilmasin
   ============================================================ */
@media (max-width: 1100px) {
  .amain .kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .amain .grid { grid-template-columns: 1fr !important; }
}