/* ThumbnailCard — brand palette, no generated images */
thumbnail-card, .thumb-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(200, 204, 212, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  height: 100%;
  transition: border-color 0.2s ease;
}
thumbnail-card:hover, .thumb-card:hover { border-color: #D4A857; transform: translateY(-2px); }
.thumb-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid #C8CCD4;
  background: #0A0F1F;
  overflow: hidden;
}
.thumb-frame svg { width: 100%; height: 100%; display: block; }
.thumb-kicker {
  position: absolute; top: 10px; left: 12px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #C8CCD4;
}
.thumb-title {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: #fff;
}
.thumb-desc {
  margin: 0;
  color: #9AA3B2;
  font-size: 15px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thumb-cta {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0A0F1F;
  background: #D4A857;
  border: 1px solid #D4A857;
  border-radius: 4px;
  padding: 10px 14px;
}
.thumb-cta.ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
thumbnail-card:hover .thumb-cta.ghost { color: #D4A857; border-color: #D4A857; }