/* ============================================================
   SKETCH BAND — sketchnotes as their own section
   One card per video: key thumbnail + workbook/key print links.
   Replaces the per-video link strip (khan-sketch.js part 1);
   page data keeps sheets: hrefs in KHAN_SKETCHES for reference.
   ============================================================ */

.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.sk-card {
  background: #FFFDF6;
  border: 1px solid rgb(13 13 17 / 0.08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s;
}
.sk-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }

.sk-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FFFDF6;
  border-bottom: 1px solid rgb(13 13 17 / 0.08);
}
.sk-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sk-card:hover .sk-thumb img { transform: scale(1.04); }

.sk-body { padding: 20px 24px 22px; }
.sk-law {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--iris-500); margin-bottom: 8px;
}
.sk-body h3 { font-size: 1.25rem; margin-bottom: 14px; }

.sk-row {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-300);
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0;
}
.sk-row + .sk-row { border-top: 1px solid rgb(13 13 17 / 0.07); }
.sk-tag {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px;
  color: var(--ink-500);
  border: 1px solid rgb(13 13 17 / 0.12);
  padding: 3px 9px; border-radius: 999px;
}
.sk-row a { font-weight: 700; color: var(--ink-900); }
.sk-row a:hover { color: var(--iris-500); }

/* placeholder state (megaloop: band ships before sheets are approved) */
.sk-card.is-soon {
  border-style: dashed; box-shadow: none; opacity: 0.65;
}
.sk-card.is-soon:hover { transform: none; box-shadow: none; }

@media (max-width: 900px) { .sk-grid { grid-template-columns: 1fr; max-width: 480px; } }