/* ────────────────────────────────────────────────────────────────
   Modern course cards (shared across course listings).

   Used on:
   - course.html          (related-courses section)
   - latest-courses.html
   - course/training-format.html
   - course/courses-by-venue.html
   - course/course-finder.html   (SSR fallback)

   Keep selectors unscoped so a single stylesheet powers every page.
   The legacy .card.card-product classes remain wrappers for backwards
   compatibility but no longer contribute visuals.
   ──────────────────────────────────────────────────────────────── */

:root {
    --rc-card-radius: 14px;
    --rc-card-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    --rc-card-shadow-hover: 0 14px 30px rgba(15, 23, 42, 0.09);
    --rc-card-border: #e6ebf0;
    --rc-primary: #0b7269;
    --rc-primary-dark: #095c55;
    --rc-secondary: #0a4772;
    --rc-text: #334155;
    --rc-muted: #64748b;
}

.rc-card {
    display: flex; flex-direction: column; height: 100%;
    position: relative;
    background: #fff;
    border: 1px solid var(--rc-card-border);
    border-radius: var(--rc-card-radius);
    box-shadow: var(--rc-card-shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.rc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rc-card-shadow-hover);
    border-color: #c9e2df;
}

.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; }

.rc-card__image {
    position: relative; overflow: hidden;
    aspect-ratio: 400 / 137;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: #eef2f7;
}
.rc-card__image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.55s ease;
}
.rc-card:hover .rc-card__image img { transform: scale(1.03); }

.rc-card__body {
    /* the footer row went with the repeated call to action — the card is
       one anchor already — so the body carries its own bottom padding */
    padding: 0.9rem 1.05rem 1rem;
    flex: 1 1 auto;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.rc-card__title {
    font-size: 1rem; font-weight: 700;
    letter-spacing: -0.006em;
    color: var(--rc-secondary);
    margin: 0; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.rc-card:hover .rc-card__title { color: var(--rc-primary); }

/* One value, not two. 93.4% of the catalogue is "5 Days", and a random
   six cards from a category show the same duration more than half the
   time, so two chips side by side invited a comparison that was usually
   between identical things. Level varies — intermediate 67%, foundation
   26%, advanced 8% — so it leads; duration follows as quiet text.
   (2026-09-26) */
.rc-card__meta {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 0.4rem 0.6rem;
    margin: 0;
    font-size: 0.72rem; color: var(--rc-muted); font-weight: 500;
}
.rc-card__level {
    font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--rc-primary);
    background: rgba(11, 114, 105, 0.08);
    border-radius: 3px;
    padding: 0.14rem 0.4rem;
}
.rc-card__dur { color: var(--rc-muted); }

/* Three bullets and a repeated "Key skills you'll learn" label became
   one line, then a count. The line joined three module titles with "·"
   and clamped to two lines, which cut mid-word on most cards --
   "Office 36…", "Managing Records…", "Metadata and…". Module names are
   long and the card is 339px; there is no width at which that line
   ends cleanly. The count carries the same signal (how much course
   there is) and cannot truncate.

   .rc-card__covers is kept because four other pages load this sheet and
   one may still render it; nothing in this repo does today. */
.rc-card__covers {
    margin: 0;
    font-size: 0.76rem; line-height: 1.5; color: var(--rc-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Third fact on the meta line, after level and duration. Quiet, like
   the duration -- the level chip is the one that varies and leads. */
.rc-card__modules { color: var(--rc-muted); }

/* ── The syllabus, one module per line ──────────────────────
   These three titles used to be joined with "·" and clamped as
   one blob, so the clamp landed inside whichever title it
   reached: "Office 36…", "Managing Records…". A fragment of a
   name the reader never saw the start of.

   One line each fixes that. A title too long for 339px still
   ends in an ellipsis, but it is now the tail of a module the
   reader has been reading, not the middle of one they have
   not. Three lines, each its own row, marker outside the text
   so the wrap never tucks under it. */
/* The label was removed from these cards once before, when it read
   "Key Skills You'll Learn" on every card in the grid and took a line
   to do it. This one is a micro-label -- 0.6rem, tracked, muted -- the
   same register as DURATION and LEVEL in the quick facts above, so it
   names the list without competing with the course title. */
.rc-card__syllabus-block {
    border-top: 1px solid #eef2f7;
    padding-top: 0.55rem;
}

.rc-card__syllabus-title {
    margin: 0 0 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* #94a3b8 was the first choice and measured 2.56:1 on white --
       under the 4.5:1 a 10px label needs. --rc-muted is 4.76:1. */
    color: var(--rc-muted);
}

.rc-card__syllabus {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.22rem;
}

.rc-card__syllabus li {
    position: relative;
    padding-left: 0.85rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--rc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-card__syllabus li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #cbd5e1;
}

.rc-card:hover .rc-card__syllabus li::before { background: var(--rc-primary); }

.rc-card__dur::after,
.rc-card__modules::before {
    content: '';
}

.rc-card__meta > span + span::before {
    content: '·';
    margin-right: 0.45rem;
    color: #cbd5e1;
}

.rc-card__meta > .rc-card__level + span::before { content: none; }

.rc-card__note {
    margin: 0.15rem 0 0; padding: 0.45rem 0.6rem;
    background: #f8fafc; border-radius: 8px;
    font-size: 0.72rem; color: var(--rc-muted); line-height: 1.4;
    display: flex; align-items: flex-start; gap: 0.4rem;
}
.rc-card__note i { color: var(--rc-primary); margin-top: 0.15rem; }

/* Compact variant (no banner image) — used on SSR course-finder fallback. */
.rc-card--compact .rc-card__body { padding-top: 1.1rem; }

/* Category pill sitting at the top of the body — optional. */
.rc-card__pill {
    display: inline-flex; align-items: center; align-self: flex-start;
    padding: 0.2rem 0.55rem;
    background: #f0faf9; color: var(--rc-primary);
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; border-radius: 999px;
}

/* "See more" pill used below card grids. */
.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, box-shadow 0.2s ease, transform 0.2s ease;
}
.rc-see-more:hover {
    background: var(--rc-primary); color: #fff;
    box-shadow: 0 8px 20px rgba(11, 114, 105, 0.2);
    transform: translateY(-1px);
}
.rc-see-more svg {
    width: 16px; height: 16px;
    stroke: currentColor; stroke-width: 2;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.2s ease;
}
.rc-see-more:hover svg { transform: translateX(3px); }

/* ============================================
   Phone: rows, not posters (2026-09-26).
   Six stacked cards ran 2,724px — 15.9% of the
   page, more than three screens, for the block
   that matters least to a reader who has got
   this far. Same markup and the same single
   anchor, laid out as a row: thumbnail, title,
   one muted line. The banner survives because
   3,780 of 3,782 active courses have their own.
   ============================================ */
@media (max-width: 767.98px) {
    .rc-card { flex-direction: row; }
    .rc-card__link { flex-direction: row; align-items: center; gap: 0.8rem; width: 100%; }

    .rc-card__image {
        flex: 0 0 96px;
        width: 96px;
        aspect-ratio: 1 / 1;
        border-radius: var(--rc-card-radius) 0 0 var(--rc-card-radius);
    }

    .rc-card__body {
        padding: 0.7rem 0.9rem 0.7rem 0;
        gap: 0.3rem;
        justify-content: center;
    }

    .rc-card__title { font-size: 0.88rem; }

    /* one muted line: level and duration read as a single fact rather
       than two competing chips */
    .rc-card__meta { gap: 0.35rem; font-size: 0.7rem; }
    .rc-card__level {
        background: none; padding: 0;
        letter-spacing: 0.05em;
    }
    .rc-card__level::after { content: ' ·'; color: var(--rc-muted); }

    /* the syllabus is the first thing to go at this width */
    .rc-card__covers,
    .rc-card__syllabus-block { display: none; }

    /* Three facts do not fit beside a 96px thumbnail: the line wrapped
       and left a separator stranded at the head of the second row. The
       count goes, and the level keeps its own trailing dot, so this
       stays the one muted line the layout above was designed around.

       Worth noting for whoever revisits this: duration is the weaker
       of the two survivors -- 93.4% of the catalogue is "5 Days" --
       while module counts vary. If this line is ever reworked, drop
       the duration rather than the count. */
    .rc-card__modules { display: none; }

    .rc-card__meta > span + span::before { content: none; }
}

/* Card footer CTA.
   Restored 2026-09-26. These three rules were dropped by 2992823a, which
   rewrote this file for the course page's related-courses cards. Four
   other pages render `.rc-card__cta` — the course finder and both
   listing pages through customHits in course-search.js, and the SSR
   fallback through _listing_ssr_cards.html — and none of them defines it
   anywhere else, so the arrow lost its sizing and rendered as a 348px
   black triangle inside every card. Production is unaffected: 2992823a
   is on develop and has not been released. Copied verbatim from
   origin/main so the peer's new card work is untouched. */
.rc-card__cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    padding: 0.8rem 1.1rem 1rem;
    margin-top: auto;
    font-size: 0.8rem; font-weight: 700; color: var(--rc-primary);
    border-top: 1px solid #eef2f7;
}
.rc-card__cta svg {
    width: 16px; height: 16px;
    stroke: currentColor; stroke-width: 2;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.2s ease;
}
.rc-card:hover .rc-card__cta svg { transform: translateX(3px); }