/* ---- Courses ------------------------------------------------------------ */

/*
 * Reasoning is in docs/design/2026-08-20-courses.md.
 *
 * 🚨 A locked lesson is SHOWN, dimmed, rather than hidden. Somebody deciding
 * whether to take a course needs to see its shape, and the gate is enforced by
 * `course.access` on the server rather than by leaving rows out of a list. So
 * the styling has to make "you cannot open this yet" read as a state of the
 * course rather than as something broken.
 */

.course-grid {
    display: grid;
    /* Narrower than a club card: a course tile carries a title, a sentence and
       two counts, and no picture. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.course-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    min-width: 0;
    transition: border-color 0.15s ease;
}

.course-card:hover { border-color: var(--c-border-strong); }

/* An unpublished course is staff-only, and has to look unfinished so nobody
   mistakes a draft for something people can see. */
.course-card.is-draft {
    border-style: dashed;
    background: var(--c-inset);
}

.course-card-title { font-size: 1.05rem; font-weight: 650; margin: 0; }
.course-card-title a { color: inherit; text-decoration: none; }
.course-card-title a:hover { text-decoration: underline; }

.course-card-summary {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.9rem;
    /* Two lines, so a long summary cannot make one tile twice the height of
       its neighbours and tear the grid. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card-meta { margin: 0; color: var(--c-text-muted); font-size: 0.82rem; }

.course-summary { color: var(--c-text-muted); margin-bottom: 1rem; }

.course-section-heading {
    font-size: 1rem;
    font-weight: 650;
    margin: 1.5rem 0 0.6rem;
}

/* ---- progress ---- */

.course-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--c-inset);
    overflow: hidden;
    margin: 0.5rem 0 0.35rem;
}

.course-progress-bar {
    height: 100%;
    background: var(--c-primary);
    border-radius: inherit;
    transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .course-progress-bar { transition: none; }
}

/* ---- the lesson list ---- */

.course-lessons {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    /* The rounded corners have to clip the first and last row's background. */
    overflow: hidden;
}

.course-lesson {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--c-border);
}

.course-lesson:last-child { border-bottom: 0; }

/*
 * 🚨 Dimmed, not hidden, and still clearly a row. The title of a locked lesson
 * is part of how somebody decides to enrol; what they cannot do is open it.
 */
.course-lesson.is-locked .course-lesson-locked { color: var(--c-text-muted); }

.course-lesson.is-done { background: var(--c-success-soft); }

.course-tag {
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--c-inset);
    color: var(--c-text-muted);
}

.course-tag.is-done {
    background: var(--c-success-chip);
    color: var(--c-success-chip-ink);
}

.course-tag.is-locked {
    background: var(--c-warning-chip);
    color: var(--c-warning-chip-ink);
}

/* ---- a lesson ---- */

.course-lesson-body {
    margin: 1rem 0 1.5rem;
    max-width: 68ch;
    line-height: 1.65;
}

.course-lesson-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.course-lesson-actions form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.course-nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--c-border);
}

/* A course note on the front, where the admin alert classes do not belong. */
.course-note {
    padding: 0.75rem 1rem;
    border: 1px solid var(--c-success-line);
    border-left: 3px solid var(--c-success);
    border-radius: var(--radius);
    background: var(--c-success-soft);
    color: var(--c-success-text);
    margin-bottom: 1rem;
}

.course-note.is-problem {
    border-color: var(--c-danger-line);
    border-left-color: var(--c-danger);
    background: var(--c-danger-soft);
    color: var(--c-danger-text);
}