/* Card primitive — the project's signature unit.
 *
 * Composition: <a class="card">
 *                <div class="thumb">…optional SVG…</div>
 *                <div class="body">
 *                  <div class="title">…</div>
 *                  <div class="desc">…</div>
 *                  <div class="file"><span>…</span><span class="arrow">→</span></div>
 *                </div>
 *              </a>
 *
 * The card is *the* container for everything: design-system primitives,
 * course pages, archive entries, anything that benefits from a thumb +
 * title + short description. Use the card grid (.card-grid) for layout.
 *
 * Variants live here, not as separate files.
 */

/* ── Card grid ─────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(316px, 1fr));
  gap: var(--space-5);
}

/* When the grid follows a section-head, indent to align with content
 * inside the header (which has a 34px index + 16px gap = 50px lead). */
.sec-head + .card-grid,
.sec-intro + .card-grid {
  margin-inline-start: 50px;
}
/* --bp-sm */
@media (max-width: 30em) {
  .sec-head + .card-grid,
  .sec-intro + .card-grid { margin-inline-start: 0; }
}

/* ── Card ──────────────────────────────────────────────────────── */
.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-4);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform     var(--duration-base) var(--ease-standard),
    box-shadow    var(--duration-base) var(--ease-standard),
    border-color  var(--duration-base) var(--ease-standard);
}
/* Hover lift only fires on link cards — static <article class="card">
   sits politely without a misleading "click me" affordance. */
a.card:hover,
a.card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: var(--clay);
  outline: none;
}

/* ── Thumbnail ─────────────────────────────────────────────────── */
.card .thumb {
  block-size: 132px;
  background: var(--paper-2);
  border-block-end: 1.5px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  transition: background var(--duration-base) var(--ease-standard);
}
a.card:hover .thumb,
a.card:focus-visible .thumb {
  background: var(--paper-hot);
}

/* SVG thumbnail palette — every thumb SVG uses these classes so the whole
 * card set restyles via tokens, no per-card colour edits. */
.card .thumb svg {
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}
.card .thumb svg .st { stroke: var(--fg-muted); fill: none; stroke-width: 2.5; }
.card .thumb svg .fl { fill: var(--rule); }
.card .thumb svg .cl { fill: var(--clay); }
.card .thumb svg .ol { fill: var(--olive); }
.card .thumb svg .oa { fill: var(--oat); stroke: var(--fg-muted); stroke-width: 2.5; }
.card .thumb svg .sl { fill: var(--fg-soft); }
.card .thumb svg .wh { fill: var(--paper); stroke: var(--fg-muted); stroke-width: 2.5; }
.card .thumb svg .ln { stroke: var(--fg-muted); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.card .thumb svg .lc { stroke: var(--clay); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.card .thumb svg .da { stroke-dasharray: 4 4; }
a.card:hover .thumb svg .fl,
a.card:focus-visible .thumb svg .fl { fill: var(--fg-muted); }
a.card:hover .thumb svg .oa,
a.card:focus-visible .thumb svg .oa { fill: var(--paper); }

/* ── Body ──────────────────────────────────────────────────────── */
.card .body {
  padding: var(--space-4) 1.25rem var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card .title {
  font-family: var(--font-serif);
  font-size: var(--size-h3);
  font-weight: var(--weight-medium);
  line-height: 1.22;
  color: var(--fg);
  margin-block-end: 0.4375rem;
  letter-spacing: -0.008em;
}
.card .desc {
  font-size: 0.84375rem;
  color: var(--fg-soft);
  line-height: 1.5;
  margin-block-end: var(--space-4);
  flex: 1;
}
.card .desc em { color: var(--fg); font-style: italic; }

/* ── File footer ───────────────────────────────────────────────── */
.card .file {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  border-block-start: 1px solid var(--rule-soft);
  padding-block-start: 0.6875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card .file .arrow {
  color: var(--rule);
  transition:
    transform var(--duration-base) var(--ease-standard),
    color     var(--duration-base) var(--ease-standard);
}
a.card:hover .file,
a.card:focus-visible .file { color: var(--clay); }
a.card:hover .file .arrow,
a.card:focus-visible .file .arrow {
  transform: translateX(3px);
  color: var(--clay);
}