/*
 * edu-mobile.css
 * Styly pro mobilní zobrazení edu stránek (certifikacni-test, edu/test, edu/sign).
 *
 * Načítá se POUZE na stránkách s PRoot "edu" a "certifikacni-test"
 * (podmínka v Default.Master.cs), takže zbytek webu není ovlivněn.
 *
 * Všechny úpravy jsou pod @media (max-width: 1024px).
 */

@media (max-width: 1024px) {

    /* ============================================
       SKRYTÍ NAVIGACE, BREADCRUMBŮ, FOOTERU
       ============================================ */

    .contact-container,
    nav,
    footer,
    #pageLoading {
        display: none !important;
    }

    #pageWrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: auto !important;
    }

    .main-container {
        max-width: 100% !important;
        padding: 1rem !important;
        margin: 0 !important;
    }

    .breadcrumb-container {
        display: none !important;
    }

    /* ============================================
       CERTIFIKACNI-TEST – vstupní stránka
       ============================================ */

    .page-style {
        flex-direction: column !important;
    }

    .page-style > .page-img {
        display: none !important;
    }

    .page-style > .page-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Tlačítka pod sebe (otevřít školení, stáhnout certifikát, ověřit Bank iD) */
    .page-style button,
    .page-style a.btn,
    form button,
    form a.btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }

    /* Iframe wrapper se školením – responsivní šířka */
    .edu-iframe-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0.5rem !important;
    }

    .edu-iframe-wrapper iframe {
        width: 100% !important;
        border-radius: 4px !important;
    }

    /* ============================================
       ERROR VIEWS (blocked, code-not-found, expire)
       ============================================ */

    .cert-error-view > .col-5.page-img {
        display: none !important;
    }

    .cert-error-view > .col-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ============================================
       EDU_TEST – test, výsledky
       ============================================ */

    .card .row > .col-7.page-content,
    .card .row > .col-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .card .row > .col-5.page-img {
        display: none !important;
    }

    .card .row > .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
    }

    .form-input h3 {
        font-size: 1rem !important;
        display: block !important;
        padding-left: 0 !important;
        text-indent: 0 !important;
        margin-left: 0.2em !important;
    }

    /* Zarovnání otázek */
    .form-input h3.test-question-heading {
        display: flex !important;
        gap: 0.4em !important;
        font-size: 1rem !important;
        padding-left: 0 !important;
        text-indent: 0 !important;
        margin-left: 0 !important;
    }

    h3.test-question-heading > span:first-child {
        flex-shrink: 0 !important;
    }

    .form-input .radio-input {
        padding-left: 0.2em !important;
        margin-bottom: 0.3rem !important;
    }

    .form-input .radio-input label {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.1rem !important;
    }

    .form-input .radio-input label input[type="radio"] {
        flex-shrink: 0 !important;
        margin-top: 0.35em !important;
    }

    .form-input .radio-input label span {
        font-size: 0.9rem !important;
        display: inline-block !important;
        padding-left: 1.6em !important;
        text-indent: -1.6em !important;
    }

    button#vyhodnotit {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ============================================
       EDU_SIGN – Bank iD ověření
       ============================================ */

    .card .row > .col-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .card .row > .col-3.page-img {
        display: none !important;
    }

    /* ============================================
       TYPOGRAFIE
       ============================================ */

    h1 {
        font-size: 1.4rem !important;
    }

    h2 {
        font-size: 1.2rem !important;
    }

    h3 {
        font-size: 1rem !important;
    }

    p {
        font-size: 0.9rem !important;
    }

    /* ============================================
       DĚKOVNÁ / UKONČOVACÍ STRÁNKA
       ============================================ */

    .beporapp-thankyou {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
        text-align: center;
        padding: 2rem;
    }

    .beporapp-thankyou .icon {
        font-size: 3rem;
        color: #22c55e;
        margin-bottom: 1rem;
    }

    .beporapp-thankyou h2 {
        font-size: 1.4rem !important;
        margin-bottom: 0.5rem;
    }

    .beporapp-thankyou p {
        color: #666;
        margin-bottom: 2rem;
    }

    .beporapp-thankyou .btn-close-app {
        padding: 0.8rem 2rem;
        font-size: 1rem;
        background: #2563eb;
        color: #fff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
    }

} /* konec @media (max-width: 1024px) */