/* =============================================================
   TEST LANDING / INTRO PAGE STYLES
   Sits at /test/index.html. Introduces the quiz before the user
   begins, with three guidance cards and a Begin Test CTA.
   ============================================================= */


.test-intro {
  /* Soft surface tint matches the screenshot mock — gives the
     section a "card-on-page" feel separate from the white nav. */
  background: var(--color-surface);
  padding: var(--space-xl) 0;
}


/* -------------------------------------------------------------
   HERO TEXT
   Centered headline + subheadline + two body paragraphs.
   The body text is left-aligned (easier to read than centered
   long-form paragraphs) but the headline block above it is
   centered for visual balance.
   ------------------------------------------------------------- */
.test-intro__hero {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.test-intro__hero h1 {
  font-size: var(--text-h1);
  margin-bottom: var(--space-md);
}

.test-intro__subhead {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  max-width: 720px;
  margin: 0 auto;
}

.test-intro__body {
  max-width: 880px;
  margin: 0 auto var(--space-lg);
}

.test-intro__body p {
  margin-bottom: var(--space-md);
}

/* The lead sentence of the second body paragraph is bolded for
   emphasis — used to surface the "30 real-life scenarios" claim. */
.test-intro__body strong {
  font-weight: var(--font-weight-bold);
}


/* -------------------------------------------------------------
   GUIDANCE CARDS
   Three cards in a row on desktop, stacking on narrow screens.
   Each card has a large coral numeral, a bold title, and a body
   paragraph explaining how to approach the test.

   The `--2x2` modifier switches the desktop layout to a two-by-two
   grid, used by secondary test landing pages that carry a fourth
   "Emotion Words" guidance card. Mobile stacks regardless.
   ------------------------------------------------------------- */
.test-intro__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.test-intro__cards--2x2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
  .test-intro__cards,
  .test-intro__cards--2x2 {
    grid-template-columns: 1fr;
  }
}

.test-intro__card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.test-intro__card-num {
  display: block;
  font-size: 56px;
  font-weight: var(--font-weight-light);
  color: var(--color-coral);
  line-height: 1;
  margin-bottom: var(--space-md);
}

.test-intro__card-title {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
}

.test-intro__card-body {
  font-size: var(--text-body);
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  margin: 0;
}


/* -------------------------------------------------------------
   CTA
   Single coral button centered below the cards.
   ------------------------------------------------------------- */
.test-intro__cta {
  text-align: center;
}


/* -------------------------------------------------------------
   PURCHASE GATE (test-gate.js)
   Rendered inside .test-intro__cta in place of the Begin button
   when the visitor needs to log in, purchase, or has used all
   their takes.
   ------------------------------------------------------------- */
.test-gate {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.test-gate__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* The muted line under the Begin button ("X of 3 takes left" +
   the spacing recommendation) and inside the gate panel. */
.test-gate__note {
  max-width: 560px;
  margin: var(--space-sm) auto 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}