/* ============================================================
   SHELLS Design-System — Blueprint C: E-Learning overrides
   Applied on top of experiments/lab_introduction.css to upgrade
   the inner visual system to the Phase-2 blueprint standard.
   Class names stay identical — this file only restyles them.

   Load order: AFTER lab_introduction.css so the cascade wins.
   Canary scope: loaded only by tutorialpage.html when
   elearning_template is set — currently only the Zugversuch
   Theoretische-Grundlagen page (/tutorials/tensile_test).
   Future phases (3a) will widen the load scope.

   Authority: docs/styleguide/STYLE_GUIDE.md
   ============================================================ */

/* ─── Elearning container becomes a section-card ─── */
.elearning-container {
    background: var(--gradient-card-bg);
    border: var(--border-thin) solid rgba(var(--primary-rgb), 0.08);
    border-radius: var(--radius-3xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
}

/* ─── Module navigation — modernized pill-style ─── */
.module-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-sm);
    border-bottom: var(--border-base) solid var(--surface-border-light);
    padding-bottom: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.module-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-base) solid var(--surface-border-light);
    border-radius: var(--radius-lg);
    background: var(--neutrals-0);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--textcolor-80contrast);
    text-align: center;
    transition: all var(--transition-base);
}

.module-nav-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.module-nav-btn.active {
    background: var(--gradient-primary);
    color: var(--neutrals-0);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

/* ─── Module title gets gradient-text treatment ─── */
.module-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    background: var(--gradient-title);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-sm);
}

.module-subtitle {
    font-size: var(--text-base);
    color: var(--textcolor-50contrast);
    margin-bottom: var(--spacing-xl);
}

/* ─── Content cards with gradient accent bar + hover ─── */
.elearn-card {
    background: var(--surface-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    /* Neutralize the lab_introduction.css `border-left: 4px solid var(--primary-color)`
       — it would paint a primary-blue strip next to our ::before accent and produce the
       two-colour edge the user reported in Modul 5. The ::before alone carries the
       accent; on pages without blueprint_elearning.css, lab_introduction.css still
       supplies its own border-left for .elearn-card (unchanged). */
    border-left: none;
}

/* The 4-px gradient accent is painted entirely by ::before.
   No border-left on .elearn-card — it would be invisible behind ::before. */
.elearn-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--gradient-accent-bar);
}

.elearn-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover-sm);
}

.elearn-card h4 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--textcolor-fullcontrast);
    margin-bottom: var(--spacing-sm);
}

.elearn-card p,
.elearn-card li {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--textcolor-80contrast);
}

/* Card variant ─ warning only
   Tip / Formel retired in favor of .card-badge (see STYLE_GUIDE.md §4.9). */
.elearn-card.warning {
    background: var(--warning-50);
}
.elearn-card.warning::before {
    background: linear-gradient(180deg, var(--warning-500), var(--warning-400));
}

/* ─── Next-module button (success variant) ─── */
.elearn-btn-success {
    background: linear-gradient(135deg, var(--success-500), var(--success-600));
    color: var(--neutrals-0);
    border-radius: var(--radius-xl);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: var(--text-base);
    border: var(--border-base) solid var(--success-500);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
}

.elearn-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover-md);
    background: linear-gradient(135deg, var(--success-600), var(--success-800));
}

/* ─── Next-module separator (stat-phase) ─── */
.stat-phase {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: var(--border-thin) solid var(--surface-border-light);
}

.tnsel-next-module {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-xl);
}

/* ─── Exercise box, quiz — inherit the card-card look ─── */
.exercise-box {
    background: var(--neutrals-0);
    border: var(--border-base) solid var(--surface-border-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.exercise-box h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
}