/* ==========================================================================
   Python String Methods — responsive.css
   Barcha ekran o'lchamlari uchun moslashuv. Asosiy e'tibor telefon
   versiyasiga qaratilgan (mobile-friendly bo'lishi eng muhim talab).
   ========================================================================== */

/* ============================================================
   CODING SAHIFASI — DESKTOPDA CHAP/O'NG JOYLASHUV
   (mobilda standart holat — kod tepada, natija pastda — saqlanadi)
   ============================================================ */
@media (min-width: 900px) {
  #coding-editor .editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
  }
  #coding-editor .editor-toolbar { grid-column: 1 / 3; }
  #coding-editor .editor-body {
    grid-column: 1; grid-row: 2;
    max-height: none; height: 540px;
  }
  #coding-editor .editor-output {
    grid-column: 2; grid-row: 2;
    border-top: none; border-left: 1px solid rgba(255,255,255,.08);
    max-height: none; height: 540px;
  }
}

/* ============================================================
   PLANSHET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .nav-links { display: none; }
}

/* ============================================================
   KICHIK PLANSHET / KATTA TELEFON (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  .notes-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.1rem; }
  .container { padding: 0 18px; }
}

/* ============================================================
   TELEFON (≤600px) — ASOSIY E'TIBOR
   ============================================================ */
@media (max-width: 600px) {
  html { font-size: 15px; }

  /* Navbar */
  .navbar-inner { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .brand { order: 1; }
  .navbar-actions { order: 2; margin-left: auto; }
  .nav-search-wrap { order: 3; max-width: none; width: 100%; flex-basis: 100%; }

  /* Hero */
  .hero { padding: 10px 0 28px; }
  .hero-title { font-size: 1.7rem; }
  .hero-desc { font-size: .92rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }

  /* Topic head */
  .topic-head { flex-wrap: wrap; }
  .topic-head h1 { font-size: 1.35rem; }

  /* Misollar tabs scroll */
  .ex-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ex-tab { flex-shrink: 0; }

  /* Editor */
  .editor-body { max-height: 260px; }
  .editor-pre, .editor-code textarea, .editor-gutter { font-size: .8rem; }
  .editor-toolbar { flex-wrap: wrap; }

  /* Quiz */
  .quiz-box { padding: 18px; }
  .quiz-q { font-size: 1rem; }
  .quiz-opt { padding: 12px 14px; font-size: .9rem; }

  /* Topic bottom nav */
  .topic-bottom { flex-wrap: wrap; justify-content: center; }
  .topic-bottom .btn { flex: 1 1 auto; text-align: center; }

  /* Coding page */
  .coding-head h1 { font-size: 1.4rem; }
  #coding-editor .editor-body { min-height: 220px; }
}

/* ============================================================
   JUDA KICHIK TELEFON (≤380px)
   ============================================================ */
@media (max-width: 380px) {
  .hero-title { font-size: 1.5rem; }
  .btn-lg { padding: 11px 18px; font-size: .92rem; }
  .code-block { font-size: .8rem; }
}

/* ============================================================
   TOUCH QURILMALAR — BARMOQ BILAN BOSISH QULAY BO'LISHI UCHUN
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .btn, .icon-btn, .nav-link, .quiz-opt, .ex-tab, .bookmark-btn { min-height: 40px; }
  .topic-row:hover { transform: none; }
}

/* ============================================================
   LANDSCAPE TELEFON
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
  .editor-body { max-height: 200px; }
}