/* ==========================================================================
   courses.css — the course catalogue page
   Page-scoped only. Every value comes from css/tokens.css; no component
   defined in css/components.css is restyled here.
   ========================================================================== */

/* The shared .stars mask builds its tile size from --star-size, which the
   component declares on itself. Seeding the same value at the root lets that
   token resolve, so the rating stars paint as stars rather than a solid bar. */
:root { --star-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Page head result count
   -------------------------------------------------------------------------- */
.courses-count {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.courses-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--space-5) var(--space-6);
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.toolbar-selects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.toolbar-levels {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.toolbar-legend {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.toolbar-reset { margin-left: auto; }

/* The shared hint colour is --text-subtle, which lands at 3.7:1 on white and
   4.4:1 on the dark card. Both miss 4.5:1, so this page reads its own hints
   one step darker. */
.courses-toolbar .field-hint { color: var(--text-muted); }

/* A level with no matches is disabled, so it has to look disabled rather than
   merely refuse the click. */
#level-chips .chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-style: dashed;
}
#level-chips .chip:disabled:hover {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-muted);
}
#level-chips .chip:disabled:active { transform: none; }

@media (max-width: 900px) {
  .courses-toolbar { grid-template-columns: minmax(0, 1fr); }
  .toolbar-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar-reset { margin-left: 0; }
}
@media (max-width: 520px) {
  .toolbar-selects { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Grid + course card
   -------------------------------------------------------------------------- */
.courses-grid { --grid-min: 20rem; }

.course-card { height: 100%; }

/* The gradient plate carries each course's own two stops, straight from data.js */
.course-tile {
  background: linear-gradient(135deg, var(--course-from, var(--a-400)), var(--course-to, var(--a-600)));
}

.course-card-body { gap: var(--space-4); }

.course-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.course-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.course-title { font-size: var(--fs-lg); }
.course-title a { color: inherit; text-decoration: none; }
.course-title a:hover { color: var(--primary); }

.course-subtitle {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--primary-soft-text);
  line-height: var(--lh-snug);
}

.course-blurb {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-signal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: auto;
}

/* A tag doubles as a one-click topic filter */
.course-tag {
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  /* .tag paints --text-subtle, which misses 4.5:1 on the card in both themes. */
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard);
}
.course-tag:hover {
  background: var(--primary-soft);
  color: var(--primary-soft-text);
  border-color: var(--primary-border);
}
.course-tag:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Card footer: price, actions, progress
   -------------------------------------------------------------------------- */
.course-card-foot {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--card-pad);
}

.course-price { display: flex; flex-direction: column; gap: var(--space-1); }
.course-price .price-main { font-size: var(--fs-2xl); }

.course-card-foot .price-total { color: var(--text-muted); }
.course-signal .rating-count { color: var(--text-muted); }

.course-price-alt {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.course-price-alt a { color: var(--primary); }

.course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.course-actions > .btn { flex: 1 1 9rem; }

.course-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.course-progress-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Skeletons + empty state
   -------------------------------------------------------------------------- */
.course-skeleton { min-height: 22rem; }

.courses-empty { grid-column: 1 / -1; }
.courses-empty .empty-state-art { color: var(--primary); width: 10rem; max-width: 100%; }
.courses-empty .empty-state-art svg { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Compare tiers strip
   -------------------------------------------------------------------------- */
.tier-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tile-gap);
  align-items: start;
}

.tier-card.is-highlight { box-shadow: var(--shadow-md); }

.tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.tier-name { font-size: var(--fs-2xl); letter-spacing: var(--tracking-tight); }
.tier-tagline { color: var(--text-muted); line-height: var(--lh-relaxed); }

.tier-bridge {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.tier-features { font-size: var(--fs-md); }

.tier-note {
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 70ch;
}

.tier-card .price-total { color: var(--text-muted); }

@media (max-width: 760px) {
  .tier-strip { grid-template-columns: minmax(0, 1fr); }
}