/* =========================================================================
   /courses and /courses/{slug} — v2 course release (2026-10-01).

   Loaded after marketing.css + homepage-2026.css; both pages are wrapped in
   .hp26 .crs so they inherit the homepage's hero, cards, bands, proof strip
   and FAQ, and this file carries ONLY what the course pages add.

   Conforms to ai-memory/Standards and Policy/light-theme-spec-1.0.md:
     §3.1 every colour is a --color-* token; no scoped colour variables are
          introduced, so there is nothing to re-bind for light mode (§5.2).
     §3.2 surfaces use --color-surface-*, never pure white.
     §3.6 focus rings are the global standard; only links that lose the
          default outline (the stretched card link) get one restated.
   ========================================================================= */

/* The hidden attribute must win over the display values set below — the
   catalog filter (static/js/courses.js) toggles it on cards and groups. */
.crs [hidden] { display: none !important; }

/* -------------------------------------------------------------------------
   Hero additions
   ------------------------------------------------------------------------- */
.crs .crs-release__rows { margin: 0; display: flex; flex-direction: column; }
.crs .crs-release__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.crs .crs-release__row:last-child { border-bottom: 0; }
.crs .crs-release__row dt { color: var(--color-text-secondary); }
.crs .crs-release__row dd {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-accent-cyan);
    text-align: right;
}
.crs .crs-release__row--sub dd {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.crs .crs-hero__chips { margin-bottom: var(--space-md); }
.crs .crs-hero__title { overflow-wrap: anywhere; }
@media (min-width: 768px) {
    /* Course titles run long ("bRRAIn Certified Implementation Specialist");
       one step down from the homepage's display size keeps them to two lines. */
    .crs-course .crs-hero__title { font-size: var(--text-4xl); }
}

.crs .crs-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-md);
    margin: 0 0 var(--space-sm);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    max-width: 560px;
}
.crs .crs-facts dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-text-tertiary);
}
.crs .crs-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--color-text-primary); }

.crs .crs-soon {
    display: inline-flex;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    margin: 8px 0;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-surface-2);
}

.crs .crs-glance__head { display: flex; align-items: center; gap: var(--space-md); }
.crs .crs-glance__head .cmp__sub { margin-bottom: 0; }
.crs .crs-emblem { width: 44px; height: 44px; flex-shrink: 0; color: var(--color-accent-cyan); }
.crs .crs-glance .crs-release__rows { margin-top: var(--space-md); }

@media (max-width: 900px) {
    .crs .hero__container { flex-direction: column; align-items: stretch; }
    .crs .cmp { max-width: none; }
}

/* -------------------------------------------------------------------------
   Chips
   ------------------------------------------------------------------------- */
.crs .crs-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crs .crs-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.6;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
}
.crs .crs-chip--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.crs .crs-chip--v2 {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-accent-cyan);
    background: var(--color-accent-cyan-muted);
    border-color: var(--color-accent-cyan);
}

/* -------------------------------------------------------------------------
   "What v2 changes" — four feature cards
   ------------------------------------------------------------------------- */
.crs .crs-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 1024px) { .crs .crs-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .crs .crs-grid4 { grid-template-columns: 1fr; } }
.crs .crs-feature { border-top: 2px solid var(--color-accent-cyan); }
.crs .crs-feature__n {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-accent-cyan);
    margin-bottom: var(--space-sm);
}
.crs .crs-feature__t {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 var(--space-sm);
}
.crs .crs-feature p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }

.crs .crs-included { list-style: none; margin: 0; padding: 0; }

/* -------------------------------------------------------------------------
   Catalog — path jump-links, filter, groups, cards
   ------------------------------------------------------------------------- */
.crs .crs-jump {
    position: sticky;
    top: 68px;
    z-index: 5;
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.crs .crs-jump ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.crs .crs-jump a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.crs .crs-jump a:hover { color: var(--color-text-primary); border-color: var(--color-accent-cyan); background: var(--color-surface-2); }
.crs .crs-jump__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); }

.crs .crs-filter {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-md);
    align-items: start;
    margin: 0 0 var(--space-lg);
}
.crs .crs-filter__field label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}
.crs .crs-filter input,
.crs .crs-filter select {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    background: var(--color-surface-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.crs .crs-filter input:focus-visible,
.crs .crs-filter select:focus-visible { outline: 2px solid var(--color-accent-cyan); outline-offset: 2px; }
.crs .crs-filter__status {
    grid-column: 1 / -1;
    margin: 0;
    min-height: 1em;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}
.crs .crs-filter__status:empty { display: none; }
@media (max-width: 560px) { .crs .crs-filter { grid-template-columns: 1fr; } }

.crs .crs-group { padding: var(--space-lg) 0; scroll-margin-top: 130px; }
.crs .crs-group + .crs-group { border-top: 1px solid var(--color-border); }
.crs .crs-group__head { max-width: 72ch; margin-bottom: var(--space-md); }
.crs .crs-group__kicker {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-cyan);
}
.crs .crs-group__t {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin: var(--space-xs) 0;
}
.crs .crs-group__blurb { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }

.crs .crs-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}
@media (max-width: 400px) { .crs .crs-cards { grid-template-columns: 1fr; } }
.crs .crs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 20px;
}
.crs .crs-card:hover,
.crs .crs-card:focus-within { border-color: var(--color-accent-cyan); }
.crs .crs-card__t {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}
.crs .crs-card__link { color: var(--color-text-primary); text-decoration: none; }
/* Stretched link: the whole card is the hit area, the heading is the name. */
.crs .crs-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.crs .crs-card__link:focus-visible { outline: none; }
.crs .crs-card__link:focus-visible::after { outline: 2px solid var(--color-accent-cyan); outline-offset: 2px; }
.crs .crs-card__tag { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.55; }
.crs .crs-card__foot {
    margin-top: auto;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.crs .crs-card__price {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--color-text-primary);
}
.crs .crs-card__price--soon { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }
.crs .crs-card__go { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-cyan); }

.crs .crs-empty {
    padding: var(--space-lg);
    text-align: center;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}

/* -------------------------------------------------------------------------
   How a course works
   ------------------------------------------------------------------------- */
.crs .crs-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-sm);
}
@media (max-width: 1024px) { .crs .crs-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .crs .crs-steps { grid-template-columns: 1fr; } }
.crs .crs-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-1);
}
.crs .crs-step--key { border-color: var(--color-accent-cyan); background: var(--color-accent-cyan-muted); }
.crs .crs-step__k {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-accent-cyan);
    font-weight: 500;
}
.crs .crs-step__v { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* -------------------------------------------------------------------------
   Course page — lists, panels, syllabus, labs, capstone, refs
   ------------------------------------------------------------------------- */
.crs .crs-split { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-lg); align-items: start; }
.crs .crs-split > :only-child { grid-column: 1 / -1; }
.crs .crs-split--even { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 900px) { .crs .crs-split, .crs .crs-split--even { grid-template-columns: 1fr; } }

.crs .crs-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.crs .crs-checks--2 { grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-lg); }
@media (max-width: 768px) { .crs .crs-checks--2 { grid-template-columns: 1fr; } }
.crs .crs-checks li {
    position: relative;
    padding: 0 0 0 28px;
    line-height: 1.6;
}
.crs .crs-checks li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.45em;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--color-accent-cyan);
    border-bottom: 2px solid var(--color-accent-cyan);
    transform: rotate(-45deg);
}

.crs .crs-panel__t {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    margin: 0 0 var(--space-md);
}
.crs .crs-panel__t--sub { font-size: var(--text-base); margin-top: var(--space-lg); color: var(--color-text-secondary); }
.crs .crs-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--text-sm); }
.crs .crs-list li::marker { color: var(--color-accent-cyan); }
.crs .crs-list--muted { color: var(--color-text-secondary); }
.crs .crs-list a, .crs .faq__a a, .crs .section__footnote a { color: var(--color-accent-cyan); }

.crs .crs-lead { color: var(--color-text-secondary); max-width: 72ch; margin: 0 0 var(--space-md); }
.crs .crs-sub {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 0 0 var(--space-sm);
}

/* Syllabus */
.crs .crs-modules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.crs .crs-modules > li { border-bottom: 1px solid var(--color-border); }
.crs .crs-module__sum {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm);
    cursor: pointer;
    list-style: none;
}
.crs .crs-module__sum::-webkit-details-marker { display: none; }
.crs .crs-module__sum::after {
    content: "+";
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--color-accent-cyan);
}
.crs .crs-module[open] .crs-module__sum::after { content: "\2212"; }
.crs .crs-module__sum:hover { background: var(--color-surface-1); }
.crs .crs-module__sum:focus-visible { outline: 2px solid var(--color-accent-cyan); outline-offset: 2px; }
.crs .crs-module__n {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-accent-cyan);
    flex-shrink: 0;
    width: 2ch;
}
.crs .crs-module__main { display: flex; flex-direction: column; min-width: 0; }
.crs .crs-module__t { font-weight: 600; font-size: var(--text-base); color: var(--color-text-primary); }
.crs .crs-module__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.crs .crs-module__body { padding: 0 var(--space-sm) var(--space-md) calc(2ch + var(--space-md) + var(--space-sm)); }
.crs .crs-module__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-sm); max-width: 72ch; }
.crs .crs-lessons { list-style: none; margin: 0; padding: 0; }
.crs .crs-lesson {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: 8px 0;
    border-top: 1px dashed var(--color-border);
    font-size: var(--text-sm);
}
.crs .crs-lesson__t { min-width: 0; }
.crs .crs-lesson__meta {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}
.crs .crs-lesson--lab .crs-lesson__meta { color: var(--color-accent-cyan); }
@media (max-width: 560px) {
    .crs .crs-module__body { padding-left: var(--space-sm); }
    .crs .crs-lesson { flex-direction: column; gap: 2px; }
}

/* Labs + capstone */
.crs .crs-labs {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}
@media (max-width: 400px) { .crs .crs-labs { grid-template-columns: 1fr; } }
.crs .crs-lab { display: flex; flex-direction: column; gap: var(--space-sm); }
.crs .crs-lab__k {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-accent-cyan);
}
.crs .crs-lab__t { margin: 0; font-weight: 600; line-height: 1.45; }
.crs .crs-lab__pass {
    margin: auto 0 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.crs .crs-lab__pass span { font-weight: 600; color: var(--color-text-primary); }

.crs .crs-capstone {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-lg);
    border-left: 2px solid var(--color-accent-cyan);
}
@media (max-width: 900px) { .crs .crs-capstone { grid-template-columns: 1fr; } }
.crs .crs-capstone__t {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.25;
    margin: var(--space-xs) 0 var(--space-sm);
}
.crs .crs-capstone__fmt { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-sm); }
.crs .crs-capstone__cut { margin: 0; font-size: var(--text-sm); }
.crs .crs-capstone__cut strong { font-family: var(--font-mono); color: var(--color-accent-cyan); }
.crs .crs-capstone__dh {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 0 0 var(--space-sm);
}
.crs .crs-dims { list-style: none; margin: 0; padding: 0; }
.crs .crs-dims li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.crs .crs-dims li:last-child { border-bottom: 0; }
.crs .crs-dims__w { font-family: var(--font-mono); color: var(--color-text-secondary); }

/* Exam stats */
.crs .crs-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin: 0 0 var(--space-md);
}
@media (max-width: 400px) { .crs .crs-stats { grid-template-columns: repeat(2, 1fr); } }
.crs .crs-stats dt { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.crs .crs-stats dd {
    margin: 2px 0 0;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Course references (prerequisites, stacks-with, related) */
.crs .crs-refs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.crs .crs-refs--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .crs .crs-refs--3 { grid-template-columns: 1fr; } }
.crs .crs-ref { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-md); }
.crs .crs-ref:hover, .crs .crs-ref:focus-within { border-color: var(--color-accent-cyan); }
.crs .crs-ref__link { font-weight: 600; color: var(--color-text-primary); text-decoration: none; }
.crs .crs-ref__link::after { content: ""; position: absolute; inset: 0; }
.crs .crs-ref__link:focus-visible { outline: none; }
.crs .crs-ref__link:focus-visible::after { outline: 2px solid var(--color-accent-cyan); outline-offset: 2px; }
.crs .crs-ref__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* Section header ids are jump targets from the hero and catalog. */
.crs section[id] { scroll-margin-top: 80px; }

@media (prefers-reduced-motion: reduce) {
    .crs .crs-jump a { transition: none; }
}