/* Catalog grid for quizzes */
.quiz-catalog { padding: 24px; max-width: 1100px; margin: 0 auto; }
.catalog-title { font-size: 2rem; margin: 12px 4px 20px; }

.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.quiz-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.quiz-card__image { width: 100%; height: 160px; object-fit: cover; display: block; }
.quiz-card__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.quiz-card__title { font-size: 1.2rem; }
.quiz-card__desc { opacity: 0.9; }
.quiz-card .btn { align-self: flex-start; }

.quiz-card--placeholder .quiz-card__placeholder {
  height: 160px;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.06) 10px,
    rgba(255,255,255,0.12) 10px,
    rgba(255,255,255,0.12) 20px
  );
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 720px) {
  .quiz-card__image, .quiz-card--placeholder .quiz-card__placeholder { height: 140px; }
}

/* Light mode contrast improvements (quizzes grid) */
body.home:not(.dark-mode) .quiz-card {
  background: #FFFEFD; /* soft warm white */
  border: 1px solid rgba(228, 87, 46, 0.12); /* brand red tint */
  box-shadow: 0 8px 22px rgba(15,23,42,0.06);
}
body.home:not(.dark-mode) .quiz-card--placeholder .quiz-card__placeholder {
  background: repeating-linear-gradient(
    45deg,
    rgba(15,23,42,0.04),
    rgba(15,23,42,0.04) 10px,
    rgba(15,23,42,0.08) 10px,
    rgba(15,23,42,0.08) 20px
  );
}