/* Course lessons and practice quizzes, scoped to the public learning flow. */
.course-learning {
    padding-block: 26px 80px;
    background: var(--site-ivory, #f7f6f2);
    color: var(--site-ink, #12243a);
}

.course-learning *,
.course-learning *::before,
.course-learning *::after {
    box-sizing: border-box;
}

.course-learning a {
    text-decoration: none !important;
}

.course-learning__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block-end: 28px;
    color: var(--site-muted, #536276);
    font-size: 13px;
}

.course-learning__breadcrumb a {
    color: var(--site-muted, #536276) !important;
}

.course-learning__breadcrumb a:hover {
    color: var(--site-blue, #244a80) !important;
}

.course-learning__breadcrumb > span[aria-hidden] {
    opacity: 0.48;
}

.course-learning__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding-block-end: 31px;
}

.course-learning__header > div {
    min-width: 0;
}

.course-learning__eyebrow {
    margin: 0 0 9px;
    color: var(--site-blue, #244a80);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.course-learning__header h1 {
    max-width: 850px;
    margin: 0;
    color: var(--site-ink, #12243a);
    font-size: clamp(28px, 3.3vw, 43px);
    font-weight: 800;
    line-height: 1.2;
}

.course-learning__header p:last-child:not(:first-child) {
    margin: 12px 0 0;
    color: var(--site-muted, #536276);
    font-size: 15px;
}

.course-learning__back-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--site-line-strong, #b9c5d1);
    border-radius: var(--site-radius-sm, 8px);
    background: #fff;
    color: var(--site-blue, #244a80) !important;
    font-size: 13px;
    font-weight: 800;
}

.course-learning__back-link:hover {
    border-color: var(--site-blue, #244a80);
}

.course-learning__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
    align-items: start;
    gap: clamp(20px, 3vw, 36px);
}

.course-learning__main,
.course-learning__sidebar {
    min-width: 0;
}

.course-learning__main {
    display: grid;
    gap: 20px;
}

.course-learning__media-card {
    overflow: hidden;
    border: 1px solid var(--site-line, #dce2e8);
    border-radius: var(--site-radius-lg, 12px);
    background: #0e1d2d;
}

.course-learning__media-frame,
.course-learning__media-card video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.course-learning__media-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.course-learning__media-card video {
    max-height: 680px;
    background: #0e1d2d;
    object-fit: contain;
}

.course-learning__media-empty {
    display: grid;
    place-items: center;
    gap: 9px;
    min-height: 280px;
    padding: 24px;
    color: #fff;
    text-align: center;
}

.course-learning__media-empty i {
    font-size: 42px;
    opacity: 0.75;
}

.course-learning__media-empty p {
    margin: 0;
    font-size: 15px;
}

.course-learning__media-empty a {
    color: #fff !important;
    font-weight: 800;
    text-decoration: underline !important;
}

.course-learning__lesson-card,
.course-learning__sidebar,
.course-learning__empty {
    border: 1px solid var(--site-line, #dce2e8);
    border-radius: var(--site-radius-lg, 12px);
    background: #fff;
}

.course-learning__lesson-card {
    padding: clamp(22px, 3vw, 34px);
}

.course-learning__lesson-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
}

.course-learning__lesson-heading h2 {
    margin: 0;
    color: var(--site-ink, #12243a);
    font-size: clamp(22px, 2.6vw, 29px);
    font-weight: 800;
    line-height: 1.3;
}

.course-learning__duration {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    color: var(--site-muted, #536276);
    font-size: 13px;
    white-space: nowrap;
}

.course-learning__description {
    margin-block-start: 23px;
    padding-block-start: 22px;
    border-block-start: 1px solid var(--site-line, #dce2e8);
}

.course-learning__description h3 {
    margin: 0 0 11px;
    font-size: 17px;
    font-weight: 800;
}

.course-learning__description p {
    margin: 0;
    color: var(--site-text, #25384c);
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-line;
}

.course-learning__sequence {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-block-start: 26px;
    padding-block-start: 22px;
    border-block-start: 1px solid var(--site-line, #dce2e8);
}

.course-learning__sequence a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    max-width: 45%;
    color: var(--site-blue, #244a80) !important;
    font-size: 14px;
    font-weight: 800;
}

.course-learning__sequence a:last-child {
    text-align: end;
}

.course-learning__sequence a > span {
    display: grid;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-learning__sequence small {
    color: var(--site-muted, #536276);
    font-size: 12px;
    font-weight: 600;
}

.course-learning__sidebar {
    overflow: hidden;
}

.course-learning__sidebar-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 19px;
    border-block-end: 1px solid var(--site-line, #dce2e8);
}

.course-learning__sidebar-head .course-learning__eyebrow {
    margin-block-end: 5px;
}

.course-learning__sidebar-head h2 {
    margin: 0;
    color: var(--site-ink, #12243a);
    font-size: 20px;
    font-weight: 800;
}

.course-learning__sidebar-head > span {
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    min-height: 30px;
    border-radius: 6px;
    background: var(--site-blue-soft, #edf2f8);
    color: var(--site-blue, #244a80);
    font-size: 13px;
    font-weight: 800;
}

.course-learning__unit + .course-learning__unit {
    border-block-start: 1px solid var(--site-line, #dce2e8);
}

.course-learning__unit summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 22px;
    color: var(--site-ink, #12243a);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    list-style: none;
}

.course-learning__unit summary::-webkit-details-marker {
    display: none;
}

.course-learning__unit summary i {
    color: var(--site-muted, #536276);
    font-size: 11px;
    transition: transform 180ms ease;
}

.course-learning__unit[open] summary i {
    transform: rotate(180deg);
}

.course-learning__unit ol {
    margin: 0;
    padding: 0 10px 12px;
    list-style: none;
}

.course-learning__unit li + li {
    margin-block-start: 2px;
}

.course-learning__unit a {
    display: flex;
    align-items: start;
    gap: 10px;
    min-height: 45px;
    padding: 11px 12px;
    border-radius: 7px;
    color: var(--site-text, #25384c) !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.course-learning__unit a:hover,
.course-learning__unit a[aria-current="page"] {
    background: var(--site-blue-soft, #edf2f8);
    color: var(--site-blue, #244a80) !important;
}

.course-learning__unit a > i {
    margin-block-start: 2px;
    color: var(--site-blue, #244a80);
    font-size: 15px;
}

.course-learning__unit a > span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.course-learning__unit a small {
    color: var(--site-muted, #536276);
    font-size: 11px;
    font-weight: 500;
}

.course-learning__unit .course-learning__locked-lesson {
    display: flex;
    align-items: start;
    gap: 10px;
    min-height: 45px;
    padding: 11px 12px;
    border-radius: 7px;
    background: #f5f6f8;
    color: var(--site-muted, #536276);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.course-learning__locked-lesson > i {
    margin-block-start: 2px;
    font-size: 14px;
}

.course-learning__locked-lesson > span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.course-learning__locked-lesson small {
    font-size: 11px;
    font-weight: 600;
}

.course-learning__sidebar-empty {
    margin: 0;
    padding: 22px;
    color: var(--site-muted, #536276);
    font-size: 13px;
    line-height: 1.6;
}

.course-learning__sidebar-footer {
    padding: 17px 22px 22px;
    border-block-start: 1px solid var(--site-line, #dce2e8);
}

.course-learning__sidebar-footer a,
.course-learning__empty a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 17px;
    border-radius: var(--site-radius-sm, 8px);
    background: var(--site-blue, #244a80);
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
}

.course-learning__sidebar-footer a:hover,
.course-learning__empty a:hover {
    background: var(--site-blue-hover, #1b3c6c);
}

.course-learning__empty {
    display: grid;
    justify-items: start;
    padding: clamp(28px, 5vw, 55px);
}

.course-learning__empty-icon {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    margin-block-end: 22px;
    border-radius: 10px;
    background: var(--site-blue-soft, #edf2f8);
    color: var(--site-blue, #244a80);
    font-size: 25px;
}

.course-learning__empty h2 {
    max-width: 600px;
    margin: 0;
    color: var(--site-ink, #12243a);
    font-size: clamp(21px, 3vw, 28px);
    font-weight: 800;
    line-height: 1.35;
}

.course-learning__empty p {
    max-width: 560px;
    margin: 12px 0 23px;
    color: var(--site-muted, #536276);
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .course-learning__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .course-learning__sidebar {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .course-learning {
        padding-block: 22px 58px;
    }

    .course-learning__breadcrumb {
        margin-block-end: 24px;
    }

    .course-learning__header {
        display: block;
        padding-block-end: 23px;
    }

    .course-learning__back-link {
        margin-block-start: 19px;
    }

    .course-learning__media-empty {
        min-height: 220px;
    }

    .course-learning__lesson-heading {
        display: block;
    }

    .course-learning__duration {
        margin-block-start: 12px;
    }

    .course-learning__sequence a {
        max-width: 48%;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .course-learning__unit summary i {
        transition: none;
    }
}

/* Quiz creation and practice */
.course-learning__quiz-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 900px;
    margin-block-end: 18px;
}

.course-learning__quiz-intro h2 {
    margin: 0 0 5px;
    color: var(--site-ink, #12243a);
    font-size: 22px;
    font-weight: 800;
}

.course-learning__quiz-intro p {
    margin: 0;
    color: var(--site-muted, #536276);
    font-size: 15px;
}

.course-learning__quiz-intro > span {
    flex: 0 0 auto;
    color: var(--site-blue, #244a80);
    font-size: 13px;
    font-weight: 800;
}

.course-learning__quiz-builder,
.course-learning__quiz-shell {
    max-width: 900px;
}

.course-learning__quiz-unit,
.course-learning__quiz-progress,
.course-learning__question,
.course-learning__quiz-result {
    overflow: hidden;
    border: 1px solid var(--site-line, #dce2e8);
    border-radius: var(--site-radius-lg, 12px);
    background: #fff;
}

.course-learning__quiz-unit + .course-learning__quiz-unit {
    margin-block-start: 12px;
}

.course-learning__quiz-unit summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 21px 24px;
    color: var(--site-ink, #12243a);
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    list-style: none;
}

.course-learning__quiz-unit summary::-webkit-details-marker {
    display: none;
}

.course-learning__quiz-unit summary > span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--site-muted, #536276);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.course-learning__quiz-unit summary i {
    font-size: 11px;
    transition: transform 180ms ease;
}

.course-learning__quiz-unit[open] summary i {
    transform: rotate(180deg);
}

.course-learning__quiz-unit-lessons {
    display: grid;
    gap: 1px;
    padding: 7px 10px 12px;
    border-block-start: 1px solid var(--site-line, #dce2e8);
}

.course-learning__quiz-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 7px;
    color: var(--site-text, #25384c);
    cursor: pointer;
    font-size: 14px;
}

.course-learning__quiz-choice:hover,
.course-learning__quiz-choice:has(input:checked) {
    background: var(--site-blue-soft, #edf2f8);
    color: var(--site-blue, #244a80);
}

.course-learning__quiz-choice input,
.course-learning__answer input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--site-blue, #244a80);
}

.course-learning__quiz-submit {
    margin-block-start: 20px;
}

.course-learning__quiz-submit button,
.course-learning__quiz-next,
.course-learning__quiz-result-actions button,
.course-learning__quiz-result-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 19px;
    border: 1px solid var(--site-blue, #244a80);
    border-radius: var(--site-radius-sm, 8px);
    background: var(--site-blue, #244a80);
    color: #fff !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
}

.course-learning__quiz-submit button:hover,
.course-learning__quiz-next:not(:disabled):hover,
.course-learning__quiz-result-actions button:hover,
.course-learning__quiz-result-actions a:hover {
    background: var(--site-blue-hover, #1b3c6c);
}

.course-learning__quiz-next:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.course-learning__form-error {
    max-width: 900px;
    margin: 0 0 17px;
    padding: 13px 15px;
    border: 1px solid #eac7ca;
    border-radius: 8px;
    background: #fff4f4;
    color: var(--site-danger, #a63139);
    font-size: 14px;
    font-weight: 700;
}

.course-learning__empty--quiz {
    max-width: 900px;
}

.course-learning__quiz-progress {
    margin-block-end: 18px;
    padding: 20px 24px;
}

.course-learning__quiz-progress > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-block-end: 13px;
    font-size: 13px;
}

.course-learning__quiz-progress > div:first-child > span {
    color: var(--site-muted, #536276);
}

.course-learning__quiz-progress strong {
    color: var(--site-ink, #12243a);
    font-weight: 800;
}

.course-learning__quiz-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--site-blue-soft, #edf2f8);
}

.course-learning__quiz-progress-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--site-blue, #244a80);
    transition: width 180ms ease;
}

.course-learning__question {
    padding: clamp(23px, 3vw, 36px);
}

.course-learning__question-number {
    margin: 0 0 13px;
    color: var(--site-blue, #244a80);
    font-size: 13px;
    font-weight: 800;
}

.course-learning__question-text {
    margin-block-end: 22px;
    color: var(--site-ink, #12243a);
    font-size: clamp(19px, 2.3vw, 25px);
    font-weight: 800;
    line-height: 1.5;
}

.course-learning__question-text > *:last-child,
.course-learning__answer > span > *:last-child {
    margin-block-end: 0;
}

.course-learning__question fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.course-learning__answer-list {
    display: grid;
    gap: 10px;
}

.course-learning__answer {
    display: flex;
    align-items: start;
    gap: 13px;
    min-height: 54px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--site-line, #dce2e8);
    border-radius: var(--site-radius-sm, 8px);
    background: #fff;
    color: var(--site-text, #25384c);
    cursor: pointer;
    font-size: 15px;
    line-height: 1.5;
}

.course-learning__answer:hover {
    border-color: var(--site-blue, #244a80);
}

.course-learning__answer input {
    margin-block-start: 2px;
}

.course-learning__answer.is-correct {
    border-color: #8fc6a8;
    background: #eff8f2;
}

.course-learning__answer.is-incorrect {
    border-color: #e7b0b5;
    background: #fff4f4;
}

.course-learning__feedback {
    margin: 17px 0 0;
    color: var(--site-text, #25384c);
    font-size: 14px;
    font-weight: 800;
}

.course-learning__feedback.is-correct {
    color: var(--site-success, #276749);
}

.course-learning__feedback.is-incorrect {
    color: var(--site-danger, #a63139);
}

.course-learning__quiz-next {
    margin-block-start: 26px;
}

.course-learning__quiz-result {
    display: grid;
    justify-items: start;
    padding: clamp(28px, 4vw, 45px);
}

.course-learning__quiz-result h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
}

.course-learning__quiz-result p {
    margin: 12px 0 22px;
    color: var(--site-muted, #536276);
    font-size: 16px;
    line-height: 1.6;
}

.course-learning__quiz-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.course-learning__quiz-result-actions a {
    border-color: var(--site-line-strong, #b9c5d1);
    background: #fff;
    color: var(--site-blue, #244a80) !important;
}

.course-learning__quiz-result-actions a:hover {
    border-color: var(--site-blue, #244a80);
    background: var(--site-blue-soft, #edf2f8);
}

@media (max-width: 600px) {
    .course-learning__quiz-intro {
        display: block;
    }

    .course-learning__quiz-intro > span {
        display: block;
        margin-block-start: 12px;
    }

    .course-learning__quiz-unit summary {
        padding: 18px;
    }

    .course-learning__quiz-submit button {
        width: 100%;
    }

    .course-learning__question {
        padding: 22px 18px;
    }

    .course-learning__quiz-result-actions {
        width: 100%;
    }

    .course-learning__quiz-result-actions > * {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .course-learning__quiz-unit summary i,
    .course-learning__quiz-progress-track > span {
        transition: none;
    }
}

/* Course plan selection */
.course-learning__plans {
    display: grid;
    gap: 14px;
    max-width: 980px;
}

.course-learning__plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
    padding: clamp(21px, 3vw, 30px);
    border: 1px solid var(--site-line, #dce2e8);
    border-radius: var(--site-radius-lg, 12px);
    background: #fff;
}

.course-learning__plan-body {
    min-width: 0;
}

.course-learning__plan h2 {
    margin: 0;
    color: var(--site-ink, #12243a);
    font-size: clamp(19px, 2.4vw, 24px);
    font-weight: 800;
}

.course-learning__plan-body > p:last-child {
    margin: 9px 0 0;
    color: var(--site-muted, #536276);
    font-size: 14px;
}

.course-learning__plan-action {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    gap: 14px;
}

.course-learning__plan-action strong {
    color: var(--site-ink, #12243a);
    font-size: 25px;
    font-weight: 800;
    white-space: nowrap;
}

.course-learning__plan-action form {
    margin: 0;
}

.course-learning__plan-action button,
.course-learning__plan-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid var(--site-blue, #244a80);
    border-radius: var(--site-radius-sm, 8px);
    background: var(--site-blue, #244a80);
    color: #fff !important;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}

.course-learning__plan-action button:hover,
.course-learning__plan-action a:hover {
    background: var(--site-blue-hover, #1b3c6c);
}

@media (max-width: 600px) {
    .course-learning__plan {
        display: grid;
        gap: 20px;
    }

    .course-learning__plan-action {
        justify-items: stretch;
        padding-block-start: 17px;
        border-block-start: 1px solid var(--site-line, #dce2e8);
    }

    .course-learning__plan-action strong {
        font-size: 23px;
    }

    .course-learning__plan-action button,
    .course-learning__plan-action a {
        width: 100%;
    }
}