/*
 * Program accordion on native <details>/<summary> - open/close and keyboard
 * support come from the browser. The plate is the shared .accordion-card
 * (00-accordion-card.css), the same one the FAQ item wears; this block adds
 * a number badge and a summary line the FAQ item does not have. Falls back
 * to a flat dotted list (.course-program__modules) when the course has no
 * `program`, only `modules`.
 */

.course-program {
    padding: 3vw 0;
}

.course-program__accordion {
    display: flex;
    flex-direction: column;
    gap: 0.83vw;
}

.course-program__block-summary {
    display: flex;
    align-items: flex-start;
    gap: 1.04vw;
    cursor: pointer;
    list-style: none;
}

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

.course-program__block-number {
    flex: 0 0 auto;
    font-size: 0.73vw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--color-accent);
    padding: 0.31vw 0.83vw;
    border-radius: 999px;
}

.course-program__block-heading {
    flex: 1 1 auto;
}

.course-program__block-title {
    display: block;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.31vw;
}

.course-program__block-summary-text {
    display: block;
    color: var(--color-text-muted);
}

.course-program__topics {
    display: flex;
    flex-direction: column;
    gap: 0.52vw;
    margin: 1.04vw 0 0;
    padding-top: 1.04vw;
    border-top: 1px solid var(--color-border);
}

.course-program__topics li {
    position: relative;
    padding-left: 1.35vw;
    color: var(--color-text);
}

.course-program__topics li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.63vw;
    width: 0.42vw;
    height: 0.42vw;
    border-radius: 50%;
    background: var(--color-accent);
}

.course-program__modules {
    display: flex;
    flex-direction: column;
    gap: 0.63vw;
}

.course-program__modules li {
    position: relative;
    padding-left: 1.35vw;
    color: var(--color-text);
}

.course-program__modules li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.63vw;
    width: 0.42vw;
    height: 0.42vw;
    border-radius: 50%;
    background: var(--color-accent);
}

@media only screen and (max-width: 767.98px) {
    .course-program {
        padding: 6vw 0;
    }

    .course-program__accordion {
        gap: 3.2vw;
    }

    .course-program__block-summary {
        gap: 3.2vw;
    }

    .course-program__block-number {
        font-size: 3.2vw;
        padding: 1.33vw 3.2vw;
    }

    .course-program__topics,
    .course-program__modules {
        gap: 2.13vw;
    }

    .course-program__topics {
        margin: 4vw 0 0;
        padding-top: 4vw;
    }

    .course-program__topics li,
    .course-program__modules li {
        padding-left: 5.33vw;
    }

    .course-program__topics li::before,
    .course-program__modules li::before {
        top: 2.4vw;
        width: 1.6vw;
        height: 1.6vw;
    }
}