/* =============================================================================
   CNX LMS — course header, classroom layout, course contents list
   ========================================================================== */

/* --- Header ---------------------------------------------------------------- */

.cnx-lms .cnx-course-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cnx-gap);
    padding: 16px var(--cnx-pad);
    border-radius: var(--cnx-radius);
    background: var(--cnx-cream);
    box-shadow: var(--cnx-shadow-sm);
}

.cnx-lms .cnx-course-header__identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 260px;
}

.cnx-lms .cnx-course-header__thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--cnx-radius-sm);
    object-fit: cover;
    background: var(--cnx-beige);
    flex: none;
}

.cnx-lms .cnx-course-header__thumb--empty {
    display: grid;
    place-items: center;
    color: var(--cnx-brand);
}

.cnx-lms .cnx-course-header__text { min-width: 0; }

.cnx-lms .cnx-course-header__title {
    margin: 0;
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    line-height: 1.3;
    /* Two lines, then ellipsis — never a single truncated word. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cnx-lms .cnx-course-header__meta {
    margin: 4px 0 0;
    font-size: .85rem;
    color: var(--cnx-muted);
}

.cnx-lms .cnx-course-header__aside { flex: 0 1 auto; }

/* --- Classroom ------------------------------------------------------------- */

.cnx-lms .cnx-classroom {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: var(--cnx-gap);
    align-items: start;
}

.cnx-lms .cnx-classroom__aside { position: sticky; top: 24px; }
.cnx-lms .cnx-classroom__main { min-width: 0; }

@media (max-width: 900px) {
    .cnx-lms .cnx-classroom { grid-template-columns: 1fr; }
    .cnx-lms .cnx-classroom__aside { position: static; }
}

/* --- Course contents ------------------------------------------------------- */

.cnx-lms .cnx-toc {
    border-radius: var(--cnx-radius);
    background: var(--cnx-cream);
    box-shadow: var(--cnx-shadow-sm);
    overflow: hidden;
}

.cnx-lms .cnx-toc--plain {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--cnx-brand-line);
}

.cnx-lms .cnx-toc__disclosure {
    display: none; /* desktop shows the list outright */
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 0;
    background: var(--cnx-brand);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cnx-lms .cnx-toc__heading { display: inline-flex; align-items: center; gap: 8px; }
.cnx-lms .cnx-toc__count { margin-inline-start: auto; font-weight: 400; opacity: .85; }
.cnx-lms .cnx-toc__chevron { transition: transform .2s ease; }

.cnx-lms .cnx-toc__body { padding: 8px; }
.cnx-lms .cnx-toc__empty { margin: 0; padding: 12px; color: var(--cnx-muted); font-size: .9rem; }

.cnx-lms .cnx-toc__group + .cnx-toc__group { margin-block-start: 6px; }

.cnx-lms .cnx-toc__group-title { margin: 0; font-size: .85rem; }

.cnx-lms .cnx-toc__group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 10px;
    border: 0;
    background: transparent;
    color: var(--cnx-muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: start;
    cursor: pointer;
}

.cnx-lms .cnx-toc__group-toggle[aria-expanded="false"] .cnx-toc__chevron {
    transform: rotate(-90deg);
}

.cnx-lms [dir="rtl"] .cnx-toc__group-toggle[aria-expanded="false"] .cnx-toc__chevron,
.cnx-lms[dir="rtl"] .cnx-toc__group-toggle[aria-expanded="false"] .cnx-toc__chevron {
    transform: rotate(90deg);
}

.cnx-lms .cnx-toc__list { margin: 0; padding: 0; list-style: none; }

/* Collapsible only once JS is present, so the list is never stuck hidden. */
@media (max-width: 900px) {
    .cnx-lms .cnx-toc[data-collapsible="true"] .cnx-toc__disclosure { display: flex; }
    .cnx-lms .cnx-toc[data-collapsible="true"]:not(.is-open) .cnx-toc__body { display: none; }
    .cnx-lms .cnx-toc[data-collapsible="true"].is-open .cnx-toc__chevron { transform: rotate(180deg); }
}