/* ==========================================================================
   pages.css — page-specific styles. Tokens only; no raw hex here.
   ========================================================================== */

/* --- Homepage: Why us --- */
.why-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.why-item { padding: var(--space-5); border: 1px solid var(--color-surface-strong); border-radius: var(--radius-md); background: var(--color-bg); }
.why-item__num { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--color-accent); text-transform: uppercase; }
.why-item h3 { margin: var(--space-2) 0; font-size: var(--fs-md); }
.why-item p { color: var(--color-text-muted); margin: 0; }

/* --- Homepage: roadmap mockup card --- */
.roadmap-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.roadmap-mock {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transform: rotate(1.5deg);
  transition: transform var(--duration-med) var(--ease);
}
.roadmap-mock:hover { transform: rotate(0deg); }
.roadmap-mock .eyebrow { color: var(--color-accent); }
.roadmap-mock h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.roadmap-mock p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.roadmap-mock ul li { padding: var(--space-2) 0; border-top: 1px solid var(--color-surface-strong); font-size: var(--fs-base); }
.roadmap-mock ul li:first-child { border-top: 0; }
.roadmap-mock ul li strong { color: var(--color-accent); }

/* --- Books page / detail --- */
.books-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
.book-detail { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-7); align-items: start; }
.book-detail__cover { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-surface-strong); aspect-ratio: 3 / 4; background: var(--color-bg-dark); }
.book-detail__cover img { width: 100%; height: 100%; object-fit: contain; }
.book-detail__info h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin: var(--space-3) 0; }
.book-detail__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.book-detail__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block: var(--space-5); }
.book-detail__facts { border-top: 1px solid var(--color-surface-strong); padding-top: var(--space-4); }
.book-detail__facts dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); }
.book-detail__facts dt { font-weight: 600; }
.book-detail__facts dd { color: var(--color-text-muted); }
.toc { border: 1px solid var(--color-surface-strong); border-radius: var(--radius-md); padding: var(--space-5); background: var(--color-surface); }
.toc h2 { font-size: var(--fs-md); margin-bottom: var(--space-3); }
.toc ol { list-style: decimal; padding-left: var(--space-5); display: grid; gap: var(--space-2); }

/* --- Blog --- */
.post-hero-img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: var(--space-6); }
.post-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.post-body { max-width: 720px; }
.post-body .draft-note {
  padding: var(--space-4);
  border: 1px solid var(--color-accent);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-5);
}
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); color: var(--color-text-muted); margin-bottom: var(--space-4); }

/* --- Auth / narrow forms --- */
.narrow { max-width: 480px; margin-inline: auto; }
.narrow .section-head { text-align: center; margin-inline: auto; }
.auth-alt { text-align: center; margin-top: var(--space-4); color: var(--color-text-muted); }

/* --- Contact --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.contact-card { display: flex; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-surface-strong); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.contact-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); }
.contact-card p { color: var(--color-text-muted); margin: 0; }

/* --- Legal pages --- */
.legal { max-width: 720px; }
.legal h2 { margin: var(--space-6) 0 var(--space-3); }
.legal p, .legal li { color: var(--color-text-muted); }
.legal ul { list-style: disc; padding-left: var(--space-5); margin-bottom: var(--space-4); }
.template-note {
  padding: var(--space-4);
  border: 1px solid var(--color-accent);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-5);
}

/* --- Empty state / count line --- */
.result-count { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.empty-state { text-align: center; padding: var(--space-8) var(--space-4); border: 1px dashed var(--color-surface-strong); border-radius: var(--radius-md); color: var(--color-text-muted); }

/* --- Responsive: pages --- */
@media (max-width: 1024px) {
  .books-grid { grid-template-columns: repeat(3, 1fr); }
  .why-list { grid-template-columns: repeat(2, 1fr); }
  .roadmap-split, .contact-grid { grid-template-columns: 1fr; }
  .book-detail { grid-template-columns: 240px 1fr; }
}
@media (max-width: 768px) {
  .books-grid { grid-template-columns: repeat(2, 1fr); }
  .why-list { grid-template-columns: 1fr; }
  .book-detail { grid-template-columns: 1fr; }
  .book-detail__cover { max-width: 280px; }
}