/* ============================================================
   ORDUS ACADEMY — CATEGORY DETAIL PAGE (discipline / topic / method)
   ============================================================ */

body { background: var(--bg-warm); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }

/* ── BREADCRUMB ── */
.crumb { display: flex; align-items: center; gap: 9px; padding: 1.5rem 0 0; font-size: 12px; font-weight: 300; color: var(--ink-muted); flex-wrap: wrap; }
.crumb a { text-decoration: none; color: var(--ink-muted); transition: color var(--trans); }
.crumb a:hover { color: var(--gold); }
.crumb .sep { color: var(--ink-faint); font-size: 9px; }
.crumb .here { color: var(--ink); }

/* ── CATEGORY HERO ── */
.category-hero { padding: 2.5rem 0 2rem; }
.category-kicker { font-size: 10px; font-weight: 300; letter-spacing: 0.4em; color: var(--gold); text-transform: uppercase; margin-bottom: 0.75rem; }
.category-title { font-family: 'Montserrat', sans-serif; font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--black); margin-bottom: 0.75rem; }
.category-desc { font-size: 15px; font-weight: 300; color: var(--ink-muted); max-width: 640px; line-height: 1.8; }

.category-section { padding: 1rem 0 5rem; }

/* §15.3: the 33-direction quick filter, moved here from home.css so both the category
   detail pages and the new dedicated /specialists/ page can use it. */
.cat-filter-wrap { margin-bottom: 2rem; }
.cat-filter-label { font-size: 10px; font-weight: 300; letter-spacing: 0.35em; color: var(--ink-muted); text-transform: uppercase; margin-bottom: 1rem; }
.cat-filter-scroll { display: flex; flex-wrap: wrap; gap: 7px; max-height: 220px; overflow-y: auto; padding-right: 5px; }

.cat-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--bg);
  color: var(--ink-mid);
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
  user-select: none;
}
.cat-tag:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.cat-tag.active { background: var(--gold); border-color: var(--gold); color: #000; font-weight: 600; }

@media (max-width: 650px) {
  .wrap { padding: 0 1.25rem; }
}