/* ============================================================
   QAZAQ BIO LAB — мобильді бейімделу (адаптив)
   Бұл файл әрқашан ЕҢ СОҢЫНАН қосылады (inline <style>-тан кейін),
   сондықтан @media ережелері каскадта басым болады.
   Десктоп көрінісі өзгермейді — барлығы @media ішінде.
   ============================================================ */

/* ---------- Планшет / телефон: 820px дейін ---------- */
@media (max-width: 820px) {

    /* Зертхана беттерінің жалпы схемасы (1–5.html):
       бүйір мәзір → жоғарғы жолаққа айналады, контент төмен ағады */
    body {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .content { height: auto; }

    .sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        border-right: none;
        border-bottom: var(--glass-border, 1px solid rgba(52,211,153,0.2));
        position: sticky; top: 0; z-index: 60;
    }
    .back-link, .back-btn { padding: 12px 15px; border-bottom: none; }
    .nav-item {
        padding: 12px 14px; border-left: none; flex: 0 0 auto;
    }
    .nav-item.active {
        border-left: none;
        border-bottom: 3px solid var(--accent-green, #34d399);
    }

    /* Оқу беттері (Теория / Құралдар / Қорытынды) — толық адаптив */
    .page {
        padding: 20px;
        height: auto;
        max-width: 100%;
    }

    /* --- Симулятор --- */
    /* Ені мен биіктігі assets/mobile.js арқылы «дизайн-холстқа» бекітіліп,
       zoom-мен экран еніне сай кішірейтіледі. Осында тек JS-сіз де
       көрінетіндей ең төменгі биіктік беріледі. */
    #sim-box, #sim-wrapper {
        min-height: 300px;
        overflow: hidden;
    }

    /* Микроскоп/линза толық экран қабаттары (3.html, 5.html) —
       бұлар #sim-box сыртында, сондықтан бөлек өлшемделеді */
    .viewport, .lens-circle {
        width: 86vw; height: 86vw;
        max-width: 400px; max-height: 400px;
        border-width: 12px;
    }
    .focus-bar { width: 86vw; }

    /* Телефонды бұру туралы кеңес (mobile.js қосады) */
    #rotate-hint {
        position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 9999;
        background: rgba(6, 78, 59, 0.97); color: #d1fae5;
        border: 1px solid var(--accent-green, #34d399); border-radius: 12px;
        padding: 12px 16px; font-family: 'Segoe UI', sans-serif; font-size: 0.9rem;
        text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center; gap: 12px;
    }
    #rotate-hint #rh-x {
        cursor: pointer; font-weight: bold; color: #fca5a5;
        padding: 0 6px; flex: 0 0 auto;
    }

    /* ---------- Басты бет (index.html) ---------- */
    nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 12px 18px;
    }
    .menu-links a { margin-left: 14px; font-size: 0.9rem; }
    .hero { padding-top: 95px; }
    .hero h1 { font-size: 2.6rem; }
    .hero p { font-size: 1.1rem; margin-bottom: 40px; }
    .section-header h2 { font-size: 2.1rem; }
    .lab-section { padding: 60px 16px; }
    .footer-content { gap: 24px; }
}

/* ---------- Кіші телефондар: 480px дейін ---------- */
@media (max-width: 480px) {
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1rem; }
    .menu-links a { margin-left: 10px; font-size: 0.82rem; }
    .feature-box { min-width: 100%; }
    .logo { font-size: 1.2rem; }
    .btn-start { padding: 8px 18px; }
}