/* ══════════════════════════════════════════════════════════════════
   css/paper-picker.css · the paper picker, wherever it appears
   S.MONK · November 2026
   ══════════════════════════════════════════════════════════════════
   One component, two homes: the homepage hero names a few papers, and
   the courses page asks the whole question. Both render the same
   markup from smonk_papers_html(), so a paper can never look like one
   thing in the hero and another on the courses page.

   This file is the base and the light (on-white) theme. The hero
   stylesheet overrides the colours for its navy designs; nothing here
   assumes how many papers exist.
   ══════════════════════════════════════════════════════════════════ */

.h2x-pick__label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--c-ink-500);
}

.h2x-papers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.h2x-paper {
  display: flex; flex-direction: column; justify-content: center;
  gap: 3px;
  min-height: 68px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  text-decoration: none;
  /* Light theme by default, which is what the courses page wants. */
  background: #fff;
  border: 1px solid var(--c-ink-200);
  color: var(--c-ink-900);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), background var(--t-base),
              border-color var(--t-base), box-shadow var(--t-base);
}
.h2x-paper:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
  box-shadow: 0 8px 20px rgba(249,115,22,0.16);
}
.h2x-paper__code {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
}
.h2x-paper__name {
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: var(--fw-medium);
  color: var(--c-ink-500);
}
.h2x-paper__tag {
  font-family: var(--f);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
  margin-left: 5px;
  opacity: 0.75;
}

.h2x-pick__all {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: var(--orange-ink);
}
.h2x-pick__all:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .h2x-papers { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .h2x-paper { min-height: 62px; padding: 11px 12px; }
}
@media (max-width: 380px) {
  .h2x-paper__name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .h2x-paper { transition: none; }
  .h2x-paper:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════
   The question band — the courses page, right under its hero
   ══════════════════════════════════════════════════════════════════
   Ravi's ruling, 8 Nov 2026: the homepage hero names a few papers,
   and the question "which paper are you preparing for?" is asked here,
   once a visitor has landed on the courses page.
   ══════════════════════════════════════════════════════════════════ */
.paper-q {
  background: linear-gradient(180deg, var(--c-surface-warm) 0%, #fff 100%);
  border-bottom: 1px solid var(--c-ink-100);
  padding: clamp(32px, 4vw, 52px) 0;
}
.paper-q__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.paper-q__head {
  font-family: var(--f-display);
  font-weight: var(--fw-black);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--c-ink-900);
  margin: 0 0 6px;
  text-wrap: balance;
}
.paper-q__note {
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--c-ink-600);
  margin: 0 0 22px;
  max-width: 62ch;
}
/* More papers are coming (all thirteen exams, plus new IAI papers), so
   this grid is told a minimum tile width and left to decide the rest. */
.paper-q .h2x-papers {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.paper-q__foot {
  margin-top: 18px;
  font-size: var(--text-base);
  color: var(--c-ink-500);
}
.paper-q__foot a { color: var(--orange-ink); font-weight: var(--fw-semibold); }

/* ── Even tiles ─────────────────────────────────────────────────────
   "CM2 Financial Engineering & Loss Reserving" wraps to two lines
   where "CM1 Actuarial Mathematics" takes one, so CM2's tile stood
   taller than its neighbours and the row looked accidental. Ravi, 9
   Nov. One row height for the lot. ──────────────────────────────── */
.h2x-papers { grid-auto-rows: 1fr; }
.h2x-paper  { height: 100%; display: flex; flex-direction: column; justify-content: center; }