/*
 * LinkedIn Learning Curriculum Component Styles
 * Extracted from CourseCurriculum.razor inline <style> block
 * Version: 2.4.0 | Date: 2026-04-10
 */

/* Main curriculum container */
.ll-curriculum-container {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4, 1rem);
}

.ll-section {
    border: 1px solid var(--ll-border-color, #e5e7eb);
    border-radius: var(--ll-radius, 0.5rem);
    overflow: hidden;
    background: var(--ll-bg-section, #ffffff);
}

.ll-section-header {
    display: flex;
    align-items: center;
    gap: var(--ll-space-3, 0.75rem);
    width: 100%;
    padding: 16px 0 !important;
    background: var(--ll-gray-100, #f3f2ef);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
    position: relative;
}

.ll-section-header:hover {
    background: var(--ll-gray-200, #e8e6e1);
}

.ll-section-header.expanded {
    background: var(--ll-primary-light, #f5f3ff);
}

.ll-section-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ll-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ll-text-dark, #1f2937);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ll-section-meta {
    font-size: 0.875rem;
    color: var(--ll-text-muted, #6b7280);
    margin: 0;
}

.ll-section-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: var(--ll-text-muted, #6b7280);
    transition: transform 0.2s ease;
}

.ll-section-header.expanded .ll-section-expand {
    transform: rotate(180deg);
}

.ll-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.ll-section-header.expanded ~ .ll-section-content {
    max-height: 2000px;
}

.ll-lesson {
    display: flex;
    align-items: center;
    padding: var(--ll-space-4, 1rem);
    padding-left: var(--ll-space-5, 1.5rem);
    border-bottom: 1px solid var(--ll-border-light, #f3f2ef);
    gap: var(--ll-space-3, 0.75rem);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ll-lesson:last-child {
    border-bottom: none;
}

.ll-lesson:hover {
    background: var(--ll-gray-50, #fafaf8);
}

.ll-lesson-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.ll-lesson-icon.video {
    color: #ef4444;
}

.ll-lesson-icon.quiz {
    color: #f59e0b;
}

.ll-lesson-icon.assignment {
    color: #3b82f6;
}

.ll-lesson-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ll-lesson-title {
    font-size: 0.95rem;
    color: var(--ll-text-dark, #1f2937);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.ll-lesson-meta {
    font-size: 0.8rem;
    color: var(--ll-text-muted, #6b7280);
    margin: 0;
}

.ll-lesson-locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.ll-lesson-locked .ll-lesson-title {
    color: var(--ll-text-muted, #6b7280);
}

.ll-lesson-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    background: var(--ll-badge-bg, #e0e7ff);
    color: var(--ll-badge-text, #4338ca);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.ll-lesson-badge.completed {
    background: #d1fae5;
    color: #065f46;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .ll-section-header {
        padding: 12px 0 !important;
    }

    .ll-lesson {
        padding: var(--ll-space-3, 0.75rem);
        padding-left: var(--ll-space-4, 1rem);
    }

    .ll-section-title {
        font-size: 0.95rem;
    }

    .ll-lesson-title {
        font-size: 0.9rem;
    }

    .ll-lesson-meta {
        font-size: 0.75rem;
    }
}

/* Dark mode support (if theme supports it) */
@media (prefers-color-scheme: dark) {
    .ll-section {
        background: var(--ll-bg-dark, #2d2d2d);
        border-color: var(--ll-border-dark, #444);
    }

    .ll-section-header {
        background: var(--ll-gray-dark, #3a3a3a);
        color: var(--ll-text-light, #f5f5f5);
    }

    .ll-section-header:hover {
        background: var(--ll-gray-darker, #454545);
    }

    .ll-lesson {
        border-bottom-color: var(--ll-border-dark, #444);
        color: var(--ll-text-light, #f5f5f5);
    }

    .ll-lesson:hover {
        background: var(--ll-gray-dark, #3a3a3a);
    }
}

/* Layout hardening v3.14.25 — neutralizza override globali (es. .section h2,
   typography di base, grid stretch) che gonfiano il curriculum rendendolo
   una "hero" verticale sulla Detail page. I punti chiave:
   - titolo sezione forzato a 14-16px (era renderizzato come h1 da regole globali)
   - header con padding e min-height compatti
   - griglia colonne della detail allineata in cima per evitare stretch verticale
     della sidebar-card a piena altezza */
.course-content .ll-section-title,
.ll-sidebar-content .ll-section-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

.course-content .ll-section-header,
.ll-sidebar-content .ll-section-header {
    min-height: 0 !important;
    padding: 12px 16px !important;
    align-items: center !important;
}

.course-content .ll-section-meta,
.ll-sidebar-content .ll-section-meta {
    font-size: 0.8125rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Il padding 64px 0 applicato da regole globali .section * della landing
   gonfiava anche .ll-section-expand e .ll-section-info, creando header
   di 450px. Resetto il padding su tutti i descendenti del section-header. */
.course-content .ll-section-header > *,
.ll-sidebar-content .ll-section-header > * {
    padding: 0 !important;
}

/* Le regole layout della Detail page stretchano le colonne: forzo start
   cosi' la card "Questo corso include" non si allunga a tutta altezza e
   la colonna principale non eredita un min-height che lascia vuoti. */
.course-detail-container,
.course-detail-layout,
.course-detail .course-layout,
.course-detail-grid {
    align-items: start !important;
}

/* Evita che il wrapper .ll-sidebar-content ereditato dal layout "Learning"
   (sidebar full-height) gonfi il curriculum nella Detail page. */
.course-content .ll-sidebar-content {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
}