/* ────────────────────────────────────────────────────────────────
   The course card (2026-10-01).

   One sheet for the one partial, front/course/_course_card.html,
   which every surface renders: the course finder, the topic,
   category and new-courses listings, the course page's related
   courses, the venue, format and partner pages. Until today those
   were four hand-written cards and three sheets: this file, 68
   overriding rules in course-search-widgets.css and 8 in
   course-finder.css, which disagreed about what a card said and at
   what size. Audit at claude.ai/artifact/7NEXUKntZiz5FDYLJKx9R7.

   Rules the card keeps:
   - nothing under 11px, nothing muted under 4.5:1 on white
     (--rc-muted is #4f6472, 5.9:1);
   - one hover: the border and the title turn teal and the title
     underlines. Nothing lifts, zooms or slides, so
     prefers-reduced-motion has nothing to undo;
   - the banner is the course's own 700x240 illustration with the
     title set in it, so it is shown at that ratio everywhere,
     including phones, where a square crop cut the title in half;
   - the fee is in one currency: the visitor's (html.tc-kes), by the
     site-wide .tc-ccy-* switch in the base bundle.
   ──────────────────────────────────────────────────────────────── */

:root {
    --rc-radius: 14px;
    --rc-border: #e3e9ef;
    --rc-rule: #edf1f5;
    --rc-surface: #fff;
    --rc-footer: #f8fafb;
    --rc-image: #eef2f6;
    --rc-primary: #0b7269;
    --rc-secondary: #0a4772;
    --rc-ink: #0f2f47;
    --rc-text: #334155;
    --rc-muted: #4f6472;
    --rc-dot: #b6cfd0;
}

.rc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.rc-card:hover { border-color: var(--rc-primary); }

/* The card is one anchor, so the focus ring belongs to the card. */
.rc-card__link:focus-visible { outline: none; }
.rc-card:has(.rc-card__link:focus-visible) {
    outline: 2px solid var(--rc-primary);
    outline-offset: 3px;
    border-color: var(--rc-primary);
}

.rc-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
.rc-card__link:hover,
.rc-card__link:focus { color: inherit; text-decoration: none; }

/* The ribbon ("Newly added", "In demand") sits on the banner's corner. */
.rc-card .course-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

/* ── Banner ───────────────────────────────────────────────────── */
.rc-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 700 / 240;
    background: var(--rc-image);
    border-bottom: 1px solid var(--rc-rule);
}
.rc-card__image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* A course with no banner keeps the slot, as a quiet brand panel, so
   its title lines up with the row's. */
.rc-card__image--empty {
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.14) 0 18%, transparent 19%),
        linear-gradient(135deg, var(--rc-primary) 0%, var(--rc-secondary) 100%);
}

/* ── Body: subject + level, title, when, topics ───────────────── */
.rc-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.95rem 1.1rem 1rem;
    min-width: 0;
}

/* Subject left, level right: the two facts that place the course
   before its name is read. The level is an 11px tracked label, the
   type floor. The subject is NOT: category names run to "Strategic
   Procurement, Logistics, and Supply Chain Excellence", which an
   uppercase one-liner cut to "STRATEGIC PROC…" in a 259px card, so it
   is set as text, 12px/600, two lines at most. */
.rc-card__kicker {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.25rem 0.75rem;
    margin: 0;
    line-height: 1.3;
}
.rc-card__subject {
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rc-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rc-card__level {
    flex: 0 0 auto;
    margin-left: auto;
    padding-top: 0.1em;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rc-muted);
}

/* Scoped to beat the bundle's `article h4:not(:first-child)` prose
   margin, which the kicker above makes this title eligible for. Two
   lines are reserved so a one-line title does not lift its card's
   facts above its neighbours'. */
.rc-card .rc-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.006em;
    color: var(--rc-ink);
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.rc-card:hover .rc-card__title {
    color: var(--rc-primary);
    text-decoration-color: currentColor;
}
.rc-card .rc-card__title mark {
    background: rgba(246, 163, 14, 0.28);
    color: inherit;
    padding: 0 0.06em;
    border-radius: 3px;
}

/* When and where: 13px, the date in 600 ink, the place in 500 grey. */
.rc-card__when {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--rc-ink);
    font-weight: 600;
}
.rc-card__place {
    color: var(--rc-muted);
    font-weight: 500;
}
.rc-card__when--none {
    color: var(--rc-muted);
    font-weight: 500;
}

/* Topics: a hairline, an 11px label (with the module count folded
   in), then two titles at two lines each. Measured on production the
   median module title runs 37 characters and the 90th percentile 49,
   against about 34 that fit on a line, so one line each cut most of
   them; two lines clears the 90th percentile whole. */
.rc-card .rc-card__skills-title {
    margin: 0.2rem 0 0;
    padding-top: 0.65rem;
    border-top: 1px solid var(--rc-rule);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--rc-muted);
}
.rc-card__skills-title span {
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: none;
}
.rc-card__skills {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.3rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--rc-text);
}
.rc-card__skills li {
    position: relative;
    margin: 0;
    padding-left: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rc-card__skills li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rc-dot);
}
.rc-card__skills--dates li {
    padding-left: 0;
    font-variant-numeric: tabular-nums;
}
.rc-card__skills--dates li::before { content: none; }

/* ── Footer: the fee, then the action ─────────────────────────── */
.rc-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-top: auto;
    min-height: 4rem;
    padding: 0.8rem 1rem;
    background: var(--rc-footer);
    border-top: 1px solid var(--rc-rule);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--rc-primary);
}
.rc-card__price {
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--rc-muted);
}
.rc-card__price strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rc-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rc-card__price small {
    font-size: 0.6875rem;
    font-weight: 500;
}
.rc-card__price--none { font-size: 0.8125rem; }
.rc-card__cta-main {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.rc-card__cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* "Browse more" pill under the course page's related grid. */
.rc-see-more-wrap { display: flex; justify-content: center; margin-top: 1.25rem; }
.rc-see-more {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.82rem; font-weight: 700;
    color: var(--rc-primary);
    background: #fff;
    border: 1.5px solid var(--rc-primary);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.rc-see-more:hover { background: var(--rc-primary); color: #fff; }
.rc-see-more svg {
    width: 16px; height: 16px;
    stroke: currentColor; stroke-width: 2;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Phone ────────────────────────────────────────────────────────
   The same poster, one per row, with the topics folded: the banner
   keeps its ratio (123px tall at 358px wide) because a thumbnail crop
   of a picture that IS the title showed half a word. What is left is
   what a reader scanning a list wants: subject and level, the name,
   when, the fee. */
@media (max-width: 767.98px) {
    .rc-card__body {
        gap: 0.4rem;
        padding: 0.8rem 1rem 0.85rem;
    }
    .rc-card .rc-card__title { min-height: 0; }
    .rc-card .rc-card__skills-title,
    .rc-card__skills { display: none; }
    .rc-card__cta {
        min-height: 0;
        padding: 0.65rem 1rem;
    }
}