/**
 * Website - Small Screens Fixes
 * =============================
 * Breakpoints for school laptops and low-height screens.
 * Target resolutions: 1366×768, 1280×720, 1024×768 (Chromebooks).
 *
 * IMPORTANT: The main issue is viewport HEIGHT, not width.
 * At 1366×768, usable browser height is ~620-680px.
 *
 * Mobile (≤768px) is EXCLUDED - keeps original layout.
 */

/* ==========================================================================
   REFERENCE BREAKPOINTS
   ==========================================================================
   - 1366×768: Lenovo 11"-14" laptops, school notebooks (most common)
   - 1280×720: basic laptops
   - 1360×768: variation close to 1366
   - 1280×800: some small laptops
   - 1024×768: school Chromebooks
   ========================================================================== */

/* --------------------------------------------------------------------------
   ZONE 1: Low height (main cause of hidden content)
   Applies when viewport height ≤ 800px (excludes mobile)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-height: 800px) {
    .hero-section {
        height: 600px;
    }
    .hero-section h1 {
        font-size: 34px;
    }
    .hero-section p {
        font-size: 18px;
    }
    .title-default {
        font-size: 30px;
    }
    .sub-title-default {
        font-size: 20px;
    }
    .spacing-section p {
        color: #525271;
        font-size: 16px;
    }
    .feature-content p {
        font-size: 14px;
    }
    .cta-banner h5 {
        font-size: 38px;
    }

    /* Login page */
    .background-login {
        padding: 2em 0;
    }
    #logo {
        max-width: 230px;
    }
    .login-select-option img {
        max-width: 185px;
    }
    .wrapper-login-info h2 {
        font-size: 22px;
    }
    .login-select {
        padding: 1em 1.5em;
    }
    .wrapper-select-info button,
    .wrapper-select-info .btn {
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   ZONE 2: 1366×768 and similar (usable height ~620-680px)
   Width 769-1366px + height ≤ 768px
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1366px) and (max-height: 768px) {
    /* Fixes for the most problematic resolution */
}

/* --------------------------------------------------------------------------
   ZONE 3: 1280×720 and 1024×768 (Chromebooks, lower screens)
   Height ≤ 720px
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-height: 720px) {
    /* Fixes for very low viewport */
}

/* --------------------------------------------------------------------------
   ZONE 4: Narrow width + low height (1024×768)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) and (max-height: 768px) {
    /* Chromebooks and tablets in landscape */
}

/* --------------------------------------------------------------------------
   ZONE 5: Fixed buttons and actions at bottom
   Ensure close/continue buttons stay visible
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-height: 800px) {
    /* Sticky footer buttons, etc. */
}

/* --------------------------------------------------------------------------
   ZONE 6: Iframe/video on low-height screens
   Scale or limit content height
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-height: 768px) {
    /* Limit video/iframe height */
}

/* --------------------------------------------------------------------------
   ZONE 7: Desktop medium (992px - 1199px)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Medium desktop adjustments */
}