/**
 * @file        topic.css
 * @description Topic chips, browse grid and category mini-landing-pages
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         d580c197-3a26-4f48-b901-6c74e2a53df8
 * @version     0.0.0.1
 * @created     2026-09-11
 * @updated     2026-09-11
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* --- Topic chips (Story 2.2) ---------------------------------------------
 * Chips are the PRIMARY discovery path, so they are always visible. Story 2.2
 * forbids collapsing them into a dropdown or accordion at any viewport: below
 * --bp-md the row scrolls horizontally instead. */

.chips { margin-block: var(--space-5); }

.chips__row {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  /* Single scrollable line on narrow viewports rather than wrapping into a
   * wall of chips that pushes the results off-screen. */
  flex-wrap: nowrap;
  scrollbar-width: thin;
}

.chips__item { flex: 0 0 auto; }

/* Active state carries THREE signals, never colour alone (NFR21): the filled
 * surface, the heavier weight, and the visible remove affordance. */
.chip--active {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  border-color: var(--surface-inverse);
  font-weight: 700;
}

.chip__remove {
  margin-left: var(--space-2);
  font-weight: 700;
}

/* Tags read as secondary to categories. A dashed border distinguishes them
 * without introducing a third surface tone. */
.chip--tag { border-style: dashed; }

.chips__clear {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .chips__row { flex-wrap: wrap; overflow-x: visible; }
}

/* --- Browse results ------------------------------------------------------ */

.browse__intro { font-size: var(--text-lg); max-width: var(--measure); }

.browse__count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 0;
}

.browse__empty { max-width: var(--measure); }

/* Fluid between breakpoints rather than stepped. */
.book-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.book-card {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.book-card__title { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.book-card__author { font-size: var(--text-sm); color: var(--text-secondary); }
.book-card__tagline { margin-bottom: 0; }

/* Cards take the opposite tone to their band so they stay legible on both. */
.band--raised .book-card { background: var(--surface-page); }
.band--page   .book-card { background: var(--surface-raised); }

/* --- Category mini-landing-page (Story 2.6) ------------------------------ */

.topic__banner {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}

.topic__title { margin-bottom: var(--space-3); }

.topic__description {
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.topic__browse-all { margin-top: var(--space-5); }