/* -------------------------------------------------------- */
/* 🔹 Sample Questions Section                              */
/* -------------------------------------------------------- */
/* Real questions from the bank laid out as the quiz screen: */
/* question centered, answer buttons below with the correct  */
/* one marked                                                */
/* Mirrors quiz_screen.dart and answer_button.dart           */

.sample-questions {
  padding-block: var(--landing-section-spacing);
}

.sample-questions__header {
  margin-bottom: var(--space-xxxl);
}

.sample-questions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-lxl);
  list-style: none;
}

/* Cards stretch to the tallest in the row and the question takes the
   slack, so the answer buttons line up across the cards */
.sample-question {
  display: flex;
  flex-direction: column;
  padding: var(--space-xxl);
  border-radius: var(--radius);
  background-color: var(--color-card-fill);
  text-align: center;
}

.sample-question__meta {
  font-size: var(--text-body-medium);
  font-weight: var(--text-title-weight);
  color: var(--color-secondary);
}

/* Centered both ways in its space, as on the quiz screen */
.sample-question__text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: var(--space-l) var(--space-lxl);
  font-size: var(--text-title-large);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
  text-wrap: balance;
}


/* -------------------------------------------------------- */
/* 🔹 Options                                               */
/* -------------------------------------------------------- */

.sample-question__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  list-style: none;
  text-align: left;
}

.sample-question__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
  border: 1.5px solid var(--color-answer-border);
  border-radius: var(--radius);
  background-color: var(--color-answer-fill);
  font-size: var(--text-body-medium);
  color: var(--color-answer-text);
}

.sample-question__option--correct {
  border-color: var(--color-answer-correct-border);
  background-color: var(--color-answer-correct-fill);
  font-weight: var(--text-title-weight);
  color: var(--color-answer-correct);
}

.sample-question__option--wrong {
  border-color: var(--color-answer-incorrect-border);
  background-color: var(--color-answer-incorrect-fill);
  font-weight: var(--text-title-weight);
  color: var(--color-answer-incorrect);
}

/* ✓ or ✕ — takes the verdict's text color */
.sample-question__mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}