/**
 * Lesson + LMS handoff: mobile-first responsive shell.
 * Fluid gutters, clamp typography, flexible media, breakpoints.
 * Linked from lesson pages and learning path for consistent reading width.
 */

.lesson-page {
    --lesson-gutter: clamp(0.75rem, 4vw, 1.5rem);
    /* Wider desktop measure (still capped for readability) */
    --lesson-content-max: min(62rem, 100% - 2 * var(--lesson-gutter));
}

/* --- Fluid main column (classic + handoff) --- */
.lesson-main {
    width: 100%;
    max-width: min(980px, calc(100vw - 2 * var(--lesson-gutter)));
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 2.75rem) var(--lesson-gutter) clamp(2rem, 6vw, 4rem);
    box-sizing: border-box;
}

.lesson-container {
    width: 100%;
    max-width: 100%;
}

/* Flexible images / video inside lesson body */
.lesson-page img,
.lesson-page video,
.lesson-page svg {
    max-width: 100%;
    height: auto;
}

.lesson-page picture {
    display: block;
    max-width: 100%;
}

/* --- LMS handoff island: align with fluid column, fix zoomed-out feel --- */
.lesson-page--lms-handoff .lesson-handoff-island {
    width: 100%;
    max-width: var(--lesson-content-max);
    margin-inline: auto;
}

.lesson-page--lms-handoff .lesson-handoff-island .module-page {
    max-width: 100%;
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(0.25rem, 2vw, 1.25rem);
    box-sizing: border-box;
}

.lesson-page--lms-handoff .module-hero {
    padding: clamp(1rem, 3vw, 1.5rem);
}

.lesson-page--lms-handoff .module-hero-title {
    font-size: clamp(1.2rem, 0.5rem + 2.2vw, 1.65rem);
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Slightly more premium rhythm */
.lesson-page--lms-handoff .section-card {
    margin-bottom: clamp(0.7rem, 1.6vw, 1rem);
}
.lesson-page--lms-handoff .lesson-section {
    margin-bottom: clamp(0.7rem, 1.6vw, 1rem);
}
.lesson-page--lms-handoff .lesson-section-heading {
    font-size: clamp(1.02rem, 0.9rem + 0.45vw, 1.2rem);
}

.lesson-page--lms-handoff .module-hero-id {
    font-size: clamp(0.65rem, 0.35rem + 1vw, 0.75rem);
}

.lesson-page--lms-handoff .section-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    padding: clamp(0.65rem, 2vw, 0.9rem) clamp(0.75rem, 2.5vw, 1.25rem);
}

.lesson-page--lms-handoff .section-title {
    min-width: 0;
    flex: 1 1 12rem;
}

.lesson-page--lms-handoff .section-body {
    padding-inline: clamp(0.65rem, 2.5vw, 1.25rem);
}

.lesson-page--lms-handoff .section-card.open .section-body {
    padding-bottom: clamp(0.85rem, 2.5vw, 1.25rem);
}

.lesson-page--lms-handoff .lesson-section-body {
    font-size: clamp(0.875rem, 0.8rem + 0.35vw, 0.93rem);
}

/* Prev/next: stack on narrow, row on wider */
.lesson-page--lms-handoff .module-nav {
    flex-direction: column;
    gap: 0.75rem;
    margin-top: clamp(1.25rem, 4vw, 2rem);
}

.lesson-page--lms-handoff .module-nav a {
    min-width: 0;
}

@media (min-width: 560px) {
    .lesson-page--lms-handoff .module-nav {
        flex-direction: row;
        align-items: stretch;
    }
}

/* Quiz / compass: avoid horizontal overflow */
.lesson-page--lms-handoff .quiz-options,
.lesson-page--lms-handoff .compass-prompts {
    max-width: 100%;
}

.lesson-page--lms-handoff .quiz-option {
    min-width: 0;
}

/* Completion banner */
.lesson-page--lms-handoff .completion-banner {
    padding: clamp(1rem, 3vw, 1.5rem);
}

.lesson-page--lms-handoff .btn-primary {
    display: inline-block;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Extra-narrow phones */
@media (max-width: 380px) {
    .lesson-page {
        --lesson-gutter: 0.65rem;
    }
    .lesson-page--lms-handoff .section-icon {
        flex-shrink: 0;
    }
}

/* Large / zoomed-out viewports: keep readable measure, center block */
@media (min-width: 1200px) {
    .lesson-page--lms-handoff .lesson-handoff-island .module-page {
        padding-inline: 1rem;
    }
}

/* --- Learning path: match fluid gutters (same file for one HTTP request) --- */
.lp-page .lp-main {
    padding-inline: clamp(0.75rem, 4vw, 1.5rem);
    box-sizing: border-box;
}