/* =============================================================================
   ALPHA EDUCATION - Course detail layer
   Shared by all three course detail templates in resources/views/cras/:
   program-details-new (courses + conferences), program-details-exam-prep and
   program-details-cme. One file on purpose: those templates differ by which
   elements they show, not by how a shown element looks. A rule that must apply
   to one variant only belongs in a small per-variant file loaded after this
   one, never in a fork of this file.
   Loaded AFTER assets/css/alpha-theme.css, so it inherits every token and only
   adds what the design system does not already carry: the sticky at-a-glance
   card, the curriculum ladder, the faculty card, the fee table and the FAQ
   accordion.

   Rules followed: no gradients, no new hex values, 3px shape lock, gold as the
   only accent, one dark block per page (the .a-cta band at the tail).
   Reference: DESIGN.md at the project root.
   ============================================================================= */

:root {
    /* Solid header height (.a-hdr__inner is 72px tall and sticks to the top). */
    --cd-header: 72px;
    --cd-jump: 54px;
}

/* -----------------------------------------------------------------------------
   1. HERO
   Light editorial split: name, promise and actions on the left, one photograph
   on the right, and the spec rail spanning the full width beneath both. The page
   keeps the theme lock, so the only dark block is the admissions band at the tail.

   Three decisions worth keeping:
   - The media column stretches to meet the text column. The hero figure carries
     no aspect-ratio on desktop for that reason, so a short programme never ends
     in a void of white beside the photograph. It gets a ratio back once the grid
     stacks and the figure stands on its own.
   - The spec rail spans the wrap, not the text column. Five facts inside a
     half-width column wrap and orphan the last one; across the full width each
     sits on a single line with an even divider. Its column count arrives from
     the template as --cd-meta-n because level and duration are not recorded on
     every programme.
   - The entrance is a load animation, never an IntersectionObserver class. This
     block is above the fold, so its resting state is the finished state and the
     animation is layered on only where motion is welcome. A headless render, a
     print, or a reduced-motion visitor gets the whole hero rather than a blank.
   -------------------------------------------------------------------------- */
.cd-hero {
    background: var(--a-white);
    border-bottom: 1px solid var(--a-line);
    padding-block: clamp(32px, 4vw, 56px) clamp(40px, 5vw, 72px);
}

.cd-crumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin: 0 0 var(--a-5);
    padding: 0; list-style: none;
    font-size: var(--a-fs-xs); color: var(--a-muted);
}
.cd-crumb li { display: inline-flex; align-items: center; gap: 6px; }
.cd-crumb li + li::before { content: '/'; color: var(--a-line); }
.cd-crumb a { color: var(--a-muted); text-decoration: none; transition: color var(--a-fast) ease; }
.cd-crumb a:hover { color: var(--a-gold-ink); }
.cd-crumb [aria-current] { color: var(--a-navy); font-weight: 600; }

.cd-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: stretch;
}

/* Children stay stretched and take their own max-width, so the tag row and the
   button row can wrap across the column instead of shrink wrapping. */
.cd-hero__body { display: flex; flex-direction: column; min-width: 0; }
.cd-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--a-4); }
/* The accrediting body is the buying signal, so its pill is allowed to run to a
   second line rather than be cut off part way through the name. */
.cd-hero__tags .a-pill { max-width: 100%; white-space: normal; text-align: left; }
.cd-hero__title { margin: 0; max-width: 26ch; }
.cd-hero__lead { max-width: 54ch; }
.cd-hero__btns { display: flex; flex-wrap: wrap; gap: var(--a-3); margin-top: var(--a-6); }
.cd-hero__assure { margin: var(--a-4) 0 0; font-size: var(--a-fs-xs); color: var(--a-muted); max-width: 48ch; }

/* Centred, so on a programme with a long overview the photograph sits balanced
   beside the text instead of being pinned to the top with a void beneath it. */
.cd-hero__media { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cd-figure {
    margin: 0;
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--a-surface-2);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius-lg);
    overflow: hidden;
}
.cd-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-figure--wide { aspect-ratio: 16 / 10; }

/* Hero figure fills the column height instead of holding a ratio, within
   bounds. The floor stops a short programme leaving a stub of an image; the
   ceiling stops a programme whose overview runs to several paragraphs from
   stretching the photograph into a tower. Course overviews are entered by hand
   and vary from one line to four paragraphs, so both ends need a limit. */
.cd-figure--hero {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: clamp(300px, 26vw, 400px);
    max-height: clamp(400px, 34vw, 520px);
}

.cd-figure__link {
    position: absolute; inset: 0;
    display: block; overflow: hidden;
    border-radius: inherit;
    cursor: zoom-in;
}
.cd-figure__link:focus-visible { outline: 2px solid var(--a-gold); outline-offset: 3px; }

/* Held 6% taller than the frame top and bottom so the scroll parallax can move
   the photograph without ever exposing an edge. */
.cd-figure__media { position: absolute; inset: -6% 0; display: block; }
.cd-figure__media img { width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--a-slow) var(--a-ease); }
.cd-figure__link:hover .cd-figure__media img,
.cd-figure__link:focus-visible .cd-figure__media img { transform: scale(1.035); }

/* Click to enlarge cue. Functional, not decorative: it is the only signal that
   the photograph opens. Shown on hover and on keyboard focus alike. */
.cd-figure__zoom {
    position: absolute; right: var(--a-4); bottom: var(--a-4);
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--a-radius-pill);
    background: rgba(13, 24, 38, 0.62);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: var(--a-white); font-size: 14px;
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--a-base) var(--a-ease), transform var(--a-base) var(--a-ease);
    pointer-events: none;
}
.cd-figure__link:hover .cd-figure__zoom,
.cd-figure__link:focus-visible .cd-figure__zoom { opacity: 1; transform: none; }

.cd-figure__empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: var(--a-5);
    font-size: var(--a-fs-xs); color: var(--a-muted); text-align: center;
}
.cd-provider {
    display: flex; align-items: center; gap: var(--a-3);
    margin-top: var(--a-3);
    padding: var(--a-3) var(--a-4);
    background: var(--a-white);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);
    flex: 0 0 auto;
}
.cd-provider img { height: 34px; width: auto; max-width: 108px; object-fit: contain; display: block; }
.cd-provider__text { font-size: var(--a-fs-xs); color: var(--a-muted); }
.cd-provider__text strong { display: block; color: var(--a-navy); font-weight: 600; }

/* Spec rail: hairline separated facts spanning the hero, not badges. Order is
   real: what it is, how long it runs, how it is taught, what it earns, when it
   starts.

   Set as a journal rule rather than a row of cards. Four boxes directly under
   the hero would compete with it, and the crest corner is the one decorative
   device this system allows, so the interaction is carried by the rule itself:
   the rail's hairline is cut into one segment per fact, and the segment under
   the pointer draws gold from the left while its label warms to the accent.
   That makes the row read as something you scan along instead of a table strip,
   and it costs a transform and a colour, nothing else. */
.cd-meta {
    display: grid;
    grid-template-columns: repeat(var(--cd-meta-n, 5), minmax(0, 1fr));
    margin: clamp(30px, 3.6vw, 46px) 0 0;
    padding: 0; list-style: none;
}
.cd-meta__item {
    position: relative;
    min-width: 0;
    padding: var(--a-5) clamp(14px, 1.6vw, 28px) var(--a-3);
    border-top: 1px solid var(--a-line);
    border-left: 1px solid var(--a-line-soft);
}
/* The gold lies over the hairline rather than beside it, so the rule changes
   colour in place and the row never shifts by a pixel. */
.cd-meta__item::after {
    content: '';
    position: absolute; top: -1px; left: 0; right: 0;
    height: 1px;
    background: var(--a-gold);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 320ms var(--a-ease);
}
.cd-meta__item:hover::after { transform: scaleX(1); }
.cd-meta__item:first-child { border-left: 0; padding-left: 0; }
.cd-meta__item:last-child { padding-right: 0; }
.cd-meta__key {
    display: block;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--a-ls-label);
    text-transform: uppercase; color: var(--a-muted);
    margin-bottom: 6px;
    transition: color 240ms ease;
}
/* 11px label, so the accent has to be the ink-weight gold to clear 4.5:1. */
.cd-meta__item:hover .cd-meta__key { color: var(--a-gold-ink); }
.cd-meta__val {
    display: block;
    font-size: 1.0625rem; font-weight: 600; color: var(--a-navy);
    line-height: 1.4; text-wrap: balance;
}

/* Reduced motion keeps the feedback and drops the travel: the segment is still
   gold under the pointer, it just arrives rather than draws. */
@media (prefers-reduced-motion: reduce) {
    .cd-meta__item::after { transition: none; }
    .cd-meta__key { transition: none; }
}

/* -- Hero entrance and parallax ----------------------------------------------
   Everything above renders finished on its own. These two blocks add only the
   motion, so nothing here is load bearing for visibility. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes cd-hero-rise { from { opacity: 0; transform: translateY(16px); } }
    @keyframes cd-hero-figure { from { opacity: 0; transform: scale(1.04) translateY(10px); } }

    .cd-hero__body > * { animation: cd-hero-rise 780ms var(--a-ease) both; }
    .cd-hero__body > :nth-child(1) { animation-delay: 40ms; }
    .cd-hero__body > :nth-child(2) { animation-delay: 110ms; }
    .cd-hero__body > :nth-child(3) { animation-delay: 180ms; }
    .cd-hero__body > :nth-child(4) { animation-delay: 250ms; }
    .cd-hero__body > :nth-child(5) { animation-delay: 320ms; }

    .cd-figure--hero { animation: cd-hero-figure 900ms var(--a-ease) both; animation-delay: 100ms; }
    .cd-hero__media .cd-provider { animation: cd-hero-rise 780ms var(--a-ease) both; animation-delay: 380ms; }

    /* The rail reads left to right, so it arrives that way. */
    .cd-meta__item { animation: cd-hero-rise 720ms var(--a-ease) both;
        animation-delay: calc(400ms + var(--cd-i, 0) * 70ms); }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes cd-hero-parallax {
            from { transform: translateY(-3.2%); }
            to   { transform: translateY(3.2%); }
        }
        .cd-figure--hero .cd-figure__media {
            animation: cd-hero-parallax linear both;
            animation-timeline: view();
            animation-range: entry 100% exit 100%;
        }
    }
}

/* -----------------------------------------------------------------------------
   2. IN-PAGE JUMP NAV
   Sticks directly under the solid site header. Never overlaps the at-a-glance
   card because the card offsets itself by this height.
   -------------------------------------------------------------------------- */
.cd-jump {
    position: sticky; top: var(--cd-header); z-index: 40;
    background: var(--a-white);
    border-bottom: 1px solid var(--a-line);
}
.cd-jump__inner {
    display: flex; align-items: center; gap: var(--a-5);
    height: var(--cd-jump);
    overflow-x: auto;
    scrollbar-width: none;
}
.cd-jump__inner::-webkit-scrollbar { display: none; }
.cd-jump__list {
    display: flex; align-items: center; gap: var(--a-2);
    margin: 0; padding: 0; list-style: none;
}
.cd-jump__link {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 12px;
    border-bottom: 2px solid transparent;
    font-size: var(--a-fs-xs); font-weight: 600; white-space: nowrap;
    color: var(--a-muted); text-decoration: none;
    transition: color var(--a-fast) ease, border-color var(--a-fast) ease;
}
.cd-jump__link:hover { color: var(--a-navy); }
.cd-jump__link:active { color: var(--a-gold-ink); }
.cd-jump__link.is-active { color: var(--a-navy); border-bottom-color: var(--a-gold); }
.cd-jump__cta { margin-left: auto; flex-shrink: 0; }
@media (max-width: 767px) { .cd-jump__cta { display: none; } }

/* Anchor targets clear both sticky bars. */
[id='overview'], [id='outcomes'], [id='curriculum'], [id='faculty'],
[id='format'], [id='accreditation'], [id='fees'], [id='stories'], [id='faq'] {
    scroll-margin-top: calc(var(--cd-header) + var(--cd-jump) + 16px);
}

/* -----------------------------------------------------------------------------
   3. SPLIT: content column plus sticky at-a-glance card
   -------------------------------------------------------------------------- */
.cd-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}
.cd-main { min-width: 0; }
.cd-main > * + * { margin-top: clamp(48px, 6vw, 80px); }
.cd-aside { min-width: 0; }

.cd-glance {
    position: sticky;
    top: calc(var(--cd-header) + var(--cd-jump) + 24px);
    /* On a short viewport the card scrolls inside itself rather than hiding its
       own apply button below the fold. */
    max-height: calc(100vh - var(--cd-header) - var(--cd-jump) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--a-white);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius-lg);
    box-shadow: var(--a-shadow-2);
    overflow: hidden;
}
.cd-glance__head { padding: var(--a-5) var(--a-5) var(--a-4); border-bottom: 1px solid var(--a-line-soft); }
.cd-glance__label {
    display: block;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--a-ls-label);
    text-transform: uppercase; color: var(--a-muted);
    margin-bottom: var(--a-3);
}
.cd-glance__fee { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--a-2); }
.cd-glance__amount { font-size: 1.75rem; font-weight: 700; color: var(--a-navy); line-height: 1.1; }
.cd-glance__amount--offer { color: var(--a-gold-ink); }
.cd-glance__was { font-size: var(--a-fs-xs); color: var(--a-muted); text-decoration: line-through; }
.cd-glance__alt { display: block; margin-top: 4px; font-size: var(--a-fs-xs); color: var(--a-muted); }
.cd-glance__bird { margin-top: var(--a-3); }

.cd-glance__rows { padding: var(--a-2) var(--a-5); margin: 0; }
.cd-glance__rows dt, .cd-glance__rows dd { margin: 0; }
.cd-glance__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-4);
    padding: 11px 0;
    border-bottom: 1px solid var(--a-line-soft);
    font-size: var(--a-fs-xs);
}
.cd-glance__row:last-child { border-bottom: none; }
.cd-glance__key { color: var(--a-muted); flex-shrink: 0; }
.cd-glance__val { color: var(--a-navy); font-weight: 600; text-align: right; }
/* A sentence, not a word: right aligning it against the key ragged-lefts two
   or three lines in a 356px card. Stack it under the key instead. */
.cd-glance__row--stack { display: block; }
.cd-glance__row--stack .cd-glance__val { text-align: left; margin-top: 4px; font-size: var(--a-fs-xs); line-height: 1.5; }

.cd-glance__foot { padding: var(--a-4) var(--a-5) var(--a-5); border-top: 1px solid var(--a-line-soft); }
.cd-glance__foot .a-btn { width: 100%; }
.cd-glance__foot .a-btn + .a-btn { margin-top: var(--a-2); }
.cd-glance__note { margin: var(--a-3) 0 0; font-size: 0.75rem; line-height: 1.55; color: var(--a-muted); }

@media (max-width: 1023px) {
    .cd-split { grid-template-columns: minmax(0, 1fr); }
    /* On small screens the card reads first, as the at-a-glance summary. */
    .cd-aside { order: -1; }
    .cd-glance { position: static; max-height: none; overflow: visible; box-shadow: var(--a-shadow-1); }
    .cd-main > * + * { margin-top: clamp(40px, 8vw, 64px); }
}

/* -----------------------------------------------------------------------------
   4. RICH TEXT FROM THE DATABASE
   Course fields are stored as HTML from the admin editor. This keeps that
   markup inside the type system without touching the stored content.
   -------------------------------------------------------------------------- */
.cd-rich { font-size: var(--a-fs-body); line-height: 1.72; color: var(--a-body); }
.cd-rich > *:first-child { margin-top: 0; }
.cd-rich > *:last-child { margin-bottom: 0; }
.cd-rich p { margin: 0 0 var(--a-4); max-width: 68ch; }
.cd-rich h1, .cd-rich h2, .cd-rich h3, .cd-rich h4 {
    font-family: var(--a-font-display);
    font-size: var(--a-fs-h3); font-weight: var(--a-w-display); color: var(--a-navy);
    margin: var(--a-6) 0 var(--a-3);
}
.cd-rich ul, .cd-rich ol { margin: 0 0 var(--a-4); padding-left: 0; list-style: none; max-width: 68ch; }
.cd-rich ol { counter-reset: cd-ol; }
.cd-rich li { position: relative; padding-left: var(--a-5); margin-bottom: 10px; }
.cd-rich ul > li::before {
    content: ''; position: absolute; left: 0; top: 0.62em;
    width: 10px; height: 1px; background: var(--a-gold);
}
.cd-rich ol > li { counter-increment: cd-ol; }
.cd-rich ol > li::before {
    content: counter(cd-ol) '.';
    position: absolute; left: 0; top: 0;
    font-size: var(--a-fs-xs); font-weight: 700; color: var(--a-gold-ink);
}
.cd-rich strong, .cd-rich b { color: var(--a-navy); font-weight: 600; }
.cd-rich a { color: var(--a-gold-ink); text-decoration: underline; text-underline-offset: 2px; }
.cd-rich a:hover { color: var(--a-navy); }
.cd-rich img { max-width: 100%; height: auto; border-radius: var(--a-radius); }
.cd-rich table { width: 100%; border-collapse: collapse; font-size: var(--a-fs-sm); }
.cd-rich table th, .cd-rich table td { border: 1px solid var(--a-line); padding: 10px 12px; text-align: left; }
.cd-rich--tight p { margin-bottom: var(--a-3); }
.cd-rich + .cd-rich { margin-top: var(--a-5); }

/* -----------------------------------------------------------------------------
   5. OUTCOMES
   Plain verbs, one per row, gold tick rule from the crest family.
   -------------------------------------------------------------------------- */
.cd-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-4) var(--a-6); margin-top: var(--a-6); }
.cd-outcome {
    position: relative;
    padding: var(--a-4) 0 var(--a-4) var(--a-5);
    border-top: 1px solid var(--a-line-soft);
}
.cd-outcome::before {
    content: ''; position: absolute; left: 0; top: var(--a-4); bottom: var(--a-4);
    width: 1px; background: var(--a-gold);
}
.cd-outcome__title { display: block; font-size: var(--a-fs-h4); font-weight: 600; color: var(--a-navy); margin-bottom: 4px; }
.cd-outcome__text { margin: 0; font-size: var(--a-fs-sm); line-height: 1.65; color: var(--a-body); }
@media (max-width: 767px) { .cd-outcomes { grid-template-columns: minmax(0, 1fr); } }

/* -----------------------------------------------------------------------------
   6. ACCORDION (curriculum ladder and FAQ share one implementation)
   Panels are opened by script setting max-height to the real content height, so
   long modules are never clipped.
   -------------------------------------------------------------------------- */
.cd-acc { margin-top: var(--a-6); border-top: 1px solid var(--a-line); }
.cd-acc__item { border-bottom: 1px solid var(--a-line); }
/* The row heading exists for the outline; the button carries the styling. */
.cd-acc__h { margin: 0; }
.cd-acc__head {
    display: flex; align-items: flex-start; gap: var(--a-4);
    width: 100%; min-height: 64px;
    padding: var(--a-4) 0;
    background: none; border: none; border-radius: 0;
    text-align: left; cursor: pointer;
    font-family: var(--a-font-ui);
    transition: color var(--a-fast) ease;
}
.cd-acc__head:hover .cd-acc__title { color: var(--a-gold-ink); }
.cd-acc__head:focus-visible { outline: 2px solid var(--a-gold); outline-offset: 2px; }
.cd-acc__head:active .cd-acc__title { color: var(--a-navy); }
.cd-acc__head[disabled] { opacity: 0.5; cursor: not-allowed; }
.cd-acc__num {
    flex-shrink: 0;
    font-family: var(--a-font-ui);
    font-size: var(--a-fs-xs); font-weight: 700; letter-spacing: 0.06em;
    color: var(--a-gold-ink);
    padding-top: 3px;
    min-width: 26px;
    font-variant-numeric: tabular-nums;
}
.cd-acc__title {
    flex: 1;
    font-family: var(--a-font-display);
    font-size: 1.0625rem; font-weight: var(--a-w-display); line-height: 1.4;
    color: var(--a-navy);
    transition: color var(--a-fast) ease;
}
.cd-acc__sign {
    position: relative; flex-shrink: 0;
    width: 26px; height: 26px; margin-top: 2px;
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);
    transition: border-color var(--a-fast) ease, background var(--a-fast) ease;
}
.cd-acc__sign::before, .cd-acc__sign::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    background: var(--a-navy);
    transition: opacity var(--a-fast) ease, background var(--a-fast) ease;
}
.cd-acc__sign::before { width: 11px; height: 1px; transform: translate(-50%, -50%); }
.cd-acc__sign::after  { width: 1px; height: 11px; transform: translate(-50%, -50%); }
.cd-acc__head:hover .cd-acc__sign { border-color: var(--a-gold-line); }
.cd-acc__item.is-open .cd-acc__sign { border-color: var(--a-gold-line); background: var(--a-gold-tint); }
.cd-acc__item.is-open .cd-acc__sign::after { opacity: 0; }
.cd-acc__item.is-open .cd-acc__sign::before { background: var(--a-gold); }
.cd-acc__panel { max-height: 0; overflow: hidden; transition: max-height 460ms var(--a-ease); }
.cd-acc__body { padding: 0 var(--a-6) var(--a-5) calc(26px + var(--a-4)); }
.cd-acc__body p { margin: 0 0 var(--a-3); font-size: var(--a-fs-sm); line-height: 1.7; color: var(--a-body); max-width: 68ch; }
.cd-acc__body p:last-child { margin-bottom: 0; }
@media (max-width: 575px) {
    .cd-acc__body { padding-right: 0; padding-left: calc(26px + var(--a-3)); }
    .cd-acc__head { gap: var(--a-3); }
}

.cd-ladder__note { margin: var(--a-4) 0 0; font-size: var(--a-fs-xs); color: var(--a-muted); }
.cd-ladder__note a { color: var(--a-gold-ink); text-decoration: underline; text-underline-offset: 2px; }
.cd-ladder__note a:hover { color: var(--a-navy); }

/* -----------------------------------------------------------------------------
   7. FACULTY
   -------------------------------------------------------------------------- */
.cd-fac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--a-5); }
.cd-fac {
    display: flex; flex-direction: column; gap: var(--a-3);
    padding: var(--a-5);
    background: var(--a-white);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius-lg);
    transition: border-color var(--a-base) ease, box-shadow var(--a-base) ease, transform var(--a-base) var(--a-ease);
}
.cd-fac:hover { border-color: var(--a-gold-line); box-shadow: var(--a-shadow-2); transform: translateY(-3px); }
.cd-fac__top { display: flex; align-items: center; gap: var(--a-4); }
.cd-fac__avatar {
    width: 58px; height: 58px; flex-shrink: 0;
    border-radius: 50%; overflow: hidden;
    background: var(--a-gold-tint);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.0625rem; font-weight: 700; color: var(--a-gold-ink);
}
.cd-fac__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-fac__name { font-family: var(--a-font-display); font-size: 1.0625rem; font-weight: var(--a-w-display); color: var(--a-navy); line-height: 1.3; }
.cd-fac__role { display: block; margin-top: 3px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-muted); }
.cd-fac__bio { margin: 0; font-size: var(--a-fs-sm); line-height: 1.65; color: var(--a-body); }

/* -----------------------------------------------------------------------------
   8. SPEC TABLE (format and delivery, eligibility)
   -------------------------------------------------------------------------- */
/* Specification rows. A table of facts, set like one in a journal: a hairline
   between rows, room around them, and the value carrying the weight while the
   key stays a quiet uppercase index. No boxes. */
.cd-specs { margin: var(--a-7) 0 0; border-top: 1px solid var(--a-line); }
.cd-spec {
    display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--a-5);
    padding: var(--a-5) 0;
    border-bottom: 1px solid var(--a-line-soft);
}
.cd-spec__key {
    font-family: var(--a-font-ui);
    font-size: var(--a-fs-label); font-weight: var(--a-w-strong);
    letter-spacing: var(--a-ls-label); text-transform: uppercase;
    color: var(--a-muted);
    padding-top: 3px;
}
.cd-spec__val {
    font-size: var(--a-fs-body); font-weight: var(--a-w-body); line-height: 1.62;
    letter-spacing: -0.005em;
    color: var(--a-navy);
    max-width: 66ch;
}
.cd-spec__val p:last-child { margin-bottom: 0; }
@media (max-width: 575px) { .cd-spec { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* -----------------------------------------------------------------------------
   9. ACCREDITATION
   -------------------------------------------------------------------------- */
.cd-accred { display: flex; flex-wrap: wrap; gap: var(--a-4); margin-bottom: var(--a-6); }
.cd-accred .a-authority { background: var(--a-white); }
.cd-credit {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--a-5);
    padding-top: var(--a-6); border-top: 1px solid var(--a-gold-line);
}
.cd-credit__num { display: block; font-family: var(--a-font-display); font-size: 2rem; font-weight: var(--a-w-display); color: var(--a-navy); line-height: 1.1; }
.cd-credit__label { display: block; margin-top: 6px; font-size: var(--a-fs-sm); font-weight: 600; color: var(--a-navy); }
.cd-credit__text { margin: 4px 0 0; font-size: var(--a-fs-xs); line-height: 1.6; color: var(--a-body); }

/* -----------------------------------------------------------------------------
   9b. CME CREDIT STATEMENT
   Only rendered on cme_programs pages, where it leads the reading column: a
   licensed professional is buying the credit, so the credit is the first thing
   the page states. Reads as the accreditation statement printed with a journal
   article, which is the language the rest of the system already speaks.

   No new colour enters the system. Cream surface plus gold hairline is the
   same pair .a-pill--cme and .cd-fee--lead already use, and the shape lock
   (--a-radius-lg) is unchanged.
   -------------------------------------------------------------------------- */
.cd-cme {
    padding: var(--a-6);
    background: var(--a-gold-tint);
    border: 1px solid var(--a-gold-line);
    border-radius: var(--a-radius-lg);
}
.cd-cme__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--a-3); }
.cd-cme__num {
    font-family: var(--a-font-display);
    font-size: clamp(2.25rem, 4vw, 3rem); font-weight: var(--a-w-display); line-height: 1;
    color: var(--a-navy);
}
.cd-cme__unit { font-size: var(--a-fs-h4); font-weight: 600; color: var(--a-navy); }
.cd-cme__text { margin: var(--a-4) 0 0; font-size: var(--a-fs-sm); line-height: 1.7; color: var(--a-body); max-width: 62ch; }
.cd-cme__rows { margin: var(--a-5) 0 0; }
.cd-cme__rows dt, .cd-cme__rows dd { margin: 0; }
.cd-cme__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-4);
    padding: 11px 0;
    border-top: 1px solid var(--a-gold-line);
    font-size: var(--a-fs-xs);
}
.cd-cme__key { color: var(--a-muted); flex-shrink: 0; }
.cd-cme__val { color: var(--a-navy); font-weight: 600; text-align: right; }
.cd-cme__marks { display: flex; flex-wrap: wrap; gap: var(--a-4); margin-top: var(--a-5); }

/* The completion pathway reuses .a-steps from the design system, which is
   reserved for a genuine ordered sequence. This is one: enrol, attend, sit the
   assessment, collect the certificate. */
.cd-cme-steps { margin-top: var(--a-6); }

@media (max-width: 575px) {
    .cd-cme { padding: var(--a-5); }
    .cd-cme__row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .cd-cme__val { text-align: left; }
}

/* -----------------------------------------------------------------------------
   10. FEES AND ELIGIBILITY
   -------------------------------------------------------------------------- */
/* The reading column and the at-a-glance card both run out well before the
   band does, so the full section rhythm underneath reads as a hole rather than
   a pause. Half of it is enough here. */
.cd-section--flush { padding-bottom: clamp(40px, 4.5vw, 64px); }
.cd-section--flush-top { padding-top: clamp(48px, 5vw, 72px); }

/* A band titled by stored copy. When that copy opens with a lone bold line,
   that line is the band's title and is sized like every other band title. The
   editor writes an inline font-size on the span, hence the override. */
.cd-rich-title > :first-child { margin-top: 0; margin-bottom: var(--a-4); }
.cd-rich-title > h2:first-child, .cd-rich-title > h2:first-child *,
.cd-rich-title > h3:first-child, .cd-rich-title > h3:first-child *,
.cd-rich-title > h4:first-child, .cd-rich-title > h4:first-child *,
.cd-rich-title > p:first-child > strong:only-child,
.cd-rich-title > p:first-child > strong:only-child * {
    font-family: var(--a-font-display);
    font-size: clamp(1.625rem, 2.6vw, 2.25rem) !important;
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--a-navy);
}

.cd-fees { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--a-5); align-items: start; }
/* Cards that end where their content ends. `height: 100%` below resolves
   against the tallest card in the row, which leaves a short card holding a
   pocket of white with its button stranded at the bottom. */
.cd-fees--auto .cd-fee { height: auto; }
.cd-fees--auto .cd-fee__foot { margin-top: 0; }
.cd-fee {
    display: flex; flex-direction: column; height: 100%;
    padding: var(--a-6);
    background: var(--a-white);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius-lg);
}
.cd-fee--lead { border-color: var(--a-gold-line); box-shadow: var(--a-shadow-2); }
.cd-fee__label {
    display: block;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--a-ls-label);
    text-transform: uppercase; color: var(--a-gold-ink);
    margin-bottom: var(--a-4);
}
.cd-fee__amount { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; color: var(--a-navy); line-height: 1.05; display: block; }
.cd-fee__amount--offer { color: var(--a-gold-ink); }
.cd-fee__sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-2); }
.cd-fee__was { font-size: var(--a-fs-xs); color: var(--a-muted); text-decoration: line-through; }
.cd-fee__alt { font-size: var(--a-fs-xs); color: var(--a-muted); }
.cd-fee__text { margin: var(--a-4) 0 0; font-size: var(--a-fs-sm); line-height: 1.65; color: var(--a-body); }
.cd-fee__label + .cd-fee__text { margin-top: 0; }
.cd-fee__list { margin: var(--a-5) 0 0; padding: 0; list-style: none; }
.cd-fee__list li {
    position: relative;
    padding: 9px 0 9px var(--a-5);
    border-bottom: 1px solid var(--a-line-soft);
    font-size: var(--a-fs-sm); line-height: 1.55; color: var(--a-body);
}
.cd-fee__list li::before {
    content: ''; position: absolute; left: 0; top: 1.05em;
    width: 10px; height: 1px; background: var(--a-gold);
}
/* Benefit sections under the price: what the one fee buys, a heading and the
   line that explains it. Same hairline rhythm as .cd-fee__list. */
.cd-fee__inc { margin: var(--a-5) 0 0; }
.cd-fee__inc > div { padding: 11px 0; border-bottom: 1px solid var(--a-line-soft); }
.cd-fee__inc dt { font-size: var(--a-fs-sm); font-weight: 600; color: var(--a-navy); line-height: 1.45; }
.cd-fee__inc dd { margin: 3px 0 0; font-size: var(--a-fs-xs); line-height: 1.6; color: var(--a-muted); }
.cd-fee__foot { margin-top: auto; padding-top: var(--a-5); }
.cd-fee__foot .a-btn { width: 100%; }
.cd-fee__links { margin: 0; padding: 0; list-style: none; }
.cd-fee__links li { border-bottom: 1px solid var(--a-line-soft); }
.cd-fee__links a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--a-3);
    min-height: 46px; padding: 11px 0;
    font-size: var(--a-fs-sm); font-weight: 600; color: var(--a-navy); text-decoration: none;
    transition: color var(--a-fast) ease, padding-left var(--a-fast) ease;
}
.cd-fee__links a:hover { color: var(--a-gold-ink); padding-left: 6px; }
.cd-fee__links i { font-size: 11px; color: var(--a-gold); }

/* -----------------------------------------------------------------------------
   11. GRADUATE STORIES
   -------------------------------------------------------------------------- */
.cd-stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--a-5); }
.cd-stories .a-testi__card { height: 100%; display: flex; flex-direction: column; }
.cd-stories .a-testi__quote { flex: 1; }
.cd-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--a-5); margin-top: var(--a-5); }
.cd-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--a-navy-deep);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius-lg);
    overflow: hidden;
}
.cd-video iframe, .cd-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -----------------------------------------------------------------------------
   12. RELATED COURSES
   -------------------------------------------------------------------------- */
.cd-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--a-5); }

/* -----------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.cd-faq { max-width: 820px; }
.cd-faq .cd-acc { margin-top: var(--a-5); }
.cd-faq .cd-acc__title { font-size: 1.0625rem; }
.cd-faq .cd-acc__num { display: none; }
.cd-faq .cd-acc__body { padding-left: 0; padding-right: var(--a-7); }
@media (max-width: 575px) { .cd-faq .cd-acc__body { padding-right: 0; } }

/* -----------------------------------------------------------------------------
   14. RESPONSIVE AND MOTION
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .cd-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .cd-hero__media { order: -1; }
    .cd-figure { aspect-ratio: 16 / 9; }
    /* Stacked, the figure is no longer matching a text column, so it takes a
       ratio back rather than stretching to whatever the row happens to be. */
    .cd-figure--hero { aspect-ratio: 16 / 9; flex: 0 0 auto; min-height: 0; }
    .cd-hero__title { max-width: none; }
}

/* Spec rail column counts. The three ranges below do not overlap on purpose:
   each one fully owns its divider pattern, so a rule from a wider breakpoint
   can never leave a stray hairline on the first cell of a wrapped row. */
@media (min-width: 576px) and (max-width: 1199px) {
    .cd-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cd-meta__item:nth-child(3n+1) { border-left: 0; padding-left: 0; }
    .cd-meta__item:nth-child(3n) { padding-right: 0; }
    .cd-meta__item:nth-child(n+4) { margin-top: var(--a-5); }
}
@media (min-width: 381px) and (max-width: 575px) {
    .cd-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cd-meta__item:nth-child(2n+1) { border-left: 0; padding-left: 0; }
    .cd-meta__item:nth-child(2n) { padding-right: 0; }
    .cd-meta__item:nth-child(n+3) { margin-top: var(--a-5); }
}
@media (max-width: 380px) {
    .cd-meta { grid-template-columns: minmax(0, 1fr); }
    .cd-meta__item { border-left: 0; padding-left: 0; padding-right: 0; }
    .cd-meta__item:nth-child(n+2) { margin-top: var(--a-5); }
}
@media (max-width: 575px) {
    .cd-hero__btns .a-btn { width: 100%; }
    /* Touch has no hover, so the enlarge cue stays put instead of waiting. */
    .cd-figure__zoom { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cd-acc__panel { transition: none; }
    .cd-fac, .cd-fee__links a { transition: none; }
    .cd-fac:hover { transform: none; }
    .cd-figure__media img { transition: none; }
    .cd-figure__link:hover .cd-figure__media img { transform: none; }
}