/* Written content: the home page, and the prose that sits under the game on
   every mode page.

   This exists because the game alone is not a page. Ads may not run on a screen
   without publisher content, and a board plus a row of buttons is not content —
   so every ad-bearing page carries real writing about the mode it runs, and this
   file is how that writing is set. Prose rules (measure, leading, heading rhythm)
   rather than game-UI rules, which is why it is separate from base.css. */

/* ── Home hero ──────────────────────────────────────────────────────────── */

.hero {
  margin-bottom: 40px;
}

.hero h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 12px;
}

.hero .hero-lede {
  /* Capped in ch rather than px: measure is a count of characters, so it should
     hold when the reader changes their text size. */
  max-width: 68ch;
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ── Mode cards (home) ──────────────────────────────────────────────────── */

/* auto-fit rather than a fixed column count: four cards sit two-up on a laptop
   and one-up on a phone without a breakpoint for either. */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}

.mode-card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  transition: border-color var(--dur-ui) var(--ease-out),
              background var(--dur-ui) var(--ease-out),
              scale var(--dur-press) var(--ease-out);
}
.mode-card:hover {
  background: var(--surface-raised);
  border-color: var(--accent);
}
.mode-card:active { scale: 0.99; }
.mode-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.mode-card h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 4px;
}

.mode-card .mode-card-tagline {
  color: var(--accent);
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps-sm);
  text-transform: uppercase;
  margin: 0 0 10px;
}

.mode-card p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ── Prose sections ─────────────────────────────────────────────────────── */

/* The written content under the game on a mode page, and the body of the home
   page below the cards. Constrained to a reading measure even though the game
   above it runs the full 1260px column — a paragraph set that wide is unreadable
   regardless of how wide the board wants to be. */
.content-section {
  max-width: 68ch;
  margin: 0 auto 40px;
}

.content-section h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps-md);
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 12px;
}

.content-section h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps-md);
  color: var(--text);
  margin: 24px 0 8px;
}

.content-section p,
.content-section li {
  color: var(--text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.content-section p { margin: 0 0 16px; }

.content-section ul,
.content-section ol {
  margin: 0 0 16px;
  padding-inline-start: 1.25em;
}
.content-section li { margin-bottom: 6px; }

.content-section strong { color: var(--text); }

.content-section a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.content-section a:hover { color: var(--accent-hover); }
.content-section a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* The lead paragraph directly under a mode page's h1, above the board. Sized up
   a step from body copy so the page opens with a sentence rather than with a
   game the reader has to infer the rules of. */
.page-intro {
  max-width: 68ch;
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  margin: 0 0 20px;
}

.page-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps-lg);
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  .mode-card:active { scale: 1; }
}