/**
 * Melanin Stories — assets/css/components/quiz-card.css
 * Carte quiz réutilisable (teaser home + archive).
 */

.ms-quiz-card {
  display: block;
  background: var(--ms-paper);
  border: 1px solid var(--ms-line);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ms-quiz-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(26, 20, 16, 0.12);
}

.ms-quiz-card__thumb {
  aspect-ratio: 16 / 11;
  background: var(--ms-green);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ms-quiz-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ms-quiz-card__fallback-icon {
  font-family: var(--ms-font-display);
  font-size: 64px;
  font-weight: 600;
  color: rgba(250, 244, 230, 0.5);
}

.ms-quiz-card__title {
  font-family: var(--ms-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  padding: 20px 22px 4px;
}

.ms-quiz-card__meta {
  font-family: var(--ms-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ms-charcoal);
  opacity: 0.7;
  padding: 0 22px 16px;
}

.ms-quiz-card__cta {
  display: block;
  font-family: var(--ms-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-red);
  padding: 0 22px 22px;
}