/* ============================================================
   Module Layout System
   Shared CSS classes for all learning modules.
   Replaces inline layout styles (max-width, padding, margin)
   so that responsive overrides work cleanly without !important.
   ============================================================ */

/* --- .module-section: invisible layout container ---
   Used by htmlSection() helpers in ai-tools, devops, mcp modules.
   Centers content, limits width, adds minimal padding. */
.module-section {
    margin: 0 auto 24px;
    max-width: 1200px;
    padding: 0 8px;
    box-sizing: border-box;
}

/* --- .module-card: visible styled card ---
   Used by net-fundamentals, security, dev-essentials modules.
   Background, border, rounded corners, content padding. */
.module-card {
    max-width: 1200px;
    margin: 0 auto 28px auto;
    padding: 24px 28px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    color: #cbd5e1;
    font-size: 16px;
    line-height: 1.75;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

/* --- Typography scale inside module cards ---
   Uses !important to override inline font-size styles set in JS modules --- */
.module-card h3 {
    font-size: 19px !important;
    font-weight: 700;
    margin: 20px 0 10px;
}

.module-card h4 {
    font-size: 17px !important;
    font-weight: 600;
    margin: 16px 0 8px;
}

.module-card p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    margin-bottom: 12px;
}

.module-card li {
    font-size: 16px !important;
    line-height: 1.75 !important;
}

.module-card span {
    font-size: 15px;
}

.module-card code {
    font-size: 14px !important;
    font-family: 'JetBrains Mono', monospace;
}

.module-card pre code {
    font-size: 13px !important;
    line-height: 1.6;
}

.module-card dt {
    font-size: 15px !important;
}

.module-card dd {
    font-size: 15px !important;
}

/* --- .module-title: section heading ---
   Used before module-card sections for h2/h3 titles. */
.module-title {
    max-width: 1200px;
    margin: 36px auto 12px auto;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

/* --- .module-svg-wrap: SVG diagram container ---
   Centers SVGs, limits width. */
.module-svg-wrap {
    max-width: 1200px;
    margin: 0 auto 20px auto;
    text-align: center;
    box-sizing: border-box;
}

/* --- .module-qa-wrap: Q&A accordion container ---
   Wraps collapsible question/answer cards. */
.module-qa-wrap {
    max-width: 1200px;
    margin: 0 auto 12px auto;
    padding: 0 24px;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

/* --- .module-canvas: applied directly to canvas elements ---
   Used when modules set padding/max-width on the canvas itself. */
.module-canvas {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* --- .module-wrap: outer build() wrapper ---
   Applied to the top-level div inside canvas that wraps
   all section content. Provides consistent page padding. */
.module-wrap {
    padding: 20px 12px 60px;
    box-sizing: border-box;
}

/* --- Global: all descendants use border-box ---
   Prevents padding from causing overflow. */
.module-section *,
.module-card *,
.module-title *,
.module-wrap *,
.module-canvas * {
    box-sizing: border-box;
}

/* ============================================================
   Phone (< 768px)
   ============================================================ */
@media (max-width: 767px) {
    .module-section {
        max-width: 100%;
        padding: 0 4px;
        margin-bottom: 16px;
    }

    /* Module sections with inline card padding: reduce on mobile */
    .module-section[style*="padding"] {
        padding: 14px 10px !important;
    }

    .module-card {
        max-width: 100%;
        padding: 16px 14px;
        margin-bottom: 16px;
        font-size: 15px;
    }

    .module-card p,
    .module-card li {
        font-size: 15px;
    }

    .module-card h3 {
        font-size: 17px;
    }

    .module-card h4 {
        font-size: 16px;
    }

    .module-title {
        max-width: 100%;
        padding: 0 10px;
        margin-top: 24px;
    }

    .module-svg-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .module-qa-wrap {
        max-width: 100%;
        padding: 0 10px;
    }

    .module-wrap {
        padding: 10px 6px 24px;
    }

    .module-canvas {
        max-width: 100%;
        padding: 10px;
    }

    /* Flex children: allow text to shrink and wrap */
    .module-section [style*="display:flex"] > *,
    .module-card [style*="display:flex"] > *,
    .module-wrap [style*="display:flex"] > * {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Nested divs with inline padding: reduce on mobile */
    .module-section div[style*="padding"],
    .module-card div[style*="padding"],
    .module-wrap div[style*="padding"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Nested divs with inline max-width: override */
    .module-section div[style*="max-width"],
    .module-card div[style*="max-width"],
    .module-wrap div[style*="max-width"] {
        max-width: 100% !important;
    }

    /* Grids inside modules: single column */
    .module-section [style*="grid-template-columns"],
    .module-card [style*="grid-template-columns"],
    .module-wrap [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Overflow: clip all module containers */
    .module-section,
    .module-card,
    .module-wrap {
        overflow-x: hidden;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Flex containers: force wrap on mobile */
    .module-section [style*="display:flex"],
    .module-card [style*="display:flex"],
    .module-wrap [style*="display:flex"] {
        flex-wrap: wrap !important;
    }

    /* Inline code: prevent overflow */
    .module-section code,
    .module-card code,
    .module-wrap code {
        word-break: break-all;
        font-size: 11px !important;
    }

    /* Text wrapping on all spans */
    .module-section span,
    .module-card span,
    .module-wrap span {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* ============================================================
   Tablet (768px - 1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .module-card {
        max-width: 100%;
        padding: 18px 20px;
    }

    .module-title {
        max-width: 100%;
    }

    .module-svg-wrap {
        max-width: 100%;
        overflow-x: auto;
    }

    .module-qa-wrap {
        max-width: 100%;
    }

    /* 3-col grids → 2-col on tablet */
    .module-section [style*="1fr 1fr 1fr"],
    .module-card [style*="1fr 1fr 1fr"],
    .module-wrap [style*="1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }
}