/* ==========================================================
   TypingTutor.Online
   Focused Lesson Viewport v17.0.14
   File: css/focused-lesson-viewport.css
========================================================== */

/*
 * Desktop strategy:
 * - Keep the full lesson card height so the five live-stat cards retain
 *   their excellent matching height.
 * - Show only three lines of lesson text.
 * - Center the smaller text viewport inside the available middle space.
 * - Keep the practice footer anchored at the bottom.
 */

.lesson-practice-grid {
    align-items: stretch !important;
}

.typing-practice-card {
    display: flex !important;
    min-height: 100%;
    flex-direction: column;
    align-self: stretch;
}

.typing-practice-card .practice-toolbar,
.typing-practice-card .practice-footer {
    flex: 0 0 auto;
}

/*
 * CSS variables are also read by TextRenderer.js when deciding where the
 * current line should sit inside the visible window.
 */
#lessonText {
    --lesson-visible-lines: 3;
    --lesson-text-line-height: 1.72;

    box-sizing: border-box;
    flex: 0 0 auto;

    height:
        calc(
            var(--lesson-visible-lines)
            * var(--lesson-text-line-height)
            * 1em
            + 34px
        ) !important;

    min-height:
        calc(
            var(--lesson-visible-lines)
            * var(--lesson-text-line-height)
            * 1em
            + 34px
        ) !important;

    max-height:
        calc(
            var(--lesson-visible-lines)
            * var(--lesson-text-line-height)
            * 1em
            + 34px
        ) !important;

    margin-top: auto;
    margin-bottom: auto;
    padding: 17px 2.2% !important;

    overflow-x: hidden !important;
    overflow-y: hidden !important;

    line-height:
        var(--lesson-text-line-height) !important;

    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

#lessonText::-webkit-scrollbar {
    display: none;
}

/*
 * Keep the footer at the card bottom even though the visible text window is
 * shorter. The outer card therefore remains visually balanced with Stats.
 */
.typing-practice-card .practice-footer {
    margin-top: 0;
}

/*
 * Mobile strategy:
 * - Statistics are no longer beside the lesson.
 * - Let the complete card become shorter.
 * - Show only two lines, with the active line placed first so the learner
 *   can see the next line below it.
 */
@media (max-width: 760px) {
    .typing-practice-card {
        min-height: 0 !important;
        height: auto !important;
    }

    #lessonText {
        --lesson-visible-lines: 2;
        --lesson-text-line-height: 1.72;

        height:
            calc(
                var(--lesson-visible-lines)
                * var(--lesson-text-line-height)
                * 1em
                + 28px
            ) !important;

        min-height:
            calc(
                var(--lesson-visible-lines)
                * var(--lesson-text-line-height)
                * 1em
                + 28px
            ) !important;

        max-height:
            calc(
                var(--lesson-visible-lines)
                * var(--lesson-text-line-height)
                * 1em
                + 28px
            ) !important;

        margin-top: 0;
        margin-bottom: 0;
        padding: 14px 14px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #lessonText {
        scroll-behavior: auto;
    }
}