/* ============================================
   WritingNepal — Books browse page styles
   Extends style.css tokens (reuses .book-card, .badge-rating, etc.)
   ============================================ */

.books-hero{ padding:32px 0 8px; }
.books-hero h1{ font-size:2rem; margin-bottom:8px; }
.books-hero p{ color:var(--ink-soft); max-width:56ch; }

/* ---- curated horizontal rail ---- */
.rail-section{ margin:32px 0; }
.rail-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.rail-head h3{ font-size:1.2rem; }
.rail-head a{ font-size:.84rem; font-weight:700; color:var(--clay-deep); }
.rail{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}

/* ---- filter bar ---- */
.filter-bar{
  margin:40px 0 20px;
  padding:18px 20px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.filter-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.filter-row:last-child{ margin-bottom:0; }
.genre-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.genre-chip{
  padding:7px 15px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  border:1.5px solid var(--line);
  background:var(--paper);
  color:var(--ink-soft);
  transition:transform .2s var(--bounce), background .15s ease, color .15s ease;
}
.genre-chip:hover{ transform:translateY(-1px); }
.genre-chip.active{ background:var(--ink); color:var(--gold); border-color:var(--ink); }
.result-count{ font-size:.85rem; color:var(--ink-soft); font-weight:600; }
.sort-select{
  padding:8px 14px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:var(--white);
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
}

/* ---- main grid ---- */
.books-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  margin:24px 0 40px;
}
.books-grid .book-card[hidden]{ display:none; }

.load-more-row{ text-align:center; margin:8px 0 60px; }

@media (max-width: 980px){
  .rail{ grid-template-columns:repeat(4,1fr); }
  .books-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 640px){
  .rail{ grid-template-columns:repeat(2,1fr); }
  .books-grid{ grid-template-columns:repeat(2,1fr); }
  .filter-row{ flex-direction:column; align-items:flex-start; }
}