/* The courses' public pages (courses/index.html, courses/<id>/), made by
   tools/build-course-pages.mjs. On top of fba-landing.css: its colours, type,
   buttons, header and footer, light and dark. */

.cp-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.cp-hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); max-width: 16ch; }
.cp-hero .lede { margin-top: 1.1rem; max-width: 40rem; }

.cp-crumbs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.6rem;
    color: var(--muted);
    font-size: 0.9rem;
}
.cp-crumbs a { color: var(--accent); font-weight: 600; }
.cp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp-crumbs i { font-size: 0.8rem; }

.cp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
    margin-top: 1.6rem;
    color: var(--muted);
    font-size: 0.98rem;
}
.cp-facts li { display: flex; align-items: center; gap: 0.5rem; }
.cp-facts i { color: var(--accent); font-size: 1.2rem; }

.cp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.cp-actions--end { margin-top: 2.5rem; }

/* What you will learn */
.cp-learn h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 1.6rem; }
.cp-learn__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 0.9rem 2rem;
}
.cp-learn__list li { display: flex; gap: 0.7rem; font-size: 1.05rem; line-height: 1.5; }
.cp-learn__list i { flex: none; margin-top: 0.15rem; color: var(--accent); font-size: 1.3rem; }

/* The units */
.cp-units { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
.cp-unit details {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.cp-unit summary {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 1.2rem 1.4rem;
    cursor: pointer;
    list-style: none;
}
.cp-unit summary::-webkit-details-marker { display: none; }
.cp-unit__n {
    grid-column: 1;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.cp-unit summary h3 { grid-column: 1; font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.2; }
.cp-unit summary i {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--muted);
    font-size: 1.2rem;
    transition: transform 0.2s var(--ease);
}
.cp-unit details[open] summary i { transform: rotate(180deg); }

.cp-stops { display: grid; gap: 0.2rem; padding: 0 1.4rem 1.2rem; }
.cp-stop {
    display: flex;
    gap: 0.9rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--border);
}
.cp-stop > i { flex: none; margin-top: 0.2rem; color: var(--accent); font-size: 1.25rem; }
.cp-stop__kind {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cp-stop h4 { margin-top: 0.15rem; font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.cp-stop p:not(.cp-stop__kind) { margin-top: 0.25rem; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.cp-stop--checkpoint > i,
.cp-stop--review > i { color: var(--muted); }

.cp-final {
    display: flex;
    gap: 1rem;
    margin-top: 1.4rem;
    padding: 1.3rem 1.4rem;
    border-radius: var(--radius);
    background: var(--accent-tint);
    border: 1px solid var(--border);
}
.cp-final > i { flex: none; color: var(--accent); font-size: 1.6rem; }
.cp-final h3 { font-size: 1.25rem; line-height: 1.25; }
.cp-final p { margin-top: 0.35rem; color: var(--muted); }

/* All the courses (the cards themselves are in fba-landing.css: the home page
   shows them too) */
.cp-list { padding-top: 0; }
.cp-list__more { margin-top: 2rem; color: var(--muted); }
.cp-list__more a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }