/* Characters page styles (scoped, minimal, leveraging base.css) */
.hero-characters__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; }
.hero-characters__media { max-height: 520px; }
.hero-characters__content p { color: var(--color-text-muted); }
.hero-characters__cta { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }

/* Filter bar */
.filter-bar__row { display: grid; grid-template-columns: 1.2fr repeat(3, 0.6fr) auto; gap: var(--space-4); align-items: center; }
.filter-bar__actions { display: inline-flex; gap: var(--space-3); align-items: center; justify-content: flex-end; }

/* Cards grid */
.cards-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
.cards-grid > * { grid-column: span 12; }
@media (min-width: 600px) { .cards-grid > * { grid-column: span 6; } }
@media (min-width: 960px) { .cards-grid > * { grid-column: span 4; } }

/* Character card */
.character-card__media img { object-fit: cover; }
.character-card__body .card__meta { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Table */
.table-wrap { border-radius: var(--radius-lg); }

/* Accessibility helpers */
.breadcrumb { color: var(--color-text-muted); font-size: var(--text-size-sm); }

/* Responsive tweaks */
@media (max-width: 960px) {
  .hero-characters__grid { grid-template-columns: 1fr; }
  .filter-bar__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .filter-bar__row { grid-template-columns: 1fr; }
}