/* ==========================================================================
   CMTI Course Card System  -  assets/css/course-card.css
   --------------------------------------------------------------------------
   One reusable, premium card used by the public catalogue, the homepage
   featured rows and (progress variant) the student dashboard.

   Everything is namespaced `cmti-` so it cannot collide with the legacy
   `.card` / `.course-card` rules in style.css and enhance.css. Brand tokens
   (--gold, --ink, --surface, --border...) are inherited from style.css so a
   partner deployment keeps its palette and only the category accents below
   are card-local.

   Category accents translate the reference direction (blue/cyan for IT,
   orange/red for Safety, green/gold for Accounts, purple/yellow for Science,
   teal for Technical, rose for Languages) into per-area tokens consumed by
   the media block, badge and progress bar.
   ========================================================================== */

:root {
  --ccr-radius:       18px;
  --ccr-radius-sm:    12px;
  --ccr-shadow:       0 6px 22px rgba(15, 23, 42, 0.10);
  --ccr-shadow-hover: 0 20px 46px rgba(15, 23, 42, 0.18);
  --ccr-line:         rgba(15, 23, 42, 0.09);
  --ccr-ink:          #0f172a;
  --ccr-muted:        #5b6b84;
  --ccr-ease:         cubic-bezier(0.22, 1, 0.36, 1);

  /* Default accent (uncategorised). */
  --cc-a: #2563eb;
  --cc-b: #06b6d4;
  --cc-ink: #1d4ed8;
}

/* --------------------------------------------------------------------------
   1. Category themes
   Each sets an accent pair plus a darker "ink" used for text/icon contrast.
   -------------------------------------------------------------------------- */
.cc-theme-it        { --cc-a:#2563eb; --cc-b:#22d3ee; --cc-ink:#1d4ed8; }
.cc-theme-safety    { --cc-a:#f97316; --cc-b:#ef4444; --cc-ink:#c2410c; }
.cc-theme-accounts  { --cc-a:#16a34a; --cc-b:#eab308; --cc-ink:#15803d; }
.cc-theme-science    { --cc-a:#7c3aed; --cc-b:#facc15; --cc-ink:#6d28d9; }
.cc-theme-technical { --cc-a:#0e7490; --cc-b:#38bdf8; --cc-ink:#0e7490; }
.cc-theme-language  { --cc-a:#e11d48; --cc-b:#fb7185; --cc-ink:#be123c; }
.cc-theme-default   { --cc-a:#2563eb; --cc-b:#06b6d4; --cc-ink:#1d4ed8; }

/* --------------------------------------------------------------------------
   2. Grid
   auto-fill with a 270px floor yields 4 / 3 / 2 / 1 columns across the
   container widths the site actually serves, without stepped breakpoints.
   -------------------------------------------------------------------------- */
.cmti-course-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
}
.cmti-course-grid--tight { gap: 18px; }

/* --------------------------------------------------------------------------
   3. Card shell
   -------------------------------------------------------------------------- */
.cmti-card {
  --_lift: -6px;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--ccr-line);
  border-radius: var(--ccr-radius);
  box-shadow: var(--ccr-shadow);
  overflow: hidden;
  position: relative;
  transition: transform 0.32s var(--ccr-ease),
              box-shadow 0.32s var(--ccr-ease),
              border-color 0.32s var(--ccr-ease);
}
.cmti-card:hover,
.cmti-card:focus-within {
  transform: translateY(var(--_lift));
  box-shadow: var(--ccr-shadow-hover);
  border-color: var(--gold, #d4af37);
  border-color: color-mix(in srgb, var(--cc-a) 45%, transparent);
}

/* --------------------------------------------------------------------------
   4. Media / artwork block
   The gradient + icon layer is always painted first. A real image (when the
   row has one) sits on top; if it is missing or fails to load it simply
   reveals the artwork underneath, so the card never shows a broken frame.
   -------------------------------------------------------------------------- */
.cmti-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* Plain two-stop gradient first: browsers without color-mix() keep a
     colourful (if slightly flatter) artwork block instead of nothing. */
  background: linear-gradient(140deg, var(--cc-a), var(--cc-b));
  background:
    radial-gradient(120% 120% at 85% 0%, color-mix(in srgb, var(--cc-b) 42%, transparent), transparent 60%),
    linear-gradient(140deg, color-mix(in srgb, var(--cc-a) 92%, #000 4%), var(--cc-b));
}
/* Soft depth + legibility wash over the photo. */
.cmti-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 15, 30, 0.38), rgba(8, 15, 30, 0) 46%);
}
.cmti-card-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}
.cmti-card-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 15%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 80% 0%, #000 15%, transparent 78%);
}
.cmti-card-art i {
  position: relative;
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  opacity: 0.92;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28));
}
.cmti-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.85s var(--ccr-ease);
}
.cmti-card:hover .cmti-card-img { transform: scale(1.07); }

/* Category badge floats over the artwork. */
.cmti-card-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmti-card-cat i { font-size: 0.68rem; }

/* "Completed" / status ribbon in the top-right. */
.cmti-card-ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #05261a;
  background: #34d399;
}
.cmti-card-ribbon.warn { background: #fbbf24; color: #422006; }
.cmti-card-ribbon.lock { background: #e2e8f0; color: #334155; }

/* --------------------------------------------------------------------------
   5. Body
   -------------------------------------------------------------------------- */
.cmti-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 16px 18px 18px;
}
.cmti-card-title {
  margin: 0;
  font-size: 1.03rem;
  line-height: 1.32;
  color: var(--ccr-ink);
  letter-spacing: -0.01em;
  font-family: 'Lato', system-ui, sans-serif;
  font-weight: 700;
}
.cmti-card-title a { color: inherit; text-decoration: none; }
.cmti-card-title a:hover { color: var(--cc-ink); }

/* Clamp the description to two lines so every card body lines up. */
.cmti-card-desc {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ccr-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cmti-card-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.78rem;
  color: var(--ccr-muted);
}
.cmti-card-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cmti-card-meta li i { color: var(--cc-a); font-size: 0.78rem; }
.cmti-card-meta li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12ch;
}

/* --------------------------------------------------------------------------
   6. Progress (enrolled variant)
   -------------------------------------------------------------------------- */
.cmti-card-progress { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.cmti-card-progress .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--ccr-muted);
}
.cmti-card-progress .row strong { color: var(--ccr-ink); font-variant-numeric: tabular-nums; }
.cmti-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
.cmti-bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cc-a), var(--cc-b));
  transition: width 0.5s var(--ccr-ease);
}
.cmti-card.is-complete .cmti-bar > span { background: linear-gradient(90deg, #10b981, #34d399); }

/* --------------------------------------------------------------------------
   7. Actions
   -------------------------------------------------------------------------- */
.cmti-card-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.cmti-card-actions .btn,
.cmti-card-actions .cmti-btn {
  flex: 1;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.cmti-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.62rem 1rem;
  border-radius: var(--ccr-radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.24s var(--ccr-ease), box-shadow 0.24s var(--ccr-ease),
              filter 0.24s var(--ccr-ease), background-color 0.24s var(--ccr-ease);
}
.cmti-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--cc-a), var(--cc-b));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--cc-a) 32%, transparent);
}
.cmti-btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cmti-btn--ghost {
  color: var(--cc-ink);
  background: rgba(15, 23, 42, 0.04);
  background: color-mix(in srgb, var(--cc-a) 10%, #fff);
  border-color: rgba(15, 23, 42, 0.12);
  border-color: color-mix(in srgb, var(--cc-a) 30%, transparent);
}
.cmti-btn--ghost:hover {
  background: rgba(15, 23, 42, 0.08);
  background: color-mix(in srgb, var(--cc-a) 18%, #fff);
}

/* Locked / disabled state. */
.cmti-btn--locked {
  color: #64748b;
  background: rgba(15, 23, 42, 0.05);
  border-color: var(--ccr-line);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   8. Empty / loading states
   -------------------------------------------------------------------------- */
.cmti-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 24px;
  color: var(--ccr-muted);
  background: var(--surface, #fff);
  border: 1px dashed var(--ccr-line);
  border-radius: var(--ccr-radius);
}
.cmti-empty i { display: block; font-size: 2.4rem; opacity: 0.35; margin-bottom: 14px; }
.cmti-empty h3 { color: var(--ccr-ink); margin: 0 0 8px; font-size: 1.05rem; }
.cmti-empty p { margin: 0 auto 14px; max-width: 46ch; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cmti-card,
  .cmti-card-img,
  .cmti-btn,
  .cmti-bar > span { transition: none !important; }
  .cmti-card:hover { transform: none; }
  .cmti-card:hover .cmti-card-img { transform: none; }
}

/* Touch: no sticky hover lift. */
@media (hover: none) {
  .cmti-card:hover,
  .cmti-card:focus-within { transform: none; }
}