/* ============================================================
   Mock Test Mitra™ — exam-hub.css
   The static, crawlable blocks on the generated exam sub-hubs
   (exams/ese-civil.html, exams/railway-promotional/*.html).

   Those pages are written by scripts/build_exam_subhubs.py and
   reuse the subject-dashboard chrome (.sd-page, .sd-header,
   .sd-test-row …) for everything a hub shares with the other
   exam pages. Only the blocks that exist for SEO — the exam
   pattern table, the coverage list, the FAQ and the related
   links — are styled here.

   Depends on: main.css (colour tokens), subject-dashboard.css
   Every colour is a token, so dark mode follows automatically.
   ============================================================ */

.hub-updated {
  margin: 4px 0 20px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.hub-intro { margin-bottom: 28px; }

.hub-lede {
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.hub-manual {
  margin-top: 10px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* ── Section rhythm ──────────────────────────────────────── */
.hub-tests,
.hub-pattern,
.hub-coverage,
.hub-faq,
.hub-related { margin: 34px 0; }

.hub-tests h2,
.hub-pattern h2,
.hub-coverage h2,
.hub-faq h2,
.hub-related h2 {
  margin: 0 0 12px;
  font-size: 1.18rem;
  color: var(--text);
}

.hub-tests-note {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ── Exam pattern table ──────────────────────────────────── */
.hub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
}

.hub-table th,
.hub-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.hub-table thead th {
  background: var(--surface-alt);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.hub-table tbody tr:last-child td { border-bottom: 0; }
.hub-table td { color: var(--text-secondary); }

.hub-disclaimer {
  margin-top: 10px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Coverage & related lists ────────────────────────────── */
/* Flex rather than an auto-fill grid: same 280px minimum and the same number
   of cards per row, but a short last row stretches to fill it instead of
   leaving one card alone beside up to ~900px of empty columns
   (docs/LAYOUT-AUDIT-PLAN.md F8). */
.hub-coverage-list,
.hub-related-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hub-coverage-list li,
.hub-related-list li {
  flex: 1 1 280px;
  min-width: 0;
  padding: 12px 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}

/* A lone last card spans the whole row (F8). Its text still stops at the
   reading width, so the card keeps its width and the lines stay short. */
.hub-card-text {
  display: block;
  max-width: var(--prose-max-width, 72ch);
}

.hub-coverage-list a,
.hub-related-list a {
  color: var(--exam-accent1, #2563eb);
  text-decoration: none;
}

.hub-coverage-list a:hover,
.hub-related-list a:hover { text-decoration: underline; }

/* ── Static study-material link list ─────────────────────────
   Injected by scripts/inject_hub_sm_links.py. It mirrors links the hub's JS
   also renders as cards, so it is styled as a plain list rather than competing
   visually with them.                                                        */
.hub-sm-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  /* At most four a row: the 1,440px column (D2) fitted five, leaving the
     eight UPSC notes links as 5 + 3. */
  grid-template-columns: repeat(auto-fill, minmax(max(260px, calc(25% - 6px)), 1fr));
}

.hub-sm-link-list li { font-size: 0.92rem; line-height: 1.5; }

.hub-sm-link-list a {
  color: var(--exam-accent1, #2563eb);
  text-decoration: none;
}

.hub-sm-link-list a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .hub-sm-link-list { grid-template-columns: 1fr; }
}

/* ── FAQ ─────────────────────────────────────────────────── */
.hub-faq-list { display: grid; gap: 8px; }

.hub-faq-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}

.hub-faq-item > summary {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--text);
  list-style: none;
}

.hub-faq-item > summary::-webkit-details-marker { display: none; }

.hub-faq-item > summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--text-muted);
}

.hub-faq-item[open] > summary::after { content: "\2212"; }

.hub-faq-answer {
  padding: 0 14px 14px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .hub-table { display: block; overflow-x: auto; }
  .hub-coverage-list,
  .hub-related-list { grid-template-columns: 1fr; }
}