/* Factions page styles — minimal, leveraging base.css */

.hero {
  background: linear-gradient(135deg, rgba(27, 125, 125, 0.12), rgba(74, 43, 92, 0.12));
  border-bottom: var(--border-width) solid var(--border-color);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 992px) {
  .hero-inner { grid-template-columns: 1.1fr 1fr; }
}
.hero-copy h1 { margin-bottom: var(--space-3); }
.hero-copy .hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: var(--border-width) solid var(--border-color-light); }

/* TOC */
.toc { background-color: var(--color-bg-secondary); border-top: var(--border-width) solid var(--border-color); border-bottom: var(--border-width) solid var(--border-color); }
.toc-list { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.toc-link { display: inline-block; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--border-color-light); border-radius: var(--radius-md); white-space: nowrap; }
.toc-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Filters */
.filters .filter-bar { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: center; }
@media (min-width: 768px) {
  .filters .filter-bar { grid-template-columns: 1.2fr auto auto; }
}
.filter-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-full); color: var(--color-text-primary); background: transparent; transition: all var(--transition-base) var(--transition-timing); }
.tag[aria-pressed="true"], .tag:hover { background: rgba(27,125,125,0.12); border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
.filter-meta { justify-self: end; color: var(--color-text-secondary); }

/* Faction cards */
.faction-card { display: flex; flex-direction: column; }
.faction-card .faction-media { border-radius: var(--radius-md); border: var(--border-width) solid var(--border-color-light); margin-bottom: var(--space-4); }
.stat-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.section-cta .card { text-align: left; }

/* Smooth section anchors spacing */
[id] { scroll-margin-top: 96px; }