/**
 * K-12 Learn topic page — full-width, centered, reading-optimized.
 * Loaded LAST from Learn.cshtml so these rules win over theme CSS.
 */

/* Kill all parent constraints */
body.layout-codemy main#main-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.layout-codemy main#main-content .k12-learn-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Wide container — centered with even padding */
body.layout-codemy .k12-learn-page .learn-wide-container {
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
}

/* Grid — centered, two columns on desktop */
body.layout-codemy .k12-learn-page .k12-learn-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    width: 100% !important;
    align-items: start !important;
    justify-content: center !important;
}

body.layout-codemy .k12-learn-page .k12-learn-layout-main {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.layout-codemy .k12-learn-page .k12-learn-layout-side {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Cards — full width within column, centered */
body.layout-codemy .k12-learn-page .learn-card {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Tablet+ */
@media (min-width: 768px) {
    body.layout-codemy .k12-learn-page .learn-wide-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    body.layout-codemy .k12-learn-page .k12-learn-layout {
        grid-template-columns: minmax(0, 1fr) 280px !important;
        gap: 1.25rem !important;
    }
}

/* Desktop */
@media (min-width: 992px) {
    body.layout-codemy .k12-learn-page .learn-wide-container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    body.layout-codemy .k12-learn-page .k12-learn-layout {
        grid-template-columns: minmax(0, 1fr) 320px !important;
        gap: 1.5rem !important;
    }
}

/* Large desktop */
@media (min-width: 1400px) {
    body.layout-codemy .k12-learn-page .learn-wide-container {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
    body.layout-codemy .k12-learn-page .k12-learn-layout {
        grid-template-columns: minmax(0, 1fr) 340px !important;
        gap: 1.75rem !important;
    }
}

/* ═══ Card padding ═══ */
body.layout-codemy .k12-learn-page .learn-card-head {
    padding: 0.75rem 1rem 0.35rem !important;
}
body.layout-codemy .k12-learn-page .learn-card-body {
    padding: 0.3rem 1rem 0.9rem !important;
}

@media (min-width: 768px) {
    body.layout-codemy .k12-learn-page .learn-card-head {
        padding: 0.85rem 1.15rem 0.4rem !important;
    }
    body.layout-codemy .k12-learn-page .learn-card-body {
        padding: 0.35rem 1.15rem 1rem !important;
    }
}

/* Card title */
body.layout-codemy .k12-learn-page .learn-card-title {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0.1rem 0 0 !important;
    line-height: 1.3 !important;
}

/* Override inline max-width/padding on AI-generated content wrappers */
body.layout-codemy .k12-learn-page .learn-card .k12-lesson-body > div,
body.layout-codemy .k12-learn-page .learn-card .k12-mnemonic-body > div,
body.layout-codemy .k12-learn-page .learn-card .k12-summary-body > div {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Images fit card */
body.layout-codemy .k12-learn-page .learn-card .k12-lesson-body img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0.5rem;
    margin: 0.5rem auto !important;
}

/* Tables fill */
body.layout-codemy .k12-learn-page .learn-card .k12-lesson-body table {
    width: 100% !important;
    max-width: 100% !important;
}

/* MCQ options full width */
body.layout-codemy .k12-learn-page .learn-card .k12-mcq-inline,
body.layout-codemy .k12-learn-page .learn-card .k12-mcq-opts {
    width: 100% !important;
}

/* Mnemonic body */
body.layout-codemy .k12-learn-page .learn-card .k12-mnemonic-body {
    margin: 0 !important;
}

/* Sidebar cards */
body.layout-codemy .k12-learn-page .learn-sidebar-card {
    padding: 0.85rem !important;
    border-radius: 0.85rem !important;
    margin-bottom: 0.75rem !important;
}

/* Hero section container also centered */
body.layout-codemy .k12-learn-page .k12-hub-hero .learn-wide-container {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}